diff --git a/index.html b/index.html
index e214c13..de54b36 100644
--- a/index.html
+++ b/index.html
@@ -1,185 +1,175 @@
 <!DOCTYPE html>
 <html lang="en" id="htmlRoot">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="renderer" content="webkit" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <title></title>
-    <link rel="icon" href="/favicon.ico" />
-  </head>
-  <body>
-    <div id="GLOB_API_URL" style="display: none">%VITE_GLOB_API_URL%</div>
-    <script src="/iconfont.js"></script>
-    <script src="/desktopIconfont.js"></script>
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <meta name="renderer" content="webkit" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+        <title></title>
+        <link rel="icon" href="/favicon.ico" />
+    </head>
+    <body>
+        <div id="GLOB_API_URL" style="display: none">%VITE_GLOB_API_URL%</div>
+        <script src="/iconfont.js"></script>
+        <script src="/desktopIconfont.js"></script>
 
-    <script>
-      (async () => {
-        var htmlRoot = document.getElementById('htmlRoot');
-        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
-        if (htmlRoot && theme) {
-          htmlRoot.setAttribute('data-theme', theme);
-          theme = htmlRoot = null;
-        }
-        window._AMapSecurityConfig = {
-          securityJsCode: '1b21905551519807626f2bcd191a6036',
-        };
-        var url = document.getElementById('GLOB_API_URL');
-        try {
-          const responseStream = await fetch(url.innerText + '/system/logoConfig/logo-info');
-          const { data } = await responseStream.json();
-          if (data.shortName) {
-            document.title = data.shortName;
-            document.getElementById('app-loading-title').innerText = data.shortName;
-          }
-          if (data.refreshLogoUrl) {
-            document.getElementById('app-loading-logo').setAttribute('src', data.refreshLogoUrl);
-          }
-        } catch {
-          console.error('从服务器获取数据出错，请联系管理员！');
-        }
-      })();
-    </script>
-    <div id="app">
-      <style>
-        html[data-theme='dark'] .app-loading {
-          background-color: #2c344a;
-        }
+        <script>
+            (async () => {
+                var htmlRoot = document.getElementById('htmlRoot');
+                var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+                if (htmlRoot && theme) {
+                    htmlRoot.setAttribute('data-theme', theme);
+                    theme = htmlRoot = null;
+                }
+                window._AMapSecurityConfig = {
+                    securityJsCode: '1b21905551519807626f2bcd191a6036'
+                };
+                var url = document.getElementById('GLOB_API_URL');
+                try {
+                    const responseStream = await fetch(url.innerText + '/system/logoConfig/logo-info');
+                    const { data } = await responseStream.json();
+                    if (data.shortName) {
+                        document.title = data.shortName;
+                        document.getElementById('app-loading-title').innerText = data.shortName;
+                    }
+                    if (data.refreshLogoUrl) {
+                        document.getElementById('app-loading-logo').setAttribute('src', data.refreshLogoUrl);
+                    }
+                } catch {
+                    console.error('从服务器获取数据出错，请联系管理员！');
+                }
+            })();
+        </script>
+        <div id="app">
+            <style>
+                html[data-theme='dark'] .app-loading {
+                    background-color: #2c344a;
+                }
 
-        html[data-theme='dark'] .app-loading .app-loading-title {
-          color: rgb(255 255 255 / 85%);
-        }
+                html[data-theme='dark'] .app-loading .app-loading-title {
+                    color: rgb(255 255 255 / 85%);
+                }
 
-        .app-loading {
-          display: flex;
-          width: 100%;
-          height: 100%;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-          background-color: #f4f7f9;
-        }
+                .app-loading {
+                    display: flex;
+                    width: 100%;
+                    height: 100%;
+                    justify-content: center;
+                    align-items: center;
+                    flex-direction: column;
+                    background-color: #f4f7f9;
+                }
 
-        .app-loading .app-loading-wrap {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          display: flex;
-          transform: translate3d(-50%, -50%, 0);
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
-        }
+                .app-loading .app-loading-wrap {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    display: flex;
+                    transform: translate3d(-50%, -50%, 0);
+                    justify-content: center;
+                    align-items: center;
+                    flex-direction: column;
+                }
 
-        .app-loading .dots {
-          display: flex;
-          padding: 98px;
-          justify-content: center;
-          align-items: center;
-        }
+                .app-loading .dots {
+                    display: flex;
+                    padding: 98px;
+                    justify-content: center;
+                    align-items: center;
+                }
 
-        .app-loading .app-loading-title {
-          display: flex;
-          margin-top: 30px;
-          font-size: 30px;
-          color: rgb(0 0 0 / 85%);
-          justify-content: center;
-          align-items: center;
-        }
+                .app-loading .app-loading-title {
+                    display: flex;
+                    margin-top: 30px;
+                    font-size: 30px;
+                    color: rgb(0 0 0 / 85%);
+                    justify-content: center;
+                    align-items: center;
+                }
 
-        .app-loading .app-loading-logo {
-          display: block;
-          width: 90px;
-          margin: 0 auto;
-          margin-bottom: 20px;
-        }
+                .app-loading .app-loading-logo {
+                    display: block;
+                    width: 90px;
+                    margin: 0 auto;
+                    margin-bottom: 20px;
+                }
 
-        .dot {
-          position: relative;
-          display: inline-block;
-          width: 48px;
-          height: 48px;
-          margin-top: 30px;
-          font-size: 32px;
-          transform: rotate(45deg);
-          box-sizing: border-box;
-          animation: antRotate 1.2s infinite linear;
-        }
+                .dot {
+                    position: relative;
+                    display: inline-block;
+                    width: 48px;
+                    height: 48px;
+                    margin-top: 30px;
+                    font-size: 32px;
+                    transform: rotate(45deg);
+                    box-sizing: border-box;
+                    animation: antRotate 1.2s infinite linear;
+                }
 
-        .dot i {
-          position: absolute;
-          display: block;
-          width: 20px;
-          height: 20px;
-          background-color: #0065cc;
-          border-radius: 100%;
-          opacity: 0.3;
-          transform: scale(0.75);
-          animation: antSpinMove 1s infinite linear alternate;
-          transform-origin: 50% 50%;
-        }
+                .dot i {
+                    position: absolute;
+                    display: block;
+                    width: 20px;
+                    height: 20px;
+                    background-color: #0065cc;
+                    border-radius: 100%;
+                    opacity: 0.3;
+                    transform: scale(0.75);
+                    animation: antSpinMove 1s infinite linear alternate;
+                    transform-origin: 50% 50%;
+                }
 
-        .dot i:nth-child(1) {
-          top: 0;
-          left: 0;
-        }
+                .dot i:nth-child(1) {
+                    top: 0;
+                    left: 0;
+                }
 
-        .dot i:nth-child(2) {
-          top: 0;
-          right: 0;
-          animation-delay: 0.4s;
-        }
+                .dot i:nth-child(2) {
+                    top: 0;
+                    right: 0;
+                    animation-delay: 0.4s;
+                }
 
-        .dot i:nth-child(3) {
-          right: 0;
-          bottom: 0;
-          animation-delay: 0.8s;
-        }
+                .dot i:nth-child(3) {
+                    right: 0;
+                    bottom: 0;
+                    animation-delay: 0.8s;
+                }
 
-        .dot i:nth-child(4) {
-          bottom: 0;
-          left: 0;
-          animation-delay: 1.2s;
-        }
-        @keyframes antRotate {
-          to {
-            transform: rotate(405deg);
-          }
-        }
-        @keyframes antRotate {
-          to {
-            transform: rotate(405deg);
-          }
-        }
-        @keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
-        }
-        @keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
-        }
-      </style>
-      <div class="app-loading">
-        <div class="app-loading-wrap">
-          <img
-            src="/resource/img/logo.svg"
-            class="app-loading-logo"
-            id="app-loading-logo"
-            alt="Logo"
-          />
-          <div class="app-loading-dots">
-            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
-          </div>
-          <div class="app-loading-title" id="app-loading-title">%VITE_GLOB_APP_TITLE%</div>
+                .dot i:nth-child(4) {
+                    bottom: 0;
+                    left: 0;
+                    animation-delay: 1.2s;
+                }
+                @keyframes antRotate {
+                    to {
+                        transform: rotate(405deg);
+                    }
+                }
+                @keyframes antRotate {
+                    to {
+                        transform: rotate(405deg);
+                    }
+                }
+                @keyframes antSpinMove {
+                    to {
+                        opacity: 1;
+                    }
+                }
+                @keyframes antSpinMove {
+                    to {
+                        opacity: 1;
+                    }
+                }
+            </style>
+            <div class="app-loading">
+                <div class="app-loading-wrap">
+                    <div class="app-loading-dots">
+                        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/src/components/Designer/src/components/componentProperty/PropertyOption.vue b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
index 913d9a4..c2509a8 100644
--- a/src/components/Designer/src/components/componentProperty/PropertyOption.vue
+++ b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
@@ -1,2002 +1,1642 @@
 <template>
-  <div class="awc-containter">
-    <a-form v-bind="layout" v-if="data" :key="data.key" size="small">
-      <a-form-item :label="t('不存表')" v-if="data.type == 'input'">
-        <a-switch v-model:checked="data.options.isSave" @change="handleIsSave" />
-      </a-form-item>
-      <template v-if="designType === 'data'">
-        <a-form-item
-          :label="t('绑定表')"
-          v-if="
-            (data.type == 'input' && !data.options.isSave) ||
-            (!noHaveTableAndField.includes(data.type) &&
-              !data.isSubFormChild &&
-              !data.isSingleFormChild &&
-              data.type !== 'input')
-          "
-        >
-          <a-select
-            @change="handleTableChange"
-            v-model:value="data.bindTable"
-            size="mini"
-            :placeholder="t('请选择数据表')"
-          >
-            <a-select-option
-              v-for="(table, idx) in tableInfo"
-              :disabled="table.disabled"
-              :value="table.name"
-              :key="idx"
-            >
-              {{ table.name }}
-              <span>
-                <a-tag :color="table.isMain ? 'blue' : 'orange'">
-                  {{ table.isMain ? t('主表') : t('附表') }}
-                </a-tag>
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item
-          :label="t('绑定字段')"
-          v-if="
-            (data.type == 'input' && !data.options.isSave) ||
-            (!noHaveField.includes(data.type) && data.type !== 'input')
-          "
-        >
-          <a-select v-model:value="data.bindField" size="mini" :placeholder="t('请选择表字段')">
-            <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
-              {{ field.name }}
-              <span>
-                <a-tag color="blue">
-                  {{ getFieldType(field.type) }}
-                </a-tag>
-              </span>
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </template>
-
-      <template v-if="data.type === 'form' || data.type === 'form-view'">
-        <a-form-item :label="t('预加载数据')">
-          <a-radio-group
-            button-style="solid"
-            v-model:value="data.options.preloadType"
-            size="small"
-            @change="preloadChange"
-          >
-            <a-radio-button value="api">API</a-radio-button>
-            <a-radio-button value="dic">{{ t('数据字典') }}</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-
-        <a-form-item :label="t('接口配置')" v-if="data.options.preloadType === 'api'">
-          <a-input
-            v-model:value="data.options.apiConfig.path"
-            :placeholder="t('点击进行接口配置')"
-            @click="showApiConfig()"
-          >
-            <template #suffix>
-              <Icon icon="ant-design:ellipsis-outlined" />
-            </template>
-          </a-input>
-        </a-form-item>
-
-        <a-form-item :label="t('数据选项')" v-if="data.options.preloadType === 'dic'">
-          <DicTreeSelect v-model:value="data.options.itemId" @change="handleDicChange" />
-        </a-form-item>
-
-        <a-form-item :label="t('按钮选数据')" v-if="data.type === 'form'">
-          <a-switch v-model:checked="data.options.useSelectButton" />
-        </a-form-item>
-
-        <template v-if="data.options.useSelectButton">
-          <a-form-item :label="t('按钮名称')">
-            <a-input v-model:value="data.options.buttonName" :placeholder="t('请填写按钮名称')" />
-          </a-form-item>
-
-          <a-form-item :label="t('表头配置')">
-            <a-input
-              :value="configText"
-              :placeholder="t('点击进行表头配置')"
-              @click="tableTitleClick"
-            >
-              <template #suffix>
-                <Icon icon="ant-design:ellipsis-outlined" />
-              </template>
-            </a-input>
-          </a-form-item>
-        </template>
-
-        <template v-if="data.options.preloadType && data.type === 'form'">
-          <a-form-item
-            :label="item.label"
-            v-for="item in data.children.filter((x) => !unPreloadComponents.includes(x.type))"
-            :key="item.key"
-          >
-            <a-input
-              v-if="data.options.preloadType === 'api'"
-              v-model:value="item.options.prestrainField"
-              :placeholder="t('请填写接口出参字段')"
-            />
-            <a-select
-              v-else-if="data.options.preloadType === 'dic'"
-              v-model:value="item.options.prestrainField"
-            >
-              <a-select-option value="name">name</a-select-option>
-              <a-select-option value="value">value</a-select-option>
-            </a-select>
-          </a-form-item>
-        </template>
-      </template>
-      <template
-        v-if="
-          data.type === 'multiple-popup' ||
-          data.type === 'associate-popup' ||
-          data.type === 'associate-select' ||
-          data.type === 'select' ||
-          data.type === 'checkbox' ||
-          data.type === 'auto-complete' ||
-          data.type === 'radio'
-        "
-      >
-        <DataSourceSetting v-model:data="data" @handleOptionsRemove="handleOptionsRemove" />
-      </template>
-
-      <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('开始字段')">
-        <a-select v-model:value="data.bindStartTime" size="mini" :placeholder="t('请选择开始字段')">
-          <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
-            {{ field.name }}
-            <span>
-              <a-tag color="blue">
-                {{ getFieldType(field.type) }}
-              </a-tag>
-            </span>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('结束字段')">
-        <a-select v-model:value="data.bindEndTime" size="mini" :placeholder="t('请选择结束字段')">
-          <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
-            {{ field.name }}
-            <span>
-              <a-tag color="blue">
-                {{ getFieldType(field.type) }}
-              </a-tag>
-            </span>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item :label="t('级联配置')" v-if="data.type === 'cascader'" required>
-        <a-input
-          v-model:value="data.options.apiConfig.path"
-          :placeholder="t('点击进行级联配置')"
-          @click="showApiConfig(true)"
-        >
-          <template #suffix>
-            <Icon icon="ant-design:ellipsis-outlined" />
-          </template>
-        </a-input>
-      </a-form-item>
-      <a-form-item v-if="hasKey('showFormat')" :label="t('显示格式')">
-        <a-select v-model:value="data.options.showFormat" :options="formatOptions" />
-      </a-form-item>
-      <a-form-item v-if="hasKey('separator')" :label="t('分隔符')">
-        <a-select v-model:value="data.options.separator" :options="separatorOptions" />
-      </a-form-item>
-      <a-form-item v-if="hasKey('selectedConfig')" :label="t('选择设置')">
-        <a-select v-model:value="data.options.selectedConfig" :options="selectedOptions">
-        </a-select>
-      </a-form-item>
-      <a-form-item label="数据分页" v-if="hasKey('isPagination')">
-        <a-switch v-model:checked="data.options.isPagination" />
-      </a-form-item>
-      <a-form-item :label="t('标题')" v-if="!noHaveTitle.includes(data.type)">
-        <a-input v-model:value="data.label" size="mini" />
-      </a-form-item>
-      <a-form-item :label="t('标题')" v-if="data.type === 'card'">
-        <a-input v-model:value="data.options.title" size="mini" />
-      </a-form-item>
-      <a-form-item v-if="hasKey('showTime')" :label="t('开始占位')">
-        <a-input v-model:value="data.options.startTimePlaceholder" />
-      </a-form-item>
-
-      <a-form-item v-if="hasKey('showTime')" :label="t('结束占位')">
-        <a-input v-model:value="data.options.endTimePlaceholder" />
-      </a-form-item>
-
-      <a-form-item :label="t('占位提示')" v-if="hasKey('placeholder')">
-        <a-textarea
-          v-if="data.type === 'opinion'"
-          v-model:value="data.options.placeholder"
-          :placeholder="t('请输入占位提示')"
-        />
-        <a-input
-          v-else
-          v-model:value="data.options.placeholder"
-          :placeholder="t('请输入占位提示')"
-        />
-      </a-form-item>
-
-      <a-form-item
-        :label="t('默认值')"
-        v-if="
-          (hasKey('defaultValue') &&
-            (data.type === 'input' ||
-              data.type === 'password' ||
-              data.type === 'textarea' ||
-              data.type === 'rate' ||
-              data.type === 'switch' ||
-              data.type === 'slider' ||
-              data.type === 'number' ||
-              data.type === 'picker-color' ||
-              data.type === 'money-chinese' ||
-              data.type === 'computational')) ||
-          (needDicDefaultValue.includes(data.type) && data.options.datasourceType == 'dic')
-        "
-      >
-        <a-textarea
-          v-if="data.type === 'textarea'"
-          v-model:value="data.options.defaultValue"
-          :placeholder="t('请输入默认值')"
-        />
-        <a-rate
-          v-else-if="data.type === 'rate'"
-          v-model:value="data.options.defaultValue"
-          :count="data.options.count"
-          :allowHalf="data.options.allowHalf"
-          :allowClear="data.options.allowClear"
-        />
-        <ColorPicker
-          v-else-if="data.type === 'picker-color'"
-          v-model:value="data.options.defaultValue"
-        />
-        <a-input-number
-          v-else-if="
-            data.type === 'money-chinese' || data.type === 'computational' || data.type === 'number'
-          "
-          v-model:value="data.options.defaultValue"
-          :placeholder="t('请输入默认值')"
-        />
-        <a-switch
-          v-else-if="data.type === 'switch'"
-          v-model:checked="data.options.defaultValue"
-          :checkedValue="1"
-          :unCheckedValue="0"
-        />
-        <template v-else-if="data.type === 'slider'">
-          <a-input-number
-            v-if="!data.options.range"
-            v-model:value.number="data.options.defaultValue"
-          />
-          <template v-if="data.options.range">
-            <a-input-number
-              v-model:value.number="data.options.defaultValue[0]"
-              :max="data.options.max"
-            />
-            <a-input-number
-              v-model:value.number="data.options.defaultValue[1]"
-              :max="data.options.max"
-            />
-          </template>
-        </template>
-        <a-select
-          v-else-if="data.type == 'multiple-popup' || data.type == 'checkbox'"
-          :options="defaultSelectOption"
-          mode="multiple"
-          :placeholder="t('请选择默认值')"
-          :fieldNames="{ label: 'name', value: 'value' }"
-          v-model:value="data.options.defaultTempValue"
-          @change="handleDfValChange"
-          :allowClear="true"
-          @dropdownVisibleChange="handleDfValueFocus"
-        >
-        </a-select>
-        <a-select
-          v-else-if="needDicDefaultValue.includes(data.type)"
-          :options="defaultSelectOption"
-          :placeholder="t('请选择默认值')"
-          :fieldNames="{ label: 'name', value: 'value' }"
-          v-model:value="data.options.defaultSelect"
-          :allowClear="true"
-          @dropdownVisibleChange="handleDfValueFocus"
-        >
-        </a-select>
-        <a-input
-          v-else
-          v-model:value="data.options.defaultValue"
-          @blur="data.type === 'number' ? changeNumber : ''"
-          :placeholder="t('请输入默认值')"
-        />
-      </a-form-item>
-
-      <a-form-item
-        v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')"
-        :label="t('时间格式')"
-      >
-        <a-select v-model:value="data.options.format" disabled>
-          <a-select-option value="HH:mm:ss" />
-        </a-select>
-      </a-form-item>
-
-      <a-form-item
-        v-if="hasKey('format') && (data.type === 'date' || data.type === 'date-range')"
-        :label="t('日期格式')"
-      >
-        <a-select
-          v-model:value="data.options.format"
-          :disabled="data.type === 'date-range'"
-          @change="formatChange"
-        >
-          <a-select-option value="YYYY-MM-DD HH:mm:ss" />
-          <a-select-option value="YYYY-MM-DD" />
-          <a-select-option value="YYYY-MM" />
-          <a-select-option value="YYYY" />
-        </a-select>
-      </a-form-item>
-
-      <template v-if="data.type === 'time'">
-        <a-form-item :label="t('默认值')">
-          <TimePicker
-            style="width: 100%"
-            v-model:value="data.options.defaultValue"
-            :format="data.options.format"
-            :placeholder="data.options.placeholder"
-          />
-        </a-form-item>
-      </template>
-
-      <template v-if="data.type === 'date'">
-        <a-form-item :label="t('默认值')">
-          <XjrDatePicker
-            style="width: 100%"
-            v-model:value="data.options.defaultValue"
-            :format="data.options.format"
-            :placeholder="data.options.placeholder"
-          />
-        </a-form-item>
-      </template>
-
-      <a-form-item :label="t('编码规则')" v-if="hasKey('autoCodeRule')" required>
-        <a-select
-          v-model:value="data.options.autoCodeRule"
-          size="mini"
-          :placeholder="t('请选择编码规则')"
-        >
-          <a-select-option v-for="rule in codeRuleOptions" :value="rule.code" :key="rule.id">
-            {{ rule.name }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <template v-if="data.type === 'computational' || data.type === 'money-chinese'">
-        <a-form-item :label="t('计算式配置')">
-          <a-input
-            v-model:value="data.options.computationalConfigValue"
-            readonly
-            @click="computationalDialog = true"
-          />
-        </a-form-item>
-        <ComputationalSetting
-          v-if="computationalDialog"
-          v-model:computationalConfig="data.options.computationalConfig"
-          @setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
-          v-model:computationalDialog="computationalDialog"
-        />
-      </template>
-
-      <a-form-item label="url" v-if="hasKey('url')">
-        <a-textarea v-model:value="data.options.url" placeholder="请输入url" />
-      </a-form-item>
-
-      <a-form-item :label="t('标签宽度')" v-if="hasKey('labelWidth')">
-        <a-input-number v-model:value="data.options.labelWidth" :min="0" />
-      </a-form-item>
-
-      <a-form-item :label="t('组件宽度')" v-if="hasKey('width')">
-        <a-input v-model:value="data.options.width" />
-      </a-form-item>
-
-      <a-form-item :label="t('信息类型')" v-if="hasKey('infoType')">
-        <a-select v-model:value="data.options.infoType" size="mini">
-          <a-select-option :value="0">{{ t('当前用户') }}</a-select-option>
-          <a-select-option :value="1">{{ t('当前组织') }}</a-select-option>
-          <a-select-option :value="2">{{ t('当前时间') }}</a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item :label="t('组件类型')" v-if="hasKey('orgzType')">
-        <a-select v-model:value="data.options.orgzType" size="mini">
-          <a-select-option :value="0">{{ t('系统组织架构') }}</a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item :label="t('组件类型')" v-if="hasKey('userType')">
-        <a-select v-model:value="data.options.userType" size="mini">
-          <a-select-option :value="0">{{ t('系统用户') }}</a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item v-if="hasKey('loadAgain')">
-        <template #label>
-          <a-tooltip>
-            <template #title> 二次加载是决定编辑状态是否重新获取信息体数据 </template>
-            <Icon icon="ant-design:question-circle-outlined" color="#909399" />
-          </a-tooltip>
-          &nbsp;{{ t('二次加载') }}
-        </template>
-        <a-switch v-model:checked="data.options.loadAgain" />
-      </a-form-item>
-
-      <template v-if="data.type === 'button'">
-        <a-form-item :label="t('按钮名称')">
-          <a-input v-model:value="data.options.name" />
-        </a-form-item>
-        <template v-if="data.options.isSpecial">
-          <a-form-item :label="t('按钮类型')" required>
-            <a-select
-              v-model:value="data.options.buttonType"
-              size="mini"
-              disabled
-              :placeholder="t('请选择按钮类型')"
-            >
-              <a-select-option :value="1">{{ t('联想弹层按钮') }}</a-select-option>
-              <a-select-option :value="2">{{ t('表格选择数据按钮') }}</a-select-option>
-            </a-select>
-          </a-form-item>
-          <template v-if="data.options.buttonType">
-            <DataSourceSetting v-model:data="data" @handleOptionsRemove="handleOptionsRemove" />
-          </template>
-          <template v-if="data.options.buttonType == 2">
-            <a-form-item :label="t('表格选择')" required>
-              <a-select
-                v-model:value="data.options.selectTable"
-                size="mini"
-                :placeholder="t('请选择表格')"
-              >
-                <a-select-option
-                  v-for="item in buttonTableOptions"
-                  :value="item.key"
-                  :key="item.key"
-                  >{{ item.label }}</a-select-option
-                >
-              </a-select>
+    <div class="awc-containter">
+        <a-form v-bind="layout" v-if="data" :key="data.key" size="small">
+            <a-form-item :label="t('不存表')" v-if="data.type == 'input'">
+                <a-switch v-model:checked="data.options.isSave" @change="handleIsSave" />
             </a-form-item>
-            <a-form-item :label="t('表头配置')">
-              <a-input
-                :value="configText"
-                :placeholder="t('点击进行表头配置')"
-                @click="tableTitleClick"
-              >
-                <template #suffix>
-                  <Icon icon="ant-design:ellipsis-outlined" />
+            <template v-if="designType === 'data'">
+                <a-form-item :label="t('绑定表')" v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveTableAndField.includes(data.type) && !data.isSubFormChild && !data.isSingleFormChild && data.type !== 'input')">
+                    <a-select @change="handleTableChange" v-model:value="data.bindTable" size="mini" :placeholder="t('请选择数据表')">
+                        <a-select-option v-for="(table, idx) in tableInfo" :disabled="table.disabled" :value="table.name" :key="idx">
+                            {{ table.name }}
+                            <span>
+                                <a-tag :color="table.isMain ? 'blue' : 'orange'">
+                                    {{ table.isMain ? t('主表') : t('附表') }}
+                                </a-tag>
+                            </span>
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="t('绑定字段')" v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveField.includes(data.type) && data.type !== 'input')">
+                    <a-select v-model:value="data.bindField" size="mini" :placeholder="t('请选择表字段')">
+                        <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
+                            {{ field.name }}
+                            <span>
+                                <a-tag color="blue">
+                                    {{ getFieldType(field.type) }}
+                                </a-tag>
+                            </span>
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+            </template>
+
+            <template v-if="data.type === 'form' || data.type === 'form-view'">
+                <a-form-item :label="t('预加载数据')">
+                    <a-radio-group button-style="solid" v-model:value="data.options.preloadType" size="small" @change="preloadChange">
+                        <a-radio-button value="api">API</a-radio-button>
+                        <a-radio-button value="dic">{{ t('数据字典') }}</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item :label="t('接口配置')" v-if="data.options.preloadType === 'api'">
+                    <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="showApiConfig()">
+                        <template #suffix>
+                            <Icon icon="ant-design:ellipsis-outlined" />
+                        </template>
+                    </a-input>
+                </a-form-item>
+
+                <a-form-item :label="t('数据选项')" v-if="data.options.preloadType === 'dic'">
+                    <DicTreeSelect v-model:value="data.options.itemId" @change="handleDicChange" />
+                </a-form-item>
+
+                <a-form-item :label="t('按钮选数据')" v-if="data.type === 'form'">
+                    <a-switch v-model:checked="data.options.useSelectButton" />
+                </a-form-item>
+
+                <a-form-item label="开启分页" v-if="data.type === 'form'">
+                    <a-switch v-model:checked="data.options.showPagination" />
+                </a-form-item>
+
+                <template v-if="data.options.useSelectButton">
+                    <a-form-item :label="t('按钮名称')">
+                        <a-input v-model:value="data.options.buttonName" :placeholder="t('请填写按钮名称')" />
+                    </a-form-item>
+
+                    <a-form-item :label="t('表头配置')">
+                        <a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick">
+                            <template #suffix>
+                                <Icon icon="ant-design:ellipsis-outlined" />
+                            </template>
+                        </a-input>
+                    </a-form-item>
+                </template>
+
+                <template v-if="data.options.preloadType && data.type === 'form'">
+                    <a-form-item :label="item.label" v-for="item in data.children.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key">
+                        <a-input v-if="data.options.preloadType === 'api'" v-model:value="item.options.prestrainField" :placeholder="t('请填写接口出参字段')" />
+                        <a-select v-else-if="data.options.preloadType === 'dic'" v-model:value="item.options.prestrainField">
+                            <a-select-option value="name">name</a-select-option>
+                            <a-select-option value="value">value</a-select-option>
+                        </a-select>
+                    </a-form-item>
                 </template>
