From d703b01902e1746cb60ba531bb3ca54a72b08f91 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Fri, 1 Mar 2024 12:00:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AE=9A=E5=AE=BD=E6=A8=A1=E5=BC=8F=20feat:?=
 =?UTF-8?q?=20=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=88?=
 =?UTF-8?q?=E8=8D=89=E7=A8=BF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |    4 +
 .../src/components/AntdFormConfig.vue         |  188 +-
 .../src/components/AntdWidgetFormItem.vue     | 2390 +++++++--------
 .../componentProperty/PropertyOption.vue      |  303 +-
 src/components/Designer/src/types/index.ts    | 2598 ++++++++---------
 src/components/SimpleForm/src/SimpleForm.vue  |   42 +-
 .../src/components/SimpleFormItem.vue         |   14 +-
 7 files changed, 2709 insertions(+), 2830 deletions(-)

diff --git a/.env b/.env
index 3ba6f1a..2eb64c5 100644
--- a/.env
+++ b/.env
@@ -9,3 +9,7 @@ VITE_GLOB_APP_SHORT_NAME = 全代码平台
 
 # 应用名称
 VITE_SYSTEM_NAME = 全代码平台
+
+# 响应式布局的表单宽度分界
+VITE_RESP_LG_WIDTH = 1280
+VITE_RESP_MD_WIDTH = 960
diff --git a/src/components/Designer/src/components/AntdFormConfig.vue b/src/components/Designer/src/components/AntdFormConfig.vue
index ed91a9c..e8d6819 100644
--- a/src/components/Designer/src/components/AntdFormConfig.vue
+++ b/src/components/Designer/src/components/AntdFormConfig.vue
@@ -1,105 +1,117 @@
 <template>
-  <div class="form-config-container">
-    <a-form v-bind="layout">
-      <a-form-item :label="t('表单形式')">
-        <a-radio-group v-model:value="data.formType" button-style="solid" size="small">
-          <a-radio-button value="modal">{{ t('弹窗') }}</a-radio-button>
-          <a-radio-button value="drawer">{{ t('抽屉') }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
+    <div class="form-config-container">
+        <a-form v-bind="layout">
+            <a-form-item :label="t('表单形式')">
+                <a-radio-group v-model:value="data.formType" button-style="solid" size="small">
+                    <a-radio-button value="modal">{{ t('弹窗') }}</a-radio-button>
+                    <a-radio-button value="drawer">{{ t('抽屉') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
 
-      <a-form-item :label="t('表单布局')">
-        <a-radio-group v-model:value="data.layout" button-style="solid" size="small">
-          <a-radio-button value="horizontal">{{ t('水平排列') }}</a-radio-button>
-          <a-radio-button value="vertical">{{ t('垂直排列') }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
+            <a-form-item :label="t('表单布局')">
+                <a-radio-group v-model:value="data.layout" button-style="solid" size="small">
+                    <a-radio-button value="horizontal">{{ t('水平排列') }}</a-radio-button>
+                    <a-radio-button value="vertical">{{ t('垂直排列') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
 
-      <a-form-item :label="t('标签对齐')">
-        <a-radio-group v-model:value="data.labelAlign" button-style="solid" size="small">
-          <a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
-          <a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
+            <a-form-item :label="t('标签对齐')">
+                <a-radio-group v-model:value="data.labelAlign" button-style="solid" size="small">
+                    <a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
+                    <a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
 
-      <a-form-item label="标签宽度">
-        <a-input-number v-model:value="data.labelCol.span" :min="0" :max="24" addonAfter="/ 24" />
-      </a-form-item>
+            <a-form-item label="标签模式">
+                <a-radio-group v-model:value="data.labelCol.labelWidthMode" button-style="solid" size="small">
+                    <a-radio-button value="flex">{{ t('百分比') }}</a-radio-button>
+                    <a-radio-button value="fix">{{ t('定宽') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
 
-      <a-form-item label="标签边距">
-        <a-input-number v-model:value="data.labelCol.offset" :min="0" :max="24" addonAfter="/ 24" />
-      </a-form-item>
+            <a-form-item label="标签宽度">
+                <a-input-number v-model:value="data.labelCol.span" :max="24" :min="0" addonAfter="/ 24" />
+            </a-form-item>
 
-      <a-form-item :label="t('组件尺寸')">
-        <a-radio-group v-model:value="data.size" button-style="solid" size="small">
-          <a-radio-button value="default">{{ t('默认') }}</a-radio-button>
-          <a-radio-button value="large">{{ t('大') }}</a-radio-button>
-          <a-radio-button value="small">{{ t('小') }}</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
+            <a-form-item v-show="data.labelCol.labelWidthMode === 'fix'" label="标签定宽">
+                <a-input-number v-model:value="data.labelCol.labelFixWidth" :max="200" :min="40" addonAfter="px" />
+            </a-form-item>
 
-      <a-form-item label="表单宽度">
-        <a-input-number v-model:value="data.formWidth" addonAfter="px" />
-      </a-form-item>
-    </a-form>
-  </div>
+            <a-form-item label="标签边距">
+                <a-input-number v-model:value="data.labelCol.offset" :max="24" :min="0" addonAfter="/ 24" />
+            </a-form-item>
+
+            <a-form-item :label="t('组件尺寸')">
+                <a-radio-group v-model:value="data.size" button-style="solid" size="small">
+                    <a-radio-button value="default">{{ t('默认') }}</a-radio-button>
+                    <a-radio-button value="large">{{ t('大') }}</a-radio-button>
+                    <a-radio-button value="small">{{ t('小') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="表单宽度">
+                <a-input-number v-model:value="data.formWidth" addonAfter="px" />
+            </a-form-item>
+        </a-form>
+    </div>
 </template>
 
 <script lang="ts">
-  import { WidgetForm } from '../types';
-  import { defineComponent, PropType, ref, watch } from 'vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
-  export default defineComponent({
-    name: 'AntdFormConfig',
-    props: {
-      config: {
-        type: Object as PropType<WidgetForm['config']>,
-        required: true,
-      },
-    },
-    emits: ['update:config'],
-    setup(props, context) {
-      const data = ref(props.config);
-      const layout = {
-        labelCol: { span: 6 },
-        wrapperCol: { span: 18 },
-      };
-      watch(data, () => context.emit('update:config', data));
+    import { WidgetForm } from '../types';
+    import { defineComponent, PropType, ref, watch } from 'vue';
+    import { useI18n } from '/@/hooks/web/useI18n';
 
-      return {
-        data,
-        layout,
-        t,
-      };
-    },
-  });
+    const { t } = useI18n();
+    export default defineComponent({
+        name: 'AntdFormConfig',
+        props: {
+            config: {
+                type: Object as PropType<WidgetForm['config']>,
+                required: true
+            }
+        },
+        emits: ['update:config'],
+        setup(props, context) {
+            const data = ref(props.config);
+            const layout = {
+                labelCol: { span: 6 },
+                wrapperCol: { span: 18 }
+            };
+            watch(data, () => context.emit('update:config', data));
+
+            return {
+                data,
+                layout,
+                t
+            };
+        }
+    });
 </script>
-<style scoped lang="less">
-  .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;
-  }
+<style lang="less" scoped>
+    .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;
+    }
 
-  .form-config-container {
-    padding: 10px;
-  }
+    .form-config-container {
+        padding: 10px;
+    }
 
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
+    :deep(.ant-input-number) {
+        width: 100%;
+    }
 
-  // :deep(.ant-radio-group) {
-  //   display: flex;
+    // :deep(.ant-radio-group) {
+    //   display: flex;
 
-  //   .ant-radio-button-wrapper {
-  //     flex: 1;
-  //     text-align: center;
-  //     padding: 3px 0 !important;
-  //   }
-  // }
-  // @import '/@/assets/style/designer/index.css';
+    //   .ant-radio-button-wrapper {
+    //     flex: 1;
+    //     text-align: center;
+    //     padding: 3px 0 !important;
+    //   }
+    // }
+    // @import '/@/assets/style/designer/index.css';
 </style>
diff --git a/src/components/Designer/src/components/AntdWidgetFormItem.vue b/src/components/Designer/src/components/AntdWidgetFormItem.vue
index f6d2204..9250d26 100644
--- a/src/components/Designer/src/components/AntdWidgetFormItem.vue
+++ b/src/components/Designer/src/components/AntdWidgetFormItem.vue
@@ -1,1322 +1,1202 @@
 <template>
-  <div class="widget-item-container">
-    <a-form-item
-      class="widget-view"
-      v-if="element"
-      :key="element.key"
-      :class="{
-        active: selectWidget?.key === element.key,
-        'widget-col': element.type === 'grid' || element.type === 'card',
-      }"
-      :label="!noHaveTitle.includes(element.type) && element.options.showLabel ? element.label : ''"
-      :rules="element.options.rules"
-      :required="element.options.required"
-      :labelCol="itemLabelCol"
-    >
-      <template v-if="element.type === 'input'">
-        <a-input
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :maxlength="parseInt(element.options.maxlength)"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
+    <div class="widget-item-container">
+        <a-form-item
+            v-if="element"
+            :key="element.key"
+            :class="{
+                active: selectWidget?.key === element.key,
+                'widget-col': element.type === 'grid' || element.type === 'card'
+            }"
+            :label="!noHaveTitle.includes(element.type) && element.options.showLabel ? element.label : ''"
+            :labelCol="itemLabelCol"
+            :required="element.options.required"
+            :rules="element.options.rules"
+            class="widget-view"
         >
-          <template #prefix v-if="element.options.prefix">
-            <Icon :icon="element.options.prefix" />
-          </template>
-          <template #suffix v-if="element.options.suffix">
-            <Icon :icon="element.options.suffix" />
-          </template>
-        </a-input>
-      </template>
+            <template v-if="element.type === 'input'">
+                <a-input
+                    v-model:value="element.options.defaultValue"
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :maxlength="parseInt(element.options.maxlength)"
+                    :placeholder="element.options.placeholder"
+                    :readonly="element.options.readonly"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                >
+                    <template v-if="element.options.prefix" #prefix>
+                        <Icon :icon="element.options.prefix" />
+                    </template>
+                    <template v-if="element.options.suffix" #suffix>
+                        <Icon :icon="element.options.suffix" />
+                    </template>
+                </a-input>
+            </template>
 
-      <template v-if="element.type === 'password'">
-        <a-input-password
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :maxlength="element.options.maxlength"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-          :visibilityToggle="element.options.visibilityToggle"
-        >
-          <template #prefix v-if="element.options.prefix">
-            <Icon :icon="element.options.prefix" />
-          </template>
-        </a-input-password>
-      </template>
+            <template v-if="element.type === 'password'">
+                <a-input-password
+                    v-model:value="element.options.defaultValue"
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :maxlength="element.options.maxlength"
+                    :placeholder="element.options.placeholder"
+                    :readonly="element.options.readonly"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                    :visibilityToggle="element.options.visibilityToggle"
+                >
+                    <template v-if="element.options.prefix" #prefix>
+                        <Icon :icon="element.options.prefix" />
+                    </template>
+                </a-input-password>
+            </template>
 
-      <template v-if="element.type === 'textarea' || element.type === 'opinion'">
-        <a-textarea
-          :key="updateKey"
-          style="resize: none"
-          :size="config.size"
-          :rows="element.options.rows"
-          v-model:value="element.options.defaultValue"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :maxlength="element.options.maxlength"
-          :showCount="element.options.showCount"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly || element.type === 'opinion'"
-          :autoSize="element.options.autoSize"
-        />
-      </template>
+            <template v-if="element.type === 'textarea' || element.type === 'opinion'">
+                <a-textarea
+                    :key="updateKey"
+                    v-model:value="element.options.defaultValue"
+                    :allowClear="element.options.allowClear"
+                    :autoSize="element.options.autoSize"
+                    :disabled="element.options.disabled"
+                    :maxlength="element.options.maxlength"
+                    :placeholder="element.options.placeholder"
+                    :readonly="element.options.readonly || element.type === 'opinion'"
+                    :rows="element.options.rows"
+                    :showCount="element.options.showCount"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                    style="resize: none"
+                />
+            </template>
 
-      <template v-if="element.type === 'area'">
-        <SelectArea
-          :size="config.size"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-        />
-      </template>
-      <template v-if="element.type === 'auto-code'">
-        <AutoCodeRule
-          :size="config.size"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :prefix="element.options.prefix"
-          :suffix="element.options.suffix"
-          :autoCodeRule="element.options.autoCodeRule"
-        />
-      </template>
+            <template v-if="element.type === 'area'">
+                <SelectArea :allowClear="element.options.allowClear" :disabled="element.options.disabled" :placeholder="element.options.placeholder" :readonly="element.options.readonly" :size="config.size" :style="{ width: element.options.width }" />
+            </template>
+            <template v-if="element.type === 'auto-code'">
+                <AutoCodeRule
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :autoCodeRule="element.options.autoCodeRule"
+                    :placeholder="element.options.placeholder"
+                    :prefix="element.options.prefix"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                    :suffix="element.options.suffix"
+                />
+            </template>
 
-      <template v-if="element.type === 'number'">
-        <a-input-number
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :style="{ width: element.options.width }"
-          :max="element.options.max"
-          :min="element.options.min"
-          :step="element.options.step"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-          :maxlength="element.options.maxlength"
-        />
-      </template>
+            <template v-if="element.type === 'number'">
+                <a-input-number
+                    v-model:value="element.options.defaultValue"
+                    :disabled="element.options.disabled"
+                    :max="element.options.max"
+                    :maxlength="element.options.maxlength"
+                    :min="element.options.min"
+                    :readonly="element.options.readonly"
+                    :size="config.size"
+                    :step="element.options.step"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'radio'">
-        <ApiRadioGroup
-          :size="config.size"
-          v-model:value="element.options.defaultSelect"
-          :style="{
-            width: element.options.width,
-          }"
-          :disabled="element.options.disabled"
-          :optionType="element.options.optionType"
-          :params="element.options.params"
-          :labelField="element.options.labelField"
-          :valueField="element.options.valueField"
-          :datasourceType="element.options.datasourceType"
-          :staticOptions="element.options.staticOptions"
-          :defaultSelect="element.options.defaultSelect"
-          :apiConfig="element.options.apiConfig"
-          :class="[element.options.optionType === 'button' ? 'radio-button' : 'radio-default']"
-        />
-      </template>
+            <template v-if="element.type === 'radio'">
+                <ApiRadioGroup
+                    v-model:value="element.options.defaultSelect"
+                    :apiConfig="element.options.apiConfig"
+                    :class="[element.options.optionType === 'button' ? 'radio-button' : 'radio-default']"
+                    :datasourceType="element.options.datasourceType"
+                    :defaultSelect="element.options.defaultSelect"
+                    :disabled="element.options.disabled"
+                    :labelField="element.options.labelField"
+                    :optionType="element.options.optionType"
+                    :params="element.options.params"
+                    :size="config.size"
+                    :staticOptions="element.options.staticOptions"
+                    :style="{
+                        width: element.options.width
+                    }"
+                    :valueField="element.options.valueField"
+                />
+            </template>
 
-      <template v-if="element.type === 'checkbox'">
-        <ApiCheckboxGroup
-          :size="config.size"
-          v-model:value="element.options.defaultSelect"
-          :disabled="element.options.disabled"
-          :params="element.options.params"
-          :labelField="element.options.labelField"
-          :valueField="element.options.valueField"
-          :datasourceType="element.options.datasourceType"
-          :staticOptions="element.options.staticOptions"
-          :defaultSelect="element.options.defaultSelect"
-          :apiConfig="element.options.apiConfig"
-        />
-      </template>
+            <template v-if="element.type === 'checkbox'">
+                <ApiCheckboxGroup
+                    v-model:value="element.options.defaultSelect"
+                    :apiConfig="element.options.apiConfig"
+                    :datasourceType="element.options.datasourceType"
+                    :defaultSelect="element.options.defaultSelect"
+                    :disabled="element.options.disabled"
+                    :labelField="element.options.labelField"
+                    :params="element.options.params"
+                    :size="config.size"
+                    :staticOptions="element.options.staticOptions"
+                    :valueField="element.options.valueField"
+                />
+            </template>
 
-      <template v-if="element.type === 'time'">
-        <TimePicker
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :placeholder="element.options.placeholder"
-          :allowClear="element.options.allowClear"
-          :format="element.options.format"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-        />
-      </template>
+            <template v-if="element.type === 'time'">
+                <TimePicker
+                    v-model:value="element.options.defaultValue"
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :format="element.options.format"
+                    :placeholder="element.options.placeholder"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'date'">
-        <XjrDatePicker
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :placeholder="element.options.placeholder"
-          :allowClear="element.options.allowClear"
-          :format="element.options.format"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-        />
-      </template>
+            <template v-if="element.type === 'date'">
+                <XjrDatePicker
+                    v-model:value="element.options.defaultValue"
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :format="element.options.format"
+                    :placeholder="element.options.placeholder"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'date-range'">
-        <a-range-picker
-          :size="config.size"
-          :format="element.options.format"
-          :show-time="element.options.showTime"
-          :placeholder="[element.options.startTimePlaceholder, element.options.endTimePlaceholder]"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-        />
-      </template>
+            <template v-if="element.type === 'date-range'">
+                <a-range-picker
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :format="element.options.format"
+                    :placeholder="[element.options.startTimePlaceholder, element.options.endTimePlaceholder]"
+                    :show-time="element.options.showTime"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'time-range'">
-        <a-time-range-picker
-          :size="config.size"
-          :format="element.options.format"
-          :show-time="element.options.showTime"
-          :placeholder="[element.options.startTimePlaceholder, element.options.endTimePlaceholder]"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-        />
-      </template>
+            <template v-if="element.type === 'time-range'">
+                <a-time-range-picker
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :format="element.options.format"
+                    :placeholder="[element.options.startTimePlaceholder, element.options.endTimePlaceholder]"
+                    :show-time="element.options.showTime"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'rate'">
-        <a-rate
-          v-model:value="element.options.defaultValue"
-          :count="element.options.count"
-          :allowHalf="element.options.allowHalf"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-        />
-      </template>
+            <template v-if="element.type === 'rate'">
+                <a-rate v-model:value="element.options.defaultValue" :allowClear="element.options.allowClear" :allowHalf="element.options.allowHalf" :count="element.options.count" :disabled="element.options.disabled" />
+            </template>
 
-      <template v-if="element.type === 'select'">
-        <ApiSelect
-          :size="config.size"
-          :mode="element.options.mode"
-          v-model:value="element.options.defaultSelect"
-          :placeholder="element.options.placeholder"
-          :filter-option="handleFilterOption"
-          :allowClear="element.options.clearable"
-          :showSearch="element.options.showSearch"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-          :style="{ width: element.options.width }"
-          :params="element.options.params"
-          :labelField="element.options.labelField"
-          :valueField="element.options.valueField"
-          :datasourceType="element.options.datasourceType"
-          :staticOptions="element.options.staticOptions"
-          :defaultSelect="element.options.defaultSelect"
-          :apiConfig="element.options.apiConfig"
-        />
-      </template>
+            <template v-if="element.type === 'select'">
+                <ApiSelect
+                    v-model:value="element.options.defaultSelect"
+                    :allowClear="element.options.clearable"
+                    :apiConfig="element.options.apiConfig"
+                    :datasourceType="element.options.datasourceType"
+                    :defaultSelect="element.options.defaultSelect"
+                    :disabled="element.options.disabled"
+                    :filter-option="handleFilterOption"
+                    :labelField="element.options.labelField"
+                    :mode="element.options.mode"
+                    :params="element.options.params"
+                    :placeholder="element.options.placeholder"
+                    :readonly="element.options.readonly"
+                    :showSearch="element.options.showSearch"
+                    :size="config.size"
+                    :staticOptions="element.options.staticOptions"
+                    :style="{ width: element.options.width }"
+                    :valueField="element.options.valueField"
+                />
+            </template>
 
-      <template v-if="element.type === 'switch'">
-        <XjrSwitch
-          :size="config.size"
-          v-model:checked="element.options.defaultValue"
-          :checkedChildren="element.options.checkedChildren"
-          :unCheckedChildren="element.options.unCheckedChildren"
-          :disabled="element.options.disabled"
-          :checkedColor="element.options.checkedColor"
-          :unCheckedColor="element.options.unCheckedColor"
-        />
-      </template>
+            <template v-if="element.type === 'switch'">
+                <XjrSwitch
+                    v-model:checked="element.options.defaultValue"
+                    :checkedChildren="element.options.checkedChildren"
+                    :checkedColor="element.options.checkedColor"
+                    :disabled="element.options.disabled"
+                    :size="config.size"
+                    :unCheckedChildren="element.options.unCheckedChildren"
+                    :unCheckedColor="element.options.unCheckedColor"
+                />
+            </template>
 
-      <template v-if="element.type === 'slider'">
-        <a-slider
-          v-model:value="element.options.defaultValue"
-          :min="element.options.min"
-          :max="element.options.max"
-          :step="element.options.step"
-          :reverse="element.options.reverse"
-          :disabled="element.options.disabled"
-        />
-      </template>
+            <template v-if="element.type === 'slider'">
+                <a-slider v-model:value="element.options.defaultValue" :disabled="element.options.disabled" :max="element.options.max" :min="element.options.min" :reverse="element.options.reverse" :step="element.options.step" />
+            </template>
 
-      <template v-if="element.type == 'text'">
-        <p
-          :style="{
-            fontFamily: element.options.fontFamily,
-            fontSize: element.options.fontSize + 'px',
-            fontWeight: element.options.fontWeight,
-            color: element.options.color,
-            textAlign: element.options.align,
-            fontStyle: element.options.fontStyle,
-          }"
-          >{{ element.options.defaultValue }}</p
-        >
-      </template>
+            <template v-if="element.type == 'text'">
+                <p
+                    :style="{
+                        fontFamily: element.options.fontFamily,
+                        fontSize: element.options.fontSize + 'px',
+                        fontWeight: element.options.fontWeight,
+                        color: element.options.color,
+                        textAlign: element.options.align,
+                        fontStyle: element.options.fontStyle
+                    }"
+                    >{{ element.options.defaultValue }}</p
+                >
+            </template>
 
-      <template v-if="element.type === 'multiple-popup' || element.type === 'associate-popup'">
-        <a-input
-          :readonly="element.options.readonly"
-          v-model:value="element.options.defaultValue"
-          :size="config.size"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :maxlength="parseInt(element.options.maxlength)"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-        />
-      </template>
+            <template v-if="element.type === 'multiple-popup' || element.type === 'associate-popup'">
+                <a-input
+                    v-model:value="element.options.defaultValue"
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :allowClear="element.options.allowClear"
+                    :disabled="element.options.disabled"
+                    :maxlength="parseInt(element.options.maxlength)"
+                    :placeholder="element.options.placeholder"
+                    :readonly="element.options.readonly"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
 
-      <template v-if="element.type === 'associate-select'">
-        <AssociateSelect
-          :size="config.size"
-          :mode="element.options.mode"
-          v-model:value="element.options.defaultSelect"
-          :placeholder="element.options.placeholder"
-          :filter-option="handleFilterOption"
-          :showSearch="element.options.showSearch"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-          :labelField="element.options.labelField"
-          :valueField="element.options.valueField"
-          :datasourceType="element.options.datasourceType"
-          :params="element.options.params"
-          :staticOptions="element.options.staticOptions"
-          :defaultSelect="element.options.defaultSelect"
-          :apiConfig="element.options.apiConfig"
-        />
-      </template>
+            <template v-if="element.type === 'associate-select'">
+                <AssociateSelect
+                    v-model:value="element.options.defaultSelect"
+                    :apiConfig="element.options.apiConfig"
+                    :datasourceType="element.options.datasourceType"
+                    :defaultSelect="element.options.defaultSelect"
+                    :disabled="element.options.disabled"
+                    :filter-option="handleFilterOption"
+                    :labelField="element.options.labelField"
+                    :mode="element.options.mode"
+                    :params="element.options.params"
+                    :placeholder="element.options.placeholder"
+                    :showSearch="element.options.showSearch"
+                    :size="config.size"
+                    :staticOptions="element.options.staticOptions"
+                    :style="{ width: element.options.width }"
+                    :valueField="element.options.valueField"
+                />
+            </template>
 
-      <template v-if="element.type === 'picker-color'">
-        <ColorPicker
-          v-model:value="element.options.defaultValue"
-          :disabled="element.options.disabled"
-        />
-      </template>
+            <template v-if="element.type === 'picker-color'">
+                <ColorPicker v-model:value="element.options.defaultValue" :disabled="element.options.disabled" />
+            </template>
 
-      <template v-if="element.type === 'button'">
-        <a-button
-          type="primary"
-          :size="config.size"
-          :disabled="element.options.disabled"
-          :style="{
-            height: element.options.buttonHeight ? element.options.buttonHeight + 'px' : '',
-            width: element.options.buttonWidth ? element.options.buttonWidth + 'px' : '',
-          }"
-        >
-          <Icon :icon="element.options.prefix" />
-          {{ element.options.name }}
-          <Icon :icon="element.options.suffix" />
-        </a-button>
-      </template>
+            <template v-if="element.type === 'button'">
+                <a-button
+                    :disabled="element.options.disabled"
+                    :size="config.size"
+                    :style="{
+                        height: element.options.buttonHeight ? element.options.buttonHeight + 'px' : '',
+                        width: element.options.buttonWidth ? element.options.buttonWidth + 'px' : ''
+                    }"
+                    type="primary"
+                >
+                    <Icon :icon="element.options.prefix" />
+                    {{ element.options.name }}
+                    <Icon :icon="element.options.suffix" />
+                </a-button>
+            </template>
 
