From 2ddeed95c911bb9e7fa707ccd906e32f2345b173 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Tue, 2 Apr 2024 17:29:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=97=A5=E6=9C=9F=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=8C=BA=E9=97=B4=E6=94=AF=E6=8C=81=E5=8F=AA=E8=AF=BB=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E9=80=89=E4=BA=BA=E7=BB=84=E4=BB=B6=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=AA=E8=AF=BB=E7=8A=B6=E6=80=81=E4=B8=8B=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E5=8F=AF=E9=80=89=20fix:=20=E7=95=A5=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E8=A1=A8=E5=8D=95=E6=A0=87=E7=AD=BE=E7=9A=84=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Designer/src/types/index.ts    |   6 +
 .../Form/src/components/Readonly.vue          |  84 ++-
 .../Form/src/components/SelectUser.vue        | 172 +++--
 .../SelectOrganizational/src/SelectUser.vue   |   2 +
 .../src/components/SimpleFormItem.vue         | 701 +++++++++---------
 5 files changed, 514 insertions(+), 451 deletions(-)

diff --git a/src/components/Designer/src/types/index.ts b/src/components/Designer/src/types/index.ts
index 8347cd7..31e7b1a 100644
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@@ -162,6 +162,9 @@ export const basicComponents = [
         typeName: t('编码组件'),
         type: 'auto-code',
         options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
             width: '100%',
             span: '',
             placeholder: t('请输入编码组件'),
@@ -1151,6 +1154,9 @@ export const infoComponents = [
         typeName: t('组织架构'),
         type: 'organization',
         options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
             span: '',
             width: '100%',
             defaultValue: undefined,
diff --git a/src/components/Form/src/components/Readonly.vue b/src/components/Form/src/components/Readonly.vue
index e08f935..3c68f75 100644
--- a/src/components/Form/src/components/Readonly.vue
+++ b/src/components/Form/src/components/Readonly.vue
@@ -3,48 +3,62 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+    import { ref, watch } from 'vue';
 
-const props = defineProps({
-    value: String,
-    schema: Object,
-});
+    const props = defineProps({
+        value: String,
+        schema: Object,
+        model: Object
+    });
 
-const fieldValue = ref(genFieldValue(props.value));
+    const fieldValue = ref(genFieldValue(props.value));
+    const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Info', 'Text', 'InputTextArea', 'InputNumber'];
 
-function genFieldValue(val) {
-    if (!props?.schema || (!val && val !== 0)) {
-        return '';
+    function parseRangeVal(val, component) {
+        if (component !== 'RangePicker' || !val) {
+            return val || '';
+        }
+        return val.split(' ')[0];
     }
-    const schema = props.schema;
-    const { componentProps, component } = schema;
 
-    if ([
-        "Input",
-        "AutoCodeRule",
-        "DatePicker",
-        "TimePicker",
-        "Info",
-        "Text",
-        'InputTextArea',
-        'InputNumber'].includes(component)) {
-        return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
-    }
-    if (component === 'Switch') {
-        return val === 1 ? '是' : '否';
-    }
-}
+    function genFieldValue(val) {
+        const schema = props.schema;
+        const model = props.model;
+        const { componentProps, component } = schema;
+        if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
+            const fieldArr = schema.field.split(',');
+            const valStart = parseRangeVal(model[fieldArr[0]], component);
+            const valEnd = parseRangeVal(model[fieldArr[1]], component);
+            return `${valStart} - ${valEnd}`;
+        }
+        if (!schema || (!val && val !== 0)) {
+            return '';
+        }
 
-watch(
-    () => props.value,
-    (newValue) => {
-        fieldValue.value = genFieldValue(newValue);
-    },
-);
+        if (textComponents.includes(component)) {
+            return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
+        } else if (component === 'Switch') {
+            return val === 1 ? '是' : '否';
+        }
+    }
+
+    watch(
+        () => props.value,
+        (newValue) => {
+            fieldValue.value = genFieldValue(newValue);
+        }
+    );
+    watch(
+        () => props.model,
+        (newValue) => {
+            fieldValue.value = genFieldValue(newValue);
+        },
+        { deep: true }
+    );
 </script>
 
 <style>
-.field-readonly {
-    white-space: pre-wrap;
-}
+    .field-readonly {
+        white-space: pre-wrap;
+    }
 </style>
diff --git a/src/components/Form/src/components/SelectUser.vue b/src/components/Form/src/components/SelectUser.vue
index 5a55f3c..7715ec4 100644
--- a/src/components/Form/src/components/SelectUser.vue
+++ b/src/components/Form/src/components/SelectUser.vue
@@ -1,86 +1,102 @@
 <template>
-  <div>
-    <FormItemRest>
-      <SelectUser
-        :multiple="multiple"
-        :selectedIds="selectedIds"
-        :key="key"
-        @change="
-          (ids, options) => {
-            emit('update:value', ids.join(','));
-            emit('selectedId', ids.join(','));
-            emit('change', ids.join(','), options);
-          }
-        "
-        @change-names="
-          (names) => {
-            userNames = names;
-          }
-        "
-      >
-        <a-input
-          readonly
-          :disabled="disabled"
-          :placeholder="placeholder"
-          v-model:value="userNames"
-          :size="size"
-          :bordered="bordered"
-        >
-          <template #prefix v-if="prefix">
-            <Icon :icon="prefix" />
-          </template>
-          <template #suffix v-if="suffix">
-            <Icon :icon="suffix" />
-          </template>
-        </a-input>
-      </SelectUser>
-    </FormItemRest>
-  </div>
+    <div :class="{ disabled }" class="form-select-user">
+        <FormItemRest>
+            <SelectUser
+                :key="key"
+                :multiple="multiple"
+                :selectedIds="selectedIds"
+                :disabled="disabled"
+                @change="
+                    (ids, options) => {
+                        emit('update:value', ids.join(','));
+                        emit('selectedId', ids.join(','));
+                        emit('change', ids.join(','), options);
+                    }
+                "
+                @change-names="
+                    (names) => {
+                        userNames = names;
+                    }
+                "
+            >
+                <a-input v-model:value="userNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
+                    <template v-if="prefix" #prefix>
+                        <Icon :icon="prefix" />
+                    </template>
+                    <template v-if="suffix" #suffix>
+                        <Icon :icon="suffix" />
+                    </template>
+                </a-input>
+            </SelectUser>
+        </FormItemRest>
+    </div>
 </template>
 <script lang="ts" setup>
-  import { Form } from 'ant-design-vue';
-  import { SelectUser } from '/@/components/SelectOrganizational/index';
-  import { watch, ref } from 'vue';
-  import { Icon } from '/@/components/Icon';
+    import { Form } from 'ant-design-vue';
+    import { SelectUser } from '/@/components/SelectOrganizational/index';
+    import { watch, ref } from 'vue';
+    import { Icon } from '/@/components/Icon';
 
-  // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
-  const FormItemRest = Form.ItemRest;
+    // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
+    const FormItemRest = Form.ItemRest;
 
-  const props = defineProps({
-    value: String,
-    prefix: String,
-    suffix: String,
-    placeholder: String,
-    readonly: Boolean,
-    disabled: Boolean,
-    size: String,
-    bordered: {
-      type: Boolean,
-      default: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-  });
+    const props = defineProps({
+        value: String,
+        prefix: String,
+        suffix: String,
+        placeholder: String,
+        readonly: Boolean,
+        disabled: Boolean,
+        size: String,
+        bordered: {
+            type: Boolean,
+            default: true
+        },
+        multiple: {
+            type: Boolean,
+            default: true
+        }
+    });
 
-  const userNames = ref<string>();
-  const selectedIds = ref<string[]>([]);
-  const emit = defineEmits(['update:value', 'selectedId', 'change']);
-  const key = ref<number>(0);
+    const userNames = ref<string>();
+    const selectedIds = ref<string[]>([]);
+    const emit = defineEmits(['update:value', 'selectedId', 'change']);
+    const key = ref<number>(0);
 
-  watch(
-    props,
-    async () => {
-      selectedIds.value = props.value ? props.value?.split(',') : [];
-      if (!props.value) {
-        //预览页面 重置
-        userNames.value = '';
-      }
-      key.value++;
-    },
-    {
-      immediate: true,
-    },
-  );
+    watch(
+        props,
+        async () => {
+            selectedIds.value = props.value ? props.value?.split(',') : [];
+            if (!props.value) {
+                //预览页面 重置
+                userNames.value = '';
+            }
+            key.value++;
+        },
+        {
+            immediate: true
+        }
+    );
 </script>
+<style lang="less">
+    .form-select-user {
+        &.disabled {
+            .ant-input-suffix {
+                display: none;
+            }
+
+            .ant-input-affix-wrapper-disabled {
+                background-color: transparent;
+            }
+
+            .ant-input[disabled] {
+                color: rgba(0, 0, 0, 0.85);
+            }
+
+            .ant-input-affix-wrapper{
+                border: none;
+                padding-left: 0;
+            }
+        }
+    }
+</style>
diff --git a/src/components/SelectOrganizational/src/SelectUser.vue b/src/components/SelectOrganizational/src/SelectUser.vue
index 85183f0..3cba4c5 100644
--- a/src/components/SelectOrganizational/src/SelectUser.vue
+++ b/src/components/SelectOrganizational/src/SelectUser.vue
@@ -65,6 +65,7 @@
       disabledIds?: Array<string>;
       multiple?: Boolean;
       visible?: Boolean;
+      disabled?: Boolean;
     }>(),
     {
       selectedIds: () => {
@@ -126,6 +127,7 @@
     }
   });
   async function show() {
+    if(props.disabled) return;
     data.selectedIds = [];
     data.selectedList = [];
     data.page.current = 1;
diff --git a/src/components/SimpleForm/src/components/SimpleFormItem.vue b/src/components/SimpleForm/src/components/SimpleFormItem.vue
index 701270c..20022d3 100644
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@@ -2,65 +2,68 @@
     <div>
         <!--如果是grid 组件 需要新增grid布局包裹-->
         <template v-if="schema.component.includes('Grid')">
-            <Row v-show="getIsShow(schema)" :align="(schema.componentProps as any).align"
-                :gutter="(schema.componentProps as any).gutter ?? 0" :justify="(schema.componentProps as any).justify"
-                type="flex">
+            <Row v-show="getIsShow(schema)" :align="(schema.componentProps as any).align" :gutter="(schema.componentProps as any).gutter ?? 0" :justify="(schema.componentProps as any).justify" type="flex">
                 <Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
-                <template v-for="childSchema in col.list" :key="childSchema.field">
-                    <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
-                        :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol"
-                        :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
-                </template>
+                    <template v-for="childSchema in col.list" :key="childSchema.field">
+                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
+                    </template>
                 </Col>
             </Row>
         </template>
         <!--如果是tab 组件 需要新增tab组件包裹-->
         <template v-else-if="schema.component === 'Tab'">
-            <Tabs v-show="getIsShow(schema)" v-model:activeKey="activeKey"
-                :size="(schema.componentProps as any).tabSize" :tabPosition="(schema.componentProps as any).tabPosition"
-                :type="(schema.componentProps as any).type">
+            <Tabs v-show="getIsShow(schema)" v-model:activeKey="activeKey" :size="(schema.componentProps as any).tabSize" :tabPosition="(schema.componentProps as any).tabPosition" :type="(schema.componentProps as any).type">
                 <TabPane v-for="(tab, tabIndex) in schema.children" :key="tabIndex" :forceRender="true" :tab="tab.name">
                     <template v-for="childSchema in tab.list" :key="childSchema.field">
-                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
-                            :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
-                            :schema="childSchema" />
+                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
                     </template>
                 </TabPane>
             </Tabs>
         </template>
         <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
         <template v-else-if="schema.component.includes('Form')">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
-                :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
-                <component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable"
-                    :size="formProps?.size" v-bind="schema.componentProps" />
+            <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :labelAlign="formProps?.labelAlign"
+                :name="schema.field"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
+                <component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
             </FormItem>
         </template>
         <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
         <template v-else-if="schema.component.includes('OneForOne')">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
-                :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
-                <component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]"
-                    :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size"
-                    v-bind="schema.componentProps" />
+            <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :labelAlign="formProps?.labelAlign"
+                :name="schema.field"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
+                <component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]" :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size" v-bind="schema.componentProps" />
             </FormItem>
         </template>
         <template v-else-if="schema.component === 'TableLayout'">
             <TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema">
                 <template #tdElement="{ tdElement }">
                     <div class="h-full">