-              </a-input>
-            </a-form-item>
-            <template v-if="data.options.selectTable">
-              <a-form-item
-                :label="item.label"
-                v-for="item in data.options.tableColumns.filter(
-                  (x) => !unPreloadComponents.includes(x.type),
-                )"
-                :key="item.key"
-              >
-                <a-input
-                  v-if="data.options.datasourceType === 'api'"
-                  v-model:value="item.prestrainField"
-                  :placeholder="t('请填写接口出参字段')"
-                />
-                <a-select
-                  v-else-if="data.options.datasourceType === 'dic'"
-                  v-model:value="item.prestrainField"
-                >
-                  <a-select-option value="name">name</a-select-option>
-                  <a-select-option value="value">value</a-select-option>
-                </a-select>
-              </a-form-item>
             </template>
-          </template>
-        </template>
-        <a-form-item :label="t('按钮宽度')">
-          <a-input
-            v-model:value="data.options.buttonWidth"
-            :placeholder="t('请填写按钮宽度，不填则默认')"
-          />
-        </a-form-item>
-        <a-form-item :label="t('按钮高度')">
-          <a-input
-            v-model:value="data.options.buttonHeight"
-            :placeholder="t('请填写按钮高度，不填则默认')"
-          />
-        </a-form-item>
-      </template>
+            <template v-if="data.type === 'multiple-popup' || data.type === 'associate-popup' || data.type === 'associate-select' || data.type === 'select' || data.type === 'checkbox' || data.type === 'auto-complete' || data.type === 'radio'">
+                <DataSourceSetting v-model:data="data" @handleOptionsRemove="handleOptionsRemove" />
+            </template>
 
-      <a-form-item :label="t('最大值')" v-if="hasKey('max')">
-        <a-input-number v-model:value.number="data.options.max" @change="changeNumber" />
-      </a-form-item>
-
-      <a-form-item :label="t('最大值')" v-if="hasKey('count')">
-        <a-input-number v-model:value.number="data.options.count" @change="changeNumber" />
-      </a-form-item>
-
-      <a-form-item :label="t('最小值')" v-if="hasKey('min')">
-        <a-input-number v-model:value.number="data.options.min" @change="changeNumber" />
-      </a-form-item>
-
-      <a-form-item :label="t('步长')" v-if="hasKey('step')">
-        <a-input-number v-model:value.number="data.options.step" :min="0" />
-      </a-form-item>
-
-      <a-form-item :label="t('前置标签')" v-if="hasKey('addonBefore')">
-        <a-input v-model:value="data.options.addonBefore" :placeholder="t('请输入前置标签')" />
-      </a-form-item>
-
-      <a-form-item :label="t('后置标签')" v-if="hasKey('addonAfter')">
-        <a-input v-model:value="data.options.addonAfter" :placeholder="t('请输入后置标签')" />
-      </a-form-item>
-
-      <a-form-item :label="t('前置图标')" v-if="hasKey('prefix')">
-        <IconPicker v-model:value="data.options.prefix" :disabled="false" :readonly="false" />
-      </a-form-item>
-
-      <a-form-item :label="t('后置图标')" v-if="hasKey('suffix')">
-        <IconPicker v-model:value="data.options.suffix" :disabled="false" :readonly="false" />
-      </a-form-item>
-
-      <a-form-item :label="t('最大长度')" v-if="hasKey('maxlength')">
-        <a-input
-          v-model:value.number="data.options.maxlength"
-          :placeholder="t('请输入最大长度，按字符计算')"
-        />
-      </a-form-item>
-
-      <a-form-item :label="t('开启提示')" v-if="hasKey('checkedChildren')">
-        <a-input v-model:value="data.options.checkedChildren" />
-      </a-form-item>
-
-      <a-form-item :label="t('关闭提示')" v-if="hasKey('unCheckedChildren')">
-        <a-input v-model:value="data.options.unCheckedChildren" />
-      </a-form-item>
-
-      <a-form-item :label="t('开启颜色')" v-if="hasKey('checkedColor')">
-        <ColorPicker v-model:value="data.options.checkedColor" />
-      </a-form-item>
-
-      <a-form-item :label="t('关闭颜色')" v-if="hasKey('unCheckedColor')">
-        <ColorPicker v-model:value="data.options.unCheckedColor" />
-      </a-form-item>
-
-      <a-form-item :label="t('地址字段')" v-if="hasKey('address')">
-        <a-select v-model:value="data.options.address" size="mini" allowClear>
-          <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{
-            it.label
-          }}</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item :label="t('经纬度字段')" v-if="hasKey('latiAndLong')">
-        <a-select v-model:value="data.options.latiAndLong" size="mini" allowClear>
-          <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{
-            it.label
-          }}</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item :label="t('配置类型')" v-if="hasKey('codeType')">
-        <a-select
-          v-model:value="data.options.codeType"
-          size="mini"
-          :placeholder="t('请选择配置类型')"
-          @change="handleChangeCode"
-        >
-          <a-select-option value="fixed" key="fixed"> {{ t('固定二维码') }} </a-select-option>
-          <a-select-option value="api" key="api"> {{ t('接口配置') }} </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        :label="t('二维码内容')"
-        v-if="data.type == 'qrcode' && data.options.codeType == 'fixed'"
-      >
-        <a-textarea
-          v-model:value="data.options.defaultValue"
-          :placeholder="t('请填写二维码内容')"
-          :rows="4"
-        />
-      </a-form-item>
-      <a-form-item
-        :label="t('接口配置')"
-        v-if="data.type == 'qrcode' && data.options.codeType == 'api'"
-      >
-        <a-input
-          v-model:value="data.options.apiConfig.path"
-          :placeholder="t('点击进行接口配置')"
-          @click="handleApiConfig()"
-        >
-          <template #suffix>
-            <Icon icon="ant-design:ellipsis-outlined" />
-          </template>
-        </a-input>
-      </a-form-item>
-      <!-- 子表不需要span -->
-      <a-form-item
-        label="标签宽度"
-        v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)"
-      >
-        <a-input-number
-          v-model:value="data.options.span"
-          :min="0"
-          :max="24"
-          addonAfter="/ 24"
-          @change="handleSpanChange"
-        />
-      </a-form-item>
-
-      <a-form-item :label="t('双滑块模式')" v-if="hasKey('range')">
-        <a-switch v-model:checked="data.options.range" @change="handleSliderModeChange" />
-      </a-form-item>
-
-      <a-form-item :label="t('反向坐标轴')" v-if="hasKey('reverse')">
-        <a-switch v-model:checked="data.options.reverse" />
-      </a-form-item>
-
-      <template v-if="data.type === 'image'">
-        <a-form-item :label="t('默认值')">
-          <a-input v-model:value="imageUrl" :disabled="true" style="margin-bottom: 10px" />
-          <a-upload
-            action=""
-            :beforeUpload="submitUpload"
-            accept=""
-            :max-count="1"
-            :show-upload-list="false"
-          >
-            <a-button>
-              <SvgIcon name="upload" style="margin-right: 10px" />
-              {{ t('点击上传') }}
-            </a-button>
-          </a-upload>
-        </a-form-item>
-        <a-form-item :label="t('二次上传')">
-          <a-switch v-model:checked="data.options.isUpload" />
-        </a-form-item>
-      </template>
-
-      <a-form-item :label="t('切换按钮')" v-if="hasKey('visibilityToggle')">
-        <a-switch v-model:checked="data.options.visibilityToggle" />
-      </a-form-item>
-
-      <a-form-item :label="t('行数')" v-if="hasKey('rows') && !data.options.autoSize">
-        <a-input-number v-model:value="data.options.rows" :min="0" />
-      </a-form-item>
-
-      <a-form-item :label="t('显示字数')" v-if="hasKey('showCount')">
-        <a-switch v-model:checked="data.options.showCount" />
-      </a-form-item>
-
-      <a-form-item :label="t('自适应高度')" v-if="hasKey('autoSize')">
-        <a-switch v-model:checked="data.options.autoSize" />
-      </a-form-item>
-
-      <a-form-item :label="t('最小行数')" v-if="hasKey('minRows') && !data.options.autoSize">
-        <a-input-number v-model:value="data.options.minRows" :min="0" />
-      </a-form-item>
-
-      <a-form-item :label="t('最大行数')" v-if="hasKey('maxRows') && !data.options.autoSize">
-        <a-input-number v-model:value="data.options.maxRows" :min="0" />
-      </a-form-item>
-
-      <a-form-item :label="t('允许半选')" v-if="hasKey('allowHalf')">
-        <a-switch v-model:checked="data.options.allowHalf" />
-      </a-form-item>
-      <template v-if="data.type === 'divider'">
-        <a-form-item :label="t('标题')">
-          <a-input v-model:value="data.options.defaultValue" />
-        </a-form-item>
-        <a-form-item :label="t('上间距')">
-          <a-input-number v-model:value="data.options.marginTop" :min="0" />
-        </a-form-item>
-        <a-form-item :label="t('下间距')">
-          <a-input-number v-model:value="data.options.marginBottom" :min="0" />
-        </a-form-item>
-        <a-form-item :label="t('文案对齐')">
-          <a-radio-group button-style="solid" v-model:value="data.options.orientation">
-            <a-radio-button value="left">{{ t('左') }}</a-radio-button>
-            <a-radio-button value="center">{{ t('中') }}</a-radio-button>
-            <a-radio-button value="right">{{ t('右') }}</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-      </template>
-      <template v-if="data.type === 'upload'">
-        <a-form-item :label="t('上传列表样式')">
-          <a-radio-group v-model:value="data.options.listType" button-style="solid">
-            <a-radio-button value="text">text</a-radio-button>
-            <a-radio-button value="picture">picture </a-radio-button>
-            <a-radio-button value="picture-card">picture-card</a-radio-button>
-            <!-- <a-radio-button value="dragger">dragger</a-radio-button> -->
-          </a-radio-group>
-        </a-form-item>
-
-        <a-form-item :label="t('文件类型')">
-          <a-input
-            v-model:value="data.options.accept"
-            :placeholder="t('用“,”号隔开,例如:.jpg,.bmp')"
-          />
-        </a-form-item>
-
-        <a-form-item :label="t('最大文件数')">
-          <a-input-number v-model:value.number="data.options.maxNumber" :min="1" />
-        </a-form-item>
-
-        <a-form-item :label="t('大小限制')">
-          <a-input v-model:value.number="data.options.maxSize" suffix="MB" />
-        </a-form-item>
-
-        <a-form-item :label="t('支持多选')">
-          <a-switch v-model:checked="data.options.multiple" />
-        </a-form-item>
-      </template>
-
-      <a-form-item :label="t('选项样式')" v-if="hasKey('optionType')">
-        <a-radio-group button-style="solid" v-model:value="data.options.optionType">
-          <a-radio-button value="default">{{ t('默认') }}</a-radio-button>
-          <a-radio-button value="button">{{ t('按钮') }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item :label="t('显示标签')" v-if="hasKey('showLabel')">
-        <a-switch v-model:checked="data.options.showLabel" />
-      </a-form-item>
-      <a-form-item :label="t('是否显示')" v-if="hasKey('isShow')">
-        <a-switch v-model:checked="data.options.isShow" />
-      </a-form-item>
-      <a-form-item :label="t('允许搜索')" v-if="hasKey('showSearch')">
-        <a-switch v-model:checked="data.options.showSearch" />
-      </a-form-item>
-
-      <a-form-item :label="t('是否必填')" v-if="hasKey('required')">
-        <a-switch
-          v-model:checked="data.options.required"
-          :disabled="data.options.readonly || data.options.disabled"
-        />
-      </a-form-item>
-
-      <a-form-item :label="t('是否只读')" v-if="hasKey('readonly')">
-        <a-switch
-          v-model:checked="data.options.readonly"
-          :disabled="data.options.disabled || data.options.disabled"
-          @change="changeReadonly"
-        />
-      </a-form-item>
-
-      <a-form-item :label="t('是否禁用')" v-if="hasKey('disabled')">
-        <a-switch
-          v-model:checked="data.options.disabled"
-          @change="changeDisabled"
-          :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)"
-        />
-      </a-form-item>
-      <a-form-item :label="t('是否合计')" v-if="hasKey('subTotal') && data.isSubFormChild">
-        <a-switch v-model:checked="data.options.subTotal" />
-      </a-form-item>
-
-      <a-form-item :label="t('开启清除')" v-if="hasKey('allowClear')">
-        <a-switch
-          v-model:checked="data.options.allowClear"
-          :disabled="data.options.readonly || data.options.disabled"
-        />
-      </a-form-item>
-
-      <a-form-item :label="t('移动端扫描')" v-if="hasKey('scan')">
-        <a-switch v-model:checked="data.options.scan" />
-      </a-form-item>
-      <a-form-item :label="t('组件边框')" v-if="hasKey('showComponentBorder')">
-        <a-switch v-model:checked="data.options.showComponentBorder" />
-      </a-form-item>
-
-      <a-form-item :label="t('表单边框')" v-if="hasKey('showFormBorder')">
-        <a-switch v-model:checked="data.options.showFormBorder" />
-      </a-form-item>
-
-      <a-form-item :label="t('显示序号')" v-if="hasKey('showIndex')">
-        <a-switch v-model:checked="data.options.showIndex" />
-      </a-form-item>
-      <template v-if="data.type === 'title' || data.type === 'text'">
-        <a-form-item :label="data.type === 'title' ? t('标题') : t('内容')">
-          <a-input v-model:value="data.options.defaultValue" />
-        </a-form-item>
-        <a-form-item :label="t('字体颜色')">
-          <ColorPicker v-model:value="data.options.color" />
-        </a-form-item>
-        <a-form-item :label="t('字体')" v-if="data.type === 'text'">
-          <a-select v-model:value="data.options.fontFamily">
-            <a-select-option value="Arial"> Arial </a-select-option>
-            <a-select-option value="宋体">{{ t('宋体') }}</a-select-option>
-            <a-select-option value="微软雅黑">{{ t('微软雅黑') }}</a-select-option>
-            <a-select-option value="黑体">{{ t('黑体') }}</a-select-option>
-            <a-select-option value="fangsong">fangsong</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="t('字体大小')">
-          <a-input-number v-model:value="data.options.fontSize" :min="0" />
-        </a-form-item>
-        <a-form-item :label="t('粗细')" v-if="data.type === 'text'">
-          <a-select v-model:value="data.options.fontWeight">
-            <a-select-option value="lighter"> lighter </a-select-option>
-            <a-select-option value="normal"> normal </a-select-option>
-            <a-select-option value="bold"> bold </a-select-option>
-            <a-select-option value="500">500</a-select-option>
-            <a-select-option value="600">600</a-select-option>
-            <a-select-option value="700">700</a-select-option>
-            <a-select-option value="800">800</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="t('样式')" v-if="data.type === 'text'">
-          <a-select v-model:value="data.options.fontStyle">
-            <a-select-option value="italic"> italic </a-select-option>
-            <a-select-option value="normal"> normal </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="t('对齐方式')">
-          <a-radio-group v-model:value="data.options.align" button-style="solid">
-            <a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
-            <a-radio-button value="center">{{ t('居中对齐') }}</a-radio-button>
-            <a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-      </template>
-
-      <template v-if="data.type === 'grid'">
-        <a-form-item :label="t('栅格间隔')">
-          <a-input-number v-model:value="data.options.gutter" :min="0" />
-        </a-form-item>
-
-        <a-form-item :label="t('列配置项')">
-          <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
-            {{ t('添加列') }}
-          </a-button>
-        </a-form-item>
-
-        <a-form-item :label="t('列宽配置')">
-          <ul>
-            <li v-for="(item, index) in data.layout" class="column-width">
-              <a-input-number
-                :placeholder="t('栅格值')"
-                size="small"
-                v-model:value="item.span"
-                :min="0"
-                :max="24"
-              />
-              <DragOutlined class="draggable-icon" />
-              <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
-            </li>
-          </ul>
-        </a-form-item>
-
-        <a-form-item :label="t('垂直对齐')">
-          <a-radio-group v-model:value="data.options.align" button-style="solid">
-            <a-radio-button value="top">{{ t('顶部对齐') }}</a-radio-button>
-            <a-radio-button value="middle">{{ t('居中对齐') }}</a-radio-button>
-            <a-radio-button value="bottom">{{ t('底部对齐') }}</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-
-        <a-form-item :label="t('水平排列')">
-          <a-select v-model:value="data.options.justify">
-            <a-select-option value="start">{{ t('左对齐') }}</a-select-option>
-            <a-select-option value="end">{{ t('右对齐') }}</a-select-option>
-            <a-select-option value="center">{{ t('居中') }}</a-select-option>
-            <a-select-option value="space-around">{{ t('两侧间隔相等') }}</a-select-option>
-            <a-select-option value="space-between">{{ t('两端对齐') }}</a-select-option>
-          </a-select>
-        </a-form-item>
-      </template>
-
-      <template v-if="data.type === 'tab'">
-        <a-form-item :label="t('选项卡配置')">
-          <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
-            {{ t('添加选项卡') }}
-          </a-button>
-          <ul style="margin-top: 10px">
-            <li v-for="(item, index) in data.layout" class="column-width">
-              <a-input
-                :placeholder="t('选项卡名称')"
-                size="small"
-                v-model:value="item.name"
-                :min="0"
-                :max="24"
-              />
-              <DragOutlined class="draggable-icon" />
-              <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
-            </li>
-          </ul>
-        </a-form-item>
-        <a-form-item :label="t('选项卡风格')">
-          <a-radio-group button-style="solid" v-model:value="data.options.type">
-            <a-radio-button value="line">line</a-radio-button>
-            <a-radio-button value="card">card</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-
-        <a-form-item :label="t('选项卡位置')">
-          <a-radio-group button-style="solid" v-model:value="data.options.tabPosition">
-            <a-radio-button value="top">{{ t('顶部') }}</a-radio-button>
-            <a-radio-button value="right">{{ t('右侧') }}</a-radio-button>
-            <a-radio-button value="bottom">{{ t('底部') }}</a-radio-button>
-            <a-radio-button value="left">{{ t('左侧') }}</a-radio-button>
-          </a-radio-group>
-        </a-form-item>
-      </template>
-      <template v-if="data.type === 'form'">
-        <div class="flex justify-between items-center ml-3 mb-3">
-          <div
-            class="pl-2 border-l-[6px] border-[#5e95ff] border-solid"
-            style="font-size: 14px !important"
-            >{{ t('表头合并') }}</div
-          >
-          <a-button
-            style="font-size: 14px !important"
-            type="primary"
-            size="small"
-            @click="addMutipleHeads"
-            >{{ t('添加') }}</a-button
-          >
-        </div>
-
-        <div v-if="data.options.multipleHeads?.length > 0">
-          <div
-            v-for="(sight, index) in data.options.multipleHeads"
-            :key="sight.key"
-            class="mt-6 relative bg-[#f8f8f8] py-2 px-4 ml-3"
-          >
-            <a-form-item
-              label="名称"
-              :name="['sights', index, 'title']"
-              :labelCol="{ span: 4 }"
-              :wrapperCol="{ span: 20 }"
-            >
-              <a-input v-model:value="sight.title" />
+            <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('开始字段')">
+                <a-select v-model:value="data.bindStartTime" size="mini" :placeholder="t('请选择开始字段')">
+                    <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
+                        {{ field.name }}
+                        <span>
+                            <a-tag color="blue">
+                                {{ getFieldType(field.type) }}
+                            </a-tag>
+                        </span>
+                    </a-select-option>
+                </a-select>
             </a-form-item>