-      <template v-if="element.type == 'image'">
-        <Image
-          v-model:value="element.options.defaultValue"
-          :key="updateKey"
-          :isUpload="element.options.isUpload"
-        />
-      </template>
+            <template v-if="element.type == 'image'">
+                <Image :key="updateKey" v-model:value="element.options.defaultValue" :isUpload="element.options.isUpload" />
+            </template>
 
-      <template v-if="element.type == 'divider'">
-        <a-divider
-          :orientation="element.options.orientation"
-          :style="{
-            marginTop: element.options.marginTop + 'px',
-            marginBottom: element.options.marginBottom + 'px',
-          }"
-        >
-          {{ element.options.defaultValue }}
-        </a-divider>
-      </template>
+            <template v-if="element.type == 'divider'">
+                <a-divider
+                    :orientation="element.options.orientation"
+                    :style="{
+                        marginTop: element.options.marginTop + 'px',
+                        marginBottom: element.options.marginBottom + 'px'
+                    }"
+                >
+                    {{ element.options.defaultValue }}
+                </a-divider>
+            </template>
 
-      <template v-if="element.type === 'upload'">
-        <Upload
-          :accept="element.options.accept"
-          :maxSize="element.options.maxSize"
-          :maxNumber="element.options.maxNumber"
-          :multiple="element.options.multiple"
-          :disabled="element.options.disabled"
-          v-model:value="uploadValue"
-        />
-        <p style="color: #ccc; font-size: 13px">{{
-          t('支持扩展名：.rar .zip .doc .docx .pdf .jpg...')
-        }}</p>
-      </template>
+            <template v-if="element.type === 'upload'">
+                <Upload v-model:value="uploadValue" :accept="element.options.accept" :disabled="element.options.disabled" :maxNumber="element.options.maxNumber" :maxSize="element.options.maxSize" :multiple="element.options.multiple" />
+                <p style="color: #ccc; font-size: 13px">{{ t('支持扩展名：.rar .zip .doc .docx .pdf .jpg...') }}</p>
+            </template>
 
-      <template v-if="element.type === 'richtext-editor'">
-        <RichTextEditor
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-          v-model:value="element.options.defaultValue"
-          :width="element.options.width"
-        />
-      </template>
+            <template v-if="element.type === 'richtext-editor'">
+                <RichTextEditor v-model:value="element.options.defaultValue" :disabled="element.options.disabled" :readonly="element.options.readonly" :width="element.options.width" />
+            </template>
 
-      <template v-if="element.type === 'cascader'">
-        <ApiCascader
-          :size="config.size"
-          :placeholder="element.options.placeholder"
-          :separator="element.options.separator"
-          :showFormat="element.options.showFormat"
-          :selectedConfig="element.options.selectedConfig"
-          :apiConfig="element.options.apiConfig"
-          :allowClear="element.options.allowClear"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
-        />
-      </template>
-      <template v-if="element.type === 'title'">
-        <a-row
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-        >
-          <a-col :span="24">
-            <h2
-              :align="element.options.align"
-              :style="{
-                fontSize: element.options.fontSize + 'px',
-                color: element.options.color,
-                fontWeight: 'bold',
-              }"
-            >
-              {{ element.options.defaultValue }}
-            </h2>
-          </a-col>
-        </a-row>
-      </template>
+            <template v-if="element.type === 'cascader'">
+                <ApiCascader
+                    :allowClear="element.options.allowClear"
+                    :apiConfig="element.options.apiConfig"
+                    :disabled="element.options.disabled"
+                    :placeholder="element.options.placeholder"
+                    :selectedConfig="element.options.selectedConfig"
+                    :separator="element.options.separator"
+                    :showFormat="element.options.showFormat"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
+            <template v-if="element.type === 'title'">
+                <a-row v-if="element.key" :key="element.key" :class="{ active: selectWidget?.key === element.key }">
+                    <a-col :span="24">
+                        <h2
+                            :align="element.options.align"
+                            :style="{
+                                fontSize: element.options.fontSize + 'px',
+                                color: element.options.color,
+                                fontWeight: 'bold'
+                            }"
+                        >
+                            {{ element.options.defaultValue }}
+                        </h2>
+                    </a-col>
+                </a-row>
+            </template>
 
-      <template v-if="element.type === 'grid'">
-        <a-row
-          type="flex"
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-          :gutter="element.options.gutter ?? 0"
-          :justify="element.options.justify"
-          :align="element.options.align"
-        >
-          <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
-            <Draggable
-              class="widget-col-list"
-              item-key="key"
-              ghostClass="ghost"
-              handle=".drag-widget"
-              :animation="200"
-              :group="{ name: 'people' }"
-              :no-transition-on-drag="true"
-              :list="col.list"
-              @add="handleColMoveAdd($event, col.list, element)"
-            >
-              <template #item="{ element: childElement, index: childIndex }">
-                <div>
-                  <AntdWidgetFormItem
-                    v-if="childElement.key"
-                    :key="childElement.key"
-                    :element="childElement"
-                    class="drag-widget"
-                    :config="config"
-                    :selectWidget="selectWidget"
-                    @click.stop="handleItemClick(childElement)"
-                    @copy="handleCopyClick(col.list, childIndex)"
-                    @delete="handleDeleteClick(col.list, childIndex)"
-                  />
-                </div>
-              </template>
-            </Draggable>
-          </a-col>
-        </a-row>
-      </template>
+            <template v-if="element.type === 'grid'">
+                <a-row v-if="element.key" :key="element.key" :align="element.options.align" :class="{ active: selectWidget?.key === element.key }" :gutter="element.options.gutter ?? 0" :justify="element.options.justify" type="flex">
+                    <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
+                        <Draggable
+                            :animation="200"
+                            :group="{ name: 'people' }"
+                            :list="col.list"
+                            :no-transition-on-drag="true"
+                            class="widget-col-list"
+                            ghostClass="ghost"
+                            handle=".drag-widget"
+                            item-key="key"
+                            @add="handleColMoveAdd($event, col.list, element)"
+                        >
+                            <template #item="{ element: childElement, index: childIndex }">
+                                <div>
+                                    <AntdWidgetFormItem
+                                        v-if="childElement.key"
+                                        :key="childElement.key"
+                                        :config="config"
+                                        :element="childElement"
+                                        :selectWidget="selectWidget"
+                                        class="drag-widget"
+                                        @copy="handleCopyClick(col.list, childIndex)"
+                                        @delete="handleDeleteClick(col.list, childIndex)"
+                                        @click.stop="handleItemClick(childElement)"
+                                    />
+                                </div>
+                            </template>
+                        </Draggable>
+                    </a-col>
+                </a-row>
+            </template>
 
-      <template v-if="element.type === 'tab'">
-        <a-row
-          class="widget-col widget-view"
-          type="flex"
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-          :gutter="element.options.gutter ?? 0"
-          :justify="element.options.justify"
-          :align="element.options.align"
-          @click="handleItemClick(element)"
-        >
-          <a-tabs
-            style="width: 100%"
-            :type="element.options.type"
-            :tab-position="element.options.tabPosition"
-            default-active-key="0"
-          >
-            <a-tab-pane v-for="(col, colIndex) of element.layout" :key="colIndex" :tab="col.name">
-              <Draggable
-                class="widget-col-list"
-                item-key="key"
-                ghostClass="ghost"
-                handle=".drag-widget"
-                :animation="200"
-                :group="{ name: 'people' }"
-                :no-transition-on-drag="true"
-                :list="col.list"
-                @add="handleColMoveAdd($event, col.list, element)"
+            <template v-if="element.type === 'tab'">
+                <a-row
+                    v-if="element.key"
+                    :key="element.key"
+                    :align="element.options.align"
+                    :class="{ active: selectWidget?.key === element.key }"
+                    :gutter="element.options.gutter ?? 0"
+                    :justify="element.options.justify"
+                    class="widget-col widget-view"
+                    type="flex"
+                    @click="handleItemClick(element)"
+                >
+                    <a-tabs :tab-position="element.options.tabPosition" :type="element.options.type" default-active-key="0" style="width: 100%">
+                        <a-tab-pane v-for="(col, colIndex) of element.layout" :key="colIndex" :tab="col.name">
+                            <Draggable
+                                :animation="200"
+                                :group="{ name: 'people' }"
+                                :list="col.list"
+                                :no-transition-on-drag="true"
+                                class="widget-col-list"
+                                ghostClass="ghost"
+                                handle=".drag-widget"
+                                item-key="key"
+                                @add="handleColMoveAdd($event, col.list, element)"
+                            >
+                                <template #item="{ element: childElement, index: childIndex }">
+                                    <div>
+                                        <AntdWidgetFormItem
+                                            v-if="childElement.key"
+                                            :key="childElement.key"
+                                            :config="config"
+                                            :element="childElement"
+                                            :labelCol="config.labelCol"
+                                            :selectWidget="selectWidget"
+                                            class="drag-widget"
+                                            @copy="handleCopyClick(col.list, childIndex)"
+                                            @delete="handleDeleteClick(col.list, childIndex)"
+                                            @click.stop="handleItemClick(childElement)"
+                                        />
+                                    </div>
+                                </template>
+                            </Draggable>
+                        </a-tab-pane>
+                    </a-tabs>
+                </a-row>
+            </template>
+
+            <template v-if="element.type === 'form' || element.type === 'one-for-one'">
+                <a-row
+                    v-if="element.key"
+                    :key="element.key"
+                    :align="element.options.align"
+                    :class="{ active: selectWidget?.key === element.key }"
+                    :gutter="element.options.gutter ?? 0"
+                    :justify="element.options.justify"
+                    class="widget-col widget-view"
+                    type="flex"
+                    @click="handleItemClick(element)"
+                >
+                    <a-col :span="24">
+                        <Draggable
+                            :animation="200"
+                            :group="{ name: 'people' }"
+                            :list="element.children"
+                            :no-transition-on-drag="true"
+                            class="widget-col-list"
+                            ghostClass="ghost"
+                            handle=".drag-widget"
+                            item-key="key"
+                            @add="handleColMoveAdd($event, element.children, element)"
+                        >
+                            <template #item="{ element: childElement, index: childIndex }">
+                                <transition-group name="fade" tag="div">
+                                    <AntdWidgetFormItem
+                                        v-if="childElement.key"
+                                        :key="childElement.key"
+                                        :config="config"
+                                        :element="childElement"
+                                        :labelCol="config.labelCol"
+                                        :selectWidget="selectWidget"
+                                        class="drag-widget"
+                                        @copy="handleCopyClick(element.children, childIndex)"
+                                        @delete="handleDeleteClick(element.children, childIndex)"
+                                        @click.stop="handleItemClick(childElement)"
+                                    />
+                                </transition-group>
+                            </template>
+                        </Draggable>
+                    </a-col>
+                </a-row>
+            </template>
+
+            <template v-if="element.type === 'form-view'">
+                <FormView
+                    :apiConfig="element.options.apiConfig"
+                    :isPagination="element.options.isPagination"
+                    :itemId="element.options.itemId"
+                    :preloadType="element.options.preloadType"
+                    :showFormBorder="element.options.showFormBorder"
+                    :showIndex="element.options.showIndex"
+                />
+            </template>
+
+            <template v-if="element.type === 'iframe'">
+                <XjrIframe :url="element.options.url" />
+            </template>
+
+            <template v-if="element.type === 'card'">
+                <span>{{ element.options.title }}</span>
+                <a-row v-if="element.key" :key="element.key" :align="element.options.align" :class="{ active: selectWidget?.key === element.key }" :gutter="element.options.gutter ?? 0" :justify="element.options.justify" type="flex">
+                    <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
+                        <Draggable
+                            :animation="200"
+                            :group="{ name: 'people' }"
+                            :list="col.list"
+                            :no-transition-on-drag="true"
+                            class="widget-col-list"
+                            ghostClass="ghost"
+                            handle=".drag-widget"
+                            item-key="key"
+                            @add="handleColMoveAdd($event, col.list, element)"
+                        >
+                            <template #item="{ element: childElement, index: childIndex }">
+                                <div>
+                                    <AntdWidgetFormItem
+                                        v-if="childElement.key"
+                                        :key="childElement.key"
+                                        :childIndex="childIndex"
+                                        :config="config"
+                                        :element="childElement"
+                                        :labelCol="config.labelCol"
+                                        :selectWidget="selectWidget"
+                                        class="drag-widget"
+                                        @copy="handleCopyClick(col.list, childIndex)"
+                                        @delete="handleDeleteClick(col.list, childIndex)"
+                                        @click.stop="handleItemClick(childElement)"
+                                    />
+                                </div>
+                            </template>
+                        </Draggable>
+                    </a-col>
+                </a-row>
+            </template>
+            <template v-if="element.type === 'table-layout'">
+                <TableLayout v-if="element.key" :key="element.key" :element="element" @click="handleTableLayoutClick(element)">
+                    <template #tdElement="{ tdElement }">
+                        <div class="h-full">
+                            <Draggable
+                                :animation="200"
+                                :group="{ name: 'people' }"
+                                :list="tdElement.children"
+                                :no-transition-on-drag="true"
+                                :style="{
+                                    height: tdElement.height ? tdElement.height + 'px' : '',
+                                    minHeight: (tdElement.height || '42') + 'px',
+                                    overflow: 'hidden',
+                                    padding: '10px'
+                                }"
+                                ghostClass="ghost"
+                                handle=".drag-widget"
+                                item-key="key"
+                                @add="handleColMoveAdd($event, tdElement.children, element)"
+                            >
+                                <template #item="{ element: childElement, index: childIndex }">
+                                    <div>
+                                        <AntdWidgetFormItem
+                                            v-if="childElement.key"
+                                            :key="childElement.key"
+                                            :childIndex="childIndex"
+                                            :config="config"
+                                            :element="childElement"
+                                            :selectWidget="selectWidget"
+                                            class="drag-widget"
+                                            @copy="handleCopyClick(tdElement.children, childIndex)"
+                                            @delete="handleDeleteClick(tdElement.children, childIndex)"
+                                            @click.stop="handleItemClick(childElement)"
+                                        />
+                                    </div>
+                                </template>
+                            </Draggable>
+                        </div>
+                    </template>
+                </TableLayout>
+            </template>
+            <!-- <template v-if="element.type === 'one-for-one'">
+              <span>{{ element.options.title }}</span>
+              <a-row
+                type="flex"
+                v-if="element.key"
+                :key="element.key"
+                :class="{ active: selectWidget?.key === element.key }"
+                :gutter="element.options.gutter ?? 0"
+                :justify="element.options.justify"
+                :align="element.options.align"
               >
-                <template #item="{ element: childElement, index: childIndex }">
-                  <div>
-                    <AntdWidgetFormItem
-                      v-if="childElement.key"
-                      :key="childElement.key"
-                      :element="childElement"
-                      class="drag-widget"
-                      :config="config"
-                      :selectWidget="selectWidget"
-                      :labelCol="config.labelCol"
-                      @click.stop="handleItemClick(childElement)"
-                      @copy="handleCopyClick(col.list, childIndex)"
-                      @delete="handleDeleteClick(col.list, childIndex)"
-                    />
-                  </div>
+                <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
+                  <Draggable
+                    class="widget-col-list"
+                    item-key="key"
+                    ghostClass="ghost"
+                    handle=".drag-widget"
+                    :animation="200"
+                    :group="{ name: 'people' }"
+                    :no-transition-on-drag="true"
+                    :list="col.list"
+                    @add="handleColMoveAdd($event, col.list, element)"
+                  >
+                    <template #item="{ element: childElement, index: childIndex }">
+                      <div>
+                        <AntdWidgetFormItem
+                          v-if="childElement.key"
+                          :key="childElement.key"
+                          :element="childElement"
+                          class="drag-widget"
+                          :config="config"
+                          :selectWidget="selectWidget"
+                          :labelCol="config.labelCol"
+                          :childIndex="childIndex"
+                          @click.stop="handleItemClick(childElement)"
+                          @copy="handleCopyClick(col.list, childIndex)"
+                          @delete="handleDeleteClick(col.list, childIndex)"
+                        />
+                      </div>
+                    </template>
+                  </Draggable>
+                </a-col>
+              </a-row>
+            </template> -->
+
+            <template v-if="element.type === 'user'">
+                <a-input v-model:value="element.options.defaultValue" :disabled="element.options.disabled" :placeholder="element.options.placeholder" :size="config.size" :style="{ width: element.options.width }">
+                    <template v-if="element.options.prefix" #prefix>
+                        <Icon :icon="element.options.prefix" />
+                    </template>
+                    <template v-if="element.options.suffix" #suffix>
+                        <Icon :icon="element.options.suffix" />
+                    </template>
+                </a-input>
+            </template>
+            <template v-if="element.type === 'computational'">
+                <Computation
+                    v-model:value="element.options.defaultValue"
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :disabled="element.options.disabled"
+                    :maxlength="parseInt(element.options.maxlength)"
+                    :placeholder="element.options.placeholder"
+                    :prefix="element.options.prefix"
+                    :readonly="element.options.readonly"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                />
+            </template>
+
+            <template v-if="element.type === 'money-chinese'">
+                <MoneyChineseInput
+                    v-model:value="element.options.defaultValue"
+                    :addonAfter="element.options.addonAfter"
+                    :addonBefore="element.options.addonBefore"
+                    :disabled="element.options.disabled"
+                    :maxlength="parseInt(element.options.maxlength)"
+                    :placeholder="element.options.placeholder"
+                    :prefix="element.options.prefix"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                    :suffix="element.options.suffix"
+                />
+            </template>
+            <template v-if="element.type === 'info'">
+                <CommonInfo :infoType="element.options.infoType" :placeholder="element.options.placeholder" :size="config.size" :style="{ width: element.options.width }" disabled />
+            </template>
+            <template v-if="element.type === 'organization'">
+                <SelectDepartment v-model:value="element.options.defaultValue" :disabled="element.options.disabled" :placeholder="element.options.placeholder" :size="config.size" :style="{ width: element.options.width }" />
+            </template>
+            <template v-if="element.type === 'map'">
+                <SelectMap
+                    v-model:value="element.options.defaultValue"
+                    :address="element.options.address"
+                    :disabled="element.options.disabled"
+                    :latiAndLong="element.options.latiAndLong"
+                    :mainKey="element.bindTable"
+                    :placeholder="element.options.placeholder"
+                    :prefix="element.options.prefix"
+                    :size="config.size"
+                    :style="{ width: element.options.width }"
+                    :suffix="element.options.suffix"
+                    :tableIndex="childIndex"
+                >
+                </SelectMap>
+            </template>
+            <template v-if="element.type === 'qrcode'">
+                <XjrQrcode :apiConfig="element.options.apiConfig" :codeType="element.options.codeType" :defaultValue="element.options.defaultValue" :disabled="element.options.disabled" :style="{ width: element.options.width }"></XjrQrcode>
+            </template>
+
+            <template v-if="element.type === 'auto-complete'">
+                <ApiComplete
+                    v-model:value="element.options.defaultValue"
+                    :apiConfig="element.options.apiConfig"
+                    :datasourceType="element.options.datasourceType"
+                    :disabled="element.options.disabled"
+                    :labelField="element.options.labelField"
+                    :options="element.options.staticOptions"
+                    :placeholder="element.options.placeholder"
+                    :style="{ width: element.options.width }"
+                    :valueField="element.options.valueField"
+                />
+            </template>
+        </a-form-item>
+        <div
+            v-if="selectWidget?.key === element.key"
+            :class="{
+                'widget-col-action': element.type === 'grid'
+            }"
+            class="widget-view-action"
+        >
+            <a-popover v-if="element.type === 'table-layout'" placement="top">
+                <template #content>
+                    <span>添加行</span>
                 </template>