-                        <div :style="{
-            height: tdElement.height ? tdElement.height + 'px' : '',
-            minHeight: (tdElement.height || '42') + 'px',
-            overflow: 'hidden',
-            padding: '10px'
-        }">
+                        <div
+                            :style="{
+                                height: tdElement.height ? tdElement.height + 'px' : '',
+                                minHeight: (tdElement.height || '42') + 'px',
+                                overflow: 'hidden',
+                                padding: '10px'
+                            }"
+                        >
                             <template v-for="childSchema in tdElement.children" :key="childSchema.field">
-                                <SimpleFormItem v-if="showComponent(childSchema)"
-                                    v-model:value="formModel![childSchema.field]" :form-api="formApi"
-                                    :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
+                                <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
                             </template>
                         </div>
                     </div>
@@ -69,41 +72,51 @@
         </template>
         <!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"-->
         <template v-else-if="schema.component.includes('Range')">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
-                <component :is="componentMap.get(schema.component)" v-model:endField="schema.field.split(',')[1]"
-                    v-model:startField="schema.field.split(',')[0]" v-model:value="formModel![schema.field]"
-                    :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+            <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :name="schema.field"
+                :rules="rules"
+                :validateTrigger="['blur', 'change']"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
+                <template v-if="getDisable && readonlySupport(schema.component)">
+                    <readonly :schema="schema" :model="formModel" />
+                </template>
+                <template v-else>
+                    <component
+                        :is="componentMap.get(schema.component)"
+                        v-model:endField="schema.field.split(',')[1]"
+                        v-model:startField="schema.field.split(',')[0]"
+                        v-model:value="formModel![schema.field]"
+                        :disabled="getDisable"
+                        :size="formProps?.size"
+                        v-bind="schema.componentProps"
+                    />
+                </template>
             </FormItem>
             <!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定  starTime  和 endTime -->