-            <a-form-item
-              :name="['sights', index, 'children']"
-              label="子列"
-              :labelCol="{ span: 4 }"
-              :wrapperCol="{ span: 20 }"
-            >
-              <a-select
-                mode="multiple"
-                v-model:value="sight.children"
-                :options="sight.headschilds"
-                :fieldNames="{ label: 'title', value: 'key' }"
-                style="width: 100%"
-                @click="sightChild(sight)"
-              ></a-select>
+
+            <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('结束字段')">
+                <a-select v-model:value="data.bindEndTime" size="mini" :placeholder="t('请选择结束字段')">
+                    <a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
+                        {{ field.name }}
+                        <span>
+                            <a-tag color="blue">
+                                {{ getFieldType(field.type) }}
+                            </a-tag>
+                        </span>
+                    </a-select-option>
+                </a-select>
             </a-form-item>
-            <a-form-item
-              :name="['sights', index, 'align']"
-              label="对齐"
-              :labelCol="{ span: 4 }"
-              :wrapperCol="{ span: 20 }"
-            >
-              <a-select
-                v-model:value="sight.align"
-                :options="sightsAlign"
-                style="width: 100%"
-              ></a-select>
+            <a-form-item :label="t('级联配置')" v-if="data.type === 'cascader'" required>
+                <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行级联配置')" @click="showApiConfig(true)">
+                    <template #suffix>
+                        <Icon icon="ant-design:ellipsis-outlined" />
+                    </template>
+                </a-input>
             </a-form-item>