-              </Draggable>
-            </a-tab-pane>
-          </a-tabs>
-        </a-row>
-      </template>
-
-      <template v-if="element.type === 'form' || element.type === 'one-for-one'">
-        <a-row
-          class="widget-col widget-view"
-          type="flex"
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-          :gutter="element.options.gutter ?? 0"
-          :justify="element.options.justify"
-          :align="element.options.align"
-          @click="handleItemClick(element)"
-        >
-          <a-col :span="24">
-            <Draggable
-              class="widget-col-list"
-              item-key="key"
-              ghostClass="ghost"
-              handle=".drag-widget"
-              :animation="200"
-              :group="{ name: 'people' }"
-              :no-transition-on-drag="true"
-              :list="element.children"
-              @add="handleColMoveAdd($event, element.children, element)"
-            >
-              <template #item="{ element: childElement, index: childIndex }">
-                <transition-group name="fade" tag="div">
-                  <AntdWidgetFormItem
-                    v-if="childElement.key"
-                    :key="childElement.key"
-                    :element="childElement"
-                    class="drag-widget"
-                    :config="config"
-                    :selectWidget="selectWidget"
-                    :labelCol="config.labelCol"
-                    @click.stop="handleItemClick(childElement)"
-                    @copy="handleCopyClick(element.children, childIndex)"
-                    @delete="handleDeleteClick(element.children, childIndex)"
-                  />
-                </transition-group>
-              </template>
-            </Draggable>
-          </a-col>
-        </a-row>
-      </template>
-
-      <template v-if="element.type === 'form-view'">
-        <FormView
-          :preloadType="element.options.preloadType"
-          :apiConfig="element.options.apiConfig"
-          :itemId="element.options.itemId"
-          :isPagination="element.options.isPagination"
-          :showIndex="element.options.showIndex"
-          :showFormBorder="element.options.showFormBorder"
-        />
-      </template>
-
-      <template v-if="element.type === 'iframe'">
-        <XjrIframe :url="element.options.url" />
-      </template>
-
-      <template v-if="element.type === 'card'">
-        <span>{{ element.options.title }}</span>
-        <a-row
-          type="flex"
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-          :gutter="element.options.gutter ?? 0"
-          :justify="element.options.justify"
-          :align="element.options.align"
-        >
-          <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
-            <Draggable
-              class="widget-col-list"
-              item-key="key"
-              ghostClass="ghost"
-              handle=".drag-widget"
-              :animation="200"
-              :group="{ name: 'people' }"
-              :no-transition-on-drag="true"
-              :list="col.list"
-              @add="handleColMoveAdd($event, col.list, element)"
-            >
-              <template #item="{ element: childElement, index: childIndex }">
-                <div>
-                  <AntdWidgetFormItem
-                    v-if="childElement.key"
-                    :key="childElement.key"
-                    :element="childElement"
-                    class="drag-widget"
-                    :config="config"
-                    :selectWidget="selectWidget"
-                    :labelCol="config.labelCol"
-                    :childIndex="childIndex"
-                    @click.stop="handleItemClick(childElement)"
-                    @copy="handleCopyClick(col.list, childIndex)"
-                    @delete="handleDeleteClick(col.list, childIndex)"
-                  />
-                </div>
-              </template>
-            </Draggable>
-          </a-col>
-        </a-row>
-      </template>
-      <template v-if="element.type === 'table-layout'">
-        <TableLayout
-          :element="element"
-          @click="handleTableLayoutClick(element)"
-          v-if="element.key"
-          :key="element.key"
-        >
-          <template #tdElement="{ tdElement }">
-            <div class="h-full">
-              <Draggable
-                :style="{
-                  height: tdElement.height ? tdElement.height + 'px' : '',
-                  minHeight: (tdElement.height || '42') + 'px',
-                  overflow: 'hidden',
-                  padding: '10px',
-                }"
-                item-key="key"
-                ghostClass="ghost"
-                handle=".drag-widget"
-                :animation="200"
-                :group="{ name: 'people' }"
-                :no-transition-on-drag="true"
-                :list="tdElement.children"
-                @add="handleColMoveAdd($event, tdElement.children, element)"
-              >
-                <template #item="{ element: childElement, index: childIndex }">
-                  <div>
-                    <AntdWidgetFormItem
-                      v-if="childElement.key"
-                      :key="childElement.key"
-                      :element="childElement"
-                      class="drag-widget"
-                      :config="config"
-                      :selectWidget="selectWidget"
-                      :childIndex="childIndex"
-                      @click.stop="handleItemClick(childElement)"
-                      @copy="handleCopyClick(tdElement.children, childIndex)"
-                      @delete="handleDeleteClick(tdElement.children, childIndex)"
-                    />
-                  </div>
+                <span class="svgicon icon-add">
+                    <SvgIcon name="add" @click.stop="$emit('addRow')" />
+                </span>
+            </a-popover>
+            <a-popover v-if="element.type === 'table-layout'" placement="top">
+                <template #content>
+                    <span>添加列</span>
                 </template>
-              </Draggable>
-            </div>
-          </template>
-        </TableLayout>
-      </template>
-      <!-- <template v-if="element.type === 'one-for-one'">
-        <span>{{ element.options.title }}</span>
-        <a-row
-          type="flex"
-          v-if="element.key"
-          :key="element.key"
-          :class="{ active: selectWidget?.key === element.key }"
-          :gutter="element.options.gutter ?? 0"
-          :justify="element.options.justify"
-          :align="element.options.align"
-        >
-          <a-col v-for="(col, colIndex) of element.layout" :key="colIndex" :span="col.span ?? 0">
-            <Draggable
-              class="widget-col-list"
-              item-key="key"
-              ghostClass="ghost"
-              handle=".drag-widget"
-              :animation="200"
-              :group="{ name: 'people' }"
-              :no-transition-on-drag="true"
-              :list="col.list"
-              @add="handleColMoveAdd($event, col.list, element)"
-            >
-              <template #item="{ element: childElement, index: childIndex }">
-                <div>
-                  <AntdWidgetFormItem
-                    v-if="childElement.key"
-                    :key="childElement.key"
-                    :element="childElement"
-                    class="drag-widget"
-                    :config="config"
-                    :selectWidget="selectWidget"
-                    :labelCol="config.labelCol"
-                    :childIndex="childIndex"
-                    @click.stop="handleItemClick(childElement)"
-                    @copy="handleCopyClick(col.list, childIndex)"
-                    @delete="handleDeleteClick(col.list, childIndex)"
-                  />
-                </div>
-              </template>
-            </Draggable>
-          </a-col>
-        </a-row>
-      </template> -->
+                <span class="svgicon icon-add">
+                    <SvgIcon name="add" @click.stop="$emit('addCol')" />
+                </span>
+            </a-popover>
 
-      <template v-if="element.type === 'user'">
-        <a-input
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :placeholder="element.options.placeholder"
-          :disabled="element.options.disabled"
-          :style="{ width: element.options.width }"
+            <span class="svgicon icon-copy">
+                <SvgIcon name="copy" @click.stop="$emit('copy')" />
+            </span>
+            <span class="svgicon icon-delete">
+                <SvgIcon name="delete" @click.stop="$emit('delete')" />
+            </span>
+        </div>
+        <div
+            v-if="selectWidget?.key === element.key"
+            :class="{
+                'widget-col-action': element.type === 'grid'
+            }"
+            class="widget-view-drag"
         >
-          <template #prefix v-if="element.options.prefix">
-            <Icon :icon="element.options.prefix" />
-          </template>
-          <template #suffix v-if="element.options.suffix">
-            <Icon :icon="element.options.suffix" />
-          </template>
-        </a-input>
-      </template>
-      <template v-if="element.type === 'computational'">
-        <Computation
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :maxlength="parseInt(element.options.maxlength)"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :disabled="element.options.disabled"
-          :readonly="element.options.readonly"
-          :prefix="element.options.prefix"
-        />
-      </template>
-
-      <template v-if="element.type === 'money-chinese'">
-        <MoneyChineseInput
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :maxlength="parseInt(element.options.maxlength)"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :addonBefore="element.options.addonBefore"
-          :addonAfter="element.options.addonAfter"
-          :disabled="element.options.disabled"
-          :prefix="element.options.prefix"
-          :suffix="element.options.suffix"
-        />
-      </template>
-      <template v-if="element.type === 'info'">
-        <CommonInfo
-          :size="config.size"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :infoType="element.options.infoType"
-          disabled
-        />
-      </template>
-      <template v-if="element.type === 'organization'">
-        <SelectDepartment
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :style="{ width: element.options.width }"
-          :placeholder="element.options.placeholder"
-          :disabled="element.options.disabled"
-        />
-      </template>
-      <template v-if="element.type === 'map'">
-        <SelectMap
-          :size="config.size"
-          v-model:value="element.options.defaultValue"
-          :placeholder="element.options.placeholder"
-          :disabled="element.options.disabled"
-          :prefix="element.options.prefix"
-          :suffix="element.options.suffix"
-          :address="element.options.address"
-          :latiAndLong="element.options.latiAndLong"
-          :tableIndex="childIndex"
-          :mainKey="element.bindTable"
-          :style="{ width: element.options.width }"
-        >
-        </SelectMap>
-      </template>
-      <template v-if="element.type === 'qrcode'">
-        <XjrQrcode
-          :defaultValue="element.options.defaultValue"
-          :disabled="element.options.disabled"
-          :apiConfig="element.options.apiConfig"
-          :codeType="element.options.codeType"
-          :style="{ width: element.options.width }"
-        >
-        </XjrQrcode>
-      </template>
-
-      <template v-if="element.type === 'auto-complete'">
-        <ApiComplete
-          v-model:value="element.options.defaultValue"
-          :placeholder="element.options.placeholder"
-          :disabled="element.options.disabled"
-          :options="element.options.staticOptions"
-          :style="{ width: element.options.width }"
-          :labelField="element.options.labelField"
-          :valueField="element.options.valueField"
-          :datasourceType="element.options.datasourceType"
-          :apiConfig="element.options.apiConfig"
-        />
-      </template>
-    </a-form-item>
-    <div
-      class="widget-view-action"
-      :class="{
-        'widget-col-action': element.type === 'grid',
-      }"
-      v-if="selectWidget?.key === element.key"
-    >
-      <a-popover placement="top" v-if="element.type === 'table-layout'">
-        <template #content>
-          <span>添加行</span>
-        </template>
-        <span class="svgicon icon-add">
-          <SvgIcon name="add" @click.stop="$emit('addRow')" />
-        </span>
-      </a-popover>
-      <a-popover placement="top" v-if="element.type === 'table-layout'">
-        <template #content>
-          <span>添加列</span>
-        </template>
-        <span class="svgicon icon-add">
-          <SvgIcon name="add" @click.stop="$emit('addCol')" />
-        </span>
-      </a-popover>
-
-      <span class="svgicon icon-copy">
-        <SvgIcon name="copy" @click.stop="$emit('copy')" />
-      </span>
-      <span class="svgicon icon-delete">
-        <SvgIcon name="delete" @click.stop="$emit('delete')" />
-      </span>
+            <span class="svgicon icon-move">
+                <SvgIcon className="drag-widget" name="move" />
+            </span>
+        </div>
     </div>
-    <div
-      class="widget-view-drag"
-      :class="{
-        'widget-col-action': element.type === 'grid',
-      }"
-      v-if="selectWidget?.key === element.key"
-    >
-      <span class="svgicon icon-move">
-        <SvgIcon name="move" className="drag-widget" />
-      </span>
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, inject, PropType, computed, watch, ref, Ref } from 'vue';
-  import TableLayout from '/@/components/Form/src/components/TableLayout.vue';
-  import { SvgIcon, Icon } from '/@/components/Icon';
-  import { RichTextEditor } from '/@/components/RichTextEditor/index';
-  import AutoCodeRule from '/@/components/Form/src/components/AutoCodeRule.vue';
-  import ApiSelect from '../../../Select/src/Select.vue';
-  import ApiCascader from '/@/components/Form/src/components/ApiCascader.vue';
-  import { XjrSwitch } from '/@/components/Switch';
-  import { ColorPicker } from '/@/components/ColorPicker';
-  import { Computation } from '/@/components/Computation';
+    import { defineComponent, inject, PropType, computed, watch, ref, Ref } from 'vue';
+    import TableLayout from '/@/components/Form/src/components/TableLayout.vue';
+    import { SvgIcon, Icon } from '/@/components/Icon';
+    import { RichTextEditor } from '/@/components/RichTextEditor/index';
+    import AutoCodeRule from '/@/components/Form/src/components/AutoCodeRule.vue';
+    import ApiSelect from '../../../Select/src/Select.vue';
+    import ApiCascader from '/@/components/Form/src/components/ApiCascader.vue';
+    import { XjrSwitch } from '/@/components/Switch';
+    import { ColorPicker } from '/@/components/ColorPicker';
+    import { Computation } from '/@/components/Computation';
 