-            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''"
-                :name="schema.field.split(',')[0]">
+            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[0]">
                 <input type="hidden" />
             </FormItem>
-            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''"
-                :name="schema.field.split(',')[1]">
+            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[1]">
                 <input type="hidden" />
             </FormItem>
         </template>
         <!--如果checked  或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
         <template v-else-if="checkedValueComponents.includes(schema.component)">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
-                :rules="rules" :wrapperCol="itemLabelWidthProp.wrapperCol">
-                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
-                    v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size"
-                    v-bind="getComponentsProps" />
+            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field" :rules="rules" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
             </FormItem>
         </template>
         <!--如果是card 组件 需要新增card组件包裹-->
         <template v-else-if="schema.component.includes('Card')">
-            <CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true"
-                :title="(schema.componentProps as any).title">
+            <CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true" :title="(schema.componentProps as any).title">
                 <template v-for="childSchema  in schema.children![0].list" :key="childSchema.field">
-                    <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]"
-                        :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
-                        :schema="childSchema" />
+                    <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
                 </template>
             </CollapseContainer>
         </template>
@@ -115,329 +128,341 @@
         </template>
         <!--如果是 意见簿 组件 需要使用defaultValue直接赋值 -->
         <template v-else-if="schema.component.includes('Opinion')">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