-            <div class="icon-delete">
-              <SvgIcon
-                name="delete"
-                @click.stop="deleteSight(index, sight.key)"
-                class="svg-delete"
-              />
-            </div>
-          </div>
-        </div>
-      </template>
-    </a-form>
-    <ApiConfig
-      v-if="apiConfigDialog"
-      v-model:apiConfigDialog="apiConfigDialog"
-      v-model:apiConfig="data.options.apiConfig"
-      :isCascader="isCascader"
-      :isQrcode="isQrcode"
-      :formItem="data"
-      :title="isCascader ? t('级联配置-API') : t('API配置')"
-    />
-    <ApiAssoConfig
-      v-if="apiAssoDia"
-      v-model:apiAssoDia="apiAssoDia"
-      v-model:apiConfig="data.options.apiConfig"
-      type="preload-title"
-    />
-    <DicAssoConfig
-      v-if="dicAssoDia"
-      v-model:dicAssoDia="dicAssoDia"
-      v-model:dicOptions="data.options.dicOptions"
-      type="preload-title"
-    />
-  </div>
+            <a-form-item v-if="hasKey('showFormat')" :label="t('显示格式')">
+                <a-select v-model:value="data.options.showFormat" :options="formatOptions" />
+            </a-form-item>
+            <a-form-item v-if="hasKey('separator')" :label="t('分隔符')">
+                <a-select v-model:value="data.options.separator" :options="separatorOptions" />
+            </a-form-item>
+            <a-form-item v-if="hasKey('selectedConfig')" :label="t('选择设置')">
+                <a-select v-model:value="data.options.selectedConfig" :options="selectedOptions"> </a-select>
+            </a-form-item>
+            <a-form-item label="数据分页" v-if="hasKey('isPagination')">
+                <a-switch v-model:checked="data.options.isPagination" />
+            </a-form-item>
+            <a-form-item :label="t('标题')" v-if="!noHaveTitle.includes(data.type)">
+                <a-input v-model:value="data.label" size="mini" />
+            </a-form-item>
+            <a-form-item :label="t('标题')" v-if="data.type === 'card'">
+                <a-input v-model:value="data.options.title" size="mini" />
+            </a-form-item>
+            <a-form-item v-if="hasKey('showTime')" :label="t('开始占位')">
+                <a-input v-model:value="data.options.startTimePlaceholder" />
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('showTime')" :label="t('结束占位')">
+                <a-input v-model:value="data.options.endTimePlaceholder" />
+            </a-form-item>
+
+            <a-form-item :label="t('占位提示')" v-if="hasKey('placeholder')">
+                <a-textarea v-if="data.type === 'opinion'" v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" />
+                <a-input v-else v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" />
+            </a-form-item>
+
+            <a-form-item
+                :label="t('默认值')"
+                v-if="
+                    (hasKey('defaultValue') &&
+                        (data.type === 'input' ||
+                            data.type === 'password' ||
+                            data.type === 'textarea' ||
+                            data.type === 'rate' ||
+                            data.type === 'switch' ||
+                            data.type === 'slider' ||
+                            data.type === 'number' ||
+                            data.type === 'picker-color' ||
+                            data.type === 'money-chinese' ||
+                            data.type === 'computational')) ||
+                    (needDicDefaultValue.includes(data.type) && data.options.datasourceType == 'dic')
+                "
+            >
+                <a-textarea v-if="data.type === 'textarea'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" />
+                <a-rate v-else-if="data.type === 'rate'" v-model:value="data.options.defaultValue" :count="data.options.count" :allowHalf="data.options.allowHalf" :allowClear="data.options.allowClear" />
+                <ColorPicker v-else-if="data.type === 'picker-color'" v-model:value="data.options.defaultValue" />
+                <a-input-number v-else-if="data.type === 'money-chinese' || data.type === 'computational' || data.type === 'number'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" />
+                <a-switch v-else-if="data.type === 'switch'" v-model:checked="data.options.defaultValue" :checkedValue="1" :unCheckedValue="0" />
+                <template v-else-if="data.type === 'slider'">
+                    <a-input-number v-if="!data.options.range" v-model:value.number="data.options.defaultValue" />
+                    <template v-if="data.options.range">
+                        <a-input-number v-model:value.number="data.options.defaultValue[0]" :max="data.options.max" />
+                        <a-input-number v-model:value.number="data.options.defaultValue[1]" :max="data.options.max" />
+                    </template>
+                </template>
+                <a-select
+                    v-else-if="data.type == 'multiple-popup' || data.type == 'checkbox'"
+                    :options="defaultSelectOption"
+                    mode="multiple"
+                    :placeholder="t('请选择默认值')"
+                    :fieldNames="{ label: 'name', value: 'value' }"
+                    v-model:value="data.options.defaultTempValue"
+                    @change="handleDfValChange"
+                    :allowClear="true"
+                    @dropdownVisibleChange="handleDfValueFocus"
+                >
+                </a-select>
+                <a-select
+                    v-else-if="needDicDefaultValue.includes(data.type)"
+                    :options="defaultSelectOption"
+                    :placeholder="t('请选择默认值')"
+                    :fieldNames="{ label: 'name', value: 'value' }"
+                    v-model:value="data.options.defaultSelect"
+                    :allowClear="true"
+                    @dropdownVisibleChange="handleDfValueFocus"
+                >
+                </a-select>
+                <a-input v-else v-model:value="data.options.defaultValue" @blur="data.type === 'number' ? changeNumber : ''" :placeholder="t('请输入默认值')" />
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')" :label="t('时间格式')">
+                <a-select v-model:value="data.options.format" disabled>
+                    <a-select-option value="HH:mm:ss" />
+                </a-select>
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('format') && (data.type === 'date' || data.type === 'date-range')" :label="t('日期格式')">
+                <a-select v-model:value="data.options.format" :disabled="data.type === 'date-range'" @change="formatChange">
+                    <a-select-option value="YYYY-MM-DD HH:mm:ss" />
+                    <a-select-option value="YYYY-MM-DD" />
+                    <a-select-option value="YYYY-MM" />
+                    <a-select-option value="YYYY" />
+                </a-select>
+            </a-form-item>
+
+            <template v-if="data.type === 'time'">
+                <a-form-item :label="t('默认值')">
+                    <TimePicker style="width: 100%" v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" />
+                </a-form-item>
+            </template>
+
+            <template v-if="data.type === 'date'">
+                <a-form-item :label="t('默认值')">
+                    <XjrDatePicker style="width: 100%" v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" />
+                </a-form-item>
+            </template>
+
+            <a-form-item :label="t('编码规则')" v-if="hasKey('autoCodeRule')" required>
+                <a-select v-model:value="data.options.autoCodeRule" size="mini" :placeholder="t('请选择编码规则')">
+                    <a-select-option v-for="rule in codeRuleOptions" :value="rule.code" :key="rule.id">
+                        {{ rule.name }}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+
+            <template v-if="data.type === 'computational' || data.type === 'money-chinese'">
+                <a-form-item :label="t('计算式配置')">
+                    <a-input v-model:value="data.options.computationalConfigValue" readonly @click="computationalDialog = true" />
+                </a-form-item>
+                <ComputationalSetting
+                    v-if="computationalDialog"
+                    v-model:computationalConfig="data.options.computationalConfig"
+                    @setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
+                    v-model:computationalDialog="computationalDialog"
+                />
+            </template>
+
+            <a-form-item label="url" v-if="hasKey('url')">
+                <a-textarea v-model:value="data.options.url" placeholder="请输入url" />
+            </a-form-item>
+
+            <a-form-item :label="t('标签宽度')" v-if="hasKey('labelWidth')">
+                <a-input-number v-model:value="data.options.labelWidth" :min="0" />
+            </a-form-item>
+
+            <a-form-item :label="t('组件宽度')" v-if="hasKey('width')">
+                <a-input v-model:value="data.options.width" />
+            </a-form-item>
+
+            <a-form-item :label="t('信息类型')" v-if="hasKey('infoType')">
+                <a-select v-model:value="data.options.infoType" size="mini">
+                    <a-select-option :value="0">{{ t('当前用户') }}</a-select-option>
+                    <a-select-option :value="1">{{ t('当前组织') }}</a-select-option>
+                    <a-select-option :value="2">{{ t('当前时间') }}</a-select-option>
+                </a-select>
+            </a-form-item>
+
+            <a-form-item :label="t('组件类型')" v-if="hasKey('orgzType')">
+                <a-select v-model:value="data.options.orgzType" size="mini">
+                    <a-select-option :value="0">{{ t('系统组织架构') }}</a-select-option>
+                </a-select>
+            </a-form-item>
+
+            <a-form-item :label="t('组件类型')" v-if="hasKey('userType')">
+                <a-select v-model:value="data.options.userType" size="mini">
+                    <a-select-option :value="0">{{ t('系统用户') }}</a-select-option>
+                </a-select>
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('loadAgain')">
+                <template #label>
+                    <a-tooltip>
+                        <template #title> 二次加载是决定编辑状态是否重新获取信息体数据 </template>
+                        <Icon icon="ant-design:question-circle-outlined" color="#909399" />
+                    </a-tooltip>
+                    &nbsp;{{ t('二次加载') }}
+                </template>
+                <a-switch v-model:checked="data.options.loadAgain" />
+            </a-form-item>
+
+            <template v-if="data.type === 'button'">
+                <a-form-item :label="t('按钮名称')">
+                    <a-input v-model:value="data.options.name" />
+                </a-form-item>
+                <template v-if="data.options.isSpecial">
+                    <a-form-item :label="t('按钮类型')" required>
+                        <a-select v-model:value="data.options.buttonType" size="mini" disabled :placeholder="t('请选择按钮类型')">
+                            <a-select-option :value="1">{{ t('联想弹层按钮') }}</a-select-option>
+                            <a-select-option :value="2">{{ t('表格选择数据按钮') }}</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <template v-if="data.options.buttonType">
+                        <DataSourceSetting v-model:data="data" @handleOptionsRemove="handleOptionsRemove" />
+                    </template>
+                    <template v-if="data.options.buttonType == 2">
+                        <a-form-item :label="t('表格选择')" required>
+                            <a-select v-model:value="data.options.selectTable" size="mini" :placeholder="t('请选择表格')">
+                                <a-select-option v-for="item in buttonTableOptions" :value="item.key" :key="item.key">{{ item.label }}</a-select-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item :label="t('表头配置')">
+                            <a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick">
+                                <template #suffix>
+                                    <Icon icon="ant-design:ellipsis-outlined" />
+                                </template>
+                            </a-input>
+                        </a-form-item>
+                        <template v-if="data.options.selectTable">
+                            <a-form-item :label="item.label" v-for="item in data.options.tableColumns.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key">
+                                <a-input v-if="data.options.datasourceType === 'api'" v-model:value="item.prestrainField" :placeholder="t('请填写接口出参字段')" />
+                                <a-select v-else-if="data.options.datasourceType === 'dic'" v-model:value="item.prestrainField">
+                                    <a-select-option value="name">name</a-select-option>
+                                    <a-select-option value="value">value</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </template>
+                    </template>
+                </template>
+                <a-form-item :label="t('按钮宽度')">
+                    <a-input v-model:value="data.options.buttonWidth" :placeholder="t('请填写按钮宽度，不填则默认')" />
+                </a-form-item>
+                <a-form-item :label="t('按钮高度')">
+                    <a-input v-model:value="data.options.buttonHeight" :placeholder="t('请填写按钮高度，不填则默认')" />
+                </a-form-item>
+            </template>
+
+            <a-form-item :label="t('最大值')" v-if="hasKey('max')">
+                <a-input-number v-model:value.number="data.options.max" @change="changeNumber" />
+            </a-form-item>
+
+            <a-form-item :label="t('最大值')" v-if="hasKey('count')">
+                <a-input-number v-model:value.number="data.options.count" @change="changeNumber" />
+            </a-form-item>
+
+            <a-form-item :label="t('最小值')" v-if="hasKey('min')">
+                <a-input-number v-model:value.number="data.options.min" @change="changeNumber" />
+            </a-form-item>
+
+            <a-form-item :label="t('步长')" v-if="hasKey('step')">
+                <a-input-number v-model:value.number="data.options.step" :min="0" />
+            </a-form-item>
+
+            <a-form-item :label="t('前置标签')" v-if="hasKey('addonBefore')">
+                <a-input v-model:value="data.options.addonBefore" :placeholder="t('请输入前置标签')" />
+            </a-form-item>
+
+            <a-form-item :label="t('后置标签')" v-if="hasKey('addonAfter')">
+                <a-input v-model:value="data.options.addonAfter" :placeholder="t('请输入后置标签')" />
+            </a-form-item>
+
+            <a-form-item :label="t('前置图标')" v-if="hasKey('prefix')">
+                <IconPicker v-model:value="data.options.prefix" :disabled="false" :readonly="false" />
+            </a-form-item>
+
+            <a-form-item :label="t('后置图标')" v-if="hasKey('suffix')">
+                <IconPicker v-model:value="data.options.suffix" :disabled="false" :readonly="false" />
+            </a-form-item>
+
+            <a-form-item :label="t('最大长度')" v-if="hasKey('maxlength')">
+                <a-input v-model:value.number="data.options.maxlength" :placeholder="t('请输入最大长度，按字符计算')" />
+            </a-form-item>
+
+            <a-form-item :label="t('开启提示')" v-if="hasKey('checkedChildren')">
+                <a-input v-model:value="data.options.checkedChildren" />
+            </a-form-item>
+
+            <a-form-item :label="t('关闭提示')" v-if="hasKey('unCheckedChildren')">
+                <a-input v-model:value="data.options.unCheckedChildren" />
+            </a-form-item>
+
+            <a-form-item :label="t('开启颜色')" v-if="hasKey('checkedColor')">
+                <ColorPicker v-model:value="data.options.checkedColor" />
+            </a-form-item>
+
+            <a-form-item :label="t('关闭颜色')" v-if="hasKey('unCheckedColor')">
+                <ColorPicker v-model:value="data.options.unCheckedColor" />
+            </a-form-item>
+
+            <a-form-item :label="t('地址字段')" v-if="hasKey('address')">
+                <a-select v-model:value="data.options.address" size="mini" allowClear>
+                    <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="t('经纬度字段')" v-if="hasKey('latiAndLong')">
+                <a-select v-model:value="data.options.latiAndLong" size="mini" allowClear>
+                    <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="t('配置类型')" v-if="hasKey('codeType')">
+                <a-select v-model:value="data.options.codeType" size="mini" :placeholder="t('请选择配置类型')" @change="handleChangeCode">
+                    <a-select-option value="fixed" key="fixed"> {{ t('固定二维码') }} </a-select-option>
+                    <a-select-option value="api" key="api"> {{ t('接口配置') }} </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="t('二维码内容')" v-if="data.type == 'qrcode' && data.options.codeType == 'fixed'">
+                <a-textarea v-model:value="data.options.defaultValue" :placeholder="t('请填写二维码内容')" :rows="4" />
+            </a-form-item>
+            <a-form-item :label="t('接口配置')" v-if="data.type == 'qrcode' && data.options.codeType == 'api'">
+                <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="handleApiConfig()">
+                    <template #suffix>
+                        <Icon icon="ant-design:ellipsis-outlined" />
+                    </template>
+                </a-input>
+            </a-form-item>
+            <!-- 子表不需要span -->
+            <a-form-item label="标签宽度" v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)">
+                <a-input-number v-model:value="data.options.span" :min="0" :max="24" addonAfter="/ 24" @change="handleSpanChange" />
+            </a-form-item>
+
+            <a-form-item :label="t('双滑块模式')" v-if="hasKey('range')">
+                <a-switch v-model:checked="data.options.range" @change="handleSliderModeChange" />
+            </a-form-item>
+
+            <a-form-item :label="t('反向坐标轴')" v-if="hasKey('reverse')">
+                <a-switch v-model:checked="data.options.reverse" />
+            </a-form-item>
+
+            <template v-if="data.type === 'image'">
+                <a-form-item :label="t('默认值')">
+                    <a-input v-model:value="imageUrl" :disabled="true" style="margin-bottom: 10px" />
+                    <a-upload action="" :beforeUpload="submitUpload" accept="" :max-count="1" :show-upload-list="false">
+                        <a-button>
+                            <SvgIcon name="upload" style="margin-right: 10px" />
+                            {{ t('点击上传') }}
+                        </a-button>
+                    </a-upload>
+                </a-form-item>
+                <a-form-item :label="t('二次上传')">
+                    <a-switch v-model:checked="data.options.isUpload" />
+                </a-form-item>
+            </template>
+
+            <a-form-item :label="t('切换按钮')" v-if="hasKey('visibilityToggle')">
+                <a-switch v-model:checked="data.options.visibilityToggle" />
+            </a-form-item>
+
+            <a-form-item :label="t('行数')" v-if="hasKey('rows') && !data.options.autoSize">
+                <a-input-number v-model:value="data.options.rows" :min="0" />
+            </a-form-item>
+
+            <a-form-item :label="t('显示字数')" v-if="hasKey('showCount')">
+                <a-switch v-model:checked="data.options.showCount" />
+            </a-form-item>
+
+            <a-form-item :label="t('自适应高度')" v-if="hasKey('autoSize')">
+                <a-switch v-model:checked="data.options.autoSize" />
+            </a-form-item>
+
+            <a-form-item :label="t('最小行数')" v-if="hasKey('minRows') && !data.options.autoSize">
+                <a-input-number v-model:value="data.options.minRows" :min="0" />
+            </a-form-item>
+
+            <a-form-item :label="t('最大行数')" v-if="hasKey('maxRows') && !data.options.autoSize">
+                <a-input-number v-model:value="data.options.maxRows" :min="0" />
+            </a-form-item>
+
+            <a-form-item :label="t('允许半选')" v-if="hasKey('allowHalf')">
+                <a-switch v-model:checked="data.options.allowHalf" />
+            </a-form-item>
+            <template v-if="data.type === 'divider'">
+                <a-form-item :label="t('标题')">
+                    <a-input v-model:value="data.options.defaultValue" />
+                </a-form-item>
+                <a-form-item :label="t('上间距')">
+                    <a-input-number v-model:value="data.options.marginTop" :min="0" />
+                </a-form-item>
+                <a-form-item :label="t('下间距')">
+                    <a-input-number v-model:value="data.options.marginBottom" :min="0" />
+                </a-form-item>
+                <a-form-item :label="t('文案对齐')">
+                    <a-radio-group button-style="solid" v-model:value="data.options.orientation">
+                        <a-radio-button value="left">{{ t('左') }}</a-radio-button>
+                        <a-radio-button value="center">{{ t('中') }}</a-radio-button>
+                        <a-radio-button value="right">{{ t('右') }}</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+            </template>
+            <template v-if="data.type === 'upload'">
+                <a-form-item :label="t('上传列表样式')">
+                    <a-radio-group v-model:value="data.options.listType" button-style="solid">
+                        <a-radio-button value="text">text</a-radio-button>
+                        <a-radio-button value="picture">picture </a-radio-button>
+                        <a-radio-button value="picture-card">picture-card</a-radio-button>
+                        <!-- <a-radio-button value="dragger">dragger</a-radio-button> -->
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item :label="t('文件类型')">
+                    <a-input v-model:value="data.options.accept" :placeholder="t('用“,”号隔开,例如:.jpg,.bmp')" />
+                </a-form-item>
+
+                <a-form-item :label="t('最大文件数')">
+                    <a-input-number v-model:value.number="data.options.maxNumber" :min="1" />
+                </a-form-item>
+
+                <a-form-item :label="t('大小限制')">
+                    <a-input v-model:value.number="data.options.maxSize" suffix="MB" />
+                </a-form-item>
+
+                <a-form-item :label="t('支持多选')">
+                    <a-switch v-model:checked="data.options.multiple" />
+                </a-form-item>
+            </template>
+
+            <a-form-item :label="t('选项样式')" v-if="hasKey('optionType')">
+                <a-radio-group button-style="solid" v-model:value="data.options.optionType">
+                    <a-radio-button value="default">{{ t('默认') }}</a-radio-button>
+                    <a-radio-button value="button">{{ t('按钮') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item :label="t('显示标签')" v-if="hasKey('showLabel')">
+                <a-switch v-model:checked="data.options.showLabel" />
+            </a-form-item>
+            <a-form-item :label="t('是否显示')" v-if="hasKey('isShow')">
+                <a-switch v-model:checked="data.options.isShow" />
+            </a-form-item>
+            <a-form-item :label="t('允许搜索')" v-if="hasKey('showSearch')">
+                <a-switch v-model:checked="data.options.showSearch" />
+            </a-form-item>
+
+            <a-form-item :label="t('是否必填')" v-if="hasKey('required')">
+                <a-switch v-model:checked="data.options.required" :disabled="data.options.readonly || data.options.disabled" />
+            </a-form-item>
+
+            <a-form-item :label="t('是否只读')" v-if="hasKey('readonly')">
+                <a-switch v-model:checked="data.options.readonly" :disabled="data.options.disabled || data.options.disabled" @change="changeReadonly" />
+            </a-form-item>
+
+            <a-form-item :label="t('是否禁用')" v-if="hasKey('disabled')">
+                <a-switch v-model:checked="data.options.disabled" @change="changeDisabled" :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)" />
+            </a-form-item>
+            <a-form-item :label="t('是否合计')" v-if="hasKey('subTotal') && data.isSubFormChild">
+                <a-switch v-model:checked="data.options.subTotal" />
+            </a-form-item>
+
+            <a-form-item :label="t('开启清除')" v-if="hasKey('allowClear')">
+                <a-switch v-model:checked="data.options.allowClear" :disabled="data.options.readonly || data.options.disabled" />
+            </a-form-item>
+
+            <a-form-item :label="t('移动端扫描')" v-if="hasKey('scan')">
+                <a-switch v-model:checked="data.options.scan" />
+            </a-form-item>
+            <a-form-item :label="t('组件边框')" v-if="hasKey('showComponentBorder')">
+                <a-switch v-model:checked="data.options.showComponentBorder" />
+            </a-form-item>
+
+            <a-form-item :label="t('表单边框')" v-if="hasKey('showFormBorder')">
+                <a-switch v-model:checked="data.options.showFormBorder" />
+            </a-form-item>
+
+            <a-form-item :label="t('显示序号')" v-if="hasKey('showIndex')">
+                <a-switch v-model:checked="data.options.showIndex" />
+            </a-form-item>
+            <template v-if="data.type === 'title' || data.type === 'text'">
+                <a-form-item :label="data.type === 'title' ? t('标题') : t('内容')">
+                    <a-input v-model:value="data.options.defaultValue" />
+                </a-form-item>
+                <a-form-item :label="t('字体颜色')">
+                    <ColorPicker v-model:value="data.options.color" />
+                </a-form-item>
+                <a-form-item :label="t('字体')" v-if="data.type === 'text'">
+                    <a-select v-model:value="data.options.fontFamily">
+                        <a-select-option value="Arial"> Arial </a-select-option>
+                        <a-select-option value="宋体">{{ t('宋体') }}</a-select-option>
+                        <a-select-option value="微软雅黑">{{ t('微软雅黑') }}</a-select-option>
+                        <a-select-option value="黑体">{{ t('黑体') }}</a-select-option>
+                        <a-select-option value="fangsong">fangsong</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="t('字体大小')">
+                    <a-input-number v-model:value="data.options.fontSize" :min="0" />
+                </a-form-item>
+                <a-form-item :label="t('粗细')" v-if="data.type === 'text'">
+                    <a-select v-model:value="data.options.fontWeight">
+                        <a-select-option value="lighter"> lighter </a-select-option>
+                        <a-select-option value="normal"> normal </a-select-option>
+                        <a-select-option value="bold"> bold </a-select-option>
+                        <a-select-option value="500">500</a-select-option>
+                        <a-select-option value="600">600</a-select-option>
+                        <a-select-option value="700">700</a-select-option>
+                        <a-select-option value="800">800</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="t('样式')" v-if="data.type === 'text'">
+                    <a-select v-model:value="data.options.fontStyle">
+                        <a-select-option value="italic"> italic </a-select-option>
+                        <a-select-option value="normal"> normal </a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="t('对齐方式')">
+                    <a-radio-group v-model:value="data.options.align" button-style="solid">
+                        <a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
+                        <a-radio-button value="center">{{ t('居中对齐') }}</a-radio-button>
+                        <a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+            </template>
+
+            <template v-if="data.type === 'grid'">
+                <a-form-item :label="t('栅格间隔')">
+                    <a-input-number v-model:value="data.options.gutter" :min="0" />
+                </a-form-item>
+
+                <a-form-item :label="t('列配置项')">
+                    <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
+                        {{ t('添加列') }}
+                    </a-button>
+                </a-form-item>
+
+                <a-form-item :label="t('列宽配置')">
+                    <ul>
+                        <li v-for="(item, index) in data.layout" class="column-width">
+                            <a-input-number :placeholder="t('栅格值')" size="small" v-model:value="item.span" :min="0" :max="24" />
+                            <DragOutlined class="draggable-icon" />
+                            <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
+                        </li>
+                    </ul>
+                </a-form-item>
+
+                <a-form-item :label="t('垂直对齐')">
+                    <a-radio-group v-model:value="data.options.align" button-style="solid">
+                        <a-radio-button value="top">{{ t('顶部对齐') }}</a-radio-button>
+                        <a-radio-button value="middle">{{ t('居中对齐') }}</a-radio-button>
+                        <a-radio-button value="bottom">{{ t('底部对齐') }}</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item :label="t('水平排列')">
+                    <a-select v-model:value="data.options.justify">
+                        <a-select-option value="start">{{ t('左对齐') }}</a-select-option>
+                        <a-select-option value="end">{{ t('右对齐') }}</a-select-option>
+                        <a-select-option value="center">{{ t('居中') }}</a-select-option>
+                        <a-select-option value="space-around">{{ t('两侧间隔相等') }}</a-select-option>
+                        <a-select-option value="space-between">{{ t('两端对齐') }}</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </template>
+
+            <template v-if="data.type === 'tab'">
+                <a-form-item :label="t('选项卡配置')">
+                    <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
+                        {{ t('添加选项卡') }}
+                    </a-button>
+                    <ul style="margin-top: 10px">
+                        <li v-for="(item, index) in data.layout" class="column-width">
+                            <a-input :placeholder="t('选项卡名称')" size="small" v-model:value="item.name" :min="0" :max="24" />
+                            <DragOutlined class="draggable-icon" />
+                            <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
+                        </li>
+                    </ul>
+                </a-form-item>
+                <a-form-item :label="t('选项卡风格')">
+                    <a-radio-group button-style="solid" v-model:value="data.options.type">
+                        <a-radio-button value="line">line</a-radio-button>
+                        <a-radio-button value="card">card</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item :label="t('选项卡位置')">
+                    <a-radio-group button-style="solid" v-model:value="data.options.tabPosition">
+                        <a-radio-button value="top">{{ t('顶部') }}</a-radio-button>
+                        <a-radio-button value="right">{{ t('右侧') }}</a-radio-button>
+                        <a-radio-button value="bottom">{{ t('底部') }}</a-radio-button>
+                        <a-radio-button value="left">{{ t('左侧') }}</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+            </template>
+            <template v-if="data.type === 'form'">
+                <div class="flex justify-between items-center ml-3 mb-3">
+                    <div class="pl-2 border-l-[6px] border-[#5e95ff] border-solid" style="font-size: 14px !important">{{ t('表头合并') }}</div>
+                    <a-button style="font-size: 14px !important" type="primary" size="small" @click="addMutipleHeads">{{ t('添加') }}</a-button>
+                </div>
+
+                <div v-if="data.options.multipleHeads?.length > 0">
+                    <div v-for="(sight, index) in data.options.multipleHeads" :key="sight.key" class="mt-6 relative bg-[#f8f8f8] py-2 px-4 ml-3">
+                        <a-form-item label="名称" :name="['sights', index, 'title']" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
+                            <a-input v-model:value="sight.title" />
+                        </a-form-item>
+                        <a-form-item :name="['sights', index, 'children']" label="子列" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
+                            <a-select mode="multiple" v-model:value="sight.children" :options="sight.headschilds" :fieldNames="{ label: 'title', value: 'key' }" style="width: 100%" @click="sightChild(sight)"></a-select>
+                        </a-form-item>
+                        <a-form-item :name="['sights', index, 'align']" label="对齐" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
+                            <a-select v-model:value="sight.align" :options="sightsAlign" style="width: 100%"></a-select>
+                        </a-form-item>
+                        <div class="icon-delete">
+                            <SvgIcon name="delete" @click.stop="deleteSight(index, sight.key)" class="svg-delete" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </a-form>
+        <ApiConfig v-if="apiConfigDialog" v-model:apiConfigDialog="apiConfigDialog" v-model:apiConfig="data.options.apiConfig" :isCascader="isCascader" :isQrcode="isQrcode" :formItem="data" :title="isCascader ? t('级联配置-API') : t('API配置')" />
+        <ApiAssoConfig v-if="apiAssoDia" v-model:apiAssoDia="apiAssoDia" v-model:apiConfig="data.options.apiConfig" type="preload-title" />
+        <DicAssoConfig v-if="dicAssoDia" v-model:dicAssoDia="dicAssoDia" v-model:dicOptions="data.options.dicOptions" type="preload-title" />
+    </div>
 </template>
 
 <script lang="ts">
-  import {
-    defineComponent,
-    inject,
-    Ref,
-    ref,
-    watch,
-    onMounted,
-    nextTick,
-    computed,
-    watchEffect,
-  } from 'vue';
-  import { DragOutlined } from '@ant-design/icons-vue';
-  import Draggable from 'vuedraggable';
-  import { SvgIcon, IconPicker, Icon } from '/@/components/Icon';
-  import {
-    FieldInfo,
-    noHaveTableAndField,
-    noHaveField,
-    noHaveTitle,
-    TableInfo,
-    unPreloadComponents,
-    MutipleHeadInfo,
-    needDicDefaultValue,
-    filterType,
-  } from '../../types';
-  import { getDicDetailList } from '/@/api/system/dic';
-  import { getCodeRule } from '/@/api/system/code';
-  // import { useUserStore } from '/@/store/modules/user';
-  import { message, notification } from 'ant-design-vue';
-  import DataSourceSetting from './settings/DataSourceSetting.vue';
-  import ApiAssoConfig from './settings/ApiAssoConfig.vue';
-  import DicAssoConfig from './settings/DicAssoConfig.vue';
-  import ComputationalSetting from './settings/ComputationalSetting.vue';
-  import StaticData from './settings/StaticData.vue';
-  import { ApiConfig } from '/@/components/ApiConfig';
-  import { DicItemSelect } from '/@/components/DicItemSelect';
-  // import { getAppEnvConfig } from '/@/utils/env';
-  import { ColorPicker } from '/@/components/ColorPicker';
-  import { TimePicker } from '/@/components/TimePicker';
-  import { XjrDatePicker } from '/@/components/DatePicker';
-  import { DicTreeSelect } from '/@/components/DicTreeSelect';
-  import Sortable from 'sortablejs';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { changeToPinyin } from '/@/utils/event/design';
-  import { cloneDeep, random } from 'lodash-es';
-  import { uploadMultiApi } from '/@/api/sys/upload';
-  import { getFileList } from '/@/api/system/file';
-  const { t } = useI18n();
-  export default defineComponent({
-    name: 'PropertyOption',
-    components: {
-      Draggable,
-      SvgIcon,
-      // EventEditModal,
-      IconPicker,
-      Icon,
-      DataSourceSetting,
-      ComputationalSetting,
-      StaticData,
-      ApiConfig,
-      DicItemSelect,
-      DragOutlined,
-      ColorPicker,
-      TimePicker,
-      XjrDatePicker,
-      DicTreeSelect,
-      ApiAssoConfig,
-      DicAssoConfig,
-    },
-    props: {
-      //所选组件配置
-      select: {
-        type: Object,
-      },
-      widgetForm: {
-        type: Object,
-      },
-    },
-    emits: ['update:select'],
-    setup(props, context) {
-      const tableInfo = inject<Ref<TableInfo[]>>('tableInfo') as Ref<TableInfo[]>;
-      const designType = inject<string>('designType');
-      const isFieldUpper = inject<Ref<boolean>>('isFieldUpper', ref(false));
-      const mapComps = ref<any[]>([]); //地图可以映射的组件
-      const checkFlag = (o) => {
-        return !filterType?.includes(o.type);
-      };
-      watch(
-        () => props.widgetForm,
-        (val) => {
-          let curComp: any = props.select;
-          if (curComp?.type && val) {
-            getMapRelationComps(curComp, val?.list);
-            initDetailList(val);
-          }
+    import { defineComponent, inject, Ref, ref, watch, onMounted, nextTick, computed, watchEffect } from 'vue';
+    import { DragOutlined } from '@ant-design/icons-vue';
+    import Draggable from 'vuedraggable';
+    import { SvgIcon, IconPicker, Icon } from '/@/components/Icon';
+    import { FieldInfo, noHaveTableAndField, noHaveField, noHaveTitle, TableInfo, unPreloadComponents, MutipleHeadInfo, needDicDefaultValue, filterType } from '../../types';
+    import { getDicDetailList } from '/@/api/system/dic';
+    import { getCodeRule } from '/@/api/system/code';
+    // import { useUserStore } from '/@/store/modules/user';
+    import { message, notification } from 'ant-design-vue';
+    import DataSourceSetting from './settings/DataSourceSetting.vue';
+    import ApiAssoConfig from './settings/ApiAssoConfig.vue';
+    import DicAssoConfig from './settings/DicAssoConfig.vue';
+    import ComputationalSetting from './settings/ComputationalSetting.vue';
+    import StaticData from './settings/StaticData.vue';
+    import { ApiConfig } from '/@/components/ApiConfig';
+    import { DicItemSelect } from '/@/components/DicItemSelect';
+    // import { getAppEnvConfig } from '/@/utils/env';
+    import { ColorPicker } from '/@/components/ColorPicker';
+    import { TimePicker } from '/@/components/TimePicker';
+    import { XjrDatePicker } from '/@/components/DatePicker';
+    import { DicTreeSelect } from '/@/components/DicTreeSelect';
+    import Sortable from 'sortablejs';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { changeToPinyin } from '/@/utils/event/design';
+    import { cloneDeep, random } from 'lodash-es';
+    import { uploadMultiApi } from '/@/api/sys/upload';
+    import { getFileList } from '/@/api/system/file';
+    const { t } = useI18n();
+    export default defineComponent({
+        name: 'PropertyOption',
+        components: {
+            Draggable,
+            SvgIcon,
+            // EventEditModal,
+            IconPicker,
+            Icon,
+            DataSourceSetting,
+            ComputationalSetting,
+            StaticData,
+            ApiConfig,
+            DicItemSelect,
+            DragOutlined,
+            ColorPicker,
+            TimePicker,
+            XjrDatePicker,
+            DicTreeSelect,
+            ApiAssoConfig,
+            DicAssoConfig
         },
-        { deep: true, immediate: true },
-      );
-
-      const data = ref<any>();
-      const fieldsInfo = ref<FieldInfo[]>([]); //所选表字段
-      const remoteOptions = ref<Recordable>([]);
-      const remoteDefaultOptions = ref<Recordable[]>([]);
-      const codeRuleOptions = ref<any>([]);
-      // const userStore = useUserStore();
-      const computationalDialog = ref<boolean>(false);
-      const layout = {
-        labelCol: { span: 8 },
-        wrapperCol: { span: 16 },
-      };
-      const apiConfigDialog = ref<boolean>(false);
-      const apiAssoDia = ref<boolean>(false);
-      const dicAssoDia = ref<boolean>(false);
-      const isCascader = ref<boolean>(false);
-      const isQrcode = ref<boolean>(false);
-      const defaultSelectOption = ref<any>([]);
-      const buttonTableOptions = ref<any>([]);
-      const formatOptions = [
-        {
-          label: t('显示全部结果'),
-          value: 'all',
-        },
-        {
-          label: t('显示最子级结果'),
-          value: 'showMostChildLevel',
-        },
-      ];
-      const separatorOptions = [
-        {
-          label: '/',
-          value: '/',
-        },
-        {
-          label: '--',
-          value: '--',
-        },
-        {
-          label: '|',
-          value: '|',
-        },
-      ];
-      const selectedOptions = [
-        {
-          label: t('必须选择到最子级'),
-          value: 'selectMostChildLevel',
-        },
-        {
-          label: t('可以选到任意一级'),
-          value: 'any',
-        },
-      ];
-      const sightsAlign = [
-        {
-          label: '左对齐',
-          value: 'left',
-        },
-        {
-          label: '居中',
-          value: 'center',
-        },
-        {
-          label: '右对齐',
-          value: 'right',
-        },
-      ];
-      const configText = computed(() => {
-        let preloadType = data.value.options.preloadType;
-        if (data.value.type == 'button' && data.value.options.buttonType == 2) {
-          preloadType = data.value.options.datasourceType;
-        }
-        const dicOptions = data.value.options.dicOptions;
-        const outputParams = data.value.options.apiConfig?.outputParams;
-        if (
-          (preloadType === 'dic' && dicOptions?.length) ||
-          (preloadType === 'api' && outputParams?.length)
-        ) {
-          return t('已配置');
-        } else {
-          return '';
-        }
-      });
-      const imageUrl = ref('');
-      const handleTableChange = (value: string) => {
-        const currentTable = tableInfo.value.find((table) => table.name === value)!;
-        fieldsInfo.value = currentTable?.fields;
-      };
-
-      watch(
-        () => props.select,
-        (val) => {
-          //如果选择组件变化  首先判断它是否为子表单组件
-          if (val?.type === 'form' || val?.type === 'one-for-one') {
-            tableInfo?.value.map((x) => {
-              x.disabled = !!x.isMain;
-            });
-          } else {
-            tableInfo?.value.map((x) => {
-              x.disabled = !x.isMain;
-            });
-          }
-          data.value = val;
-          if (designType === 'data') {
-            val?.bindTable ? handleTableChange(val?.bindTable) : (fieldsInfo.value = []); //没有选择数据表时 不展示数据字段
-          }
-          getMapRelationComps(val, props.widgetForm?.list);
-          initDetailList(val);
-          if (val?.type == 'button' && val?.options.buttonType == 2) {
-            buttonTableOptions.value = [];
-            getButtonRelatonTables(props.widgetForm?.list);
-          }
-          if (val?.type === 'image') {
-            getImage();
-          }
-        },
-        {
-          deep: true,
-          immediate: true,
-        },
-      );
-      watch(
-        tableInfo,
-        (val) => {
-          if (props.select?.type === 'form' || props.select?.type === 'one-for-one') {
-            val.map((x) => {
-              x.disabled = !!x.isMain;
-            });
-          } else {
-            val.map((x) => {
-              x.disabled = !x.isMain;
-            });
-          }
-        },
-        {
-          immediate: true,
-          deep: true,
-        },
-      );
-      watch(
-        data,
-        (val) => {
-          context.emit('update:select', val);
-        },
-        {
-          immediate: true,
-          deep: true,
-        },
-      );
-      watch(
-        () => data.value.options.latiAndLong,
-        (val) => {
-          if (data.value.type === 'map') {
-            let arr = mapComps.value.filter((o) => {
-              return o.bindField == val;
-            });
-            if (arr.length <= 0) {
-              data.value.options.latiAndLong = null;
-            }
-          }
-        },
-      );
-      watch(
-        () => data.value.options.address,
-        (val) => {
-          if (data.value.type === 'map') {
-            let arr = mapComps.value.filter((o) => {
-              return o.bindField == val;
-            });
-            if (arr.length <= 0) {
-              data.value.options.address = null;
-            }
-          }
-        },
-      );
-      watch(
-        () => data.value.options?.apiConfig,
-        (val) => {
-          if (val && !val?.path && Object.keys(val).length) {
-            data.value.options.apiConfig = {};
-          }
-        },
-        {
-          deep: true,
-        },
-      );
-      watchEffect(() => {
-        let curComp: any = props.select;
-        if (
-          curComp?.type === 'button' &&
-          curComp?.options.buttonType === 2 &&
-          curComp?.options.selectTable
-        ) {
-          findBindTable(props.widgetForm?.list, curComp);
-        }
-      });
-
-      watch(
-        () => data.value?.label,
-        (curVal, oldVal) => {
-          if (data.value.options.placeholder) {
-            data.value.options.placeholder = oldVal
-              ? data.value.options.placeholder.replace(oldVal, curVal)
-              : data.value.options.placeholder + curVal;
-          }
-        },
-      );
-
-      onMounted(() => {
-        getCodeRuleList();
-        if (data.value.type === 'grid' || data.value.type === 'tab') {
-          sortableColumn();
-        }
-      });
-      function getTabMapRelaton(o, bindTable) {
-        o.layout.forEach((k) => {
-          if (k.list?.length > 0) {
-            k.list.forEach((j) => {
-              if (j.bindTable == bindTable && checkFlag(j)) {
-                mapComps.value.push(j);
-              } else if (j.type == 'tab' && j.layout?.length > 0) {
-                getTabMapRelaton(j, bindTable);
-              } else if (j.bindTable == bindTable && j.type == 'form' && j.children?.length > 0) {
-                j.children.forEach((f) => {
-                  if (f.bindTable == bindTable && checkFlag(f)) {
-                    mapComps.value.push(f);
-                  }
-                });
-              }
-            });
-          }
-        });
-      }
-      function getMapRelationComps(curComp, list) {
-        //获取地图可以映射的组件
-        if (curComp.type == 'map') {
-          mapComps.value = [];
-          list?.forEach((o: any) => {
-            if (o.bindTable == curComp.bindTable && checkFlag(o)) {
-              mapComps.value.push(o);
-            } else if (o.type == 'tab' && o.layout?.length > 0) {
-              getTabMapRelaton(o, curComp.bindTable);
-            } else if (
-              o.bindTable == curComp.bindTable &&
-              (o.type == 'form' || o.type == 'one-for-one') &&
-              o.children?.length > 0
-            ) {
-              o.children.forEach((k) => {
-                if (k.bindTable == curComp.bindTable && checkFlag(k)) {
-                  mapComps.value.push(k);
-                }
-              });
-            }
-          });
-        }
-      }
-
-      async function initDetailList(val) {
-        if (needDicDefaultValue.includes(val.type)) {
-          if (!val.options.itemId) {
-            defaultSelectOption.value = [];
-          } else {
-            let res = await getDicDetailList({ itemId: val.options.itemId });
-            defaultSelectOption.value = res;
-          }
-        }
-      }
-      function getButtonRelatonTables(list) {
-        list.forEach((x) => {
-          if (['tab', 'grid', 'card'].includes(x.type)) {
-            for (const child of x.layout!) {
-              getButtonRelatonTables(child.list);
-            }
-          } else if (x.type == 'table-layout') {
-            for (const child of x.layout!) {
-              for (const item of child.list) {
-                getButtonRelatonTables(item.children);
-              }
-            }
-          } else {
-            if (x.type == 'form') {
-              buttonTableOptions.value.push({ key: x.key, bindTable: x.bindTable, label: x.label });
-            }
-          }
-        });
-      }
-      const sortableColumn = () => {
-        nextTick(() => {
-          const tbody: any = document.querySelector('.awc-containter ul');
-          Sortable.create(tbody, {
-            handle: '.draggable-icon',
-            onEnd: ({}) => {
-              //const noMoveColumn = data.value.layout.slice(oldIndex, data.value.layout.length - 1);
+        props: {
+            //所选组件配置
+            select: {
+                type: Object
             },
-          });
-        });
-      };
-
-      const hasKey = (key: string) => Object.keys(data.value.options).includes(key);
-
-      const handleInsertColumn = () => {
-        data.value.layout.push({
-          span: 0,
-          list: [],
-        });
-        sortableColumn();
-      };
-
-      const showApiConfig = (cascader = false) => {
-        apiConfigDialog.value = true;
-        isCascader.value = cascader;
-      };
-      const handleApiConfig = () => {
-        apiConfigDialog.value = true;
-        isQrcode.value = true;
-      };
-
-      const formatChange = () => {
-        data.value.options.defaultValue = '';
-      };
-
-      const handleOptionsRemove = (index: number) => {
-        if (data.value.type === 'grid' || data.value.type === 'tab') {
-          data.value.layout.splice(index, 1);
-        } else {
-          data.value.options.staticOptions.splice(index, 1);
-        }
-      };
-
-      const handleSelectModeChange = (event: any) => {
-        const { value } = event.target;
-        if (value === null) {
-          data.value.options.defaultValue.length
-            ? (data.value.options.defaultValue = data.value.options.defaultValue[0])
-            : (data.value.options.defaultValue = null);
-        } else {
-          if (data.value.options.defaultValue) {
-            if (!(data.value.options.defaultValue instanceof Array)) {
-              data.value.options.defaultValue = [data.value.options.defaultValue];
+            widgetForm: {
+                type: Object
             }
-          } else {
-            data.value.options.defaultValue = [];
-          }
-        }
-      };
+        },
+        emits: ['update:select'],
+        setup(props, context) {
+            const tableInfo = inject<Ref<TableInfo[]>>('tableInfo') as Ref<TableInfo[]>;
+            const designType = inject<string>('designType');
+            const isFieldUpper = inject<Ref<boolean>>('isFieldUpper', ref(false));
+            const mapComps = ref<any[]>([]); //地图可以映射的组件
+            const checkFlag = (o) => {
+                return !filterType?.includes(o.type);
+            };
+            watch(
+                () => props.widgetForm,
+                (val) => {
+                    let curComp: any = props.select;
+                    if (curComp?.type && val) {
+                        getMapRelationComps(curComp, val?.list);
+                        initDetailList(val);
+                    }
+                },
+                { deep: true, immediate: true }
+            );
 
-      const handleSliderModeChange = (checked: boolean) => {
-        checked
-          ? (data.value.options.defaultValue = [0, 0])
-          : (data.value.options.defaultValue = 0);
-      };
-
-      const tableTitleClick = () => {
-        if (
-          data.value.options.preloadType === 'dic' ||
-          (data.value.type == 'button' &&
-            data.value.options.buttonType == 2 &&
-            data.value.options.datasourceType == 'dic')
-        ) {
-          dicAssoDia.value = true;
-        } else if (
-          data.value.options.preloadType === 'api' ||
-          (data.value.type == 'button' &&
-            data.value.options.buttonType == 2 &&
-            data.value.options.datasourceType == 'api')
-        ) {
-          apiAssoDia.value = true;
-        }
-      };
-
-      const handleDicChange = async (value: string) => {
-        const result = await getDicDetailList({ itemId: value });
-
-        remoteDefaultOptions.value = result.map((item) => ({
-          label: item.name,
-          value: item.id,
-        }));
-      };
-
-      const preloadChange = () => {
-        if (data.value.type === 'form') {
-          data.value.children.map((item) => {
-            if (!unPreloadComponents.includes(item.type)) {
-              return (item.options.prestrainField = '');
-            }
-          });
-        }
-      };
-
-      const getCodeRuleList = async () => {
-        const result = await getCodeRule();
-        codeRuleOptions.value = result;
-      };
-
-      const handleApiInputFocus = () => {
-        const { labelField, valueField, api } = data.value.options.props;
-        // 如果三个条件  某一个为空 都不执行
-        if (!labelField || !valueField || !api) return;
-
-        fetch(api, {})
-          .then((resp) => resp.json())
-          .then((json) => {
-            if (Array.isArray(json)) {
-              data.value.options.staticOptions = json.map((res: any) => ({
-                label: res[labelField],
-                value: res[valueField],
-              }));
-            } else {
-              // 最多显示不超过100
-              if (json.data.length > 100) {
-                json.data.length = 100;
-              }
-              data.value.options.staticOptions = json.data.map((res: any) => ({
-                label: res[labelField],
-                value: res[valueField],
-              }));
-            }
-          })
-          .catch((_) => {
-            data.value.options.staticOptions = [
-              {
-                label: 'datasource_1',
-                value: 'datasource_1',
-              },
-              {
-                label: 'datasource_2',
-                value: 'datasource_2',
-              },
-            ];
-          });
-      };
-
-      const getFieldType = (type: number): string => {
-        switch (type) {
-          case 1:
-            return 'number';
-          case 2:
-            return 'bool';
-          case 3:
-            return 'date';
-          case 4:
-            return 'time';
-          default:
-            return 'string';
-        }
-      };
-      const changeReadonly = (checked: Boolean) => {
-        if (checked) {
-          hasKey('allowClear') ? (data.value.options.allowClear = false) : '';
-          hasKey('required') ? (data.value.options.required = false) : '';
-        }
-      };
-      const changeDisabled = (checked: Boolean) => {
-        if (checked) {
-          hasKey('readonly') ? (data.value.options.readonly = true) : '';
-          hasKey('allowClear') ? (data.value.options.allowClear = false) : '';
-          hasKey('required') ? (data.value.options.required = false) : '';
-        }
-      };
-      const changeNumber = () => {
-        if (data.value.type !== 'number') return;
-        const minNum = data.value.options.min;
-        const maxNum = data.value.options.max;
-        const value = data.value.options.defaultValue;
-        if (minNum > maxNum) {
-          message.error(t('计数器最小值只能小于等于最大值'));
-          data.value.options.min = data.value.options.max - 1;
-        } else if (value < minNum) {
-          message.error(t('计数器默认值不能小于最小值'));
-          data.value.options.defaultValue = '';
-        } else if (value > maxNum) {
-          message.error(t('计数器默认值不能大于最大值'));
-          data.value.options.defaultValue = '';
-        }
-      };
-
-      const submitUpload = (file) => {
-        // let action = getAppEnvConfig().VITE_GLOB_API_URL + '/system/file';
-        // const formData = new FormData();
-        // formData.append('file', file.file);
-        // formData.append('remark', '上传');
-        // const xhr = new XMLHttpRequest();
-        // xhr.open('post', action, true);
-        // xhr.setRequestHeader('Authorization', 'Bearer ' + userStore.getToken);
-        // xhr.onload = () => {
-        //   const response = JSON.parse(xhr.response);
-        //   console.log(response);
-        //   data.value.options.defaultValue = response.data;
-        // };
-        // xhr.onerror = () => {
-        //   console.log(t('上传失败'));
-        // };
-        // xhr.ontimeout = function timeout() {
-        //   console.log(t('上传超时'));
-        // };
-        // xhr.send(formData);
-        let folderId = data.value.options.defaultValue;
-        uploadMultiApi(
-          {
-            name: 'file',
-            file: [file],
-          },
-          folderId,
-        ).then((res) => {
-          data.value.options.defaultValue = res[0].folderId;
-          getImage();
-        });
-      };
-      async function getImage() {
-        if (data.value.options.defaultValue) {
-          let fileList = await getFileList({ folderId: data.value.options.defaultValue });
-          if (fileList.length) {
-            imageUrl.value = fileList[0].fileUrl;
-            data.value.options.defaultValue = fileList[0].folderId;
-          }
-        } else {
-          imageUrl.value = '';
-        }
-      }
-      function handleChangeCode() {
-        data.value.options.defaultValue = '';
-      }
-      const deleteSight = (index: number, key: string) => {
-        data.value.options.multipleHeads.splice(index, 1);
-        data.value.options.multipleHeads.forEach((o) => {
-          let idx = o.children.findIndex((k) => {
-            return k == key;
-          });
-          if (idx >= 0) {
-            o.children.splice(idx, 1);
-          }
-        });
-      };
-
-      function addHeadsObj(o, obj?) {
-        const com: MutipleHeadInfo = {
-          key: o.key,
-          title: o.title,
-          dataIndex: o.dataIndex,
-          children: [],
-          align: 'center',
-        };
-        if (obj) {
-          obj.push(com);
-        } else {
-          data.value.options.multipleHeads.push(com);
-        }
-      }
-
-      const addMutipleHeads = () => {
-        let len = data.value.options.multipleHeads.length;
-        let keys: number[] = [];
-        data.value.options.multipleHeads.map((o) => {
-          keys.push(Number(o.key.split('di')[1].split('lie')[0]));
-        });
-
-        let num: number = -1;
-        for (let i = 0; i < len; i++) {
-          if (!keys.includes(i)) num = i;
-        }
-        if (num === -1) {
-          num = len;
-        }
-
-        addHeadsObj({
-          key: 'di' + num + 'lie',
-          title: '第' + num + '列',
-          dataIndex: 'di' + num + 'lie',
-        });
-      };
-
-      function findParent(arr, o, cur, filters) {
-        for (let i = 0; i < arr.length; i++) {
-          let k = arr[i];
-          if (k.key != cur) {
-            if (k == o.key) {
-              filters.push(k);
-              break;
-            } else if (k.dataIndex !== undefined && k.children.length > 0) {
-              findParent(k.children, o, cur, filters);
-            }
-          }
-        }
-      }
-      function findSelf(obj, cur, parent) {
-        for (let i = 0; i < obj.children.length; i++) {
-          let k = obj.children[i];
-          if (k == cur) {
-            filterHeads.value.push(parent);
-            break;
-          } else {
-            let temp = data.value.options.multipleHeads.find((o) => {
-              return o.key == k;
-            });
-            if (temp) {
-              findSelf(temp, cur, parent);
-            }
-          }
-        }
-      }
-      function findBrother(arr, cur, key) {
-        arr.forEach((o) => {
-          if (o.children.length > 0 && cur != o.key && o.key !== key) {
-            findBrotherParent(o.children, cur);
-          }
-        });
-      }
-      function findBrotherParent(arr, cur) {
-        for (let i = 0; i < arr.length; i++) {
-          let k = arr[i];
-          if (k == cur) {
-            filterHeads.value.push(k);
-            break;
-          } else if (k.dataIndex !== undefined && k.children.length > 0) {
-            findBrotherParent(k.children, cur);
-          }
-        }
-      }
-      const filtercomps = ref<string[]>([]);
-      const filterHeads = ref<string[]>([]);
-
-      const sightChild = (sight) => {
-        let temp: MutipleHeadInfo[] = [];
-
-        data.value.children.map((a) => {
-          a.title = a.label;
-          a.dataIndex = a.bindField;
-        });
-
-        checkDatas(data.value.children, temp, sight);
-
-        checkHeads(data.value.options.multipleHeads, temp, sight);
-
-        sight.headschilds = temp;
-      };
-      function checkDatas(origin, temp, sight) {
-        filtercomps.value = [];
-
-        origin.forEach((k) => {
-          findParent(data.value.options.multipleHeads, k, sight.key, filtercomps.value);
-        });
-        let datas = origin.filter((o) => {
-          return !filtercomps.value.includes(o.key);
-        });
-        datas.forEach((o) => {
-          if (o.key !== sight.key) {
-            addHeadsObj(o, temp);
-          }
-        });
-      }
-      function checkHeads(origin, temp, sight) {
-        filterHeads.value = [sight.key]; //不能选自己
-        origin.forEach((o) => {
-          if (o.children.length > 0 && sight.key != o.key) {
-            //谁选了自己就排除谁
-            findSelf(o, sight.key, o.key);
-          }
-          if (sight.key != o.key) {
-            //兄弟列有被别人选中过的排除(被自己选中的除外)
-            findBrother(origin, o.key, sight.key);
-          }
-          if (o.children.length <= 0) {
-            //不能选子列是空的
-            filterHeads.value.push(o.key);
-          }
-        });
-
-        let datas = origin.filter((o) => {
-          return !filterHeads.value.includes(o.key);
-        });
-        datas.forEach((o) => {
-          if (o.key !== sight.key) {
-            addHeadsObj(o, temp);
-          }
-        });
-      }
-
-      function handleSpanChange(val) {
-        if (val === null) val = '';
-      }
-      async function handleDfValueFocus(open) {
-        if (open && needDicDefaultValue.includes(data.value.type)) {
-          if (!data.value.options.itemId) {
-            notification.error({
-              message: t('提示'),
-              description: t('请先选择数据选项后再选择默认值'),
-            });
-            defaultSelectOption.value = [];
-          } else {
-            let res = await getDicDetailList({ itemId: data.value.options.itemId });
-            defaultSelectOption.value = res;
-          }
-        }
-      }
-      function handleDfValChange(e) {
-        data.value.options.defaultSelect = e.join(',');
-      }
-      function handleIsSave(e) {
-        data.value.options.disabled = e;
-        if (
-          designType == 'data' &&
-          data.value.type == 'input' &&
-          data.value.options.isSave !== undefined
-        ) {
-          data.value.bindField = e
-            ? changeToPinyin(data.value.label, isFieldUpper.value) + random(1000, 9999)
-            : null;
-          //if (e) data.value.bindTable = null;
-        }
-      }
-      function findBindTable(list, curComp) {
-        list.forEach((x) => {
-          if (['tab', 'grid', 'card'].includes(x.type)) {
-            for (const child of x.layout!) {
-              findBindTable(child.list, curComp);
-            }
-          } else if (x.type == 'table-layout') {
-            for (const child of x.layout!) {
-              for (const item of child.list) {
-                findBindTable(item.children, curComp);
-              }
-            }
-          } else {
-            if (
-              x.type === 'form' &&
-              x.key == curComp.options.selectTable &&
-              curComp.options.selectTable
-            ) {
-              let columns = cloneDeep(curComp.options.tableColumns);
-              data.value.options.tableColumns = [];
-              x.children.forEach((o) => {
-                let obj = columns.find((k) => k.key == o.key);
-                if (obj) {
-                  data.value.options.tableColumns.push({
-                    key: o.key,
-                    bindField: o.bindField,
-                    bindTable: x.bindTable,
-                    prestrainField: obj.prestrainField,
-                    label: o.label,
-                    type: o.type,
-                  });
-                } else {
-                  data.value.options.tableColumns.push({
-                    key: o.key,
-                    bindField: o.bindField,
-                    bindTable: x.bindTable,
-                    prestrainField: null,
-                    label: o.label,
-                    type: o.type,
-                  });
+            const data = ref<any>();
+            const fieldsInfo = ref<FieldInfo[]>([]); //所选表字段
+            const remoteOptions = ref<Recordable>([]);
+            const remoteDefaultOptions = ref<Recordable[]>([]);
+            const codeRuleOptions = ref<any>([]);
+            // const userStore = useUserStore();
+            const computationalDialog = ref<boolean>(false);
+            const layout = {
+                labelCol: { span: 8 },
+                wrapperCol: { span: 16 }
+            };
+            const apiConfigDialog = ref<boolean>(false);
+            const apiAssoDia = ref<boolean>(false);
+            const dicAssoDia = ref<boolean>(false);
+            const isCascader = ref<boolean>(false);
+            const isQrcode = ref<boolean>(false);
+            const defaultSelectOption = ref<any>([]);
+            const buttonTableOptions = ref<any>([]);
+            const formatOptions = [
+                {
+                    label: t('显示全部结果'),
+                    value: 'all'
+                },
+                {
+                    label: t('显示最子级结果'),
+                    value: 'showMostChildLevel'
                 }
-              });
+            ];
+            const separatorOptions = [
+                {
+                    label: '/',
+                    value: '/'
+                },
+                {
+                    label: '--',
+                    value: '--'
+                },
+                {
+                    label: '|',
+                    value: '|'
+                }
+            ];
+            const selectedOptions = [
+                {
+                    label: t('必须选择到最子级'),
+                    value: 'selectMostChildLevel'
+                },
+                {
+                    label: t('可以选到任意一级'),
+                    value: 'any'
+                }
+            ];
+            const sightsAlign = [
+                {
+                    label: '左对齐',
+                    value: 'left'
+                },
+                {
+                    label: '居中',
+                    value: 'center'
+                },
+                {
+                    label: '右对齐',
+                    value: 'right'
+                }
+            ];
+            const configText = computed(() => {
+                let preloadType = data.value.options.preloadType;
+                if (data.value.type == 'button' && data.value.options.buttonType == 2) {
+                    preloadType = data.value.options.datasourceType;
+                }
+                const dicOptions = data.value.options.dicOptions;
+                const outputParams = data.value.options.apiConfig?.outputParams;
+                if ((preloadType === 'dic' && dicOptions?.length) || (preloadType === 'api' && outputParams?.length)) {
+                    return t('已配置');
+                } else {
+                    return '';
+                }
+            });
+            const imageUrl = ref('');
+            const handleTableChange = (value: string) => {
+                const currentTable = tableInfo.value.find((table) => table.name === value)!;
+                fieldsInfo.value = currentTable?.fields;
+            };
+
+            watch(
+                () => props.select,
+                (val) => {
+                    //如果选择组件变化  首先判断它是否为子表单组件
+                    if (val?.type === 'form' || val?.type === 'one-for-one') {
+                        tableInfo?.value.map((x) => {
+                            x.disabled = !!x.isMain;
+                        });
+                    } else {
+                        tableInfo?.value.map((x) => {
+                            x.disabled = !x.isMain;
+                        });
+                    }
+                    data.value = val;
+                    if (designType === 'data') {
+                        val?.bindTable ? handleTableChange(val?.bindTable) : (fieldsInfo.value = []); //没有选择数据表时 不展示数据字段
+                    }
+                    getMapRelationComps(val, props.widgetForm?.list);
+                    initDetailList(val);
+                    if (val?.type == 'button' && val?.options.buttonType == 2) {
+                        buttonTableOptions.value = [];
+                        getButtonRelatonTables(props.widgetForm?.list);
+                    }
+                    if (val?.type === 'image') {
+                        getImage();
+                    }
+                },
+                {
+                    deep: true,
+                    immediate: true
+                }
+            );
+            watch(
+                tableInfo,
+                (val) => {
+                    if (props.select?.type === 'form' || props.select?.type === 'one-for-one') {
+                        val.map((x) => {
+                            x.disabled = !!x.isMain;
+                        });
+                    } else {
+                        val.map((x) => {
+                            x.disabled = !x.isMain;
+                        });
+                    }
+                },
+                {
+                    immediate: true,
+                    deep: true
+                }
+            );
+            watch(
+                data,
+                (val) => {
+                    context.emit('update:select', val);
+                },
+                {
+                    immediate: true,
+                    deep: true
+                }
+            );
+            watch(
+                () => data.value.options.latiAndLong,
+                (val) => {
+                    if (data.value.type === 'map') {
+                        let arr = mapComps.value.filter((o) => {
+                            return o.bindField == val;
+                        });
+                        if (arr.length <= 0) {
+                            data.value.options.latiAndLong = null;
+                        }
+                    }
+                }
+            );
+            watch(
+                () => data.value.options.address,
+                (val) => {
+                    if (data.value.type === 'map') {
+                        let arr = mapComps.value.filter((o) => {
+                            return o.bindField == val;
+                        });
+                        if (arr.length <= 0) {
+                            data.value.options.address = null;
+                        }
+                    }
+                }
+            );
+            watch(
+                () => data.value.options?.apiConfig,
+                (val) => {
+                    if (val && !val?.path && Object.keys(val).length) {
+                        data.value.options.apiConfig = {};
+                    }
+                },
+                {
+                    deep: true
+                }
+            );
+            watchEffect(() => {
+                let curComp: any = props.select;
+                if (curComp?.type === 'button' && curComp?.options.buttonType === 2 && curComp?.options.selectTable) {
+                    findBindTable(props.widgetForm?.list, curComp);
+                }
+            });
+
+            watch(
+                () => data.value?.label,
+                (curVal, oldVal) => {
+                    if (data.value.options.placeholder) {
+                        data.value.options.placeholder = oldVal ? data.value.options.placeholder.replace(oldVal, curVal) : data.value.options.placeholder + curVal;
+                    }
+                }
+            );
+
+            onMounted(() => {
+                getCodeRuleList();
+                if (data.value.type === 'grid' || data.value.type === 'tab') {
+                    sortableColumn();
+                }
+            });
+            function getTabMapRelaton(o, bindTable) {
+                o.layout.forEach((k) => {
+                    if (k.list?.length > 0) {
+                        k.list.forEach((j) => {
+                            if (j.bindTable == bindTable && checkFlag(j)) {
+                                mapComps.value.push(j);
+                            } else if (j.type == 'tab' && j.layout?.length > 0) {
+                                getTabMapRelaton(j, bindTable);
+                            } else if (j.bindTable == bindTable && j.type == 'form' && j.children?.length > 0) {
+                                j.children.forEach((f) => {
+                                    if (f.bindTable == bindTable && checkFlag(f)) {
+                                        mapComps.value.push(f);
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
             }
-          }
-        });
-      }
-      return {
-        data,
-        hasKey,
-        handleInsertColumn,
-        handleOptionsRemove,
-        handleSelectModeChange,
-        handleSliderModeChange,
-        handleTableChange,
-        handleApiInputFocus,
-        handleDicChange,
-        showApiConfig,
-        getFieldType,
-        getCodeRule,
-        changeReadonly,
-        changeDisabled,
-        changeNumber,
-        handleDfValueFocus,
-        handleDfValChange,
-        submitUpload,
-        tableTitleClick,
-        apiConfigDialog,
-        apiAssoDia,
-        dicAssoDia,
-        isCascader,
-        configText,
-        noHaveTableAndField,
-        unPreloadComponents,
-        needDicDefaultValue,
-        defaultSelectOption,
-        preloadChange,
-        formatChange,
-        noHaveField,
-        noHaveTitle,
-        tableInfo,
-        fieldsInfo,
-        designType,
-        isFieldUpper,
-        remoteOptions,
-        remoteDefaultOptions,
-        codeRuleOptions,
-        computationalDialog,
-        layout,
-        formatOptions,
-        separatorOptions,
-        selectedOptions,
-        mapComps,
-        handleApiConfig,
-        isQrcode,
-        handleChangeCode,
-        sightsAlign,
-        deleteSight,
-        addMutipleHeads,
-        sightChild,
-        handleSpanChange,
-        handleIsSave,
-        buttonTableOptions,
-        t,
-        imageUrl,
-      };
-    },
-  });
+            function getMapRelationComps(curComp, list) {
+                //获取地图可以映射的组件
+                if (curComp.type == 'map') {
+                    mapComps.value = [];
+                    list?.forEach((o: any) => {
+                        if (o.bindTable == curComp.bindTable && checkFlag(o)) {
+                            mapComps.value.push(o);
+                        } else if (o.type == 'tab' && o.layout?.length > 0) {
+                            getTabMapRelaton(o, curComp.bindTable);
+                        } else if (o.bindTable == curComp.bindTable && (o.type == 'form' || o.type == 'one-for-one') && o.children?.length > 0) {
+                            o.children.forEach((k) => {
+                                if (k.bindTable == curComp.bindTable && checkFlag(k)) {
+                                    mapComps.value.push(k);
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+            async function initDetailList(val) {
+                if (needDicDefaultValue.includes(val.type)) {
+                    if (!val.options.itemId) {
+                        defaultSelectOption.value = [];
+                    } else {
+                        let res = await getDicDetailList({ itemId: val.options.itemId });
+                        defaultSelectOption.value = res;
+                    }
+                }
+            }
+            function getButtonRelatonTables(list) {
+                list.forEach((x) => {
+                    if (['tab', 'grid', 'card'].includes(x.type)) {
+                        for (const child of x.layout!) {
+                            getButtonRelatonTables(child.list);
+                        }
+                    } else if (x.type == 'table-layout') {
+                        for (const child of x.layout!) {
+                            for (const item of child.list) {
+                                getButtonRelatonTables(item.children);
+                            }
+                        }
+                    } else {
+                        if (x.type == 'form') {
+                            buttonTableOptions.value.push({ key: x.key, bindTable: x.bindTable, label: x.label });
+                        }
+                    }
+                });
+            }
+            const sortableColumn = () => {
+                nextTick(() => {
+                    const tbody: any = document.querySelector('.awc-containter ul');
+                    Sortable.create(tbody, {
+                        handle: '.draggable-icon',
+                        onEnd: ({}) => {
+                            //const noMoveColumn = data.value.layout.slice(oldIndex, data.value.layout.length - 1);
+                        }
+                    });
+                });
+            };
+
+            const hasKey = (key: string) => Object.keys(data.value.options).includes(key);
+
+            const handleInsertColumn = () => {
+                data.value.layout.push({
+                    span: 0,
+                    list: []
+                });
+                sortableColumn();
+            };
+
+            const showApiConfig = (cascader = false) => {
+                apiConfigDialog.value = true;
+                isCascader.value = cascader;
+            };
+            const handleApiConfig = () => {
+                apiConfigDialog.value = true;
+                isQrcode.value = true;
+            };
+
+            const formatChange = () => {
+                data.value.options.defaultValue = '';
+            };
+
+            const handleOptionsRemove = (index: number) => {
+                if (data.value.type === 'grid' || data.value.type === 'tab') {
+                    data.value.layout.splice(index, 1);
+                } else {
+                    data.value.options.staticOptions.splice(index, 1);
+                }
+            };
+
+            const handleSelectModeChange = (event: any) => {
+                const { value } = event.target;
+                if (value === null) {
+                    data.value.options.defaultValue.length ? (data.value.options.defaultValue = data.value.options.defaultValue[0]) : (data.value.options.defaultValue = null);
+                } else {
+                    if (data.value.options.defaultValue) {
+                        if (!(data.value.options.defaultValue instanceof Array)) {
+                            data.value.options.defaultValue = [data.value.options.defaultValue];
+                        }
+                    } else {
+                        data.value.options.defaultValue = [];
+                    }
+                }
+            };
+
+            const handleSliderModeChange = (checked: boolean) => {
+                checked ? (data.value.options.defaultValue = [0, 0]) : (data.value.options.defaultValue = 0);
+            };
+
+            const tableTitleClick = () => {
+                if (data.value.options.preloadType === 'dic' || (data.value.type == 'button' && data.value.options.buttonType == 2 && data.value.options.datasourceType == 'dic')) {
+                    dicAssoDia.value = true;
+                } else if (data.value.options.preloadType === 'api' || (data.value.type == 'button' && data.value.options.buttonType == 2 && data.value.options.datasourceType == 'api')) {
+                    apiAssoDia.value = true;
+                }
+            };
+
+            const handleDicChange = async (value: string) => {
+                const result = await getDicDetailList({ itemId: value });
+
+                remoteDefaultOptions.value = result.map((item) => ({
+                    label: item.name,
+                    value: item.id
+                }));
+            };
+
+            const preloadChange = () => {
+                if (data.value.type === 'form') {
+                    data.value.children.map((item) => {
+                        if (!unPreloadComponents.includes(item.type)) {
+                            return (item.options.prestrainField = '');
+                        }
+                    });
+                }
+            };
+
+            const getCodeRuleList = async () => {
+                const result = await getCodeRule();
+                codeRuleOptions.value = result;
+            };
+
+            const handleApiInputFocus = () => {
+                const { labelField, valueField, api } = data.value.options.props;
+                // 如果三个条件  某一个为空 都不执行
+                if (!labelField || !valueField || !api) return;
+
+                fetch(api, {})
+                    .then((resp) => resp.json())
+                    .then((json) => {
+                        if (Array.isArray(json)) {
+                            data.value.options.staticOptions = json.map((res: any) => ({
+                                label: res[labelField],
+                                value: res[valueField]
+                            }));
+                        } else {
+                            // 最多显示不超过100
+                            if (json.data.length > 100) {
+                                json.data.length = 100;
+                            }
+                            data.value.options.staticOptions = json.data.map((res: any) => ({
+                                label: res[labelField],
+                                value: res[valueField]
+                            }));
+                        }
+                    })
+                    .catch((_) => {
+                        data.value.options.staticOptions = [
+                            {
+                                label: 'datasource_1',
+                                value: 'datasource_1'
+                            },
+                            {
+                                label: 'datasource_2',
+                                value: 'datasource_2'
+                            }
+                        ];
+                    });
+            };
+
+            const getFieldType = (type: number): string => {
+                switch (type) {
+                    case 1:
+                        return 'number';
+                    case 2:
+                        return 'bool';
+                    case 3:
+                        return 'date';
+                    case 4:
+                        return 'time';
+                    default:
+                        return 'string';
+                }
+            };
+            const changeReadonly = (checked: Boolean) => {
+                if (checked) {
+                    hasKey('allowClear') ? (data.value.options.allowClear = false) : '';
+                    hasKey('required') ? (data.value.options.required = false) : '';
+                }
+            };
+            const changeDisabled = (checked: Boolean) => {
+                if (checked) {
+                    hasKey('readonly') ? (data.value.options.readonly = true) : '';
+                    hasKey('allowClear') ? (data.value.options.allowClear = false) : '';
+                    hasKey('required') ? (data.value.options.required = false) : '';
+                }
+            };
+            const changeNumber = () => {
+                if (data.value.type !== 'number') return;
+                const minNum = data.value.options.min;
+                const maxNum = data.value.options.max;
+                const value = data.value.options.defaultValue;
+                if (minNum > maxNum) {
+                    message.error(t('计数器最小值只能小于等于最大值'));
+                    data.value.options.min = data.value.options.max - 1;
+                } else if (value < minNum) {
+                    message.error(t('计数器默认值不能小于最小值'));
+                    data.value.options.defaultValue = '';
+                } else if (value > maxNum) {
+                    message.error(t('计数器默认值不能大于最大值'));
+                    data.value.options.defaultValue = '';
+                }
+            };
+
+            const submitUpload = (file) => {
+                // let action = getAppEnvConfig().VITE_GLOB_API_URL + '/system/file';
+                // const formData = new FormData();
+                // formData.append('file', file.file);
+                // formData.append('remark', '上传');
+                // const xhr = new XMLHttpRequest();
+                // xhr.open('post', action, true);
+                // xhr.setRequestHeader('Authorization', 'Bearer ' + userStore.getToken);
+                // xhr.onload = () => {
+                //   const response = JSON.parse(xhr.response);
+                //   console.log(response);
+                //   data.value.options.defaultValue = response.data;
+                // };
+                // xhr.onerror = () => {
+                //   console.log(t('上传失败'));
+                // };
+                // xhr.ontimeout = function timeout() {
+                //   console.log(t('上传超时'));
+                // };
+                // xhr.send(formData);
+                let folderId = data.value.options.defaultValue;
+                uploadMultiApi(
+                    {
+                        name: 'file',
+                        file: [file]
+                    },
+                    folderId
+                ).then((res) => {
+                    data.value.options.defaultValue = res[0].folderId;
+                    getImage();
+                });
+            };
+            async function getImage() {
+                if (data.value.options.defaultValue) {
+                    let fileList = await getFileList({ folderId: data.value.options.defaultValue });
+                    if (fileList.length) {
+                        imageUrl.value = fileList[0].fileUrl;
+                        data.value.options.defaultValue = fileList[0].folderId;
+                    }
+                } else {
+                    imageUrl.value = '';
+                }
+            }
+            function handleChangeCode() {
+                data.value.options.defaultValue = '';
+            }
+            const deleteSight = (index: number, key: string) => {
+                data.value.options.multipleHeads.splice(index, 1);
+                data.value.options.multipleHeads.forEach((o) => {
+                    let idx = o.children.findIndex((k) => {
+                        return k == key;
+                    });
+                    if (idx >= 0) {
+                        o.children.splice(idx, 1);
+                    }
+                });
+            };
+
+            function addHeadsObj(o, obj?) {
+                const com: MutipleHeadInfo = {
+                    key: o.key,
+                    title: o.title,
+                    dataIndex: o.dataIndex,
+                    children: [],
+                    align: 'center'
+                };
+                if (obj) {
+                    obj.push(com);
+                } else {
+                    data.value.options.multipleHeads.push(com);
+                }
+            }
+
+            const addMutipleHeads = () => {
+                let len = data.value.options.multipleHeads.length;
+                let keys: number[] = [];
+                data.value.options.multipleHeads.map((o) => {
+                    keys.push(Number(o.key.split('di')[1].split('lie')[0]));
+                });
+
+                let num: number = -1;
+                for (let i = 0; i < len; i++) {
+                    if (!keys.includes(i)) num = i;
+                }
+                if (num === -1) {
+                    num = len;
+                }
+
+                addHeadsObj({
+                    key: 'di' + num + 'lie',
+                    title: '第' + num + '列',
+                    dataIndex: 'di' + num + 'lie'
+                });
+            };
+
+            function findParent(arr, o, cur, filters) {
+                for (let i = 0; i < arr.length; i++) {
+                    let k = arr[i];
+                    if (k.key != cur) {
+                        if (k == o.key) {
+                            filters.push(k);
+                            break;
+                        } else if (k.dataIndex !== undefined && k.children.length > 0) {
+                            findParent(k.children, o, cur, filters);
+                        }
+                    }
+                }
+            }
+            function findSelf(obj, cur, parent) {
+                for (let i = 0; i < obj.children.length; i++) {
+                    let k = obj.children[i];
+                    if (k == cur) {
+                        filterHeads.value.push(parent);
+                        break;
+                    } else {
+                        let temp = data.value.options.multipleHeads.find((o) => {
+                            return o.key == k;
+                        });
+                        if (temp) {
+                            findSelf(temp, cur, parent);
+                        }
+                    }
+                }
+            }
+            function findBrother(arr, cur, key) {
+                arr.forEach((o) => {
+                    if (o.children.length > 0 && cur != o.key && o.key !== key) {
+                        findBrotherParent(o.children, cur);
+                    }
+                });
+            }
+            function findBrotherParent(arr, cur) {
+                for (let i = 0; i < arr.length; i++) {
+                    let k = arr[i];
+                    if (k == cur) {
+                        filterHeads.value.push(k);
+                        break;
+                    } else if (k.dataIndex !== undefined && k.children.length > 0) {
+                        findBrotherParent(k.children, cur);
+                    }
+                }
+            }
+            const filtercomps = ref<string[]>([]);
+            const filterHeads = ref<string[]>([]);
+
+            const sightChild = (sight) => {
+                let temp: MutipleHeadInfo[] = [];
+
+                data.value.children.map((a) => {
+                    a.title = a.label;
+                    a.dataIndex = a.bindField;
+                });
+
+                checkDatas(data.value.children, temp, sight);
+
+                checkHeads(data.value.options.multipleHeads, temp, sight);
+
+                sight.headschilds = temp;
+            };
+            function checkDatas(origin, temp, sight) {
+                filtercomps.value = [];
+
+                origin.forEach((k) => {
+                    findParent(data.value.options.multipleHeads, k, sight.key, filtercomps.value);
+                });
+                let datas = origin.filter((o) => {
+                    return !filtercomps.value.includes(o.key);
+                });
+                datas.forEach((o) => {
+                    if (o.key !== sight.key) {
+                        addHeadsObj(o, temp);
+                    }
+                });
+            }
+            function checkHeads(origin, temp, sight) {
+                filterHeads.value = [sight.key]; //不能选自己
+                origin.forEach((o) => {
+                    if (o.children.length > 0 && sight.key != o.key) {
+                        //谁选了自己就排除谁
+                        findSelf(o, sight.key, o.key);
+                    }
+                    if (sight.key != o.key) {
+                        //兄弟列有被别人选中过的排除(被自己选中的除外)
+                        findBrother(origin, o.key, sight.key);
+                    }
+                    if (o.children.length <= 0) {
+                        //不能选子列是空的
+                        filterHeads.value.push(o.key);
+                    }
+                });
+
+                let datas = origin.filter((o) => {
+                    return !filterHeads.value.includes(o.key);
+                });
+                datas.forEach((o) => {
+                    if (o.key !== sight.key) {
+                        addHeadsObj(o, temp);
+                    }
+                });
+            }
+
+            function handleSpanChange(val) {
+                if (val === null) val = '';
+            }
+            async function handleDfValueFocus(open) {
+                if (open && needDicDefaultValue.includes(data.value.type)) {
+                    if (!data.value.options.itemId) {
+                        notification.error({
+                            message: t('提示'),
+                            description: t('请先选择数据选项后再选择默认值')
+                        });
+                        defaultSelectOption.value = [];
+                    } else {
+                        let res = await getDicDetailList({ itemId: data.value.options.itemId });
+                        defaultSelectOption.value = res;
+                    }
+                }
+            }
+            function handleDfValChange(e) {
+                data.value.options.defaultSelect = e.join(',');
+            }
+            function handleIsSave(e) {
+                data.value.options.disabled = e;
+                if (designType == 'data' && data.value.type == 'input' && data.value.options.isSave !== undefined) {
+                    data.value.bindField = e ? changeToPinyin(data.value.label, isFieldUpper.value) + random(1000, 9999) : null;
+                    //if (e) data.value.bindTable = null;
+                }
+            }
+            function findBindTable(list, curComp) {
+                list.forEach((x) => {
+                    if (['tab', 'grid', 'card'].includes(x.type)) {
+                        for (const child of x.layout!) {
+                            findBindTable(child.list, curComp);
+                        }
+                    } else if (x.type == 'table-layout') {
+                        for (const child of x.layout!) {
+                            for (const item of child.list) {
+                                findBindTable(item.children, curComp);
+                            }
+                        }
+                    } else {
+                        if (x.type === 'form' && x.key == curComp.options.selectTable && curComp.options.selectTable) {
+                            let columns = cloneDeep(curComp.options.tableColumns);
+                            data.value.options.tableColumns = [];
+                            x.children.forEach((o) => {
+                                let obj = columns.find((k) => k.key == o.key);
+                                if (obj) {
+                                    data.value.options.tableColumns.push({
+                                        key: o.key,
+                                        bindField: o.bindField,
+                                        bindTable: x.bindTable,
+                                        prestrainField: obj.prestrainField,
+                                        label: o.label,
+                                        type: o.type
+                                    });
+                                } else {
+                                    data.value.options.tableColumns.push({
+                                        key: o.key,
+                                        bindField: o.bindField,
+                                        bindTable: x.bindTable,
+                                        prestrainField: null,
+                                        label: o.label,
+                                        type: o.type
+                                    });
+                                }
+                            });
+                        }
+                    }
+                });
+            }
+            return {
+                data,
+                hasKey,
+                handleInsertColumn,
+                handleOptionsRemove,
+                handleSelectModeChange,
+                handleSliderModeChange,
+                handleTableChange,
+                handleApiInputFocus,
+                handleDicChange,
+                showApiConfig,
+                getFieldType,
+                getCodeRule,
+                changeReadonly,
+                changeDisabled,
+                changeNumber,
+                handleDfValueFocus,
+                handleDfValChange,
+                submitUpload,
+                tableTitleClick,
+                apiConfigDialog,
+                apiAssoDia,
+                dicAssoDia,
+                isCascader,
+                configText,
+                noHaveTableAndField,
+                unPreloadComponents,
+                needDicDefaultValue,
+                defaultSelectOption,
+                preloadChange,
+                formatChange,
+                noHaveField,
+                noHaveTitle,
+                tableInfo,
+                fieldsInfo,
+                designType,
+                isFieldUpper,
+                remoteOptions,
+                remoteDefaultOptions,
+                codeRuleOptions,
+                computationalDialog,
+                layout,
+                formatOptions,
+                separatorOptions,
+                selectedOptions,
+                mapComps,
+                handleApiConfig,
+                isQrcode,
+                handleChangeCode,
+                sightsAlign,
+                deleteSight,
+                addMutipleHeads,
+                sightChild,
+                handleSpanChange,
+                handleIsSave,
+                buttonTableOptions,
+                t,
+                imageUrl
+            };
+        }
+    });
 </script>
 <style scoped lang="less">
-  *,
-  :deep(.ant-input) {
-    font-size: 12px !important;
-  }
-
-  .fc-style .widget-config-container .config-content .ant-form-item,
-  .fc-style .widget-config-container .config-content .el-form-item,
-  .fc-style .widget-config-container .config-content h4 {
-    padding-bottom: 12px;
-    border-bottom: 1px dashed #e1e1e1;
-    margin-bottom: 16px;
-  }
-
-  .select-list {
-    margin-bottom: 10px;
-  }
-
-  .select-list label {
-    padding: 0 11px;
-  }
-
-  :deep(.ant-row) {
-    align-items: center;
-  }
-
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-table-wrapper) {
-    margin: 5px 0 10px;
-  }
-
-  .column-width {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-
-    .draggable-icon {
-      margin: 0 10px;
-      cursor: move;
-      color: #ccc;
+    *,
+    :deep(.ant-input) {
+        font-size: 12px !important;
     }
 
-    .delete-icon {
-      color: #4ecece;
-      cursor: pointer;
+    .fc-style .widget-config-container .config-content .ant-form-item,
+    .fc-style .widget-config-container .config-content .el-form-item,
+    .fc-style .widget-config-container .config-content h4 {
+        padding-bottom: 12px;
+        border-bottom: 1px dashed #e1e1e1;
+        margin-bottom: 16px;
     }
-  }
 
-  .icon-delete {
-    position: absolute;
-    top: -12px;
-    right: -5px;
-    width: 24px;
-    text-align: center;
-    border: 1px solid #f64c4c;
-    color: #f64c4c;
-    border-radius: 50%;
-    cursor: pointer;
-
-    .svg-delete {
-      width: 13px !important;
-      height: 13px !important;
+    .select-list {
+        margin-bottom: 10px;
     }
-  }
-  // @import '/@/assets/style/designer/index.css';
+
+    .select-list label {
+        padding: 0 11px;
+    }
+
+    :deep(.ant-row) {
+        align-items: center;
+    }
+
+    :deep(.ant-input-number) {
+        width: 100%;
+    }
+
+    :deep(.ant-table-wrapper) {
+        margin: 5px 0 10px;
+    }
+
+    .column-width {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .draggable-icon {
+            margin: 0 10px;
+            cursor: move;
+            color: #ccc;
+        }
+
+        .delete-icon {
+            color: #4ecece;
+            cursor: pointer;
+        }
+    }
+
+    .icon-delete {
+        position: absolute;
+        top: -12px;
+        right: -5px;
+        width: 24px;
+        text-align: center;
+        border: 1px solid #f64c4c;
+        color: #f64c4c;
+        border-radius: 50%;
+        cursor: pointer;
+
+        .svg-delete {
+            width: 13px !important;
+            height: 13px !important;
+        }
+    }
+    // @import '/@/assets/style/designer/index.css';
 </style>
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 11a968a..d3215eb 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -4,23 +4,13 @@ import type { ComponentType } from './types/index';
 /**
  * Component list, register here to setting it in the form
  */
-import {
-  Input,
-  InputNumber,
-  Select,
-  Radio,
-  Checkbox,
-  DatePicker,
-  TreeSelect,
-  Rate,
-  Divider,
-} from 'ant-design-vue';
+import { Input, InputNumber, Select, Radio, Checkbox, DatePicker, TreeSelect, Rate, Divider } from 'ant-design-vue';
 const DatasourceSelect = defineAsyncComponent({
-  loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue'),
+    loader: () => import('/@/components/DataSourceSelect/src/DatasourceSelect.vue')
 });
 
 const FormView = defineAsyncComponent({
-  loader: () => import('./components/FormView.vue'),
+    loader: () => import('./components/FormView.vue')
 });
 
 import ApiRadioGroup from './components/ApiRadioGroup.vue';
@@ -74,7 +64,7 @@ import { XjrDatePicker } from '/@/components/DatePicker';
 import { Slider } from '/@/components/Slider';
 import { CodeTextArea } from '/@/components/Input';
 import { OneForOne } from '/@/components/OneForOne';
-import SubForm from './components/SubForm.vue';
+import SubForm from './components/SubFormV2.vue';
 import ErpApply from './components/ErpApply.vue';
 import ErpUpload from './components/ErpUpload.vue';
 import ErpCheck from './components/ErpCheck.vue';
@@ -154,11 +144,11 @@ componentMap.set('ErpCheck', ErpCheck);
 componentMap.set('AutoComplete', AutoComplete);
 
 export function add(compName: ComponentType, component: Component) {
-  componentMap.set(compName, component);
+    componentMap.set(compName, component);
 }
 
 export function del(compName: ComponentType) {
-  componentMap.delete(compName);
+    componentMap.delete(compName);
 }
 
 export { componentMap };
diff --git a/src/components/Form/src/components/SubFormV2.vue b/src/components/Form/src/components/SubFormV2.vue
new file mode 100644
index 0000000..ad3fe98
--- /dev/null
+++ b/src/components/Form/src/components/SubFormV2.vue
@@ -0,0 +1,584 @@
+<template>
+    <div>
+        <div class="tbl-toolbar">
+            <a-button v-if="useSelectButton" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
+                {{ buttonName }}
+            </a-button>
+            <a-button v-if="!disabled" type="primary" @click="add">
+                <PlusOutlined />
+                {{ t('新增') }}
+            </a-button>
+        </div>
+        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="data" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
+            <template #summary>
+                <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
+                    <a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
+                        <a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex as string])) }} </a-typography-text>
+                    </a-table-summary-cell>
+                </a-table-summary-row>
+            </template>
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key !== 'action'">
+                    <template v-if="column.key === 'index'">
+                        {{ index + 1 }}
+                    </template>
+                    <FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
+                        <!---如果是checked一类的组件-->
+                        <template v-if="checkedValueComponents.includes(column.componentType)">
+                            <component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
+                        </template>
+                        <!---如果是RangePicker组件-->
+                        <template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:endField="column.dataIndex.split(',')[1]"
+                                v-model:startField="column.dataIndex.split(',')[0]"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :mainKey="mainKey"
+                                :tableIndex="index"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @change="handleRangePickerChange(record, column.dataIndex)"
+                            />
+                        </template>
+
+                        <!---如果是渲染函数组件-->
+                        <template v-else-if="column.componentType === 'Render'">
+                            <component
+                                :is="
+                                    column.render({
+                                        model: record,
+                                        field: column.dataIndex,
+                                        rules: column.rules,
+
+                                        componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
+                                    })
+                                "
+                                :bordered="showComponentBorder"
+                            />
+                            <!-- {{ column.render({ model: record, field: column.dataIndex }) }} -->
+                        </template>
+
+                        <template v-else-if="column.key !== 'index'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :index="index"
+                                :mainKey="mainKey"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @change="onFieldChange(record, index)"
+                            />
+                        </template>
+                    </FormItem>
+                </template>
+                <template v-if="column.key === 'action' && !disabled">
+                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
+                </template>
+            </template>
+        </a-table>
+        <FormItemRest>
+            <MultipleSelect
+                ref="MultipleSelectRef"
+                v-model:multipleDialog="multipleDialog"
+                :apiConfig="apiConfig"
+                :datasourceType="preloadType"
+                :dicOptions="dicOptions"
+                :isSubFormUse="true"
+                :params="{ itemId }"
+                popupType="preload"
+                @submit="renderSubFormList"
+            />
+        </FormItemRest>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
+    import { Form } from 'ant-design-vue';
+    import { inject, onMounted, ref, unref, watch, nextTick } from 'vue';
+    import { SubFormColumn } from '../types';
+    import { componentMap } from '../componentMap';
+    import { DicDataComponents, checkedValueComponents, staticDataComponents } from '../helper';
+    import { MultipleSelect } from '/@/components/MultiplePopup';
+    import { dateUtil } from '/@/utils/dateUtil';
+    import { isFunction, cloneDeep, isBoolean, sum } from 'lodash-es';
+    import { deepMerge } from '/@/utils';
+    import { apiConfigFunc } from '/@/utils/event/design';
+    import { getDicDetailList } from '/@/api/system/dic';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { MutipleHeadInfo } from '/@/components/Designer';
+
+    const { t } = useI18n();
+    // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
+    // const FormItemRest = Form.ItemRest;
+    const FormItem = Form.Item;
+    const FormItemRest = Form.ItemRest;
+
+    const multipleDialog = ref<boolean>(false);
+    const emit = defineEmits(['change', 'update:value']);
+
+    const props = defineProps({
+        /**
+         * 如果是编辑状态 默认现实的值
+         */
+        value: { type: Array as PropType<Recordable[]>, default: () => [] },
+        /**
+         * 是否预加载
+         */
+        preload: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * 预加载 类型 开启 preload  为true 才有用
+         * datasource || dataitem
+         */
+        preloadType: { type: String, default: null },
+
+        /**
+         * 需要绑定主表的字段  用于验证  必填
+         */
+        mainKey: { type: String, required: true },
+        /**
+         * 子表单配置
+         */
+        columns: {
+            type: Array as PropType<SubFormColumn[]>,
+            required: true
+        },
+        /**
+         * 是否禁用所有组件
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * 预加载数据为api时使用
+         */
+        apiConfig: Object,
+        /**
+         * 预加载数据为数据字典时使用
+         */
+        itemId: String,
+        dicOptions: Array,
+        /**
+         * 是否使用按钮选数据
+         */
+        useSelectButton: Boolean,
+        // 是否开启分页
+        showPagination: Boolean,
+        /**
+         * 选数据按钮名称
+         */
+        buttonName: String,
+        //是否显示表格边框
+        showFormBorder: Boolean,
+        //是否显示组件边框
+        showComponentBorder: Boolean,
+        //是否展示序号
+        showIndex: Boolean,
+        //add before hooks
+        addBefore: Function,
+        //add after hooks
+        addAfter: Function,
+        //表头合并数据
+        multipleHeads: { type: Array as PropType<MutipleHeadInfo[]> }
+    });
+    const data = ref<Recordable[]>([]);
+
+    //缓存字段是否disable
+    const cacheMap = new Map<String, number[]>();
+
+    const headColums = ref<MutipleHeadInfo[]>([]); // 多表头
+    const originHeads = ref<MutipleHeadInfo[]>([]); // 多表头源数据
+    const columns = ref<SubFormColumn[]>(props.columns);
+
+    // 注入表单数据
+    const formModel = inject<any>('formModel', null);
+
+    const onFieldChange = (row, rowIndex) => {
+        console.log('row-->', row, rowIndex);
+    };
+
+    onMounted(() => {
+        data.value = cloneDeep(props.value);
+
+        if (props.showIndex && columns.value && columns.value[0].key !== 'index') {
+            columns.value.unshift({
+                title: '序号',
+                key: 'index',
+                align: 'center',
+                width: 60
+            });
+        }
+        columns.value = filterColum(columns.value);
+        nextTick(() => {
+            //处理多表头
+            if (props.multipleHeads && props.multipleHeads.length > 0) {
+                originHeads.value = cloneDeep(props.multipleHeads);
+
+                getColumns(columns.value);
+                //过滤权限为不显示的组件
+                filterHeads(headColums.value);
+            }
+        });
+    });
+
+    watch(
+        () => props.columns,
+        (val) => {
+            // console.log('watch props.columns');
+            columns.value = filterColum(val);
+        }
+    );
+
+    watch(
+        () => props.value,
+        (v) => {
+            // console.log('watch props.value', props.value);
+            data.value = v;
+            // const rangeComponents = props.columns.filter((column) =>
+            //   column.componentType?.includes('Range'),
+            // );
+            // if (rangeComponents.length && formModel) {
+            //   rangeComponents.forEach((item) => {
+            //     data.value.forEach((x) => {
+            //       if (x[(item.dataIndex as string)?.split(',')[0]]) {
+            //         x[item.dataIndex as string] = [
+            //           x[(item.dataIndex as string)?.split(',')[0]],
+            //           x[(item.dataIndex as string)?.split(',')[1]],
+            //         ];
+            //       }
+            //     });
+            //   });
+            // }
+
+            //要保证在预加载之后在emit  不然预加载数据不会绑定到表单数据中
+            emit('change', unref(data));
+            emit('update:value', unref(data));
+        },
+        { deep: true }
+    );
+
+    function getColumns(children) {
+        let headsColumn: MutipleHeadInfo[] = [];
+        let leafNode = 0;
+        children.forEach((o) => {
+            o.isleaf = false;
+            let flag = false;
+            for (let i = 0; i < originHeads.value.length; i++) {
+                let k = originHeads.value[i];
+
+                let idx = k.children.findIndex((j) => {
+                    return j == o.key || j.key == o.key;
+                });
+                if (idx >= 0) {
+                    o.isleaf = true;
+                    flag = true;
+                    leafNode += 1;
+                    k.children.splice(idx, 1, o);
+                    let obj = headsColumn.find((j) => {
+                        return j.key == k.key;
+                    });
+                    if (!obj) headsColumn.push(k);
+                    break;
+                } else {
+                    flag = false;
+                }
+            }
+            if (!flag) {
+                let obj = headsColumn.find((j) => {
+                    return j.key == o.key;
+                });
+                if (!obj) headsColumn.push(o);
+            }
+        });
+        if (leafNode > 0) {
+            //继续循环
+            getColumns(headsColumn);
+        } else {
+            headColums.value = headsColumn;
+        }
+    }
+
+    function filterHeads(children) {
+        children.forEach((k, i) => {
+            if (typeof k == 'string') {
+                children.splice(i, 1);
+            } else if (k.children) {
+                filterHeads(k.children);
+            }
+        });
+    }
+
+    const add = () => {
+        //给各个组件赋默认值
+        const pushObj: Recordable = {};
+
+        //新增数据钩子
+        if (isFunction(props.addBefore)) {
+            props.addBefore(formModel, pushObj);
+        }
+
+        props.columns.forEach((column, index) => {
+            //判断是否为操作菜单  并且设置了默认值
+            if (column.key === 'index' && index === 0) return;
+            if (column.key !== 'action') {
+                if (column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker') {
+                    handleSetRangeTimeValue(pushObj, column.dataIndex as string);
+                } else if (
+                    (column.componentType && staticDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'staticData') ||
+                    (column.componentType && DicDataComponents.includes(column.componentType) && (column.componentProps as any)?.datasourceType === 'dic')
+                ) {
+                    let { defaultSelect } = column.componentProps as any;
+                    pushObj[column!.dataIndex as string] = defaultSelect;
+                } else {
+                    pushObj[column!.dataIndex as string] = column.defaultValue;
+                }
+            }
+        });
+        data.value.push(pushObj);
+        emit('change', unref(data));
+        emit('update:value', unref(data));
+
+        //新增数据钩子
+        if (isFunction(props.addAfter)) {
+            props.addAfter(formModel, pushObj);
+        }
+    };
+
+    const remove = (index) => {
+        data.value.splice(index, 1);
+        emit('change', unref(data));
+        emit('update:value', unref(data));
+    };
+
+    const renderSubFormList = async (list) => {
+        list?.forEach((x) => {
+            const dataObj = {};
+            columns.value?.map((item) => {
+                if (!item?.dataIndex) return;
+                dataObj[item.dataIndex as string] = item.componentProps?.prestrainField ? x[item.componentProps.prestrainField] : null;
+            });
+
+            data.value.push(dataObj);
+        });
+        emit('change', unref(data));
+        emit('update:value', unref(data));
+    };
+
+    watch(
+        () => props.preloadType,
+        async (val) => {
+            if (!!val && !props.useSelectButton) {
+                // console.log('watch props.preloadType');
+                let res;
+                if (props.preloadType === 'api') {
+                    res = await apiConfigFunc(props.apiConfig, false, formModel);
+                } else if (props.preloadType === 'dic') {
+                    res = await getDicDetailList({ itemId: props.itemId });
+                }
+                renderSubFormList(res);
+            }
+        },
+        {
+            immediate: true
+        }
+    );
+    /**
+     * @author: tzx
+     * @description: rangePicker组件的change事件
+     */
+    const handleRangePickerChange = (values: Recordable, field: string, format = 'YYYY-MM-DD') => {
+        const startTimeKey = field.split(',')[0];
+        const endTimeKey = field.split(',')[1];
+
+        const [startTime, endTime]: string[] = values[field];
+        values[startTimeKey] = dateUtil(startTime).format(format);
+        values[endTimeKey] = dateUtil(endTime).format(format);
+
+        return values;
+    };
+
+    /**
+     * @author: tzx
+     * @description: 设置RangeTime的值
+     *
+     */
+    function handleSetRangeTimeValue(values: Recordable, field: string) {
+        const startTimeKey = field.split(',')[0];
+        const endTimeKey = field.split(',')[1];
+        values[startTimeKey] = '';
+        values[endTimeKey] = '';
+
+        return values;
+    }
+
+    const rules = (column, record, index) => {
+        if (column.key === 'index') return;
+        const requiredRule = {
+            required: getComponentsProps(column.componentProps, column.dataIndex, record, index)?.required || false,
+            message: `${column.title}是必填项`
+        };
+        const rulesList = cloneDeep(getComponentsProps(column.componentProps, column.dataIndex, record, index)?.rules);
+        if (!rulesList) return [requiredRule];
+        rulesList?.map((item) => (item.pattern = eval(item.pattern)));
+        return [...rulesList, requiredRule];
+    };
+
+    const getComponentsProps = (componentProps, dataIndex, record, index) => {
+        console.log('getComponentsProps', cacheMap.get(dataIndex), componentProps.disabled);
+        if (!componentProps) return;
+        if (isFunction(componentProps)) {
+            componentProps =
+                componentProps({
+                    updateSchema,
+                    formModel,
+                    record,
+                    index,
+                    disableRow
+                }) ?? {};
+        }
+
+        if (isBoolean(props.disabled)) {
+            componentProps['disabled'] = componentProps['disabled'] || props.disabled;
+        } else if (isBoolean(componentProps['disabled'])) {
+            componentProps['disabled'] = cacheMap.has(dataIndex) && cacheMap.get(dataIndex)?.includes(index) ? true : false;
+        }
+
+        return componentProps as Recordable;
+    };
+
+    // const getDisable = (column, index) => {
+    //   console.log('getDisable', cacheMap.get(column.dataIndex), column.componentProps.disabled);
+    //   return cacheMap.has(column.dataIndex) && cacheMap.get(column.dataIndex)?.includes(index)
+    //     ? true
+    //     : false;
+    // };
+
+    const disableRow = (column: SubFormColumn, index?: number) => {
+        let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
+        if (col && index !== undefined) {
+            //如果当前字段已经缓存
+            if (cacheMap.has(col.dataIndex)) {
+                let indexArray = cacheMap.get(col.dataIndex);
+
+                if (column.componentProps.disabled) {
+                    if (!indexArray) {
+                        indexArray = [index];
+                    } else {
+                        if (!indexArray.includes(index)) {
+                            indexArray.push(index);
+                        }
+                    }
+                } else {
+                    if (indexArray) {
+                        if (indexArray.findIndex((x) => x === index) > -1) {
+                            indexArray.splice(
+                                indexArray.findIndex((x) => x === index),
+                                1
+                            );
+                        }
+                    }
+                }
+            } else {
+                if (column.componentProps.disabled) {
+                    cacheMap.set(col.dataIndex, [index]);
+                }
+            }
+        }
+    };
+
+    const updateSchema = (column: SubFormColumn, index?: number) => {
+        let col: any = columns.value.find((x) => x.dataIndex == column.dataIndex);
+        if (col && index !== undefined) {
+            //如果当前字段已经缓存
+            if (cacheMap.has(col.dataIndex)) {
+                let indexArray = cacheMap.get(col.dataIndex);
+
+                if (column.componentProps.disabled) {
+                    if (!indexArray) {
+                        indexArray = [index];
+                    } else {
+                        indexArray.push(index);
+                    }
+                } else {
+                    if (indexArray) {
+                        if (indexArray.findIndex((x) => x === index) > -1) {
+                            indexArray.splice(
+                                indexArray.findIndex((x) => x === index),
+                                1
+                            );
+                        }
+                    }
+                }
+            } else {
+                if (column.componentProps.disabled) {
+                    cacheMap.set(col.dataIndex, [index]);
+                }
+            }
+        }
+        console.log('cacheMap', cacheMap);
+
+        return col || col?.length ? deepMerge(col, column) : col;
+    };
+
+    function filterColum(column) {
+        return column.filter((o) => {
+            return o.key == 'action' || o.key == 'index' || (((isBoolean(o.show) && o.show) || !isBoolean(o.show)) && isBoolean(o.componentProps?.isShow) && o.componentProps?.isShow) || !isBoolean(o.componentProps?.isShow);
+        });
+    }
+</script>
+<style lang="less" scoped>
+    :deep(.ant-form-item) {
+        margin-bottom: 0;
+    }
+
+    :deep(.ant-table-cell) {
+        padding: 8px 0;
+    }
+
+    :deep(.ant-table .ant-table-thead tr th) {
+        padding: 11px;
+    }
+
+    :deep(.ant-input-number),
+    :deep(.ant-input-affix-wrapper),
+    :deep(.ant-input),
+    :deep(.ant-select-selector),
+    :deep(.ant-picker) {
+        border: 0 !important;
+        box-shadow: none !important;
+    }
+
+    :deep(.anticon) {
+        padding-bottom: 0 !important;
+    }
+
+    :deep(.ant-table-cell-fix-right) {
+        text-align: center;
+        width: 60px;
+    }
+
+    :deep(.ant-radio-group),
+    :deep(.ant-checkbox-group),
+    :deep(.ant-rate),
+    :deep(.ant-upload),
+    :deep(.ant-form-item-explain-error) {
+        padding: 0 11px;
+    }
+
+    :deep(.ant-switch),
+    :deep(input[type='color']) {
+        margin: 0 11px;
+    }
+
+    .select-btn {
+        margin-bottom: 8px;
+    }
+
+    .tbl-toolbar {
+        margin-bottom: 10px;
+    }
+</style>
diff --git a/src/layouts/default/header/components/user-dropdown/DropDown.vue b/src/layouts/default/header/components/user-dropdown/DropDown.vue
new file mode 100644
index 0000000..817ac70
--- /dev/null
+++ b/src/layouts/default/header/components/user-dropdown/DropDown.vue
@@ -0,0 +1,172 @@
+<template>
+    <Dropdown :overlayClassName="`${prefixCls}-dropdown-overlay`" placement="bottomRight">
+        <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
+            <span style="border-left: 1px solid rgb(255 255 255 / 30%); height: 30px; padding-right: 15px"></span>
+            <div style="margin-right: 12px; height: 30px; margin-top: -12px">
+                <a-image :height="24" :src="getUserInfo.avatar" :width="24" fallback="src/assets/images/header.jpg" />
+            </div>
+            <span :class="`${prefixCls}__info hidden md:block`">
+                <span :class="`${prefixCls}__name  `" class="truncate">
+                    {{ getUserInfo.name }}
+                </span>
+            </span>
+        </span>
+
+        <template #overlay>
+            <AMenu @click="handleMenuClick">
+                <MenuItem key="usercenter" :text="t('用户中心')" icon="ant-design:user-switch-outlined" />
+                <MenuItem v-if="getUseLockPage" key="lock" :text="t('锁定屏幕')" icon="ion:lock-closed-outline" />
+                <MenuItem v-if="showSettings" key="sysSettings" icon="ion:color-filter-outline" text="主题设置" @click="showThemeSetting" />
+                <MenuDivider />
+                <MenuItem key="logout" :text="t('退出系统')" icon="ion:power-outline" />
+            </AMenu>
+        </template>
+    </Dropdown>
+    <LockAction @register="register" />
+</template>
+<script lang="ts">
+    // components
+    import { Dropdown, Menu } from 'ant-design-vue';
+
+    import { defineComponent, computed } from 'vue';
+
+    import { DOC_URL } from '/@/settings/siteSetting';
+
+    import { useUserStore } from '/@/store/modules/user';
+    import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useDesign } from '/@/hooks/web/useDesign';
+    import { useModal } from '/@/components/Modal';
+
+    import headerImg from '/@/assets/images/header.jpg';
+    import { propTypes } from '/@/utils/propTypes';
+    import { openWindow } from '/@/utils';
+
+    import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+    import { PageEnum } from '/@/enums/pageEnum';
+    import { useGo } from '/@/hooks/web/usePage';
+
+    // type MenuEvent = 'logout' | 'doc' | 'lock' | 'usercenter';
+
+    export default defineComponent({
+        name: 'UserDropdown',
+        components: {
+            Dropdown,
+            AMenu: Menu,
+            MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+            MenuDivider: Menu.Divider,
+            LockAction: createAsyncComponent(() => import('../lock/LockModal.vue'))
+        },
+        props: {
+            theme: propTypes.oneOf(['dark', 'light']),
+            showSettings: Boolean
+        },
+        setup() {
+            const { prefixCls } = useDesign('header-user-dropdown');
+            const { t } = useI18n();
+            const { getUseLockPage } = useHeaderSetting();
+            const userStore = useUserStore();
+            const go = useGo();
+
+            const getUserInfo = computed(() => {
+                const { name = '', avatar, desc } = userStore.getUserInfo || {};
+                return { name, avatar: avatar || headerImg, desc };
+            });
+
+            const [register, { openModal }] = useModal();
+
+            function handleLock() {
+                openModal(true);
+            }
+
+            //  login out
+            function handleLoginOut() {
+                userStore.confirmLoginOut();
+            }
+
+            // open doc
+            function openDoc() {
+                openWindow(DOC_URL);
+            }
+
+            // updatePwd
+            function openUserCenter() {
+                go(PageEnum.USER_CENTER);
+            }
+
+            function handleMenuClick(e) {
+                switch (e.key) {
+                    case 'logout':
+                        handleLoginOut();
+                        break;
+                    case 'doc':
+                        openDoc();
+                        break;
+                    case 'lock':
+                        handleLock();
+                        break;
+                    case 'usercenter':
+                        openUserCenter();
+                        break;
+                }
+            }
+
+            return {
+                prefixCls,
+                t,
+                getUserInfo,
+                handleMenuClick,
+                register,
+                getUseLockPage
+            };
+        },
+        methods: {
+            showThemeSetting() {
+                this.$emit('menuClick', 'themeSetting');
+            }
+        }
+    });
+</script>
+<style lang="less">
+    @prefix-cls: ~'@{namespace}-header-user-dropdown';
+
+    .@{prefix-cls} {
+        height: @header-height;
+        padding: 0 0 0 10px;
+        padding-right: 10px;
+        overflow: hidden;
+        font-size: 12px;
+        cursor: pointer;
+        align-items: center;
+
+        &__name {
+            font-size: 14px;
+        }
+
+        // &--dark {
+        //   &:hover {
+        //     background-color: @header-dark-bg-hover-color;
+        //   }
+        // }
+
+        &--light {
+            &:hover {
+                background-color: @header-light-bg-hover-color;
+            }
+
+            .@{prefix-cls}__name {
+                color: @text-color-base;
+            }
+
+            .@{prefix-cls}__desc {
+                color: @header-light-desc-color;
+            }
+        }
+
+        &-dropdown-overlay {
+            .ant-dropdown-menu-item {
+                min-width: 160px;
+            }
+        }
+    }
+</style>
diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue
index 715f90f..4ea952f 100644
--- a/src/layouts/default/header/index.vue
+++ b/src/layouts/default/header/index.vue
@@ -1,205 +1,173 @@
 <template>
-  <LayHeader :class="getHeaderClass">
-    <!-- left start -->
+    <LayHeader :class="getHeaderClass">
+        <!-- left start -->
 
-    <div :class="`${prefixCls}-left`">
-      <!-- logo -->
-      <AppLogo
-        v-if="getShowHeaderLogo || getIsMobile"
-        :class="`${prefixCls}-logo`"
-        :theme="getHeaderTheme"
-        :style="getLogoWidth"
-        :show-title="!getCollapsed"
-      />
-      <LayoutTrigger
-        v-if="
-          (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
-        "
-        :theme="getHeaderTheme"
-        :sider="false"
-      />
-    </div>
-    <!-- left end -->
-    <div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
-      <LayoutBreadcrumb :theme="getHeaderTheme" />
-    </div>
-    <!-- menu start -->
-    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
-      <LayoutMenu
-        :isHorizontal="true"
-        :theme="getHeaderTheme"
-        :splitType="getSplitType"
-        :menuMode="getMenuMode"
-      />
-    </div>
-    <!-- menu-end -->
+        <div :class="`${prefixCls}-left`">
+            <!-- logo -->
+            <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" :show-title="!getCollapsed" />
+            <LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile" :theme="getHeaderTheme" :sider="false" />
+        </div>
+        <!-- left end -->
+        <div :class="`${prefixCls}-menu`" v-if="getShowContent && getShowBread">
+            <LayoutBreadcrumb :theme="getHeaderTheme" />
+        </div>
+        <!-- menu start -->
+        <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+            <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
+        </div>
+        <!-- menu-end -->
 
-    <!-- action  -->
-    <div :class="`${prefixCls}-action`">
-      <LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
-      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
-      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
-      <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
+        <!-- action  -->
+        <div :class="`${prefixCls}-action`">
+            <LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
+            <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+            <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
+            <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
 
-      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
+            <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
 
-      <AppLocalePicker
-        v-if="getShowLocalePicker"
-        :reload="true"
-        :showText="false"
-        :class="`${prefixCls}-action__item`"
-      />
-      <UserPostChange />
-      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
-      <UserDropDown :theme="getHeaderTheme" />
-    </div>
-  </LayHeader>
+            <UserPostChange />
+            <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
+            <UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
+        </div>
+    </LayHeader>
 </template>
 <script lang="ts">
-  import { defineComponent, unref, computed } from 'vue';
+    import { defineComponent, unref, computed, ref } from 'vue';
 
-  import { propTypes } from '/@/utils/propTypes';
+    import { propTypes } from '/@/utils/propTypes';
 
-  import { Layout } from 'ant-design-vue';
-  import { AppLogo } from '/@/components/Application';
-  import LayoutMenu from '../menu/index.vue';
-  import LayoutTrigger from '../trigger/index.vue';
+    import { Layout } from 'ant-design-vue';
+    import { AppLogo } from '/@/components/Application';
+    import LayoutMenu from '../menu/index.vue';
+    import LayoutTrigger from '../trigger/index.vue';
 
-  import { AppSearch } from '/@/components/Application';
+    import { AppSearch } from '/@/components/Application';
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+    import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+    import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+    import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
-  import { AppLocalePicker, UserPostChange } from '/@/components/Application';
+    import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+    import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+    import { UserPostChange } from '/@/components/Application';
 
-  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
+    import { LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
+    import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
+    import { useAppInject } from '/@/hooks/web/useAppInject';
+    import { useDesign } from '/@/hooks/web/useDesign';
 
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-  import { useLocale } from '/@/locales/useLocale';
+    import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+    import { useLocale } from '/@/locales/useLocale';
 
-  export default defineComponent({
-    name: 'LayoutHeader',
-    components: {
-      LayHeader: Layout.Header,
-      AppLogo,
-      LayoutTrigger,
-      LayoutBreadcrumb,
-      LayoutMenu,
-      UserDropDown,
-      AppLocalePicker,
-      FullScreen,
-      Notify,
-      AppSearch,
-      ErrorAction,
-      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
-        loading: true,
-      }),
-      UserPostChange,
-    },
-    props: {
-      fixed: propTypes.bool,
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('layout-header');
-      const {
-        getShowTopMenu,
-        getShowHeaderTrigger,
-        getSplit,
-        getIsMixMode,
-        getMenuWidth,
-        getIsMixSidebar,
-        getCollapsed,
-      } = useMenuSetting();
-      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
-        useRootSetting();
+    export default defineComponent({
+        name: 'LayoutHeader',
+        components: {
+            LayHeader: Layout.Header,
+            AppLogo,
+            LayoutTrigger,
+            LayoutBreadcrumb,
+            LayoutMenu,
+            UserDropDown,
+            FullScreen,
+            Notify,
+            AppSearch,
+            ErrorAction,
+            SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
+                loading: true
+            }),
+            UserPostChange
+        },
+        props: {
+            fixed: propTypes.bool
+        },
+        setup(props) {
+            const { prefixCls } = useDesign('layout-header');
+            const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar, getCollapsed } = useMenuSetting();
+            const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
 
-      const {
-        getHeaderTheme,
-        getShowFullScreen,
-        getShowNotice,
-        getShowContent,
-        getShowBread,
-        getShowHeaderLogo,
-        getShowHeader,
-        getShowSearch,
-      } = useHeaderSetting();
+            const { getHeaderTheme, getShowFullScreen, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo, getShowHeader, getShowSearch } = useHeaderSetting();
 
-      const { getShowLocalePicker } = useLocale();
+            const { getShowLocalePicker } = useLocale();
 
-      const { getIsMobile } = useAppInject();
+            const { getIsMobile } = useAppInject();
 
-      const getHeaderClass = computed(() => {
-        const theme = unref(getHeaderTheme);
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--fixed`]: props.fixed,
-            [`${prefixCls}--mobile`]: unref(getIsMobile),
-            [`${prefixCls}--${theme}`]: theme,
-          },
-        ];
-      });
+            const getHeaderClass = computed(() => {
+                const theme = unref(getHeaderTheme);
+                return [
+                    prefixCls,
+                    {
+                        [`${prefixCls}--fixed`]: props.fixed,
+                        [`${prefixCls}--mobile`]: unref(getIsMobile),
+                        [`${prefixCls}--${theme}`]: theme
+                    }
+                ];
+            });
 
-      const getShowSetting = computed(() => {
-        if (!unref(getShowSettingButton)) {
-          return false;
+            const getShowSetting = computed(() => {
+                if (!unref(getShowSettingButton)) {
+                    return false;
+                }
+                const settingButtonPosition = unref(getSettingButtonPosition);
+
+                if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+                    return unref(getShowHeader);
+                }
+                return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+            });
+
+            const getLogoWidth = computed(() => {
+                if (!unref(getIsMixMode) || unref(getIsMobile)) {
+                    return {};
+                }
+                const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+                return { width: `${width}px` };
+            });
+
+            const getSplitType = computed(() => {
+                return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
+            });
+
+            const getMenuMode = computed(() => {
+                return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
+            });
+
+            const drawer = ref();
+            function onMenuClick(name) {
+                if (name === 'themeSetting') {
+                    drawer.value.openDrawer(true);
+                }
+            }
+
+            return {
+                prefixCls,
+                getHeaderClass,
+                getShowHeaderLogo,
+                getHeaderTheme,
+                getShowHeaderTrigger,
+                getIsMobile,
+                getShowBread,
+                getShowContent,
+                getSplitType,
+                getSplit,
+                getMenuMode,
+                getShowTopMenu,
+                getShowLocalePicker,
+                getShowFullScreen,
+                getShowNotice,
+                getUseErrorHandle,
+                getLogoWidth,
+                getIsMixSidebar,
+                getShowSettingButton,
+                getShowSetting,
+                getShowSearch,
+                getCollapsed,
+                onMenuClick,
+                drawer
+            };
         }
-        const settingButtonPosition = unref(getSettingButtonPosition);
-
-        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
-          return unref(getShowHeader);
-        }
-        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
-      });
-
-      const getLogoWidth = computed(() => {
-        if (!unref(getIsMixMode) || unref(getIsMobile)) {
-          return {};
-        }
-        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
-        return { width: `${width}px` };
-      });
-
-      const getSplitType = computed(() => {
-        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
-      });
-
-      const getMenuMode = computed(() => {
-        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
-      });
-
-      return {
-        prefixCls,
-        getHeaderClass,
-        getShowHeaderLogo,
-        getHeaderTheme,
-        getShowHeaderTrigger,
-        getIsMobile,
-        getShowBread,
-        getShowContent,
-        getSplitType,
-        getSplit,
-        getMenuMode,
-        getShowTopMenu,
-        getShowLocalePicker,
-        getShowFullScreen,
-        getShowNotice,
-        getUseErrorHandle,
-        getLogoWidth,
-        getIsMixSidebar,
-        getShowSettingButton,
-        getShowSetting,
-        getShowSearch,
-        getCollapsed,
-      };
-    },
-  });
+    });
 </script>
 <style lang="less">
-  @import url('./index.less');
+    @import url('./index.less');
 </style>
diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue
index 1a33387..402110e 100644
--- a/src/layouts/default/setting/index.vue
+++ b/src/layouts/default/setting/index.vue
@@ -1,26 +1,28 @@
 <template>
-  <div @click="openDrawer(true)">
-    <Icon icon="mdi:color" size="24" />
-    <SettingDrawer @register="register" />
-  </div>
+    <div @click="openDrawer(true)">
+        <SettingDrawer @register="register" />
+    </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import SettingDrawer from './SettingDrawer';
-  import Icon from '/@/components/Icon';
+    import { defineComponent, defineExpose } from 'vue';
+    import SettingDrawer from './SettingDrawer';
 
-  import { useDrawer } from '/@/components/Drawer';
+    import { useDrawer } from '/@/components/Drawer';
 
-  export default defineComponent({
-    name: 'SettingButton',
-    components: { SettingDrawer, Icon },
-    setup() {
-      const [register, { openDrawer }] = useDrawer();
+    export default defineComponent({
+        name: 'SettingButton',
+        components: { SettingDrawer },
+        setup() {
+            const [register, { openDrawer }] = useDrawer();
 
-      return {
-        register,
-        openDrawer,
-      };
-    },
-  });
+            defineExpose({
+                openDrawer
+            });
+
+            return {
+                register,
+                openDrawer
+            };
+        }
+    });
 </script>
diff --git a/src/views/secondDev/LoginForm.vue b/src/views/secondDev/LoginForm.vue
index e86c6d5..ff76ab2 100644
--- a/src/views/secondDev/LoginForm.vue
+++ b/src/views/secondDev/LoginForm.vue
@@ -38,7 +38,7 @@
             </ARow>
 
             <FormItem class="enter-x">
-                <Button :loading="loading" :style="{ 'border-radius': '35px' }" block class="sub-button" type="primary" @click="handleLogin">
+                <Button :loading="loading" :style="{ 'border-radius': '8px' }" block class="sub-button" type="primary" @click="handleLogin">
                     {{ t('登录') }}
                 </Button>
             </FormItem>
@@ -195,7 +195,7 @@
     }
 
     .sub-button {
-        height: 60px;
+        height: 48px;
         font-size: 20px;
     }
 