-  import { AssociateSelect } from '/@/components/AssociateSelect';
-  import ApiRadioGroup from '/@/components/Form/src/components/ApiRadioGroup.vue';
-  import ApiCheckboxGroup from '/@/components/Form/src/components/ApiCheckboxGroup.vue';
-  import SelectArea from '/@/components/Form/src/components/SelectArea.vue';
-  import CommonInfo from '/@/components/Form/src/components/CommonInfo.vue';
-  import SelectDepartment from '/@/components/Form/src/components/SelectDepartment.vue';
-  import SelectMap from '/@/components/Form/src/components/SelectMap.vue';
-  import XjrQrcode from '/@/components/Form/src/components/QrCode.vue';
-  import ApiComplete from '/@/components/Form/src/components/ApiComplete.vue';
-  import MoneyChineseInput from '/@/components/Form/src/components/MoneyChineseInput.vue';
-  import FormView from '/@/components/Form/src/components/FormView.vue';
-  import XjrIframe from '/@/components/Form/src/components/XjrIframe.vue';
-  import { TimePicker } from '/@/components/TimePicker';
-  import { XjrDatePicker } from '/@/components/DatePicker';
-  import Upload from '/@/components/Form/src/components/Upload.vue';
-  import Image from '/@/components/Form/src/components/Image.vue';
-  import {
-    WidgetForm,
-    noHaveTitle,
-    noHaveField,
-    noHaveTableAndField,
-    subFormUnUseComponents,
-    oneForOneUnUseComponents,
-    TableCell,
-    TableTh,
-  } from '../types';
-  import Draggable from 'vuedraggable';
-  import { buildUUID } from '/@/utils/uuid';
-  import { changeToPinyin } from '/@/utils/event/design';
-  import { random } from 'lodash-es';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
-  export default defineComponent({
-    name: 'AntdWidgetFormItem',
-    components: {
-      SvgIcon,
-      RichTextEditor,
-      Draggable,
-      Icon,
-      AutoCodeRule,
-      ApiSelect,
-      ApiCascader,
-      AssociateSelect,
-      ApiRadioGroup,
-      ApiCheckboxGroup,
-      SelectArea,
-      CommonInfo,
-      SelectDepartment,
-      MoneyChineseInput,
-      XjrSwitch,
-      ColorPicker,
-      Computation,
-      TimePicker,
-      XjrDatePicker,
-      SelectMap,
-      XjrQrcode,
-      Upload,
-      ApiComplete,
-      FormView,
-      XjrIframe,
-      TableLayout,
-      Image,
-    },
-    props: {
-      config: {
-        type: Object as PropType<WidgetForm['config']>,
-        required: true,
-      },
-      element: {
-        type: Object,
-        required: true,
-      },
-      selectWidget: {
-        type: Object,
-      },
-      labelCol: {
-        type: Object,
-        default: () => {},
-      },
-      childIndex: {
-        type: Number,
-      },
-    },
-    emits: ['copy', 'delete', 'update:widgetFormSelect', 'addRow', 'addCol'],
-    setup(props) {
-      const { notification } = useMessage();
-      let state = inject('state') as any;
-      const tablecell = inject<Ref<TableCell>>('tableCell');
-      const tableth = inject<Ref<TableTh>>('tableTh');
-      const handleFilterOption = (input: string, option) => {
-        const label = option.label || option.name;
-        return label.toLowerCase().includes(input.toLowerCase());
-      };
-      const updateKey = ref(0);
-      const uploadValue = ref();
+    import { AssociateSelect } from '/@/components/AssociateSelect';
+    import ApiRadioGroup from '/@/components/Form/src/components/ApiRadioGroup.vue';
+    import ApiCheckboxGroup from '/@/components/Form/src/components/ApiCheckboxGroup.vue';
+    import SelectArea from '/@/components/Form/src/components/SelectArea.vue';
+    import CommonInfo from '/@/components/Form/src/components/CommonInfo.vue';
+    import SelectDepartment from '/@/components/Form/src/components/SelectDepartment.vue';
+    import SelectMap from '/@/components/Form/src/components/SelectMap.vue';
+    import XjrQrcode from '/@/components/Form/src/components/QrCode.vue';
+    import ApiComplete from '/@/components/Form/src/components/ApiComplete.vue';
+    import MoneyChineseInput from '/@/components/Form/src/components/MoneyChineseInput.vue';
+    import FormView from '/@/components/Form/src/components/FormView.vue';
+    import XjrIframe from '/@/components/Form/src/components/XjrIframe.vue';
+    import { TimePicker } from '/@/components/TimePicker';
+    import { XjrDatePicker } from '/@/components/DatePicker';
+    import Upload from '/@/components/Form/src/components/Upload.vue';
+    import Image from '/@/components/Form/src/components/Image.vue';
+    import { WidgetForm, noHaveTitle, noHaveField, noHaveTableAndField, subFormUnUseComponents, oneForOneUnUseComponents, TableCell, TableTh } from '../types';
+    import Draggable from 'vuedraggable';
+    import { buildUUID } from '/@/utils/uuid';
+    import { changeToPinyin } from '/@/utils/event/design';
+    import { random } from 'lodash-es';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { useI18n } from '/@/hooks/web/useI18n';
 
-      const widgetForm = inject('widgetForm') as any;
-
-      //一对一组件是否包含无法使用的组件
-      const oneForOneIsHaveUnUseComp = (compList: any[], isChild: boolean = false): boolean => {
-        for (let item of compList) {
-          //如果当前遍历到的组件是一对一
-          if (item.type === 'one-for-one') {
-            //判断一对一组件下面
-            const result = oneForOneIsHaveUnUseComp(item.children, true);
-            if (result) return true;
-          }
-          if (item.type === 'tab' || item.type === 'card' || item.type === 'grid') {
-            for (const child of item.layout) {
-              const result = oneForOneIsHaveUnUseComp(child.list, isChild);
-              if (result) return true;
-            }
-          }
-          //如果遍历的是one-for-one 组件里面的子组件 就需要判断是否包含不允许使用的组件
-          if (isChild && oneForOneUnUseComponents.includes(item.type)) {
-            return true;
-          }
-        }
-        return false;
-      };
-
-      const handleColMoveAdd = (event: any, list: any, parent: any = null) => {
-        const { newIndex } = event;
-
-        if (oneForOneIsHaveUnUseComp(widgetForm.value.list)) {
-          list.splice(newIndex, 1);
-          notification.error({
-            message: t('提示'),
-            description: t('单表组件无法使用子表单组件 以及 单表组件！'),
-          });
-          return;
-        }
-
-        //如果parent参数不为空 就是子表单添加事件 如果是上级未绑定表不允许添加子组件
-        if (
-          parent &&
-          (parent.type === 'form' || parent.type === 'one-for-one') &&
-          !parent.bindTable
-        ) {
-          list.splice(newIndex, 1);
-          notification.error({
-            message: t('提示'),
-            description:
-              parent.type === 'form'
-                ? t('子表单组件未绑定表，不允许添加子组件')
-                : '单表组件未绑定表，不允许添加子组件',
-          });
-          return;
-        }
-        //如果parent参数不为空 就是子表单添加事件 判断是否为子表单不允许的组件
-        if (
-          parent &&
-          parent.type === 'form' &&
-          subFormUnUseComponents.includes(list[newIndex].type)
-        ) {
-          list.splice(newIndex, 1);
-          notification.error({
-            message: t('提示'),
-            description: t('子表单组件不允许使用此类组件'),
-          });
-          return;
-        }
-
-        //如果parent参数不为空 就是子表单添加事件 判断是否为子表单不允许的组件
-        if (
-          parent &&
-          parent.type === 'one-for-one' &&
-          oneForOneUnUseComponents.includes(list[newIndex].type)
-        ) {
-          list.splice(newIndex, 1);
-          notification.error({
-            message: t('提示'),
-            description: t('单表组件无法使用子表单组件 以及 单表组件！'),
-          });
-          return;
-        }
-
-        //递归向最上级查 如果最上级是单表组件 所有下级组件不允许使用 表格组件 与  单表组件
-        if (parent && parent.hasOwnProperty('children')) {
-        }
-
-        if (parent && parent.bindTable) {
-          //如果parent参数不为空 就是子表单添加事件  并且已经绑定过表  所有子组件也默认绑定
-          list[newIndex].bindTable = parent.bindTable;
-        }
-        if (!list[newIndex].key) {
-          const key = buildUUID().replaceAll('-', '');
-          list[newIndex] = JSON.parse(JSON.stringify(list[newIndex]));
-          list[newIndex].key = key;
-        }
-
-        //如果是父级是 子表单组件 默认把下级组件 都加上标识
-        if (parent && (parent.type === 'form' || parent.isSubFormChild)) {
-          list[newIndex].isSubFormChild = true;
-        } else {
-          //从子表拖入布局组件时
-          list[newIndex].isSubFormChild = false;
-        }
-
-        if (parent && (parent.type === 'one-for-one' || parent.isSingleFormChild)) {
-          list[newIndex].isSingleFormChild = true;
-        } else {
-          //从子表拖入布局组件时
-          list[newIndex].isSingleFormChild = false;
-        }
-
-        //判断是否是栅格布局内组件
-        list[newIndex].isGridChild = parent && parent.type === 'grid';
-        let bindTable = '';
-        if (['tab', 'grid', 'card'].includes(parent.type)) {
-          bindTable = parent.bindTable;
-        }
-        addBindTableAndField(list[newIndex], bindTable);
-      };
-
-      const isFieldUpper = inject<Ref<boolean>>('isFieldUpper', ref(false));
-      const designType = inject<string>('designType');
-      let mainTableName;
-      if (designType !== 'data') {
-        mainTableName = inject<string>('mainTableName');
-      }
-
-      watch(
-        () => props.element.label,
-        (val) => {
-          if (val && designType !== 'data') {
-            props.element.bindField = (
-              changeToPinyin(val, isFieldUpper.value) + random(1000, 9999)
-            ).substr(0, 30);
-          }
+    const { t } = useI18n();
+    export default defineComponent({
+        name: 'AntdWidgetFormItem',
+        components: {
+            SvgIcon,
+            RichTextEditor,
+            Draggable,
+            Icon,
+            AutoCodeRule,
+            ApiSelect,
+            ApiCascader,
+            AssociateSelect,
+            ApiRadioGroup,
+            ApiCheckboxGroup,
+            SelectArea,
+            CommonInfo,
+            SelectDepartment,
+            MoneyChineseInput,
+            XjrSwitch,
+            ColorPicker,
+            Computation,
+            TimePicker,
+            XjrDatePicker,
+            SelectMap,
+            XjrQrcode,
+            Upload,
+            ApiComplete,
+            FormView,
+            XjrIframe,
+            TableLayout,
+            Image
         },
-      );
-      watch(
-        () => props.element,
-        () => {
-          updateKey.value++;
+        props: {
+            config: {
+                type: Object as PropType<WidgetForm['config']>,
+                required: true
+            },
+            element: {
+                type: Object,
+                required: true
+            },
+            selectWidget: {
+                type: Object
+            },
+            labelCol: {
+                type: Object,
+                default: () => {
+                }
+            },
+            childIndex: {
+                type: Number
+            }
         },
-        {
-          deep: true,
-        },
-      );
-      const itemLabelCol = computed(() => {
-        return props.element.options.span ? { span: props.element.options.span } : props.labelCol;
-      });
+        emits: ['copy', 'delete', 'update:widgetFormSelect', 'addRow', 'addCol'],
+        setup(props) {
+            const { notification } = useMessage();
+            let state = inject('state') as any;
+            const tablecell = inject<Ref<TableCell>>('tableCell');
+            const tableth = inject<Ref<TableTh>>('tableTh');
+            const handleFilterOption = (input: string, option) => {
+                const label = option.label || option.name;
+                return label.toLowerCase().includes(input.toLowerCase());
+            };
+            const updateKey = ref(0);
+            const uploadValue = ref();
 
-      const handleItemClick = (row: any) => {
-        state.widgetFormSelect = row;
-        if (row.type === 'table-layout') {
-          if (tablecell) tablecell.value = {};
-          if (tableth) tableth.value = {};
-        }
-      };
-      const handleTableLayoutClick = (row: any) => {
-        state.widgetFormSelect = row;
-      };
+            const widgetForm = inject('widgetForm') as any;
 
-      const handleCopyClick = (list: any, index: number) => {
-        const newObj = JSON.parse(JSON.stringify(list[index]));
-        newObj.key = buildUUID().replaceAll('-', '');
-        newObj.bindField = '';
+            //一对一组件是否包含无法使用的组件
+            const oneForOneIsHaveUnUseComp = (compList: any[], isChild: boolean = false): boolean => {
+                for (let item of compList) {
+                    //如果当前遍历到的组件是一对一
+                    if (item.type === 'one-for-one') {
+                        //判断一对一组件下面
+                        const result = oneForOneIsHaveUnUseComp(item.children, true);
+                        if (result) return true;
+                    }
+                    if (item.type === 'tab' || item.type === 'card' || item.type === 'grid') {
+                        for (const child of item.layout) {
+                            const result = oneForOneIsHaveUnUseComp(child.list, isChild);
+                            if (result) return true;
+                        }
+                    }
+                    //如果遍历的是one-for-one 组件里面的子组件 就需要判断是否包含不允许使用的组件
+                    if (isChild && oneForOneUnUseComponents.includes(item.type)) {
+                        return true;
+                    }
+                }
+                return false;
+            };
 
-        addBindTableAndField(newObj);
-        copyLayoutData([newObj], newObj.bindTable);
-        list.push(newObj);
-      };
+            const handleColMoveAdd = (event: any, list: any, parent: any = null) => {
+                const { newIndex } = event;
 
-      const copyLayoutData = (data, tableName) => {
-        data.map((item) => {
-          if (['tab', 'grid', 'card'].includes(item.type)) {
-            item.bindTable = '';
-            item.key = buildUUID().replaceAll('-', '');
-            addBindTableAndField(item, tableName);
-            for (const child of item.layout!) {
-              copyLayoutData(child.list, tableName);
+                if (oneForOneIsHaveUnUseComp(widgetForm.value.list)) {
+                    list.splice(newIndex, 1);
+                    notification.error({
+                        message: t('提示'),
+                        description: t('单表组件无法使用子表单组件 以及 单表组件！')
+                    });
+                    return;
+                }
+
+                //如果parent参数不为空 就是子表单添加事件 如果是上级未绑定表不允许添加子组件
+                if (parent && (parent.type === 'form' || parent.type === 'one-for-one') && !parent.bindTable) {
+                    list.splice(newIndex, 1);
+                    notification.error({
+                        message: t('提示'),
+                        description: parent.type === 'form' ? t('子表单组件未绑定表，不允许添加子组件') : '单表组件未绑定表，不允许添加子组件'
+                    });
+                    return;
+                }
+                //如果parent参数不为空 就是子表单添加事件 判断是否为子表单不允许的组件
+                if (parent && parent.type === 'form' && subFormUnUseComponents.includes(list[newIndex].type)) {
+                    list.splice(newIndex, 1);
+                    notification.error({
+                        message: t('提示'),
+                        description: t('子表单组件不允许使用此类组件')
+                    });
+                    return;
+                }
+
+                //如果parent参数不为空 就是子表单添加事件 判断是否为子表单不允许的组件
+                if (parent && parent.type === 'one-for-one' && oneForOneUnUseComponents.includes(list[newIndex].type)) {
+                    list.splice(newIndex, 1);
+                    notification.error({
+                        message: t('提示'),
+                        description: t('单表组件无法使用子表单组件 以及 单表组件！')
+                    });
+                    return;
+                }
+
+                //递归向最上级查 如果最上级是单表组件 所有下级组件不允许使用 表格组件 与  单表组件
+                if (parent && parent.hasOwnProperty('children')) {
+                }
+
+                if (parent && parent.bindTable) {
+                    //如果parent参数不为空 就是子表单添加事件  并且已经绑定过表  所有子组件也默认绑定
+                    list[newIndex].bindTable = parent.bindTable;
+                }
+                if (!list[newIndex].key) {
+                    const key = buildUUID().replaceAll('-', '');
+                    list[newIndex] = JSON.parse(JSON.stringify(list[newIndex]));
+                    list[newIndex].key = key;
+                }
+
+                //如果是父级是 子表单组件 默认把下级组件 都加上标识
+                if (parent && (parent.type === 'form' || parent.isSubFormChild)) {
+                    list[newIndex].isSubFormChild = true;
+                } else {
+                    //从子表拖入布局组件时
+                    list[newIndex].isSubFormChild = false;
+                }
+
+                if (parent && (parent.type === 'one-for-one' || parent.isSingleFormChild)) {
+                    list[newIndex].isSingleFormChild = true;
+                } else {
+                    //从子表拖入布局组件时
+                    list[newIndex].isSingleFormChild = false;
+                }
+
+                //判断是否是栅格布局内组件
+                list[newIndex].isGridChild = parent && parent.type === 'grid';
+                let bindTable = '';
+                if (['tab', 'grid', 'card'].includes(parent.type)) {
+                    bindTable = parent.bindTable;
+                }
+                addBindTableAndField(list[newIndex], bindTable);
+            };
+
+            const isFieldUpper = inject<Ref<boolean>>('isFieldUpper', ref(false));
+            const designType = inject<string>('designType');
+            let mainTableName;
+            if (designType !== 'data') {
+                mainTableName = inject<string>('mainTableName');
             }
-          } else if (['form', 'one-for-one'].includes(item.type)) {
-            item.key = buildUUID().replaceAll('-', '');
-            addBindTableAndField(item);
-            copyLayoutData(item.children, item.bindTable);
-          } else {
-            item.bindField = '';
-            item.bindTable = tableName;
-            item.key = buildUUID().replaceAll('-', '');
-            addBindTableAndField(item, tableName);
-          }
-        });
-      };
-      const handleDeleteClick = async (list: any, index: number) => {
-        await deleteAdoptedCalc(index, list);
-        list.splice(index, 1);
-      };
 
-      const addBindTableAndField = (component: any, bindTable?) => {
-        //非代码优先、需要绑定字段、组件没有绑定字段的情况下新增绑定字段
-        if (designType !== 'data') {
-          const rangeComponents = ['time-range', 'date-range'];
-          if (rangeComponents.includes(component.type)) {
-            component.bindStartTime =
-              changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
-            component.bindEndTime =
-              changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
-          } else if (!noHaveField.includes(component.type) && !component.bindField) {
-            component.bindField =
-              changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
-          }
-          if (
-            !noHaveTableAndField.includes(component.type) &&
-            !component.isSubFormChild &&
-            !component.isSingleFormChild
-          ) {
-            if (component.type === 'form' || component.type === 'one-for-one') {
-              component.bindTable = isFieldUpper.value
-                ? `${mainTableName.value}_CHILD_${random(1000, 9999)}`
-                : `${mainTableName.value}_child_${random(1000, 9999)}`;
-            } else if (!noHaveTableAndField.includes(component.type)) {
-              component.bindTable = bindTable ? bindTable : mainTableName.value;
-            }
-          }
-        }
-        if (component.isGridChild) component.options.span = 7;
-      };
-
-      //删除引用已删除的财务组件的计算式配置
-      const deleteAdoptedCalc = (index: number, list: any[]) => {
-        const component = list[index];
-        if (['computational', 'money-chinese'].includes(component.type)) {
-          component.options.beAdoptedComponent?.map((key) => {
-            getLayoutComponent(state.widgetForm.list, key);
-          });
-        }
-      };
-
-      const getLayoutComponent = (list, key) => {
-        list?.map((item) => {
-          if (['tab', 'grid', 'card'].includes(item.type)) {
-            for (const child of item.layout) {
-              getLayoutComponent(child.list, key);
-            }
-          } else if (item.type === 'table-layout') {
-            for (const child of item.layout) {
-              for (const list of child.list) {
-                getLayoutComponent(list.children, key);
-              }
-            }
-          } else if (item.type === 'form') {
-            item.children.map((child: any) => {
-              if (['computational', 'money-chinese'].includes(child.type) && child.key === key) {
-                child.options.computationalConfig = [];
-                child.options.computationalConfigValue = '== 请填写计算式配置 ==';
-              }
+            watch(
+                () => props.element.label,
+                (val) => {
+                    if (val && designType !== 'data') {
+                        props.element.bindField = (changeToPinyin(val, isFieldUpper.value) + random(1000, 9999)).substr(0, 30);
+                    }
+                }
+            );
+            watch(
+                () => props.element,
+                () => {
+                    updateKey.value++;
+                },
+                {
+                    deep: true
+                }
+            );
+            const itemLabelCol = computed(() => {
+                const options = props.element.options;
+                if (options.labelWidthMode !== 'fix') {
+                    return props.element.options.span ? { span: props.element.options.span } : props.labelCol;
+                } else {
+                    return {
+                        style: {
+                            width: `${options.labelFixWidth || 120}px`
+                        }
+                    };
+                }
             });
-          } else {
-            if (['computational', 'money-chinese'].includes(item.type) && item.key === key) {
-              item.options.computationalConfig = [];
-              item.options.computationalConfigValue = '== 请填写计算式配置 ==';
-            }
-          }
-        });
-      };
 
-      return {
-        uploadValue,
-        itemLabelCol,
-        handleItemClick,
-        handleTableLayoutClick,
-        handleCopyClick,
-        handleDeleteClick,
-        handleFilterOption,
-        noHaveTitle,
-        handleColMoveAdd,
-        addBindTableAndField,
-        deleteAdoptedCalc,
-        t,
-        updateKey,
-      };
-    },
-  });
+            const handleItemClick = (row: any) => {
+                state.widgetFormSelect = row;
+                if (row.type === 'table-layout') {
+                    if (tablecell) tablecell.value = {};
+                    if (tableth) tableth.value = {};
+                }
+            };
+            const handleTableLayoutClick = (row: any) => {
+                state.widgetFormSelect = row;
+            };
+
+            const handleCopyClick = (list: any, index: number) => {
+                const newObj = JSON.parse(JSON.stringify(list[index]));
+                newObj.key = buildUUID().replaceAll('-', '');
+                newObj.bindField = '';
+
+                addBindTableAndField(newObj);
+                copyLayoutData([newObj], newObj.bindTable);
+                list.push(newObj);
+            };
+
+            const copyLayoutData = (data, tableName) => {
+                data.map((item) => {
+                    if (['tab', 'grid', 'card'].includes(item.type)) {
+                        item.bindTable = '';
+                        item.key = buildUUID().replaceAll('-', '');
+                        addBindTableAndField(item, tableName);
+                        for (const child of item.layout!) {
+                            copyLayoutData(child.list, tableName);
+                        }
+                    } else if (['form', 'one-for-one'].includes(item.type)) {
+                        item.key = buildUUID().replaceAll('-', '');
+                        addBindTableAndField(item);
+                        copyLayoutData(item.children, item.bindTable);
+                    } else {
+                        item.bindField = '';
+                        item.bindTable = tableName;
+                        item.key = buildUUID().replaceAll('-', '');
+                        addBindTableAndField(item, tableName);
+                    }
+                });
+            };
+            const handleDeleteClick = async (list: any, index: number) => {
+                await deleteAdoptedCalc(index, list);
+                list.splice(index, 1);
+            };
+
+            const addBindTableAndField = (component: any, bindTable?) => {
+                //非代码优先、需要绑定字段、组件没有绑定字段的情况下新增绑定字段
+                if (designType !== 'data') {
+                    const rangeComponents = ['time-range', 'date-range'];
+                    if (rangeComponents.includes(component.type)) {
+                        component.bindStartTime = changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
+                        component.bindEndTime = changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
+                    } else if (!noHaveField.includes(component.type) && !component.bindField) {
+                        component.bindField = changeToPinyin(component.label, isFieldUpper.value) + random(1000, 9999);
+                    }
+                    if (!noHaveTableAndField.includes(component.type) && !component.isSubFormChild && !component.isSingleFormChild) {
+                        if (component.type === 'form' || component.type === 'one-for-one') {
+                            component.bindTable = isFieldUpper.value ? `${mainTableName.value}_CHILD_${random(1000, 9999)}` : `${mainTableName.value}_child_${random(1000, 9999)}`;
+                        } else if (!noHaveTableAndField.includes(component.type)) {
+                            component.bindTable = bindTable ? bindTable : mainTableName.value;
+                        }
+                    }
+                }
+                if (component.isGridChild) component.options.span = 7;
+            };
+
+            //删除引用已删除的财务组件的计算式配置
+            const deleteAdoptedCalc = (index: number, list: any[]) => {
+                const component = list[index];
+                if (['computational', 'money-chinese'].includes(component.type)) {
+                    component.options.beAdoptedComponent?.map((key) => {
+                        getLayoutComponent(state.widgetForm.list, key);
+                    });
+                }
+            };
+
+            const getLayoutComponent = (list, key) => {
+                list?.map((item) => {
+                    if (['tab', 'grid', 'card'].includes(item.type)) {
+                        for (const child of item.layout) {
+                            getLayoutComponent(child.list, key);
+                        }
+                    } else if (item.type === 'table-layout') {
+                        for (const child of item.layout) {
+                            for (const list of child.list) {
+                                getLayoutComponent(list.children, key);
+                            }
+                        }
+                    } else if (item.type === 'form') {
+                        item.children.map((child: any) => {
+                            if (['computational', 'money-chinese'].includes(child.type) && child.key === key) {
+                                child.options.computationalConfig = [];
+                                child.options.computationalConfigValue = '== 请填写计算式配置 ==';
+                            }
+                        });
+                    } else {
+                        if (['computational', 'money-chinese'].includes(item.type) && item.key === key) {
+                            item.options.computationalConfig = [];
+                            item.options.computationalConfigValue = '== 请填写计算式配置 ==';
+                        }
+                    }
+                });
+            };
+
+            return {
+                uploadValue,
+                itemLabelCol,
+                handleItemClick,
+                handleTableLayoutClick,
+                handleCopyClick,
+                handleDeleteClick,
+                handleFilterOption,
+                noHaveTitle,
+                handleColMoveAdd,
+                addBindTableAndField,
+                deleteAdoptedCalc,
+                t,
+                updateKey
+            };
+        }
+    });
 </script>
-<style scoped lang="less">
-  .widget-item-container .widget-view {
-    padding: 10px;
-    margin: 2px;
-    margin-bottom: 10px;
-    cursor: pointer;
-  }
+<style lang="less" scoped>
+    .widget-item-container .widget-view {
+        padding: 10px;
+        margin: 2px;
+        margin-bottom: 10px;
+        cursor: pointer;
+    }
 
-  .widget-item-container > div.active {
-    background: #eef4ff;
-  }
+    .widget-item-container > div.active {
+        background: #eef4ff;
+    }
 
-  .widget-item-container {
-    position: relative;
-  }
+    .widget-item-container {
+        position: relative;
+    }
 
-  .widget-view-action {
-    position: absolute;
-    top: -12px;
-    right: 43px;
-  }
+    .widget-view-action {
+        position: absolute;
+        top: -12px;
+        right: 43px;
+    }
 
-  .widget-view-drag {
-    position: absolute;
-    top: -12px;
-    right: 10px;
-  }
+    .widget-view-drag {
+        position: absolute;
+        top: -12px;
+        right: 10px;
+    }
 
-  .svgicon {
-    color: #0960bd;
-    border: 1px solid #0960bd;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    line-height: 20px;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-    margin-left: 10px;
-  }
+    .svgicon {
+        color: #0960bd;
+        border: 1px solid #0960bd;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        line-height: 20px;
+        display: inline-block;
+        text-align: center;
+        cursor: pointer;
+        margin-left: 10px;
+    }
 
-  .svgicon svg {
-    width: 12px !important;
-    height: 12px !important;
-  }
+    .svgicon svg {
+        width: 12px !important;
+        height: 12px !important;
+    }
 
-  .icon-delete {
-    border: 1px solid #f64c4c;
-    color: #f64c4c;
-  }
+    .icon-delete {
+        border: 1px solid #f64c4c;
+        color: #f64c4c;
+    }
 
-  .icon-move {
-    border: 1px solid #90b665;
-    color: #90b665;
-  }
+    .icon-move {
+        border: 1px solid #90b665;
+        color: #90b665;
+    }
 
-  .radio-default {
-    display: inline-block !important;
-  }
+    .radio-default {
+        display: inline-block !important;
+    }
 
-  .radio-button {
-    flex-wrap: wrap;
-  }
+    .radio-button {
+        flex-wrap: wrap;
+    }
 
-  :deep(.ant-form-item-control-input-content .ant-radio-group .ant-radio-button-wrapper) {
-    padding: 3px 7px !important;
-    flex: auto;
-  }
+    :deep(.ant-form-item-control-input-content .ant-radio-group .ant-radio-button-wrapper) {
+        padding: 3px 7px !important;
+        flex: auto;
+    }
 
-  :deep(.ant-form-item-label > label) {
-    white-space: normal;
-    display: inline;
-    line-height: 28px;
-    cursor: pointer;
-  }
+    :deep(.ant-form-item-label > label) {
+        white-space: normal;
+        display: inline;
+        line-height: 28px;
+        cursor: pointer;
+    }
 
-  .fc-style .widget-form-container .widget-form-list .widget-col.active {
-    border: 1px solid #e6a23c !important;
-  }
+    .fc-style .widget-form-container .widget-form-list .widget-col.active {
+        border: 1px solid #e6a23c !important;
+    }
 
-  .fc-style .widget-form-container .widget-form-list .widget-col:hover {
-    background: #fdf6ec;
-    outline: 1px solid #e6a23c;
-    outline-offset: 0;
-  }
+    .fc-style .widget-form-container .widget-form-list .widget-col:hover {
+        background: #fdf6ec;
+        outline: 1px solid #e6a23c;
+        outline-offset: 0;
+    }
 
-  .fc-style .widget-form-container .widget-form-list .widget-col-list {
-    min-height: 100px;
-    border: 1px dashed #ccc;
-    background: #fff;
-  }
+    .fc-style .widget-form-container .widget-form-list .widget-col-list {
+        min-height: 100px;
+        border: 1px dashed #ccc;
+        background: #fff;
+    }
 
-  /* @import '/@/assets/style/designer/index.css'; */
+    /* @import '/@/assets/style/designer/index.css'; */
 </style>
diff --git a/src/components/Designer/src/components/componentProperty/PropertyOption.vue b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
index c2509a8..1d3de60 100644
--- a/src/components/Designer/src/components/componentProperty/PropertyOption.vue
+++ b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
@@ -1,13 +1,13 @@
 <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-form v-if="data" :key="data.key" size="small" v-bind="layout">
+            <a-form-item v-if="data.type == 'input'" :label="t('不存表')">
                 <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">
+                <a-form-item v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveTableAndField.includes(data.type) && !data.isSubFormChild && !data.isSingleFormChild && data.type !== 'input')" :label="t('绑定表')">
+                    <a-select v-model:value="data.bindTable" :placeholder="t('请选择数据表')" size="mini" @change="handleTableChange">
+                        <a-select-option v-for="(table, idx) in tableInfo" :key="idx" :disabled="table.disabled" :value="table.name">
                             {{ table.name }}
                             <span>
                                 <a-tag :color="table.isMain ? 'blue' : 'orange'">
@@ -17,9 +17,9 @@
                         </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">
+                <a-form-item v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveField.includes(data.type) && data.type !== 'input')" :label="t('绑定字段')">
+                    <a-select v-model:value="data.bindField" :placeholder="t('请选择表字段')" size="mini">
+                        <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
                             {{ field.name }}
                             <span>
                                 <a-tag color="blue">
@@ -33,13 +33,13 @@
 
             <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-group v-model:value="data.options.preloadType" button-style="solid" 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-form-item v-if="data.options.preloadType === 'api'" :label="t('接口配置')">
                     <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="showApiConfig()">
                         <template #suffix>
                             <Icon icon="ant-design:ellipsis-outlined" />
@@ -47,15 +47,15 @@
                     </a-input>
                 </a-form-item>
 
-                <a-form-item :label="t('数据选项')" v-if="data.options.preloadType === 'dic'">
+                <a-form-item v-if="data.options.preloadType === 'dic'" :label="t('数据选项')">
                     <DicTreeSelect v-model:value="data.options.itemId" @change="handleDicChange" />
                 </a-form-item>
 
-                <a-form-item :label="t('按钮选数据')" v-if="data.type === 'form'">
+                <a-form-item v-if="data.type === 'form'" :label="t('按钮选数据')">
                     <a-switch v-model:checked="data.options.useSelectButton" />
                 </a-form-item>
 
-                <a-form-item label="开启分页" v-if="data.type === 'form'">
+                <a-form-item v-if="data.type === 'form'" label="开启分页">
                     <a-switch v-model:checked="data.options.showPagination" />
                 </a-form-item>
 
@@ -65,7 +65,7 @@
                     </a-form-item>
 
                     <a-form-item :label="t('表头配置')">
-                        <a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick">
+                        <a-input :placeholder="t('点击进行表头配置')" :value="configText" @click="tableTitleClick">
                             <template #suffix>
                                 <Icon icon="ant-design:ellipsis-outlined" />
                             </template>
@@ -74,7 +74,7 @@
                 </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-form-item v-for="item in data.children.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key" :label="item.label">
                         <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>
@@ -88,8 +88,8 @@
             </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">
+                <a-select v-model:value="data.bindStartTime" :placeholder="t('请选择开始字段')" size="mini">
+                    <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
                         {{ field.name }}
                         <span>
                             <a-tag color="blue">
@@ -101,8 +101,8 @@
             </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">
+                <a-select v-model:value="data.bindEndTime" :placeholder="t('请选择结束字段')" size="mini">
+                    <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
                         {{ field.name }}
                         <span>
                             <a-tag color="blue">
@@ -112,7 +112,7 @@
                     </a-select-option>
                 </a-select>
             </a-form-item>
-            <a-form-item :label="t('级联配置')" v-if="data.type === 'cascader'" required>
+            <a-form-item v-if="data.type === 'cascader'" :label="t('级联配置')" required>
                 <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行级联配置')" @click="showApiConfig(true)">
                     <template #suffix>
                         <Icon icon="ant-design:ellipsis-outlined" />
@@ -126,15 +126,15 @@
                 <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-select v-model:value="data.options.selectedConfig" :options="selectedOptions"></a-select>
             </a-form-item>
-            <a-form-item label="数据分页" v-if="hasKey('isPagination')">
+            <a-form-item v-if="hasKey('isPagination')" label="数据分页">
                 <a-switch v-model:checked="data.options.isPagination" />
             </a-form-item>
-            <a-form-item :label="t('标题')" v-if="!noHaveTitle.includes(data.type)">
+            <a-form-item v-if="!noHaveTitle.includes(data.type)" :label="t('标题')">
                 <a-input v-model:value="data.label" size="mini" />
             </a-form-item>
-            <a-form-item :label="t('标题')" v-if="data.type === 'card'">
+            <a-form-item v-if="data.type === 'card'" :label="t('标题')">
                 <a-input v-model:value="data.options.title" size="mini" />
             </a-form-item>
             <a-form-item v-if="hasKey('showTime')" :label="t('开始占位')">
@@ -145,13 +145,12 @@
                 <a-input v-model:value="data.options.endTimePlaceholder" />
             </a-form-item>
 
-            <a-form-item :label="t('占位提示')" v-if="hasKey('placeholder')">
+            <a-form-item v-if="hasKey('placeholder')" :label="t('占位提示')">
                 <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' ||
@@ -166,9 +165,10 @@
                             data.type === 'computational')) ||
                     (needDicDefaultValue.includes(data.type) && data.options.datasourceType == 'dic')
                 "
+                :label="t('默认值')"
             >
                 <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" />
+                <a-rate v-else-if="data.type === 'rate'" v-model:value="data.options.defaultValue" :allowClear="data.options.allowClear" :allowHalf="data.options.allowHalf" :count="data.options.count" />
                 <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" />
@@ -181,27 +181,27 @@
                 </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"
+                    :fieldNames="{ label: 'name', value: 'value' }"
+                    :options="defaultSelectOption"
+                    :placeholder="t('请选择默认值')"
+                    mode="multiple"
+                    @change="handleDfValChange"
                     @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"
+                    :fieldNames="{ label: 'name', value: 'value' }"
+                    :options="defaultSelectOption"
+                    :placeholder="t('请选择默认值')"
                     @dropdownVisibleChange="handleDfValueFocus"
                 >
                 </a-select>
-                <a-input v-else v-model:value="data.options.defaultValue" @blur="data.type === 'number' ? changeNumber : ''" :placeholder="t('请输入默认值')" />
+                <a-input v-else v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" @blur="data.type === 'number' ? changeNumber : ''" />
             </a-form-item>
 
             <a-form-item v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')" :label="t('时间格式')">
@@ -221,19 +221,19 @@
 
             <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" />
+                    <TimePicker v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" style="width: 100%" />
                 </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" />
+                    <XjrDatePicker v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" style="width: 100%" />
                 </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">
+            <a-form-item v-if="hasKey('autoCodeRule')" :label="t('编码规则')" required>
+                <a-select v-model:value="data.options.autoCodeRule" :placeholder="t('请选择编码规则')" size="mini">
+                    <a-select-option v-for="rule in codeRuleOptions" :key="rule.id" :value="rule.code">
                         {{ rule.name }}
                     </a-select-option>
                 </a-select>
@@ -246,24 +246,24 @@
                 <ComputationalSetting
                     v-if="computationalDialog"
                     v-model:computationalConfig="data.options.computationalConfig"
-                    @setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
                     v-model:computationalDialog="computationalDialog"
+                    @setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
                 />
             </template>
 
-            <a-form-item label="url" v-if="hasKey('url')">
+            <a-form-item v-if="hasKey('url')" label="url">
                 <a-textarea v-model:value="data.options.url" placeholder="请输入url" />
             </a-form-item>
 
-            <a-form-item :label="t('标签宽度')" v-if="hasKey('labelWidth')">
+            <a-form-item v-if="hasKey('labelWidth')" :label="t('标签宽度')">
                 <a-input-number v-model:value="data.options.labelWidth" :min="0" />
             </a-form-item>
 
-            <a-form-item :label="t('组件宽度')" v-if="hasKey('width')">
+            <a-form-item v-if="hasKey('width')" :label="t('组件宽度')">
                 <a-input v-model:value="data.options.width" />
             </a-form-item>
 
-            <a-form-item :label="t('信息类型')" v-if="hasKey('infoType')">
+            <a-form-item v-if="hasKey('infoType')" :label="t('信息类型')">
                 <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>
@@ -271,13 +271,13 @@
                 </a-select>
             </a-form-item>
 
-            <a-form-item :label="t('组件类型')" v-if="hasKey('orgzType')">
+            <a-form-item v-if="hasKey('orgzType')" :label="t('组件类型')">
                 <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-form-item v-if="hasKey('userType')" :label="t('组件类型')">
                 <a-select v-model:value="data.options.userType" size="mini">
                     <a-select-option :value="0">{{ t('系统用户') }}</a-select-option>
                 </a-select>
@@ -286,8 +286,8 @@
             <a-form-item v-if="hasKey('loadAgain')">
                 <template #label>
                     <a-tooltip>
-                        <template #title> 二次加载是决定编辑状态是否重新获取信息体数据 </template>
-                        <Icon icon="ant-design:question-circle-outlined" color="#909399" />
+                        <template #title> 二次加载是决定编辑状态是否重新获取信息体数据</template>
+                        <Icon color="#909399" icon="ant-design:question-circle-outlined" />
                     </a-tooltip>
                     &nbsp;{{ t('二次加载') }}
                 </template>
@@ -300,7 +300,7 @@
                 </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 v-model:value="data.options.buttonType" :placeholder="t('请选择按钮类型')" disabled size="mini">
                             <a-select-option :value="1">{{ t('联想弹层按钮') }}</a-select-option>
                             <a-select-option :value="2">{{ t('表格选择数据按钮') }}</a-select-option>
                         </a-select>
@@ -310,19 +310,19 @@
                     </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 v-model:value="data.options.selectTable" :placeholder="t('请选择表格')" size="mini">
+                                <a-select-option v-for="item in buttonTableOptions" :key="item.key" :value="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">
+                            <a-input :placeholder="t('点击进行表头配置')" :value="configText" @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-form-item v-for="item in data.options.tableColumns.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key" :label="item.label">
                                 <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>
@@ -340,78 +340,78 @@
                 </a-form-item>
             </template>
 
-            <a-form-item :label="t('最大值')" v-if="hasKey('max')">
+            <a-form-item v-if="hasKey('max')" :label="t('最大值')">
                 <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-form-item v-if="hasKey('count')" :label="t('最大值')">
                 <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-form-item v-if="hasKey('min')" :label="t('最小值')">
                 <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-form-item v-if="hasKey('step')" :label="t('步长')">
                 <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-form-item v-if="hasKey('addonBefore')" :label="t('前置标签')">
                 <a-input v-model:value="data.options.addonBefore" :placeholder="t('请输入前置标签')" />
             </a-form-item>
 
-            <a-form-item :label="t('后置标签')" v-if="hasKey('addonAfter')">
+            <a-form-item v-if="hasKey('addonAfter')" :label="t('后置标签')">
                 <a-input v-model:value="data.options.addonAfter" :placeholder="t('请输入后置标签')" />
             </a-form-item>
 
-            <a-form-item :label="t('前置图标')" v-if="hasKey('prefix')">
+            <a-form-item v-if="hasKey('prefix')" :label="t('前置图标')">
                 <IconPicker v-model:value="data.options.prefix" :disabled="false" :readonly="false" />
             </a-form-item>
 
-            <a-form-item :label="t('后置图标')" v-if="hasKey('suffix')">
+            <a-form-item v-if="hasKey('suffix')" :label="t('后置图标')">
                 <IconPicker v-model:value="data.options.suffix" :disabled="false" :readonly="false" />
             </a-form-item>
 
-            <a-form-item :label="t('最大长度')" v-if="hasKey('maxlength')">
+            <a-form-item v-if="hasKey('maxlength')" :label="t('最大长度')">
                 <a-input v-model:value.number="data.options.maxlength" :placeholder="t('请输入最大长度，按字符计算')" />
             </a-form-item>
 
-            <a-form-item :label="t('开启提示')" v-if="hasKey('checkedChildren')">
+            <a-form-item v-if="hasKey('checkedChildren')" :label="t('开启提示')">
                 <a-input v-model:value="data.options.checkedChildren" />
             </a-form-item>
 
-            <a-form-item :label="t('关闭提示')" v-if="hasKey('unCheckedChildren')">
+            <a-form-item v-if="hasKey('unCheckedChildren')" :label="t('关闭提示')">
                 <a-input v-model:value="data.options.unCheckedChildren" />
             </a-form-item>
 
-            <a-form-item :label="t('开启颜色')" v-if="hasKey('checkedColor')">
+            <a-form-item v-if="hasKey('checkedColor')" :label="t('开启颜色')">
                 <ColorPicker v-model:value="data.options.checkedColor" />
             </a-form-item>
 
-            <a-form-item :label="t('关闭颜色')" v-if="hasKey('unCheckedColor')">
+            <a-form-item v-if="hasKey('unCheckedColor')" :label="t('关闭颜色')">
                 <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-form-item v-if="hasKey('address')" :label="t('地址字段')">
+                <a-select v-model:value="data.options.address" allowClear size="mini">
                     <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-form-item v-if="hasKey('latiAndLong')" :label="t('经纬度字段')">
+                <a-select v-model:value="data.options.latiAndLong" allowClear size="mini">
                     <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-form-item v-if="hasKey('codeType')" :label="t('配置类型')">
+                <a-select v-model:value="data.options.codeType" :placeholder="t('请选择配置类型')" size="mini" @change="handleChangeCode">
+                    <a-select-option key="fixed" value="fixed"> {{ t('固定二维码') }}</a-select-option>
+                    <a-select-option key="api" value="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-form-item v-if="data.type == 'qrcode' && data.options.codeType == 'fixed'" :label="t('二维码内容')">
                 <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-form-item v-if="data.type == 'qrcode' && data.options.codeType == 'api'" :label="t('接口配置')">
                 <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="handleApiConfig()">
                     <template #suffix>
                         <Icon icon="ant-design:ellipsis-outlined" />
@@ -419,22 +419,41 @@
                 </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 v-if="hasKey('responsive')" label="响应式">
+                <a-switch v-model:checked="data.options.responsive" />
             </a-form-item>
 
-            <a-form-item :label="t('双滑块模式')" v-if="hasKey('range')">
+            <a-form-item v-if="hasKey('respNewRow') && data.options.responsive" label="独立成行">
+                <a-switch v-model:checked="data.options.respNewRow" />
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('labelWidthMode')" label="宽度模式">
+                <a-radio-group v-model:value="data.options.labelWidthMode" button-style="solid" size="small">
+                    <a-radio-button value="flex">{{ t('百分比') }}</a-radio-button>
+                    <a-radio-button value="fix">{{ t('定宽') }}</a-radio-button>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('labelWidthMode') && data.options.labelWidthMode === 'fix'" label="标签定宽">
+                <a-input-number v-model:value="data.options.labelFixWidth" :max="200" :min="40" addonAfter="px" />
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)" label="标签宽度">
+                <a-input-number v-model:value="data.options.span" :max="24" :min="0" addonAfter="/ 24" @change="handleSpanChange" />
+            </a-form-item>
+
+            <a-form-item v-if="hasKey('range')" :label="t('双滑块模式')">
                 <a-switch v-model:checked="data.options.range" @change="handleSliderModeChange" />
             </a-form-item>
 