-                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
-                    :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue"
-                    v-bind="getComponentsProps" />
+            <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :name="schema.field"
+                :rules="rules"
+                :validateTrigger="['blur', 'change']"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
+                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue" v-bind="getComponentsProps" />
             </FormItem>
         </template>
         <template v-else>
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
+            <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :name="schema.field"
+                :rules="rules"
+                :validateTrigger="['blur', 'change']"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
                 <template v-if="getDisable && readonlySupport(schema.component)">
                     <readonly :schema="schema" :value="formModel![schema.field]" />
                 </template>
                 <template v-else>
-                    <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]"
-                        v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size"
-                        v-bind="getComponentsProps" />
+                    <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
                 </template>
             </FormItem>
         </template>
     </div>
 </template>
 <script lang="ts" setup>
-import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
-import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
-import { computed, onMounted, unref, inject, Ref, watch, ref } from 'vue';
-import { componentMap } from '/@/components/Form/src/componentMap';
-import { checkedValueComponents } from '/@/components/Form/src/helper';
-import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
-import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
-import { CollapseContainer } from '/@/components/Container';
-import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
-import { useMessage } from '/@/hooks/web/useMessage';
-import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
-import { camelCaseString } from '/@/utils/event/design';
-import Readonly from '/@/components/Form/src/components/Readonly.vue';
+    import { Form, Col, Row, Tabs, TabPane, Divider } from 'ant-design-vue';
+    import { isBoolean, isFunction, upperFirst, cloneDeep } from 'lodash-es';
+    import { computed, onMounted, unref, inject, Ref, watch, ref } from 'vue';
+    import { componentMap } from '/@/components/Form/src/componentMap';
+    import { checkedValueComponents } from '/@/components/Form/src/helper';
+    import { useItemLabelWidth } from '/@/components/Form/src/hooks/useLabelWidth';
+    import { FormActionType, FormProps, FormSchema } from '/@/components/Form/src/types/form';
+    import { CollapseContainer } from '/@/components/Container';
+    import { noShowWorkFlowComponents, noShowGenerateComponents } from '/@/components/Form/src/helper';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import TableLayoutPreview from '/@/components/Form/src/components/TableLayoutPreview.vue';
+    import { camelCaseString } from '/@/utils/event/design';
+    import Readonly from '/@/components/Form/src/components/Readonly.vue';
 