-            <a-form-item :label="t('反向坐标轴')" v-if="hasKey('reverse')">
+            <a-form-item v-if="hasKey('reverse')" :label="t('反向坐标轴')">
                 <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-upload :beforeUpload="submitUpload" :max-count="1" :show-upload-list="false" accept="" action="">
                         <a-button>
                             <SvgIcon name="upload" style="margin-right: 10px" />
                             {{ t('点击上传') }}
@@ -446,31 +465,31 @@
                 </a-form-item>
             </template>
 
-            <a-form-item :label="t('切换按钮')" v-if="hasKey('visibilityToggle')">
+            <a-form-item v-if="hasKey('visibilityToggle')" :label="t('切换按钮')">
                 <a-switch v-model:checked="data.options.visibilityToggle" />
             </a-form-item>
 
-            <a-form-item :label="t('行数')" v-if="hasKey('rows') && !data.options.autoSize">
+            <a-form-item v-if="hasKey('rows') && !data.options.autoSize" :label="t('行数')">
                 <a-input-number v-model:value="data.options.rows" :min="0" />
             </a-form-item>
 
-            <a-form-item :label="t('显示字数')" v-if="hasKey('showCount')">
+            <a-form-item v-if="hasKey('showCount')" :label="t('显示字数')">
                 <a-switch v-model:checked="data.options.showCount" />
             </a-form-item>
 
-            <a-form-item :label="t('自适应高度')" v-if="hasKey('autoSize')">
+            <a-form-item v-if="hasKey('autoSize')" :label="t('自适应高度')">
                 <a-switch v-model:checked="data.options.autoSize" />
             </a-form-item>
 
-            <a-form-item :label="t('最小行数')" v-if="hasKey('minRows') && !data.options.autoSize">
+            <a-form-item v-if="hasKey('minRows') && !data.options.autoSize" :label="t('最小行数')">
                 <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-form-item v-if="hasKey('maxRows') && !data.options.autoSize" :label="t('最大行数')">
                 <a-input-number v-model:value="data.options.maxRows" :min="0" />
             </a-form-item>
 
-            <a-form-item :label="t('允许半选')" v-if="hasKey('allowHalf')">
+            <a-form-item v-if="hasKey('allowHalf')" :label="t('允许半选')">
                 <a-switch v-model:checked="data.options.allowHalf" />
             </a-form-item>
             <template v-if="data.type === 'divider'">
@@ -484,7 +503,7 @@
                     <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-group v-model:value="data.options.orientation" 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>
@@ -495,7 +514,7 @@
                 <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">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>
@@ -518,53 +537,53 @@
                 </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-form-item v-if="hasKey('optionType')" :label="t('选项样式')">
+                <a-radio-group v-model:value="data.options.optionType" button-style="solid">
                     <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-form-item v-if="hasKey('showLabel')" :label="t('显示标签')">
                 <a-switch v-model:checked="data.options.showLabel" />
             </a-form-item>
-            <a-form-item :label="t('是否显示')" v-if="hasKey('isShow')">
+            <a-form-item v-if="hasKey('isShow')" :label="t('是否显示')">
                 <a-switch v-model:checked="data.options.isShow" />
             </a-form-item>
-            <a-form-item :label="t('允许搜索')" v-if="hasKey('showSearch')">
+            <a-form-item v-if="hasKey('showSearch')" :label="t('允许搜索')">
                 <a-switch v-model:checked="data.options.showSearch" />
             </a-form-item>
 
-            <a-form-item :label="t('是否必填')" v-if="hasKey('required')">
+            <a-form-item v-if="hasKey('required')" :label="t('是否必填')">
                 <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-form-item v-if="hasKey('readonly')" :label="t('是否只读')">
                 <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 v-if="hasKey('disabled')" :label="t('是否禁用')">
+                <a-switch v-model:checked="data.options.disabled" :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)" @change="changeDisabled" />
             </a-form-item>
-            <a-form-item :label="t('是否合计')" v-if="hasKey('subTotal') && data.isSubFormChild">
+            <a-form-item v-if="hasKey('subTotal') && data.isSubFormChild" :label="t('是否合计')">
                 <a-switch v-model:checked="data.options.subTotal" />
             </a-form-item>
 
-            <a-form-item :label="t('开启清除')" v-if="hasKey('allowClear')">
+            <a-form-item v-if="hasKey('allowClear')" :label="t('开启清除')">
                 <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-form-item v-if="hasKey('scan')" :label="t('移动端扫描')">
                 <a-switch v-model:checked="data.options.scan" />
             </a-form-item>
-            <a-form-item :label="t('组件边框')" v-if="hasKey('showComponentBorder')">
+            <a-form-item v-if="hasKey('showComponentBorder')" :label="t('组件边框')">
                 <a-switch v-model:checked="data.options.showComponentBorder" />
             </a-form-item>
 
-            <a-form-item :label="t('表单边框')" v-if="hasKey('showFormBorder')">
+            <a-form-item v-if="hasKey('showFormBorder')" :label="t('表单边框')">
                 <a-switch v-model:checked="data.options.showFormBorder" />
             </a-form-item>
 