-const FormItem = Form.Item;
+    const FormItem = Form.Item;
 
-const props = defineProps({
-    // 表单配置规则
-    schema: {
-        type: Object as PropType<FormSchema>,
-        default: () => { }
-    },
-    value: [Object, String, Number, Boolean, Array],
-    formApi: {
-        type: Object as PropType<FormActionType>
-    },
-    //刷新api使用
-    refreshFieldObj: {
-        type: Object,
-        default: () => { }
-    },
-    //是否是工作流
-    isWorkFlow: {
-        type: Boolean,
-        default: false
-    }
-});
+    const props = defineProps({
+        // 表单配置规则
+        schema: {
+            type: Object as PropType<FormSchema>,
+            default: () => {}
+        },
+        value: [Object, String, Number, Boolean, Array],
+        formApi: {
+            type: Object as PropType<FormActionType>
+        },
+        //刷新api使用
+        refreshFieldObj: {
+            type: Object,
+            default: () => {}
+        },
+        //是否是工作流
+        isWorkFlow: {
+            type: Boolean,
+            default: false
+        }
+    });
 
-const formModel = inject<Recordable>('formModel');
-const formProps = inject<Ref<FormProps>>('formProps');
-const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
-const activeKey = ref<number>(0);
-const isCamelCase = inject<boolean>('isCamelCase', false);
-// 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
-const formData = inject('formData', { noInject: true });
-watch(
-    () => tabActiveKey?.value,
-    (val) => {
-        if (props.isWorkFlow) activeKey.value = val!;
-    },
-    {
-        immediate: true
-    }
-);
-watch(
-    () => activeKey?.value,
-    (val) => {
-        if (props.isWorkFlow) tabActiveKey.value = val!;
-    },
-    {
-        immediate: true
-    }
-);
+    const formModel = inject<Recordable>('formModel');
+    const formProps = inject<Ref<FormProps>>('formProps');
+    const tabActiveKey = inject<Ref<number>>('tabActiveKey', ref(0));
+    const activeKey = ref<number>(0);
+    const isCamelCase = inject<boolean>('isCamelCase', false);
+    // 注入整个表单的配置，formProps是个计算属性，不能修改，formData则来自每个业务的表单页面。
+    const formData = inject('formData', { noInject: true });
+    watch(
+        () => tabActiveKey?.value,
+        (val) => {
+            if (props.isWorkFlow) activeKey.value = val!;
+        },
+        {
+            immediate: true
+        }
+    );
+    watch(
+        () => activeKey?.value,
+        (val) => {
+            if (props.isWorkFlow) tabActiveKey.value = val!;
+        },
+        {
+            immediate: true
+        }
+    );
 