-            <a-form-item :label="t('显示序号')" v-if="hasKey('showIndex')">
+            <a-form-item v-if="hasKey('showIndex')" :label="t('显示序号')">
                 <a-switch v-model:checked="data.options.showIndex" />
             </a-form-item>
             <template v-if="data.type === 'title' || data.type === 'text'">
@@ -574,9 +593,9 @@
                 <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-form-item v-if="data.type === 'text'" :label="t('字体')">
                     <a-select v-model:value="data.options.fontFamily">
-                        <a-select-option value="Arial"> Arial </a-select-option>
+                        <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>
@@ -586,21 +605,21 @@
                 <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-form-item v-if="data.type === 'text'" :label="t('粗细')">
                     <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="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-form-item v-if="data.type === 'text'" :label="t('样式')">
                     <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-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('对齐方式')">
@@ -618,7 +637,7 @@
                 </a-form-item>
 
                 <a-form-item :label="t('列配置项')">
-                    <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
+                    <a-button size="small" style="width: 100%" type="primary" @click="handleInsertColumn">
                         {{ t('添加列') }}
                     </a-button>
                 </a-form-item>
@@ -626,9 +645,9 @@
                 <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" />
+                            <a-input-number v-model:value="item.span" :max="24" :min="0" :placeholder="t('栅格值')" size="small" />
                             <DragOutlined class="draggable-icon" />
-                            <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
+                            <SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
                         </li>
                     </ul>
                 </a-form-item>
@@ -654,26 +673,26 @@
 
             <template v-if="data.type === 'tab'">
                 <a-form-item :label="t('选项卡配置')">
-                    <a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%">
+                    <a-button size="small" style="width: 100%" type="primary" @click="handleInsertColumn">
                         {{ 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" />
+                            <a-input v-model:value="item.name" :max="24" :min="0" :placeholder="t('选项卡名称')" size="small" />
                             <DragOutlined class="draggable-icon" />
-                            <SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
+                            <SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
                         </li>
                     </ul>
                 </a-form-item>
                 <a-form-item :label="t('选项卡风格')">
-                    <a-radio-group button-style="solid" v-model:value="data.options.type">
+                    <a-radio-group v-model:value="data.options.type" button-style="solid">
                         <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-group v-model:value="data.options.tabPosition" button-style="solid">
                         <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>
@@ -684,28 +703,28 @@
             <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>
+                    <a-button size="small" style="font-size: 14px !important" type="primary" @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-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'title']" :wrapperCol="{ span: 20 }" label="名称">
                             <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 :labelCol="{ span: 4 }" :name="['sights', index, 'children']" :wrapperCol="{ span: 20 }" label="子列">
+                            <a-select v-model:value="sight.children" :fieldNames="{ label: 'title', value: 'key' }" :options="sight.headschilds" mode="multiple" 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-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'align']" :wrapperCol="{ span: 20 }" label="对齐">
                             <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" />
+                            <SvgIcon class="svg-delete" name="delete" @click.stop="deleteSight(index, sight.key)" />
                         </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配置')" />
+        <ApiConfig v-if="apiConfigDialog" v-model:apiConfig="data.options.apiConfig" v-model:apiConfigDialog="apiConfigDialog" :formItem="data" :isCascader="isCascader" :isQrcode="isQrcode" :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>
@@ -739,6 +758,7 @@
     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',
@@ -995,6 +1015,7 @@
                     sortableColumn();
                 }
             });
+
             function getTabMapRelaton(o, bindTable) {
                 o.layout.forEach((k) => {
                     if (k.list?.length > 0) {
@@ -1014,6 +1035,7 @@
                     }
                 });
             }
+
             function getMapRelationComps(curComp, list) {
                 //获取地图可以映射的组件
                 if (curComp.type == 'map') {
@@ -1044,6 +1066,7 @@
                     }
                 }
             }
+
             function getButtonRelatonTables(list) {
                 list.forEach((x) => {
                     if (['tab', 'grid', 'card'].includes(x.type)) {
@@ -1063,6 +1086,7 @@
                     }
                 });
             }
+
             const sortableColumn = () => {
                 nextTick(() => {
                     const tbody: any = document.querySelector('.awc-containter ul');
@@ -1271,6 +1295,7 @@
                     getImage();
                 });
             };
+
             async function getImage() {
                 if (data.value.options.defaultValue) {
                     let fileList = await getFileList({ folderId: data.value.options.defaultValue });
@@ -1282,9 +1307,11 @@
                     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) => {
@@ -1347,6 +1374,7 @@
                     }
                 }
             }
+
             function findSelf(obj, cur, parent) {
                 for (let i = 0; i < obj.children.length; i++) {
                     let k = obj.children[i];
@@ -1363,6 +1391,7 @@
                     }
                 }
             }
+
             function findBrother(arr, cur, key) {
                 arr.forEach((o) => {
                     if (o.children.length > 0 && cur != o.key && o.key !== key) {
@@ -1370,6 +1399,7 @@
                     }
                 });
             }
+
             function findBrotherParent(arr, cur) {
                 for (let i = 0; i < arr.length; i++) {
                     let k = arr[i];
@@ -1381,6 +1411,7 @@
                     }
                 }
             }
+
             const filtercomps = ref<string[]>([]);
             const filterHeads = ref<string[]>([]);
 
@@ -1398,6 +1429,7 @@
 
                 sight.headschilds = temp;
             };
+
             function checkDatas(origin, temp, sight) {
                 filtercomps.value = [];
 
@@ -1413,6 +1445,7 @@
                     }
                 });
             }
+
             function checkHeads(origin, temp, sight) {
                 filterHeads.value = [sight.key]; //不能选自己
                 origin.forEach((o) => {
@@ -1443,6 +1476,7 @@
             function handleSpanChange(val) {
                 if (val === null) val = '';
             }
+
             async function handleDfValueFocus(open) {
                 if (open && needDicDefaultValue.includes(data.value.type)) {
                     if (!data.value.options.itemId) {
@@ -1457,9 +1491,11 @@
                     }
                 }
             }
+
             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) {
@@ -1467,6 +1503,7 @@
                     //if (e) data.value.bindTable = null;
                 }
             }
+
             function findBindTable(list, curComp) {
                 list.forEach((x) => {
                     if (['tab', 'grid', 'card'].includes(x.type)) {
@@ -1509,6 +1546,7 @@
                     }
                 });
             }
+
             return {
                 data,
                 hasKey,
@@ -1571,7 +1609,7 @@
         }
     });
 </script>
-<style scoped lang="less">
+<style lang="less" scoped>
     *,
     :deep(.ant-input) {
         font-size: 12px !important;
@@ -1638,5 +1676,6 @@
             height: 13px !important;
         }
     }
+
     // @import '/@/assets/style/designer/index.css';
 </style>
diff --git a/src/components/Designer/src/types/index.ts b/src/components/Designer/src/types/index.ts
index 718dcb4..da3d90b 100644
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@@ -1,1311 +1,1256 @@
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useAppStore } from '/@/store/modules/app';
+
 const appStore = useAppStore();
 const { t } = useI18n();
+
 export interface WidgetForm {
-  list: any[];
-  config: {
-    formType: string;
-    size: string;
-    // hideRequiredMark: boolean;
-    layout: string;
-    labelAlign: string;
-    labelCol: {
-      span: number;
-      offset: number;
+    list: any[];
+    config: {
+        formType: string;
+        size: string;
+        // hideRequiredMark: boolean;
+        layout: string;
+        labelAlign: string;
+        labelCol: {
+            span: number;
+            offset: number;
+        };
+        formWidth: number;
     };
-    formWidth: number;
-  };
-  hiddenComponent: HiddenComponentInfo[];
+    hiddenComponent: HiddenComponentInfo[];
 }
 
 export const widgetForm: WidgetForm = {
-  list: [],
-  config: {
-    formType: 'modal',
-    size: 'default',
-    layout: 'horizontal',
-    labelAlign: 'right',
-    labelCol: {
-      span: 3,
-      offset: 0,
+    list: [],
+    config: {
+        formType: 'modal',
+        size: 'default',
+        layout: 'horizontal',
+        labelAlign: 'right',
+        labelCol: {
+            span: 3,
+            offset: 0
+        },
+        formWidth: 900
     },
-    formWidth: 900,
-  },
-  hiddenComponent: [],
+    hiddenComponent: []
 };
 
 export const basicComponents = [
-  {
-    label: t('单行文本'),
-    typeName: t('单行文本'),
-    type: 'input',
-    options: {
-      width: '100%',
-      span: '',
-      defaultValue: '',
-      placeholder: t('请输入单行文本'),
-      maxlength: null,
-      prefix: '',
-      suffix: '',
-      addonBefore: '',
-      addonAfter: '',
-      disabled: false,
-      allowClear: false,
-      showLabel: true,
-      required: false,
-      rules: [],
-      events: {},
-      isSave: false,
-      isShow: true,
-      scan: false,
+    {
+        label: t('单行文本'),
+        typeName: t('单行文本'),
+        type: 'input',
+        options: {
+            width: '100%',
+            span: '',
+            defaultValue: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            placeholder: t('请输入单行文本'),
+            maxlength: null,
+            prefix: '',
+            suffix: '',
+            addonBefore: '',
+            addonAfter: '',
+            disabled: false,
+            allowClear: false,
+            showLabel: true,
+            required: false,
+            rules: [],
+            events: {},
+            isSave: false,
+            isShow: true,
+            scan: false
+        }
     },
-  },
-  {
-    label: t('多行文本'),
-    typeName: t('多行文本'),
-    type: 'textarea',
-    options: {
-      width: '100%',
-      span: '',
-      defaultValue: '',
-      placeholder: t('请输入多行文本'),
-      maxlength: null,
-      rows: 4,
-      autoSize: false,
-      showCount: false,
-      disabled: false,
-      showLabel: true,
-      allowClear: false,
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('多行文本'),
+        typeName: t('多行文本'),
+        type: 'textarea',
+        options: {
+            width: '100%',
+            span: '',
+            defaultValue: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: true, // 多行文本就算响应式布局也独立成行
+            placeholder: t('请输入多行文本'),
+            maxlength: null,
+            rows: 4,
+            autoSize: false,
+            showCount: false,
+            disabled: false,
+            showLabel: true,
+            allowClear: false,
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('密码框'),
-    typeName: t('密码框'),
-    type: 'password',
-    options: {
-      width: '100%',
-      span: '',
-      defaultValue: '',
-      placeholder: t('请输入密码框'),
-      maxlength: null,
-      prefix: '',
-      addonBefore: '',
-      addonAfter: '',
-      visibilityToggle: true,
-      disabled: false,
-      allowClear: false,
-      showLabel: true,
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('密码框'),
+        typeName: t('密码框'),
+        type: 'password',
+        options: {
+            width: '100%',
+            span: '',
+            defaultValue: '',
+            placeholder: t('请输入密码框'),
+            maxlength: null,
+            prefix: '',
+            addonBefore: '',
+            addonAfter: '',
+            visibilityToggle: true,
+            disabled: false,
+            allowClear: false,
+            showLabel: true,
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('计数组件'),
-    typeName: t('计数组件'),
-    type: 'number',
-    options: {
-      width: '100%',
-      span: '',
-      defaultValue: 0,
-      min: 0,
-      max: 100,
-      step: 1,
-      maxlength: null,
-      disabled: false,
-      showLabel: true,
-      controls: true,
-      required: false,
-      subTotal: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('计数组件'),
+        typeName: t('计数组件'),
+        type: 'number',
+        options: {
+            width: '100%',
+            span: '',
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            maxlength: null,
+            disabled: false,
+            showLabel: true,
+            controls: true,
+            required: false,
+            subTotal: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('编辑器'),
-    typeName: t('编辑器'),
-    type: 'richtext-editor',
-    options: {
-      span: '',
-      defaultValue: '',
-      width: '100%',
-      disabled: false,
-      showLabel: true,
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('编辑器'),
+        typeName: t('编辑器'),
+        type: 'richtext-editor',
+        options: {
+            span: '',
+            defaultValue: '',
+            width: '100%',
+            disabled: false,
+            showLabel: true,
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('编码组件'),
-    typeName: t('编码组件'),
-    type: 'auto-code',
-    options: {
-      width: '100%',
-      span: '',
-      placeholder: t('请输入编码组件'),
-      prefix: '',
-      suffix: '',
-      addonBefore: '',
-      addonAfter: '',
-      showLabel: true,
-      autoCodeRule: null,
-      required: false,
-      isShow: true,
+    {
+        label: t('编码组件'),
+        typeName: t('编码组件'),
+        type: 'auto-code',
+        options: {
+            width: '100%',
+            span: '',
+            placeholder: t('请输入编码组件'),
+            prefix: '',
+            suffix: '',
+            addonBefore: '',
+            addonAfter: '',
+            showLabel: true,
+            autoCodeRule: null,
+            required: false,
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('自动完成'),
-    typeName: t('自动完成'),
-    type: 'auto-complete',
-    options: {
-      width: '100%',
-      showLabel: true,
-      placeholder: t('请输入自动完成'),
-      autofocus: false,
-      backfill: false,
-      required: false,
-      disabled: false,
-      bordered: true,
-      defaultActiveFirstOption: true,
-      defaultOpen: true,
-      staticOptions: [
-        {
-          key: 1,
-          label: 'Option 1',
-          value: 'Option 1',
-        },
-        {
-          key: 2,
-          label: 'Option 2',
-          value: 'Option 2',
-        },
-        {
-          key: 3,
-          label: 'Option 3',
-          value: 'Option 3',
-        },
-      ],
-      defaultSelect: '', //静态数据默认选择
-      datasourceType: 'api',
-      params: null,
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {},
-      itemId: undefined,
-      dicOptions: [],
-      rules: [],
-      events: {},
-      isShow: true,
-    },
-  },
+    {
+        label: t('自动完成'),
+        typeName: t('自动完成'),
+        type: 'auto-complete',
+        options: {
+            width: '100%',
+            showLabel: true,
+            placeholder: t('请输入自动完成'),
+            autofocus: false,
+            backfill: false,
+            required: false,
+            disabled: false,
+            bordered: true,
+            defaultActiveFirstOption: true,
+            defaultOpen: true,
+            staticOptions: [
+                {
+                    key: 1,
+                    label: 'Option 1',
+                    value: 'Option 1'
+                },
+                {
+                    key: 2,
+                    label: 'Option 2',
+                    value: 'Option 2'
+                },
+                {
+                    key: 3,
+                    label: 'Option 3',
+                    value: 'Option 3'
+                }
+            ],
+            defaultSelect: '', //静态数据默认选择
+            datasourceType: 'api',
+            params: null,
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {},
+            itemId: undefined,
+            dicOptions: [],
+            rules: [],
+            events: {},
+            isShow: true
+        }
+    }
 ];
 
 export const advanceComponents = [
-  {
-    label: t('下拉选择框'),
-    typeName: t('下拉选择框'),
-    type: 'select',
-    options: {
-      width: '100%',
-      span: '',
-      placeholder: t('请选择下拉选择'),
-      showLabel: true,
-      showSearch: false,
-      clearable: false,
-      disabled: false,
-      staticOptions: [
-        {
-          key: 1,
-          label: 'Option 1',
-          value: 'Option 1',
-        },
-        {
-          key: 2,
-          label: 'Option 2',
-          value: 'Option 2',
-        },
-        {
-          key: 3,
-          label: 'Option 3',
-          value: 'Option 3',
-        },
-      ],
-      defaultSelect: '', //静态数据默认选择
-      datasourceType: 'api',
-      params: null,
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/selection',
-        method: 'GET',
-        apiId: '93d735dcb7364a0f8102188ec4d77ac7',
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('下拉选择框'),
+        typeName: t('下拉选择框'),
+        type: 'select',
+        options: {
+            width: '100%',
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            placeholder: t('请选择下拉选择'),
+            showLabel: true,
+            showSearch: false,
+            clearable: false,
+            disabled: false,
+            staticOptions: [
+                {
+                    key: 1,
+                    label: 'Option 1',
+                    value: 'Option 1'
+                },
+                {
+                    key: 2,
+                    label: 'Option 2',
+                    value: 'Option 2'
+                },
+                {
+                    key: 3,
+                    label: 'Option 3',
+                    value: 'Option 3'
+                }
+            ],
+            defaultSelect: '', //静态数据默认选择
+            datasourceType: 'api',
+            params: null,
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/selection',
+                method: 'GET',
+                apiId: '93d735dcb7364a0f8102188ec4d77ac7'
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('级联选择器'),
-    typeName: t('级联选择器'),
-    type: 'cascader',
-    options: {
-      width: '100%',
-      span: '',
-      placeholder: t('请选择级联选择器'),
-      showFormat: 'all',
-      separator: '/',
-      selectedConfig: 'selectMostChildLevel',
-      disabled: false,
-      allowClear: false,
-      showLabel: true,
-      apiConfig: {
-        path: 'CodeGeneration/cascade',
-        method: 'GET',
-        apiId: '0772d128d20f4f80aaafc784adba338a',
-      },
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('级联选择器'),
+        typeName: t('级联选择器'),
+        type: 'cascader',
+        options: {
+            width: '100%',
+            span: '',
+            placeholder: t('请选择级联选择器'),
+            showFormat: 'all',
+            separator: '/',
+            selectedConfig: 'selectMostChildLevel',
+            disabled: false,
+            allowClear: false,
+            showLabel: true,
+            apiConfig: {
+                path: 'CodeGeneration/cascade',
+                method: 'GET',
+                apiId: '0772d128d20f4f80aaafc784adba338a'
+            },
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('联想下拉'),
-    typeName: t('联想下拉'),
-    type: 'associate-select',
-    options: {
-      width: '100%',
-      span: '',
-      placeholder: t('请选择联想下拉'),
-      showLabel: true,
-      showSearch: false,
-      disabled: false,
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-        outputParams: [
-          {
-            name: 'label',
-            bindField: '',
-          },
-          {
-            name: 'value',
-            bindField: '',
-          },
-        ],
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('联想下拉'),
+        typeName: t('联想下拉'),
+        type: 'associate-select',
+        options: {
+            width: '100%',
+            span: '',
+            placeholder: t('请选择联想下拉'),
+            showLabel: true,
+            showSearch: false,
+            disabled: false,
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3',
+                outputParams: [
+                    {
+                        name: 'label',
+                        bindField: ''
+                    },
+                    {
+                        name: 'value',
+                        bindField: ''
+                    }
+                ]
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('联想弹层'),
-    typeName: t('联想弹层'),
-    type: 'associate-popup',
-    options: {
-      popupType: 'associate',
-      width: '100%',
-      span: '',
-      placeholder: t('请选择联想弹层'),
-      showLabel: true,
-      disabled: false,
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-        outputParams: [
-          {
-            name: 'label',
-            tableTitle: 'label',
-            bindField: '',
-            show: true,
-            width: 150,
-          },
-          {
-            name: 'value',
-            tableTitle: 'value',
-            bindField: '',
-            show: true,
-            width: 150,
-          },
-        ],
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('联想弹层'),
+        typeName: t('联想弹层'),
+        type: 'associate-popup',
+        options: {
+            popupType: 'associate',
+            width: '100%',
+            span: '',
+            placeholder: t('请选择联想弹层'),
+            showLabel: true,
+            disabled: false,
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3',
+                outputParams: [
+                    {
+                        name: 'label',
+                        tableTitle: 'label',
+                        bindField: '',
+                        show: true,
+                        width: 150
+                    },
+                    {
+                        name: 'value',
+                        tableTitle: 'value',
+                        bindField: '',
+                        show: true,
+                        width: 150
+                    }
+                ]
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('多选弹层'),
-    typeName: t('多选弹层'),
-    type: 'multiple-popup',
-    options: {
-      popupType: 'multiple',
-      width: '100%',
-      span: '',
-      defaultValue: '',
-      placeholder: t('请选择多选弹层'),
-      showLabel: true,
-      disabled: false,
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-        outputParams: [
-          {
-            name: 'label',
-            tableTitle: 'label',
-            show: true,
-            width: 150,
-          },
-          {
-            name: 'value',
-            tableTitle: 'value',
-            show: true,
-            width: 150,
-          },
-        ],
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('多选弹层'),
+        typeName: t('多选弹层'),
+        type: 'multiple-popup',
+        options: {
+            popupType: 'multiple',
+            width: '100%',
+            span: '',
+            defaultValue: '',
+            placeholder: t('请选择多选弹层'),
+            showLabel: true,
+            disabled: false,
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3',
+                outputParams: [
+                    {
+                        name: 'label',
+                        tableTitle: 'label',
+                        show: true,
+                        width: 150
+                    },
+                    {
+                        name: 'value',
+                        tableTitle: 'value',
+                        show: true,
+                        width: 150
+                    }
+                ]
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('行政区域'),
-    typeName: t('行政区域'),
-    type: 'area',
-    options: {
-      width: '100%',
-      span: '',
-      placeholder: t('请选择行政区域'),
-      showLabel: true,
-      disabled: false,
-      allowClear: false,
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('行政区域'),
+        typeName: t('行政区域'),
+        type: 'area',
+        options: {
+            width: '100%',
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            placeholder: t('请选择行政区域'),
+            showLabel: true,
+            disabled: false,
+            allowClear: false,
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('多选组件'),
-    typeName: t('多选组件'),
-    type: 'checkbox',
-    options: {
-      span: '',
-      showLabel: true,
-      disabled: false,
-      staticOptions: [
-        {
-          key: 1,
-          label: 'option 1',
-          value: 'option 1',
-        },
-        {
-          key: 2,
-          label: 'option 2',
-          value: 'option 2',
-        },
-        {
-          key: 3,
-          label: 'option 3',
-          value: 'option 3',
-        },
-      ],
-      datasourceType: 'api',
-      defaultSelect: '',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/selection',
-        method: 'GET',
-        apiId: '93d735dcb7364a0f8102188ec4d77ac7',
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('多选组件'),
+        typeName: t('多选组件'),
+        type: 'checkbox',
+        options: {
+            span: '',
+            showLabel: true,
+            disabled: false,
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            staticOptions: [
+                {
+                    key: 1,
+                    label: 'option 1',
+                    value: 'option 1'
+                },
+                {
+                    key: 2,
+                    label: 'option 2',
+                    value: 'option 2'
+                },
+                {
+                    key: 3,
+                    label: 'option 3',
+                    value: 'option 3'
+                }
+            ],
+            datasourceType: 'api',
+            defaultSelect: '',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/selection',
+                method: 'GET',
+                apiId: '93d735dcb7364a0f8102188ec4d77ac7'
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('单选组件'),
-    typeName: t('单选组件'),
-    type: 'radio',
-    options: {
-      span: '',
-      showLabel: true,
-      disabled: false,
-      optionType: 'default',
-      staticOptions: [
-        {
-          key: 1,
-          label: 'option 1',
-          value: 'option 1',
-        },
-        {
-          key: 2,
-          label: 'option 2',
-          value: 'option 2',
-        },
-        {
-          key: 3,
-          label: 'option 3',
-          value: 'option 3',
-        },
-      ],
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      defaultSelect: '',
-      apiConfig: {
-        path: 'CodeGeneration/selection',
-        method: 'GET',
-        apiId: '93d735dcb7364a0f8102188ec4d77ac7',
-      },
-      itemId: undefined,
-      dicOptions: [],
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('单选组件'),
+        typeName: t('单选组件'),
+        type: 'radio',
+        options: {
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            showLabel: true,
+            disabled: false,
+            optionType: 'default',
+            staticOptions: [
+                {
+                    key: 1,
+                    label: 'option 1',
+                    value: 'option 1'
+                },
+                {
+                    key: 2,
+                    label: 'option 2',
+                    value: 'option 2'
+                },
+                {
+                    key: 3,
+                    label: 'option 3',
+                    value: 'option 3'
+                }
+            ],
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            defaultSelect: '',
+            apiConfig: {
+                path: 'CodeGeneration/selection',
+                method: 'GET',
+                apiId: '93d735dcb7364a0f8102188ec4d77ac7'
+            },
+            itemId: undefined,
+            dicOptions: [],
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('开关组件'),
-    typeName: t('开关组件'),
-    type: 'switch',
-    options: {
-      span: '',
-      defaultValue: 1,
-      checkedChildren: '',
-      unCheckedChildren: '',
-      checkedColor: appStore.getProjectConfig.themeColor,
-      unCheckedColor: '#bbbdbf',
-      showLabel: true,
-      disabled: false,
-      events: {},
-      isShow: true,
+    {
+        label: t('开关组件'),
+        typeName: t('开关组件'),
+        type: 'switch',
+        options: {
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            defaultValue: 1,
+            checkedChildren: '',
+            unCheckedChildren: '',
+            checkedColor: appStore.getProjectConfig.themeColor,
+            unCheckedColor: '#bbbdbf',
+            showLabel: true,
+            disabled: false,
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('滑块组件'),
-    typeName: t('滑块组件'),
-    type: 'slider',
-    options: {
-      span: '',
-      defaultValue: 0,
-      min: 0,
-      max: 100,
-      step: 1,
-      showLabel: true,
-      disabled: false,
-      reverse: false,
-      events: {},
-      isShow: true,
+    {
+        label: t('滑块组件'),
+        typeName: t('滑块组件'),
+        type: 'slider',
+        options: {
+            span: '',
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            showLabel: true,
+            disabled: false,
+            reverse: false,
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('时间选择'),
-    typeName: t('时间选择'),
-    type: 'time',
-    options: {
-      span: '',
-      defaultValue: '',
-      width: '100%',
-      placeholder: t('请选择时间选择'),
-      format: 'HH:mm:ss',
-      showLabel: true,
-      allowClear: true,
-      disabled: false,
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('时间选择'),
+        typeName: t('时间选择'),
+        type: 'time',
+        options: {
+            span: '',
+            defaultValue: '',
+            width: '100%',
+            placeholder: t('请选择时间选择'),
+            format: 'HH:mm:ss',
+            showLabel: true,
+            allowClear: true,
+            disabled: false,
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('时间范围'),
-    typeName: t('时间范围'),
-    type: 'time-range',
-    options: {
-      span: '',
-      width: '100%',
-      showTime: false,
-      format: 'HH:mm:ss',
-      startTimePlaceholder: t('请选择开始时间'),
-      endTimePlaceholder: t('请选择结束时间'),
-      showLabel: true,
-      disabled: false,
-      allowClear: true,
-      required: false,
-      rules: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('时间范围'),
+        typeName: t('时间范围'),
+        type: 'time-range',
+        options: {
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            width: '100%',
+            showTime: false,
+            format: 'HH:mm:ss',
+            startTimePlaceholder: t('请选择开始时间'),
+            endTimePlaceholder: t('请选择结束时间'),
+            showLabel: true,
+            disabled: false,
+            allowClear: true,
+            required: false,
+            rules: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('日期选择'),
-    typeName: t('日期选择'),
-    type: 'date',
-    options: {
-      span: '',
-      defaultValue: '',
-      width: '100%',
-      placeholder: t('请选择日期选择'),
-      format: 'YYYY-MM-DD HH:mm:ss',
-      showLabel: true,
-      allowClear: true,
-      disabled: false,
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('日期选择'),
+        typeName: t('日期选择'),
+        type: 'date',
+        options: {
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
+            respNewRow: false,
+            defaultValue: '',
+            width: '100%',
+            placeholder: t('请选择日期选择'),
+            format: 'YYYY-MM-DD HH:mm:ss',
+            showLabel: true,
+            allowClear: true,
+            disabled: false,
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('日期范围'),
-    typeName: t('日期范围'),
-    type: 'date-range',
-    options: {
-      span: '',
-      defaultValue: [],
-      width: '100%',
-      showTime: false,
-      format: 'YYYY-MM-DD',
-      startTimePlaceholder: t('请选择开始日期'),
-      endTimePlaceholder: t('请选择结束日期'),
-      showLabel: true,
-      disabled: false,
-      allowClear: true,
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
+    {
+        label: t('日期范围'),
+        typeName: t('日期范围'),
+        type: 'date-range',
+        options: {
+            span: '',
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            defaultValue: [],
+            width: '100%',
+            showTime: false,
+            format: 'YYYY-MM-DD',
+            startTimePlaceholder: t('请选择开始日期'),
+            endTimePlaceholder: t('请选择结束日期'),
+            showLabel: true,
+            disabled: false,
+            allowClear: true,
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('评分组件'),
-    typeName: t('评分组件'),
-    type: 'rate',
-    options: {
-      span: '',
-      defaultValue: 0,
-      count: 5,
-      showLabel: true,
-      allowHalf: false,
-      disabled: false,
-      isShow: true,
-      events: {},
+    {
+        label: t('评分组件'),
+        typeName: t('评分组件'),
+        type: 'rate',
+        options: {
+            span: '',
+            defaultValue: 0,
+            count: 5,
+            showLabel: true,
+            allowHalf: false,
+            disabled: false,
+            isShow: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('颜色选择'),
-    typeName: t('颜色选择'),
-    type: 'picker-color',
-    options: {
-      span: '',
-      defaultValue: '#000000',
-      showLabel: true,
-      disabled: false,
-      isShow: true,
-      events: {},
+    {
+        label: t('颜色选择'),
+        typeName: t('颜色选择'),
+        type: 'picker-color',
+        options: {
+            span: '',
+            defaultValue: '#000000',
+            showLabel: true,
+            disabled: false,
+            isShow: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('上传组件'),
-    typeName: t('上传组件'),
-    type: 'upload',
-    options: {
-      span: '',
-      defaultValue: [],
-      // name: 'file',
-      accept: '',
-      maxNumber: 5,
-      maxSize: 5,
-      showLabel: true,
-      multiple: false,
-      disabled: false,
-      required: false,
-      isShow: true,
-      events: {},
-      listType: 'text',
+    {
+        label: t('上传组件'),
+        typeName: t('上传组件'),
+        type: 'upload',
+        options: {
+            span: '',
+            defaultValue: [],
+            // name: 'file',
+            accept: '',
+            maxNumber: 5,
+            maxSize: 5,
+            showLabel: true,
+            multiple: false,
+            disabled: false,
+            required: false,
+            isShow: true,
+            events: {},
+            listType: 'text'
+        }
     },
-  },
-  {
-    label: t('图片组件'),
-    typeName: t('图片组件'),
-    type: 'image',
-    options: {
-      span: '',
-      defaultValue: '',
-      showLabel: true,
-      isShow: true,
-      isUpload: true,
-      events: {},
+    {
+        label: t('图片组件'),
+        typeName: t('图片组件'),
+        type: 'image',
+        options: {
+            span: '',
+            defaultValue: '',
+            showLabel: true,
+            isShow: true,
+            isUpload: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('地图选择'),
-    typeName: t('地图选择'),
-    type: 'map',
-    options: {
-      span: '',
-      width: '100%',
-      defaultValue: '',
-      placeholder: t('请选择地址'),
-      prefix: '',
-      suffix: 'mdi:map-marker-radius-outline',
-      showLabel: true,
-      disabled: false,
-      required: false,
-      isShow: true,
-      address: '',
-      latiAndLong: '',
-      rules: [],
-      events: {},
+    {
+        label: t('地图选择'),
+        typeName: t('地图选择'),
+        type: 'map',
+        options: {
+            span: '',
+            width: '100%',
+            defaultValue: '',
+            placeholder: t('请选择地址'),
+            prefix: '',
+            suffix: 'mdi:map-marker-radius-outline',
+            showLabel: true,
+            disabled: false,
+            required: false,
+            isShow: true,
+            address: '',
+            latiAndLong: '',
+            rules: [],
+            events: {}
+        }
     },
-  },
-  {
-    label: t('二维码组件'),
-    typeName: t('二维码组件'),
-    type: 'qrcode',
-    options: {
-      span: '',
-      defaultValue: ' ',
-      showLabel: true,
-      isShow: true,
-      codeType: 'api',
-      apiConfig: {
-        path: 'CodeGeneration/qr-code',
-        method: 'GET',
-        apiId: '8aad311cb2b248b39e9227d4bad94c9b',
-      },
-    },
-  },
+    {
+        label: t('二维码组件'),
+        typeName: t('二维码组件'),
+        type: 'qrcode',
+        options: {
+            span: '',
+            defaultValue: ' ',
+            showLabel: true,
+            isShow: true,
+            codeType: 'api',
+            apiConfig: {
+                path: 'CodeGeneration/qr-code',
+                method: 'GET',
+                apiId: '8aad311cb2b248b39e9227d4bad94c9b'
+            }
+        }
+    }
 ];
 //按钮组件
 export const buttonComponents = [
-  {
-    label: t('普通按钮'),
-    typeName: t('普通按钮'),
-    type: 'button',
-    options: {
-      name: t('普通按钮'),
-      buttonWidth: '',
-      buttonHeight: '',
-      prefix: '',
-      suffix: '',
-      disabled: false,
-      isShow: true,
-      events: {},
+    {
+        label: t('普通按钮'),
+        typeName: t('普通按钮'),
+        type: 'button',
+        options: {
+            name: t('普通按钮'),
+            buttonWidth: '',
+            buttonHeight: '',
+            prefix: '',
+            suffix: '',
+            disabled: false,
+            isShow: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('填表按钮'),
-    typeName: t('填表按钮'),
-    type: 'button',
-    options: {
-      name: t('填表按钮'),
-      buttonWidth: '',
-      buttonHeight: '',
-      prefix: '',
-      suffix: '',
-      disabled: false,
-      isSpecial: true,
-      buttonType: 2,
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-        outputParams: [
-          {
-            name: 'label',
-            tableTitle: 'label',
-          },
-          {
-            name: 'value',
-            tableTitle: 'value',
-          },
-        ],
-      },
-      itemId: undefined,
-      dicOptions: [],
-      selectTable: null,
-      tableColumns: [],
-      events: {},
-      isShow: true,
+    {
+        label: t('填表按钮'),
+        typeName: t('填表按钮'),
+        type: 'button',
+        options: {
+            name: t('填表按钮'),
+            buttonWidth: '',
+            buttonHeight: '',
+            prefix: '',
+            suffix: '',
+            disabled: false,
+            isSpecial: true,
+            buttonType: 2,
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3',
+                outputParams: [
+                    {
+                        name: 'label',
+                        tableTitle: 'label'
+                    },
+                    {
+                        name: 'value',
+                        tableTitle: 'value'
+                    }
+                ]
+            },
+            itemId: undefined,
+            dicOptions: [],
+            selectTable: null,
+            tableColumns: [],
+            events: {},
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('弹层按钮'),
-    typeName: t('弹层按钮'),
-    type: 'button',
-    options: {
-      name: t('弹层按钮'),
-      buttonWidth: '',
-      buttonHeight: '',
-      prefix: '',
-      suffix: '',
-      disabled: false,
-      isSpecial: true,
-      buttonType: 1,
-      datasourceType: 'api',
-      dataSource: undefined,
-      dataSourceId: undefined,
-      labelField: 'label',
-      valueField: 'value',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-        outputParams: [
-          {
-            name: 'label',
-            tableTitle: 'label',
-            bindField: '',
-            show: true,
-            width: 150,
-          },
-          {
-            name: 'value',
-            tableTitle: 'value',
-            bindField: '',
-            show: true,
-            width: 150,
-          },
-        ],
-      },
-      itemId: undefined,
-      dicOptions: [],
-      events: {},
-      isShow: true,
-    },
-  },
+    {
+        label: t('弹层按钮'),
+        typeName: t('弹层按钮'),
+        type: 'button',
+        options: {
+            name: t('弹层按钮'),
+            buttonWidth: '',
+            buttonHeight: '',
+            prefix: '',
+            suffix: '',
+            disabled: false,
+            isSpecial: true,
+            buttonType: 1,
+            datasourceType: 'api',
+            dataSource: undefined,
+            dataSourceId: undefined,
+            labelField: 'label',
+            valueField: 'value',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3',
+                outputParams: [
+                    {
+                        name: 'label',
+                        tableTitle: 'label',
+                        bindField: '',
+                        show: true,
+                        width: 150
+                    },
+                    {
+                        name: 'value',
+                        tableTitle: 'value',
+                        bindField: '',
+                        show: true,
+                        width: 150
+                    }
+                ]
+            },
+            itemId: undefined,
+            dicOptions: [],
+            events: {},
+            isShow: true
+        }
+    }
 ];
 // 布局组件
 export const layoutComponents = [
-  {
-    label: t('表格组件'),
-    typeName: t('表格组件'),
-    type: 'form',
-    children: [],
-    options: {
-      span: '24',
-      preloadType: 'api',
-      apiConfig: {},
-      itemId: '',
-      dicOptions: [],
-      useSelectButton: false,
-      buttonName: t('选择数据'),
-      showLabel: true,
-      showComponentBorder: true,
-      showFormBorder: true,
-      showIndex: false,
-      isShow: true,
-      multipleHeads: [],
+    {
+        label: t('表格组件'),
+        typeName: t('表格组件'),
+        type: 'form',
+        children: [],
+        options: {
+            span: '24',
+            preloadType: 'api',
+            apiConfig: {},
+            itemId: '',
+            dicOptions: [],
+            useSelectButton: false,
+            buttonName: t('选择数据'),
+            showLabel: true,
+            showComponentBorder: true,
+            showFormBorder: true,
+            showIndex: false,
+            isShow: true,
+            multipleHeads: []
+        }
     },
-  },
-  {
-    label: t('单表组件'),
-    typeName: t('单表组件'),
-    type: 'one-for-one',
-    children: [],
-    options: {
-      span: '24',
-      showLabel: true, // 显示标题文本或按钮名称/描述/选择按钮/显示位置/显示组件边
-      isShow: true,
+    {
+        label: t('单表组件'),
+        typeName: t('单表组件'),
+        type: 'one-for-one',
+        children: [],
+        options: {
+            span: '24',
+            showLabel: true, // 显示标题文本或按钮名称/描述/选择按钮/显示位置/显示组件边
+            isShow: true
+        }
     },
-  },
-  {
-    label: '表格视图组件',
-    typeName: '表格视图组件',
-    type: 'form-view',
-    options: {
-      preloadType: 'api',
-      apiConfig: {
-        path: 'CodeGeneration/assoc-selection',
-        method: 'GET',
-        apiId: 'ac61f579074c465aaf017d64284a44a3',
-      },
-      itemId: '',
-      span: '',
-      isPagination: true,
-      showLabel: true,
-      showFormBorder: false,
-      showIndex: false,
-      isShow: true,
+    {
+        label: '表格视图组件',
+        typeName: '表格视图组件',
+        type: 'form-view',
+        options: {
+            preloadType: 'api',
+            apiConfig: {
+                path: 'CodeGeneration/assoc-selection',
+                method: 'GET',
+                apiId: 'ac61f579074c465aaf017d64284a44a3'
+            },
+            itemId: '',
+            span: '',
+            isPagination: true,
+            showLabel: true,
+            showFormBorder: false,
+            showIndex: false,
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('表格布局'),
-    typeName: t('表格布局'),
-    type: 'table-layout',
-    layout: [
-      {
-        list: [
-          {
-            width: '',
-            height: '',
-            class: 'tableLayoutTd',
-            children: [],
-            position: [0, 0],
-          },
-          {
-            width: '',
-            height: '',
-            class: 'tableLayoutTd',
-            children: [],
-            position: [0, 1],
-          },
+    {
+        label: t('表格布局'),
+        typeName: t('表格布局'),
+        type: 'table-layout',
+        layout: [
+            {
+                list: [
+                    {
+                        width: '',
+                        height: '',
+                        class: 'tableLayoutTd',
+                        children: [],
+                        position: [0, 0]
+                    },
+                    {
+                        width: '',
+                        height: '',
+                        class: 'tableLayoutTd',
+                        children: [],
+                        position: [0, 1]
+                    }
+                ]
+            }
         ],
-      },
-    ],
-    options: {
-      borderWidth: 1,
-      borderColor: '#ddd',
-      class: '',
-      isShow: true,
+        options: {
+            borderWidth: 1,
+            borderColor: '#ddd',
+            class: '',
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('选项卡组件'),
-    typeName: t('选项卡组件'),
-    type: 'tab',
-    layout: [
-      {
-        name: 'tab1',
-        span: 24,
-        list: [],
-      },
-      {
-        name: 'tab2',
-        span: 24,
-        list: [],
-      },
-      {
-        name: 'tab3',
-        span: 24,
-        list: [],
-      },
-    ],
-    options: {
-      tabPosition: 'top',
-      type: 'line',
-      isShow: true,
+    {
+        label: t('选项卡组件'),
+        typeName: t('选项卡组件'),
+        type: 'tab',
+        layout: [
+            {
+                name: 'tab1',
+                span: 24,
+                list: []
+            },
+            {
+                name: 'tab2',
+                span: 24,
+                list: []
+            },
+            {
+                name: 'tab3',
+                span: 24,
+                list: []
+            }
+        ],
+        options: {
+            tabPosition: 'top',
+            type: 'line',
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('卡片布局'),
-    typeName: t('卡片布局'),
-    type: 'card',
-    icon: 'ant-design:credit-card-twotone',
-    layout: [
-      {
-        name: 'card',
-        span: 24,
-        list: [],
-      },
-    ],
-    options: {
-      title: '卡片',
-      isShow: true,
+    {
+        label: t('卡片布局'),
+        typeName: t('卡片布局'),
+        type: 'card',
+        icon: 'ant-design:credit-card-twotone',
+        layout: [
+            {
+                name: 'card',
+                span: 24,
+                list: []
+            }
+        ],
+        options: {
+            title: '卡片',
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('栅格布局'),
-    typeName: t('栅格布局'),
-    type: 'grid',
-    layout: [
-      {
-        span: 12,
-        list: [],
-      },
-      {
-        span: 12,
-        list: [],
-      },
-    ],
-    options: {
-      gutter: 16,
-      justify: 'start',
-      align: 'top',
-      isShow: true,
+    {
+        label: t('栅格布局'),
+        typeName: t('栅格布局'),
+        type: 'grid',
+        layout: [
+            {
+                span: 12,
+                list: []
+            },
+            {
+                span: 12,
+                list: []
+            }
+        ],
+        options: {
+            gutter: 16,
+            justify: 'start',
+            align: 'top',
+            isShow: true
+        }
     },
-  },
-  {
-    label: 'iframe组件',
-    typeName: 'iframe组件',
-    type: 'iframe',
-    options: {
-      url: '',
-      showLabel: true,
-      isShow: true,
+    {
+        label: 'iframe组件',
+        typeName: 'iframe组件',
+        type: 'iframe',
+        options: {
+            url: '',
+            showLabel: true,
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('标题'),
-    typeName: t('标题'),
-    type: 'title',
-    options: {
-      defaultValue: t('标题'),
-      color: '',
-      align: 'center',
-      fontSize: 18,
-      isShow: true,
+    {
+        label: t('标题'),
+        typeName: t('标题'),
+        type: 'title',
+        options: {
+            defaultValue: t('标题'),
+            color: '',
+            align: 'center',
+            fontSize: 18,
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('文本'),
-    typeName: t('文本'),
-    type: 'text',
-    options: {
-      defaultValue: t('文本'),
-      color: '',
-      align: 'left',
-      fontSize: 12,
-      fontWeight: 'normal',
-      fontFamily: 'Arial',
-      fontStyle: 'normal',
-      isShow: true,
+    {
+        label: t('文本'),
+        typeName: t('文本'),
+        type: 'text',
+        options: {
+            defaultValue: t('文本'),
+            color: '',
+            align: 'left',
+            fontSize: 12,
+            fontWeight: 'normal',
+            fontFamily: 'Arial',
+            fontStyle: 'normal',
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('分割线'),
-    type: 'divider',
-    options: {
-      defaultValue: t('分割线'),
-      orientation: 'left',
-      marginTop: 0,
-      marginBottom: 0,
-      isShow: true,
-    },
-  },
+    {
+        label: t('分割线'),
+        type: 'divider',
+        options: {
+            defaultValue: t('分割线'),
+            orientation: 'left',
+            marginTop: 0,
+            marginBottom: 0,
+            isShow: true
+        }
+    }
 ];
 
 export const workFlowComponents = [
-  {
-    label: t('意见簿'),
-    typeName: t('意见簿'),
-    type: 'opinion',
-    options: {
-      span: '',
-      placeholder: t('（该组件仅用于接收工作流审批意见，不可手动编辑）'),
-      width: '100%',
-      showLabel: true,
-      isShow: true,
-    },
-  },
+    {
+        label: t('意见簿'),
+        typeName: t('意见簿'),
+        type: 'opinion',
+        options: {
+            span: '',
+            placeholder: t('（该组件仅用于接收工作流审批意见，不可手动编辑）'),
+            width: '100%',
+            showLabel: true,
+            isShow: true
+        }
+    }
 ];
 
 export const infoComponents = [
-  {
-    label: t('信息体'),
-    typeName: t('信息体'),
-    type: 'info',
-    options: {
-      span: '',
-      width: '100%',
-      placeholder: '',
-      infoType: 0, // 0当前用户 1当前组织 2当前时间
-      loadAgain: false, //二次加载
-      showLabel: true,
-      disabled: true,
-      isShow: true,
+    {
+        label: t('信息体'),
+        typeName: t('信息体'),
+        type: 'info',
+        options: {
+            span: '',
+            width: '100%',
+            placeholder: '',
+            infoType: 0, // 0当前用户 1当前组织 2当前时间
+            loadAgain: false, //二次加载
+            showLabel: true,
+            disabled: true,
+            isShow: true
+        }
     },
-  },
-  {
-    label: t('组织架构'),
-    typeName: t('组织架构'),
-    type: 'organization',
-    options: {
-      span: '',
-      width: '100%',
-      defaultValue: undefined,
-      orgzType: 0,
-      placeholder: t('请选择组织架构'),
-      showLabel: true,
-      disabled: false,
-      required: false,
-      isShow: true,
-      events: {},
+    {
+        label: t('组织架构'),
+        typeName: t('组织架构'),
+        type: 'organization',
+        options: {
+            span: '',
+            width: '100%',
+            defaultValue: undefined,
+            orgzType: 0,
+            placeholder: t('请选择组织架构'),
+            showLabel: true,
+            disabled: false,
+            required: false,
+            isShow: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('人员选择'),
-    typeName: t('人员选择'),
-    type: 'user',
-    options: {
-      span: '',
-      width: '100%',
-      defaultValue: '',
-      placeholder: t('请选择人员'),
-      userType: 0,
-      prefix: '',
-      suffix: 'ant-design:setting-outlined',
-      showLabel: true,
-      disabled: false,
-      required: false,
-      isShow: true,
-      events: {},
-    },
-  },
+    {
+        label: t('人员选择'),
+        typeName: t('人员选择'),
+        type: 'user',
+        options: {
+            span: '',
+            width: '100%',
+            defaultValue: '',
+            placeholder: t('请选择人员'),
+            userType: 0,
+            prefix: '',
+            suffix: 'ant-design:setting-outlined',
+            showLabel: true,
+            disabled: false,
+            required: false,
+            isShow: true,
+            events: {}
+        }
+    }
 ];
 
 export const financeComponents = [
-  {
-    label: t('计算组件'),
-    typeName: t('计算组件'),
-    type: 'computational',
-    options: {
-      span: '',
-      width: '100%',
-      defaultValue: 0,
-      placeholder: t('请输入计算组件'),
-      addonBefore: '',
-      addonAfter: '',
-      prefix: '',
-      maxlength: null,
-      showLabel: true,
-      disabled: false,
-      subTotal: false,
-      computationalConfig: [],
-      computationalConfigValue: t('== 请填写计算式配置 =='),
-      beAdoptedComponent: [],
-      required: false,
-      isShow: true,
-      events: {},
+    {
+        label: t('计算组件'),
+        typeName: t('计算组件'),
+        type: 'computational',
+        options: {
+            span: '',
+            width: '100%',
+            defaultValue: 0,
+            placeholder: t('请输入计算组件'),
+            addonBefore: '',
+            addonAfter: '',
+            prefix: '',
+            maxlength: null,
+            showLabel: true,
+            disabled: false,
+            subTotal: false,
+            computationalConfig: [],
+            computationalConfigValue: t('== 请填写计算式配置 =='),
+            beAdoptedComponent: [],
+            required: false,
+            isShow: true,
+            events: {}
+        }
     },
-  },
-  {
-    label: t('货币大写'),
-    typeName: t('货币大写'),
-    type: 'money-chinese',
-    options: {
-      span: '',
-      width: '100%',
-      defaultValue: 0,
-      placeholder: t('请输入货币大写'),
-      addonBefore: '',
-      addonAfter: '',
-      prefix: '',
-      suffix: '',
-      maxlength: null,
-      showLabel: true,
-      disabled: false,
-      subTotal: false,
-      computationalConfig: [],
-      computationalConfigValue: t('== 请填写计算式配置 =='),
-      beAdoptedComponent: [],
-      required: false,
-      isShow: true,
-      rules: [],
-      events: {},
-    },
-  },
+    {
+        label: t('货币大写'),
+        typeName: t('货币大写'),
+        type: 'money-chinese',
+        options: {
+            span: '',
+            width: '100%',
+            defaultValue: 0,
+            placeholder: t('请输入货币大写'),
+            addonBefore: '',
+            addonAfter: '',
+            prefix: '',
+            suffix: '',
+            maxlength: null,
+            showLabel: true,
+            disabled: false,
+            subTotal: false,
+            computationalConfig: [],
+            computationalConfigValue: t('== 请填写计算式配置 =='),
+            beAdoptedComponent: [],
+            required: false,
+            isShow: true,
+            rules: [],
+            events: {}
+        }
+    }
 ];
 //地图组件不能映射的组件
 export const filterType = [
-  'number',
-  'cascader',
-  'area',
-  'switch',
-  'slider',
-  'time',
-  'time-range',
-  'date',
-  'date-range',
-  'rate',
-  'picker-color',
-  'upload',
-  'image',
-  'button',
-  'form',
-  'title',
-  'grid',
-  'tab',
-  'card',
-  'divider',
-  'computational',
-  'money-chinese',
-  'map',
-  'one-for-one',
-  'table-layout',
-  'form-view',
-  'iframe',
+    'number',
+    'cascader',
+    'area',
+    'switch',
+    'slider',
+    'time',
+    'time-range',
+    'date',
+    'date-range',
+    'rate',
+    'picker-color',
+    'upload',
+    'image',
+    'button',
+    'form',
+    'title',
+    'grid',
+    'tab',
+    'card',
+    'divider',
+    'computational',
+    'money-chinese',
+    'map',
+    'one-for-one',
+    'table-layout',
+    'form-view',
+    'iframe'
 ];
 // 不需要选择表与字段的组件
-export const noHaveTableAndField = [
-  'grid',
-  'divider',
-  'tab',
-  'card',
-  'title',
-  'button',
-  'opinion',
-  'qrcode',
-  'form-view',
-  'iframe',
-  'table-layout',
-  'text',
-];
+export const noHaveTableAndField = ['grid', 'divider', 'tab', 'card', 'title', 'button', 'opinion', 'qrcode', 'form-view', 'iframe', 'table-layout', 'text'];
 // 不需要绑定字段的组件
-export const noHaveField = [
-  'grid',
-  'divider',
-  'tab',
-  'card',
-  'one-for-one',
-  'title',
-  'button',
-  'opinion',
-  'form',
-  'time-range',
-  'date-range',
-  'qrcode',
-  'form-view',
-  'iframe',
-  'table-layout',
-  'text',
-];
+export const noHaveField = ['grid', 'divider', 'tab', 'card', 'one-for-one', 'title', 'button', 'opinion', 'form', 'time-range', 'date-range', 'qrcode', 'form-view', 'iframe', 'table-layout', 'text'];
 //不需要在列表页展示的
-export const noShowList = [
-  'grid',
-  'divider',
-  'tab',
-  'card',
-  'title',
-  'button',
-  'opinion',
-  'form',
-  'password',
-  'upload',
-  'image',
-  'richtext-editor',
-  'hiddenComponent',
-  'qrcode',
-  'one-for-one',
-  'form-view',
-  'iframe',
-  'table-layout',
-  'text',
-];
+export const noShowList = ['grid', 'divider', 'tab', 'card', 'title', 'button', 'opinion', 'form', 'password', 'upload', 'image', 'richtext-editor', 'hiddenComponent', 'qrcode', 'one-for-one', 'form-view', 'iframe', 'table-layout', 'text'];
 // 没有标题的组件
 export const noHaveTitle = ['grid', 'divider', 'card', 'button', 'title', 'text', 'form-view'];
 // 使用栅格布局方式的组件
 export const gridComponents = ['grid', 'form'];
 //需要配置 数据源 的组件  ||  远程组件
-export const remoteComponents = [
-  'select',
-  'radio',
-  'checkbox',
-  'associate-select',
-  'associate-popup',
-  'multiple-popup',
-];
+export const remoteComponents = ['select', 'radio', 'checkbox', 'associate-select', 'associate-popup', 'multiple-popup'];
 //子表单不能使用的组件
-export const subFormUnUseComponents = [
-  'card',
-  'tab',
-  'grid',
-  'form',
-  'title',
-  'divider',
-  'richtext-editor',
-  'auto-code',
-  'button',
-  'slider',
-  'image',
-  'opinion',
-  'qrcode',
-  'one-for-one',
-  'form-view',
-  'text',
-];
+export const subFormUnUseComponents = ['card', 'tab', 'grid', 'form', 'title', 'divider', 'richtext-editor', 'auto-code', 'button', 'slider', 'image', 'opinion', 'qrcode', 'one-for-one', 'form-view', 'text'];
 
 //一对一子表单组件不能使用的组件
 export const oneForOneUnUseComponents = ['form', 'one-for-one', 'form-view', 'iframe'];
 
 //字段格式为短文本的组件
-export const shortTextComponents = [
-  'input',
-  'password',
-  'auto-code',
-  'select',
-  'cascader',
-  'associate-select',
-  'associate-popup',
-  'area',
-  'radio',
-  'picker-color',
-  'info',
-  'organization',
-];
+export const shortTextComponents = ['input', 'password', 'auto-code', 'select', 'cascader', 'associate-select', 'associate-popup', 'area', 'radio', 'picker-color', 'info', 'organization'];
 
 //字段格式为长文本的组件
-export const longTextComponents = [
-  'textarea',
-  'richtext-editor',
-  'multiple-popup',
-  'checkbox',
-  'upload',
-  'image',
-  'user',
-];
+export const longTextComponents = ['textarea', 'richtext-editor', 'multiple-popup', 'checkbox', 'upload', 'image', 'user'];
 
 //字段格式为整数的组件
 export const integerComponents = ['switch'];
@@ -1320,184 +1265,137 @@ export const dateTimeComponents = ['date', 'date-range'];
 export const timeComponents = ['time', 'time-range'];
 
 //不能设置子表预加载的组件
-export const unPreloadComponents = [
-  'card',
-  'tab',
-  'grid',
-  'form',
-  'title',
-  'divider',
-  'image',
-  'opinion',
-  'upload',
-  'picker-color',
-  'organization',
-  'form-view',
-  'iframe',
-  'text',
-];
+export const unPreloadComponents = ['card', 'tab', 'grid', 'form', 'title', 'divider', 'image', 'opinion', 'upload', 'picker-color', 'organization', 'form-view', 'iframe', 'text'];
 //无法配置触发事件
-export const noConfigComponentEvent = [
-  'auto-code',
-  'form',
-  'tab',
-  'card',
-  'grid',
-  'title',
-  'divider',
-  'opinion',
-  'info',
-  'image',
-  'qrcode',
-  'form-view',
-  'iframe',
-  'table-layout',
-  'text',
-];
+export const noConfigComponentEvent = ['auto-code', 'form', 'tab', 'card', 'grid', 'title', 'divider', 'opinion', 'info', 'image', 'qrcode', 'form-view', 'iframe', 'table-layout', 'text'];
 
 //触发事件没有失焦事件的组件
-export const noBlurComponentEvent = [
-  'associate-popup',
-  'multiple-popup',
-  'radio',
-  'checkbox',
-  'switch',
-  'slider',
-  'rate',
-  'picker-color',
-  'upload',
-  'button',
-  'user',
-];
+export const noBlurComponentEvent = ['associate-popup', 'multiple-popup', 'radio', 'checkbox', 'switch', 'slider', 'rate', 'picker-color', 'upload', 'button', 'user'];
 //触发事件没有点击事件的组件
 export const noClickComponentEvent = ['radio', 'checkbox', 'switch', 'slider', 'rate'];
 //触发事件没有值改变事件的组件
 export const noChangeComponentEvent = ['button'];
 //无法配置正则校验
 export const noConfigRegularSetting = [
-  'auto-code',
-  'switch',
-  'slider',
-  'rate',
-  'picker-color',
-  'upload',
-  'image',
-  'button',
-  'form',
-  'tab',
-  'card',
-  'grid',
-  'title',
-  'divider',
-  'opinion',
-  'info',
-  'organization',
-  'user',
-  'qrcode',
-  'form-view',
-  'iframe',
-  'table-layout',
-  'text',
+    'auto-code',
+    'switch',
+    'slider',
+    'rate',
+    'picker-color',
+    'upload',
+    'image',
+    'button',
+    'form',
+    'tab',
+    'card',
+    'grid',
+    'title',
+    'divider',
+    'opinion',
+    'info',
+    'organization',
+    'user',
+    'qrcode',
+    'form-view',
+    'iframe',
+    'table-layout',
+    'text'
 ];
 
 //数据来源为数据字典的组件添加默认值选项
-export const needDicDefaultValue = [
-  'select',
-  'associate-select',
-  'associate-popup',
-  'multiple-popup',
-  'checkbox',
-  'radio',
-];
+export const needDicDefaultValue = ['select', 'associate-select', 'associate-popup', 'multiple-popup', 'checkbox', 'radio'];
 //需要字段名及表名为大写的数据库类型
 export const upperFieldDb = ['oracle', 'dm'];
 
 export interface FieldInfo {
-  name: string; //字段名
-  type: ColumnType; //字段类型
-  length: number; //字段长度
-  isPk: boolean; // 是否主键
-  isNullable: boolean; //是否可空
-  disabled?: boolean; //字段是否可选
+    name: string; //字段名
+    type: ColumnType; //字段类型
+    length: number; //字段长度
+    isPk: boolean; // 是否主键
+    isNullable: boolean; //是否可空
+    disabled?: boolean; //字段是否可选
 }
 
 export interface TableInfo {
-  name: string; //表名
-  isMain: boolean; //是否主表
-  fields: FieldInfo[]; //字段
-  disabled?: boolean; //是否可选
+    name: string; //表名
+    isMain: boolean; //是否主表
+    fields: FieldInfo[]; //字段
+    disabled?: boolean; //是否可选
 }
+
 export interface TableCell {
-  class?: string; //类名
-  height?: number; //高
+    class?: string; //类名
+    height?: number; //高
 }
+
 export interface TableTh {
-  class?: string; //类名
-  width?: number; //宽
+    class?: string; //类名
+    width?: number; //宽
 }
+
 export enum ColumnType {
-  //字符串
-  STRING,
-  //数字
-  NUMBER,
-  //布尔
-  BOOL,
-  //日期
-  DATE,
-  //时间
-  TIME,
+    //字符串
+    STRING,
+    //数字
+    NUMBER,
+    //布尔
+    BOOL,
+    //日期
+    DATE,
+    //时间
+    TIME
 }
 
 export enum CodeType {
-  Vue = 'vue',
-  Html = 'html',
+    Vue = 'vue',
+    Html = 'html'
 }
 
 export enum PlatformType {
-  Antd,
-  Element,
+    Antd,
+    Element
 }
 
 export interface ComputationalConfig {
-  $index: number; //表达式的唯一标识
-  label: string; //名称
-  type: string; //类型
-  key: string; //唯一标识
-  bindTable?: string; //绑定表
-  bindField?: string; //绑定字段
-  computationalMethod?: string; //计算方式
-  isMainForm?: boolean; //是否是主表组件
+    $index: number; //表达式的唯一标识
+    label: string; //名称
+    type: string; //类型
+    key: string; //唯一标识
+    bindTable?: string; //绑定表
+    bindField?: string; //绑定字段
+    computationalMethod?: string; //计算方式
+    isMainForm?: boolean; //是否是主表组件
 }
 
 export interface HiddenComponentInfo {
-  key: string; //id
-  type: 'hiddenComponent';
-  code: string; //编码
-  label: string; //名称
-  value: string; //值
-  bindTable: string; //绑定表
-  bindField: string; //绑定字段
+    key: string; //id
+    type: 'hiddenComponent';
+    code: string; //编码
+    label: string; //名称
+    value: string; //值
+    bindTable: string; //绑定表
+    bindField: string; //绑定字段
 }
 
 export interface DataSourceConfig {
-  key: number; //唯一标识
-  name: string; //名称
-  show?: boolean; //是否展示
-  width?: string | number; //宽度
-  bindField?: string; //绑定字段
+    key: number; //唯一标识
+    name: string; //名称
+    show?: boolean; //是否展示
+    width?: string | number; //宽度
+    bindField?: string; //绑定字段
 }
 
 export interface MutipleHeadInfo {
-  key: string; //id
-  title: string; //名称
-  dataIndex?: string; //名称
-  children: string[] | object[]; //子列
-  align?: string; //对齐
-  isSingle?: boolean; //是否合并列，false-是，true-否
+    key: string; //id
+    title: string; //名称
+    dataIndex?: string; //名称
+    children: string[] | object[]; //子列
+    align?: string; //对齐
+    isSingle?: boolean; //是否合并列，false-是，true-否
 }
 
 export interface FormDataProps {
-  name?: string;
-  schemas?: any;
-  hiddenComponent?: HiddenComponentInfo[];
+    name?: string;
+    schemas?: any;
+    hiddenComponent?: HiddenComponentInfo[];
 }
diff --git a/src/components/SimpleForm/src/SimpleForm.vue b/src/components/SimpleForm/src/SimpleForm.vue
index 5f10a61..49c0ee1 100644
--- a/src/components/SimpleForm/src/SimpleForm.vue
+++ b/src/components/SimpleForm/src/SimpleForm.vue
@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <div ref="formWrap">
         <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
             <Row v-bind="getRow">
                 <template v-for="schema in getSchemas" :key="schema.field">
-                    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="schema.colProps?.span">
+                    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
                         <template v-if="showComponent(schema)">
                             <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
                         </template>
@@ -27,8 +27,8 @@
 </template>
 <script lang="ts" setup>
     import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
-    import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil } from 'lodash-es';
-    import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted } from 'vue';
+    import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
+    import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
     import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
     import SimpleFormItem from './components/SimpleFormItem.vue';
     import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
@@ -45,6 +45,8 @@
     const { t } = useI18n();
     const { notification } = useMessage();
     const formRef = ref<FormInstance>();
+    const formWrap = ref<HTMLElement>();
+    const wrapWidth = ref(960);
 
     const propsRef = ref<Partial<FormProps>>({});
 
@@ -97,7 +99,35 @@
         };
     });
 
+    function getWrapSize() {
+        const rect = formWrap.value?.getBoundingClientRect();
+        wrapWidth.value = rect?.width || 960;
+    }
+
+    function getColWidth(schema: any) {
+        const compProps = schema.componentProps;
+        if (compProps.responsive) {
+            if (compProps.respNewRow) {
+                return 24; // 响应式布局下独立成行
+            } else {
+                const wrapValue = wrapWidth.value;
+                if (wrapValue > import.meta.env.VITE_RESP_LG_WIDTH) {
+                    return 8;
+                } else if (wrapValue > import.meta.env.VITE_RESP_MD_WIDTH) {
+                    return 12;
+                } else {
+                    return 24;
+                }
+            }
+        }
+        return schema.colProps?.span;
+    }
+
+    const debGetWrapSize = debounce(getWrapSize, 300);
+
     onMounted(() => {
+        window.addEventListener('resize', debGetWrapSize);
+        getWrapSize();
         nextTick(() => {
             //添加隐藏组件
             if (unref(getProps)?.hiddenComponent?.length) {
@@ -108,6 +138,10 @@
         });
     });
 
+    onUnmounted(() => {
+        window.removeEventListener('resize', debGetWrapSize);
+    });
+
     function showComponent(schema) {
         return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
     }
diff --git a/src/components/SimpleForm/src/components/SimpleFormItem.vue b/src/components/SimpleForm/src/components/SimpleFormItem.vue
index 806a547..9432f4a 100644
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@@ -336,7 +336,19 @@
     });
 
     const labelCol = computed(() => {
-        return unref(getComponentsProps).span ? { span: unref(getComponentsProps).span } : unref(itemLabelWidthProp).labelCol;
+        // 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
+        const commonLabelCol = unref(itemLabelWidthProp).labelCol;
+        const itemLabelCol = unref(getComponentsProps).labelCol;
+        const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any;
+        let labelCol: any = {};
+        if (labelWidthMode !== 'fix') {
+            labelCol.span = itemLabelCol?.span || commonLabelCol?.span;
+        } else {
+            labelCol.style = {
+                width: `${labelFixWidth || 120}px`
+            };
+        }
+        return labelCol;
     });
 
     const rules = computed(() => {