-// watch(
-//   () => props.value,
-//   (val) => {
-//     if (!val) return;
-//     let { componentProps = {} } = props.schema;
-//     if (componentProps['events']) {
-//       for (const eventKey in componentProps['events']) {
-//         try {
-//           const event = new Function(
-//             'schema',
-//             'formModel',
-//             'formActionType',
-//             `${componentProps['events'][eventKey]}`,
-//           );
-//           event(props.schema, formModel, props.formApi);
-//         } catch (error) {
-//           notification.error({
-//             message: 'Tip',
-//             description: '触发事件填写有误！',
-//           });
-//         }
-//       }
-//     }
-//   },
-//   {
-//     immediate: true,
-//   },
-// );
+    // watch(
+    //   () => props.value,
+    //   (val) => {
+    //     if (!val) return;
+    //     let { componentProps = {} } = props.schema;
+    //     if (componentProps['events']) {
+    //       for (const eventKey in componentProps['events']) {
+    //         try {
+    //           const event = new Function(
+    //             'schema',
+    //             'formModel',
+    //             'formActionType',
+    //             `${componentProps['events'][eventKey]}`,
+    //           );
+    //           event(props.schema, formModel, props.formApi);
+    //         } catch (error) {
+    //           notification.error({
+    //             message: 'Tip',
+    //             description: '触发事件填写有误！',
+    //           });
+    //         }
+    //       }
+    //     }
+    //   },
+    //   {
+    //     immediate: true,
+    //   },
+    // );
 
-const { notification } = useMessage();
-const getSchema = computed(() => {
-    return props.schema as FormSchema;
-});
+    const { notification } = useMessage();
+    const getSchema = computed(() => {
+        return props.schema as FormSchema;
+    });
 
-const getDisable = computed(() => {
-    const { disabled: globDisabled } = formProps!.value;
-    const { dynamicDisabled } = getSchema.value;
-    const { disabled: itemDisabled = false } = unref(getComponentsProps);
-    let disabled = !!globDisabled || itemDisabled;
-    if (isBoolean(dynamicDisabled)) {
-        disabled = dynamicDisabled;
-    }
-    if (isFunction(dynamicDisabled)) {
-        disabled = dynamicDisabled({
-            values: formModel![getSchema.value.field],
-            model: formModel!,
-            schema: unref(getSchema),
-            field: unref(getSchema).field
-        });
-    }
-    return disabled;
-});
+    const getDisable = computed(() => {
+        const { disabled: globDisabled } = formProps!.value;
+        const { dynamicDisabled } = getSchema.value;
+        const { disabled: itemDisabled = false } = unref(getComponentsProps);
+        let disabled = !!globDisabled || itemDisabled;
+        if (isBoolean(dynamicDisabled)) {
+            disabled = dynamicDisabled;
+        }
+        if (isFunction(dynamicDisabled)) {
+            disabled = dynamicDisabled({
+                values: formModel![getSchema.value.field],
+                model: formModel!,
+                schema: unref(getSchema),
+                field: unref(getSchema).field
+            });
+        }
+        return disabled;
+    });
 
-const getComponentsProps = computed(() => {
-    let { componentProps = {} } = props.schema;
+    const getComponentsProps = computed(() => {
+        let { componentProps = {} } = props.schema;
 
-    if (isFunction(componentProps)) {
-        componentProps =
-            componentProps({
-                schema: props.schema,
-                formModel,
-                formActionType: props.formApi
-            }) ?? {};
-    } else {
-        if (componentProps['events']) {
-            for (const eventKey in componentProps['events']) {
-                try {
-                    const fun = componentProps['events'][eventKey];
-                    let event;
-                    if (typeof fun === 'string') {
-                        event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
-                    } else if (typeof fun === 'function') {
-                        event = fun;
-                    }
-                    componentProps['on' + upperFirst(eventKey)] = function () {
-                        let cloneFormModel = cloneDeep(formModel);
-                        for (let item in cloneFormModel) {
-                            let field = camelCaseString(item);
-                            if (field) cloneFormModel[field] = cloneFormModel[item];
+        if (isFunction(componentProps)) {
+            componentProps =
+                componentProps({
+                    schema: props.schema,
+                    formModel,
+                    formActionType: props.formApi
+                }) ?? {};
+        } else {
+            if (componentProps['events']) {
+                for (const eventKey in componentProps['events']) {
+                    try {
+                        const fun = componentProps['events'][eventKey];
+                        let event;
+                        if (typeof fun === 'string') {
+                            event = new Function('schema', 'formModel', 'formActionType', 'extParams', `${fun}`);
+                        } else if (typeof fun === 'function') {
+                            event = fun;
                         }
-                        event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
-
-                        if (isCamelCase) {
-                            for (let item in formModel) {
+                        componentProps['on' + upperFirst(eventKey)] = function () {
+                            let cloneFormModel = cloneDeep(formModel);
+                            for (let item in cloneFormModel) {
                                 let field = camelCaseString(item);
-                                if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
-                                    formModel[item] = cloneFormModel[field];
+                                if (field) cloneFormModel[field] = cloneFormModel[item];
+                            }
+                            event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi, { formData });
+
+                            if (isCamelCase) {
+                                for (let item in formModel) {
+                                    let field = camelCaseString(item);
+                                    if (cloneFormModel && field && cloneFormModel[field] !== undefined) {
+                                        formModel[item] = cloneFormModel[field];
+                                    }
                                 }
                             }
-                        }
-                    };
-                } catch (error) {
-                    console.log('error', error);
-                    notification.error({
-                        message: 'Tip',
-                        description: '触发事件填写有误！'
-                    });
+                        };
+                    } catch (error) {
+                        console.log('error', error);
+                        notification.error({
+                            message: 'Tip',
+                            description: '触发事件填写有误！'
+                        });
+                    }
                 }
             }
         }
-    }
-    if (isBoolean(props.schema.dynamicDisabled)) {
-        componentProps['disabled'] = props.schema.dynamicDisabled;
-    }
-    if (isBoolean(props.schema.required)) {
-        componentProps['required'] = props.schema.required;
-    }
-
-    return componentProps as Recordable;
-});
-
-const labelCol = computed(() => {
-    // 列宽支持两种模式 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(() => {
-    const requiredRule = {
-        required: unref(getComponentsProps).required || false,
-        message: `${props.schema.label}是必填项`
-    };
-    const rulesList = cloneDeep(unref(getComponentsProps).rules);
-    if (!rulesList) return [requiredRule];
-    rulesList?.map((item) => (item.pattern = eval(item.pattern)));
-    return [...rulesList, requiredRule];
-});
-
-//根据labelwidth 生成labelCol
-const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!);
-watch(
-    () => formModel,
-    () => {
-        // console.log('formitem watch!!!!!!!!');
-        //填值以后需要手动校验的组件
-        const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
-        if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
-            setTimeout(() => {
-                props.formApi?.validateFields([props.schema.field]);
-            }, 100);
+        if (isBoolean(props.schema.dynamicDisabled)) {
+            componentProps['disabled'] = props.schema.dynamicDisabled;
         }
-    },
-    {
-        deep: true,
-        immediate: true
+        if (isBoolean(props.schema.required)) {
+            componentProps['required'] = props.schema.required;
+        }
+
+        return componentProps as Recordable;
+    });
+
+    const labelCol = computed(() => {
+        // 列宽支持两种模式 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(() => {
+        const requiredRule = {
+            required: unref(getComponentsProps).required || false,
+            message: `${props.schema.label}是必填项`
+        };
+        const rulesList = cloneDeep(unref(getComponentsProps).rules);
+        if (!rulesList) return [requiredRule];
+        rulesList?.map((item) => (item.pattern = eval(item.pattern)));
+        return [...rulesList, requiredRule];
+    });
+
+    //根据labelwidth 生成labelCol
+    const itemLabelWidthProp = useItemLabelWidth(getSchema, formProps!);
+    watch(
+        () => formModel,
+        () => {
+            // console.log('formitem watch!!!!!!!!');
+            //填值以后需要手动校验的组件
+            const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
+            if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
+                setTimeout(() => {
+                    props.formApi?.validateFields([props.schema.field]);
+                }, 100);
+            }
+        },
+        {
+            deep: true,
+            immediate: true
+        }
+    );
+    onMounted(() => {
+        // console.log('onMounted');
+        // if (
+        //   staticDataComponents.includes(props.schema.component) &&
+        //   (props.schema.componentProps as any)?.datasourceType === 'staticData'
+        // ) {
+        //   let { defaultSelect } = props.schema.componentProps as any;
+        //   emit('update:value', defaultSelect);
+        //   console.log('update:value1', defaultSelect);
+        // } else {
+        //   let { defaultValue } = props.schema;
+        //   if (!!props.schema.field && !noDefaultValueComponents.includes(props.schema.component)) {
+        //     console.log('update:value', props.schema.component === 'SubForm' ? [] : defaultValue);
+        //     emit('update:value', defaultValue);
+        //   }
+        // }
+    });
+
+    const formComponent = (schema) => {
+        return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
+    };
+
+    const defaultComponent = (schema) => {
+        return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
+    };
+
+    function showComponent(schema) {
+        return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
     }
-);
-onMounted(() => {
-    // console.log('onMounted');
-    // if (
-    //   staticDataComponents.includes(props.schema.component) &&
-    //   (props.schema.componentProps as any)?.datasourceType === 'staticData'
-    // ) {
-    //   let { defaultSelect } = props.schema.componentProps as any;
-    //   emit('update:value', defaultSelect);
-    //   console.log('update:value1', defaultSelect);
-    // } else {
-    //   let { defaultValue } = props.schema;
-    //   if (!!props.schema.field && !noDefaultValueComponents.includes(props.schema.component)) {
-    //     console.log('update:value', props.schema.component === 'SubForm' ? [] : defaultValue);
-    //     emit('update:value', defaultValue);
-    //   }
-    // }
-});
 
-const formComponent = (schema) => {
-    return componentMap.get(['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(schema.field) ? 'ErpApply' : schema.component);
-};
-
-const defaultComponent = (schema) => {
-    return componentMap.get(schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d' ? 'ErpUpload' : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78' ? 'ErpCheck' : schema.component);
-};
-
-function showComponent(schema) {
-    return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
-}
-
-function readonlySupport(name) {
-    return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Info/.test(name)
-}
-
-function getShow(schema: FormSchema): boolean {
-    const { show } = schema;
-    let isIfShow = true;
-
-    if (isBoolean(show)) {
-        isIfShow = show;
+    function readonlySupport(name) {
+        return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Info|Range/.test(name);
     }
-    return isIfShow;
-}
 
-function getIsShow(schema: FormSchema): boolean {
-    const { componentProps, show } = schema as any;
-    let isShow = true;
-    if (isBoolean(componentProps?.isShow)) {
-        isShow = componentProps?.isShow;
+    function getShow(schema: FormSchema): boolean {
+        const { show } = schema;
+        let isIfShow = true;
+
+        if (isBoolean(show)) {
+            isIfShow = show;
+        }
+        return isIfShow;
     }
-    if (isBoolean(show)) {
-        isShow = show;
+
+    function getIsShow(schema: FormSchema): boolean {
+        const { componentProps, show } = schema as any;
+        let isShow = true;
+        if (isBoolean(componentProps?.isShow)) {
+            isShow = componentProps?.isShow;
+        }
+        if (isBoolean(show)) {
+            isShow = show;
+        }
+        return isShow;
     }
-    return isShow;
-}
 </script>
 <style lang="less" scoped>
-:deep(.ant-form-item-label > label) {
-    white-space: normal;
-    display: inline;
-    line-height: 28px;
-}
+    :deep(.ant-form-item-label > label) {
+        white-space: normal;
+        display: inline;
+        line-height: 32px;
+    }
 </style>
 <style lang="less">
-.ant-select-disabled {
-    .ant-select-selector {
-        border: none !important;
-        background-color: transparent !important;
-        padding-left: 0 !important;
-    }
+    .ant-select-disabled {
+        .ant-select-selector {
+            border: none !important;
+            background-color: transparent !important;
+            padding-left: 0 !important;
+        }
 
-    .ant-select-selection-item {
-        color: rgb(0 0 0 / 85%) !important;
-    }
+        .ant-select-selection-item {
+            color: rgb(0 0 0 / 85%) !important;
+        }
 
-    .ant-select-arrow {
-        display: none;
+        .ant-select-arrow {
+            display: none;
+        }
     }
-}
 </style>