From 2b4bba94af18f8bb506d06a9813f374b0eecbcdc Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Tue, 6 Feb 2024 17:36:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=95=A5=E5=BE=AE=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=8F=AA=E8=AF=BB=E5=AD=97=E6=AE=B5=E7=9A=84=E8=A1=A8=E7=8E=B0?=
 =?UTF-8?q?=E5=BD=A2=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/src/components/Readonly.vue          |   49 +-
 .../src/components/SimpleFormItem.vue         | 1070 +++++++++--------
 src/views/secondDev/createFlow.vue            |  244 ++--
 3 files changed, 719 insertions(+), 644 deletions(-)

diff --git a/src/components/Form/src/components/Readonly.vue b/src/components/Form/src/components/Readonly.vue
index 07e8859..2b4e29f 100644
--- a/src/components/Form/src/components/Readonly.vue
+++ b/src/components/Form/src/components/Readonly.vue
@@ -1,19 +1,42 @@
 <template>
-  <div class="field-readonly">{{ fieldValue }}</div>
+    <div class="field-readonly">{{ fieldValue }}</div>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue';
+    import { ref, watch } from 'vue';
 
-  const props = defineProps({
-    value: String,
-    schema: Object,
-  });
-  const fieldValue = ref(props.value);
-  watch(
-    () => props.value,
-    (newValue) => {
-      fieldValue.value = newValue;
-    },
-  );
+    const props = defineProps({
+        value: String,
+        schema: Object,
+    });
+
+    const fieldValue = ref(genFieldValue(props.value));
+
+    function genFieldValue(val) {
+        if (!props?.schema || (!val && val !== 0)) {
+            return '';
+        }
+        const schema = props.schema;
+        const { componentProps, component } = schema;
+
+        if (['Input', 'AutoCodeRule', 'DatePicker', 'InputTextArea'].includes(component)) {
+            return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
+        }
+        if (component === 'Switch') {
+            return val === 1 ? '是' : '否';
+        }
+    }
+
+    watch(
+        () => props.value,
+        (newValue) => {
+            fieldValue.value = genFieldValue(newValue);
+        },
+    );
 </script>
+
+<style>
+    .field-readonly {
+        white-space: pre-wrap;
+    }
+</style>
diff --git a/src/components/SimpleForm/src/components/SimpleFormItem.vue b/src/components/SimpleForm/src/components/SimpleFormItem.vue
index 842d4e6..13eb402 100644
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@@ -1,545 +1,585 @@
 <template>
-  <div>
-    <!--如果是grid 组件 需要新增grid布局包裹-->
-    <template v-if="schema.component.includes('Grid')">
-      <Row
-        type="flex"
-        :gutter="(schema.componentProps as any ).gutter ?? 0"
-        :justify="(schema.componentProps as any ).justify"
-        :align="(schema.componentProps as any ).align"
-        v-show="getIsShow(schema)"
-      >
-        <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)"
-              :refreshFieldObj="refreshFieldObj"
-              :form-api="formApi"
-              :schema="childSchema"
-              v-model:value="formModel![childSchema.field]"
-              :label-col="labelCol"
-              :isWorkFlow="isWorkFlow"
-            />
-          </template>
-        </Col>
-      </Row>
-    </template>
-    <!--如果是tab 组件 需要新增tab组件包裹-->
-    <template v-else-if="schema.component === 'Tab'">
-      <Tabs
-        v-model:activeKey="activeKey"
-        :tabPosition="(schema.componentProps as any ).tabPosition"
-        :type="(schema.componentProps as any ).type"
-        :size="(schema.componentProps as any ).tabSize"
-        v-show="getIsShow(schema)"
-      >
-        <TabPane
-          v-for="(tab, tabIndex) in schema.children"
-          :tab="tab.name"
-          :forceRender="true"
-          :key="tabIndex"
-        >
-          <template v-for="childSchema in tab.list" :key="childSchema.field">
-            <SimpleFormItem
-              v-if="showComponent(childSchema)"
-              :refreshFieldObj="refreshFieldObj"
-              :form-api="formApi"
-              :schema="childSchema"
-              :isWorkFlow="isWorkFlow"
-              v-model:value="formModel![childSchema.field]"
-            />
-          </template>
-        </TabPane>
-      </Tabs>
-    </template>
-    <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
-    <template v-else-if="schema.component.includes('Form')">
-      <FormItem
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :labelAlign="formProps?.labelAlign"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-      >
-        <component
-          :disabled="getDisable"
-          :is="formComponent(schema)"
-          :size="formProps?.size"
-          v-bind="schema.componentProps"
-          v-model:value="formModel![schema.field]"
-        />
-      </FormItem>
-    </template>
-    <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
-    <template v-else-if="schema.component.includes('OneForOne')">
-      <FormItem
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :labelAlign="formProps?.labelAlign"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-      >
-        <component
-          :disabled="getDisable"
-          :refreshFieldObj="refreshFieldObj"
-          :is="componentMap.get(schema.component)"
-          :size="formProps?.size"
-          v-bind="schema.componentProps"
-          v-model:value="formModel![schema.field]"
-        />
-      </FormItem>
-    </template>
-    <template v-else-if="schema.component === 'TableLayout'">
-      <TableLayoutPreview :element="schema" v-if="getShow(schema)" v-show="getIsShow(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>
+        <!--如果是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"
             >
-              <template v-for="childSchema in tdElement.children" :key="childSchema.field">
-                <SimpleFormItem
-                  v-if="showComponent(childSchema)"
-                  :refreshFieldObj="refreshFieldObj"
-                  :form-api="formApi"
-                  :schema="childSchema"
-                  :isWorkFlow="isWorkFlow"
-                  v-model:value="formModel![childSchema.field]"
+                <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>
+                </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"
+            >
+                <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"
+                        />
+                    </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"
                 />
-              </template>
-            </div>
-          </div>
+            </FormItem>
         </template>
-      </TableLayoutPreview>
-    </template>
-    <!--如果是时间区间 组件 需要v-model:startField="表单对象[字段名]" v-model:endField="表单对象[字段名]"-->
-    <template v-else-if="schema.component.includes('Range')">
-      <FormItem
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        :validateTrigger="['blur', 'change']"
-        :rules="rules"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-      >
-        <component
-          :disabled="getDisable"
-          :is="componentMap.get(schema.component)"
-          :size="formProps?.size"
-          v-bind="schema.componentProps"
-          v-model:startField="schema.field.split(',')[0]"
-          v-model:endField="schema.field.split(',')[1]"
-          v-model:value="formModel![schema.field]"
-        />
-      </FormItem>
-      <!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定  starTime  和 endTime -->
-      <FormItem
-        :key="schema.key"
-        v-show="false"
-        :name="schema.field.split(',')[0]"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-      >
-        <input type="hidden" />
-      </FormItem>
-      <FormItem
-        :key="schema.key"
-        v-show="false"
-        :name="schema.field.split(',')[1]"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-      >
-        <input type="hidden" />
-      </FormItem>
-    </template>
-    <!--如果checked  或者 switch组件 需要v-model:checked="表单对象[字段名]" "-->
-    <template v-else-if="checkedValueComponents.includes(schema.component)">
-      <FormItem
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        :rules="rules"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-      >
-        <component
-          :key="refreshFieldObj[schema.field]"
-          :is="componentMap.get(schema.component)"
-          :disabled="getDisable"
-          :size="formProps?.size"
-          v-bind="getComponentsProps"
-          v-model:checked="formModel![schema.field]"
-        />
-      </FormItem>
-    </template>
-    <!--如果是card 组件 需要新增card组件包裹-->
-    <template v-else-if="schema.component.includes('Card')">
-      <CollapseContainer
-        :title="(schema.componentProps as any ).title"
-        :bordered="false"
-        :hasLeftBorder="true"
-        v-show="getIsShow(schema)"
-      >
-        <template v-for="childSchema  in schema.children![0].list" :key="childSchema.field">
-          <SimpleFormItem
-            v-if="showComponent(childSchema)"
-            :refreshFieldObj="refreshFieldObj"
-            :form-api="formApi"
-            :schema="childSchema"
-            :isWorkFlow="isWorkFlow"
-            v-model:value="formModel![childSchema.field]"
-          />
+        <!--如果是子表单 组件 需要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>
         </template>
-      </CollapseContainer>
-    </template>
-    <!--如果是 分割线 组件 需要新增divider组件包裹-->
-    <template v-else-if="schema.component.includes('Divider')">
-      <FormItem v-show="getIsShow(schema)">
-        <Divider v-bind="getComponentsProps"> {{ getComponentsProps.text }}</Divider>
-      </FormItem>
-    </template>
-    <!--如果是 意见簿 组件 需要使用defaultValue直接赋值 -->
-    <template v-else-if="schema.component.includes('Opinion')">
-      <FormItem
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        :rules="rules"
-        :validateTrigger="['blur', 'change']"
-      >
-        <component
-          :is="componentMap.get(schema.component)"
-          :key="refreshFieldObj[schema.field]"
-          :disabled="getDisable"
-          :size="formProps?.size"
-          v-bind="getComponentsProps"
-          :value="schema.defaultValue"
-        />
-      </FormItem>
-    </template>
-    <template v-else>
-      <FormItem
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
-        :key="schema.key"
-        :name="schema.field"
-        :label="getComponentsProps.showLabel ? schema.label : ''"
-        :label-col="labelCol"
-        :wrapperCol="itemLabelWidthProp.wrapperCol"
-        :rules="rules"
-        :validateTrigger="['blur', 'change']"
-      >
-        <template v-if="getDisable && /Input/.test(schema.component)">
-          <readonly :schema="schema" :value="formModel![schema.field]" />
+        <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',
+                            }"
+                        >
+                            <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"
+                                />
+                            </template>
+                        </div>
+                    </div>
+                </template>
+            </TableLayoutPreview>
+        </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>
+            <!-- 因为Range会变为 开始时间 和 结束时间 2个属性给与表单数据 所以需要2个隐藏框绑定  starTime  和 endTime -->
+            <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]"
+            >
+                <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>
+        </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"
+            >
+                <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"
+                    />
+                </template>
+            </CollapseContainer>
+        </template>
+        <!--如果是 分割线 组件 需要新增divider组件包裹-->
+        <template v-else-if="schema.component.includes('Divider')">
+            <FormItem v-show="getIsShow(schema)">
+                <Divider v-bind="getComponentsProps"> {{ getComponentsProps.text }}</Divider>
+            </FormItem>
+        </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>
         </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"
-          />
+            <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 && /Input|AutoCodeRule|DatePicker/.test(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"
+                    />
+                </template>
+            </FormItem>
         </template>
-      </FormItem>
-    </template>
-  </div>
+    </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);
-  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);
+    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 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 event = new Function(
-              'schema',
-              'formModel',
-              'formActionType',
-              `${componentProps['events'][eventKey]}`,
-            );
-            componentProps['on' + upperFirst(eventKey)] = function () {
-              let cloneFormModel = cloneDeep(formModel);
-              for (let item in cloneFormModel) {
-                let field = camelCaseString(item);
-                if (field) cloneFormModel[field] = cloneFormModel[item];
-              }
-              event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi);
-
-              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: '触发事件填写有误！',
-            });
-          }
+    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 (isBoolean(props.schema.dynamicDisabled)) {
-      componentProps['disabled'] = props.schema.dynamicDisabled;
-    }
-    if (isBoolean(props.schema.required)) {
-      componentProps['required'] = props.schema.required;
-    }
+        if (isFunction(dynamicDisabled)) {
+            disabled = dynamicDisabled({
+                values: formModel![getSchema.value.field],
+                model: formModel!,
+                schema: unref(getSchema),
+                field: unref(getSchema).field,
+            });
+        }
+        return disabled;
+    });
 
-    return componentProps as Recordable;
-  });
+    const getComponentsProps = computed(() => {
+        let { componentProps = {} } = props.schema;
 
-  const labelCol = computed(() => {
-    return unref(getComponentsProps).span
-      ? { span: unref(getComponentsProps).span }
-      : unref(itemLabelWidthProp).labelCol;
-  });
+        if (isFunction(componentProps)) {
+            componentProps =
+                componentProps({
+                    schema: props.schema,
+                    formModel,
+                    formActionType: props.formApi,
+                }) ?? {};
+        } else {
+            if (componentProps['events']) {
+                for (const eventKey in componentProps['events']) {
+                    try {
+                        const event = new Function(
+                            'schema',
+                            'formModel',
+                            'formActionType',
+                            `${componentProps['events'][eventKey]}`,
+                        );
+                        componentProps['on' + upperFirst(eventKey)] = function () {
+                            let cloneFormModel = cloneDeep(formModel);
+                            for (let item in cloneFormModel) {
+                                let field = camelCaseString(item);
+                                if (field) cloneFormModel[field] = cloneFormModel[item];
+                            }
+                            event(
+                                props.schema,
+                                isCamelCase ? cloneFormModel : formModel,
+                                props.formApi,
+                            );
 
-  const rules = computed(() => {
-    const requiredRule = {
-      required: unref(getComponentsProps).required || false,
-      message: `${props.schema.label}是必填项`,
+                            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: '触发事件填写有误！',
+                        });
+                    }
+                }
+            }
+        }
+        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(() => {
+        return unref(getComponentsProps).span
+            ? { span: unref(getComponentsProps).span }
+            : unref(itemLabelWidthProp).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 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 defaultComponent = (schema) => {
+        return componentMap.get(
+            schema.key === 'ac18952da41b45c9a66ffba3e42b7f3d'
+                ? 'ErpUpload'
+                : schema.key === 'b3ba87573cf0466d951bc63fd4df1c78'
+                ? 'ErpCheck'
+                : schema.component,
+        );
+    };
 
-  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 getShow(schema: FormSchema): boolean {
-    const { show } = schema;
-    let isIfShow = true;
-
-    if (isBoolean(show)) {
-      isIfShow = show;
+    function showComponent(schema) {
+        return props.isWorkFlow
+            ? !noShowWorkFlowComponents.includes(schema.type)
+            : !noShowGenerateComponents.includes(schema.type);
     }
-    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: 28px;
+    }
+</style>
+<style lang="less">
+    .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-arrow {
+            display: none;
+        }
+    }
 </style>
diff --git a/src/views/secondDev/createFlow.vue b/src/views/secondDev/createFlow.vue
index 4ea2595..d234333 100644
--- a/src/views/secondDev/createFlow.vue
+++ b/src/views/secondDev/createFlow.vue
@@ -1,131 +1,143 @@
 <template>
-  <div clas="itc-create-flow">
-    <div class="toolbar">
-      <a-space wrap>
-        <a-button>提交</a-button>
-        <a-button>暂存</a-button>
-        <a-button>关闭</a-button>
-        <a-button>打印</a-button>
-        <a-button>流程图</a-button>
-      </a-space>
+    <div class="itc-create-flow">
+        <div class="toolbar">
+            <a-space wrap>
+                <a-button>提交</a-button>
+                <a-button>暂存</a-button>
+                <a-button>关闭</a-button>
+                <a-button>打印</a-button>
+                <a-button>流程图</a-button>
+            </a-space>
+        </div>
+        <div class="flow-content">
+            <FormInformation
+                :key="randKey"
+                ref="formInformation"
+                :disabled="false"
+                :formAssignmentData="data.formAssignmentData"
+                :formInfos="data.formInfos"
+                :opinions="data.opinions"
+                :opinionsComponents="data.opinionsComponents"
+            />
+        </div>
     </div>
-    <div class="flow-content">
-      <FormInformation
-        :key="randKey"
-        ref="formInformation"
-        :disabled="false"
-        :formAssignmentData="data.formAssignmentData"
-        :formInfos="data.formInfos"
-        :opinions="data.opinions"
-        :opinionsComponents="data.opinionsComponents"
-      />
-    </div>
-  </div>
 </template>
 
 <script setup>
-  import { useRouter } from 'vue-router';
-  import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
-  import FormInformation from '/@/views/secondDev/FormInformation.vue';
-  import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+    import { useRouter } from 'vue-router';
+    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
+    import FormInformation from '/@/views/secondDev/FormInformation.vue';
+    import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
+    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 
-  const router = useRouter();
-  const tabStore = useMultipleTabStore();
+    const router = useRouter();
+    const tabStore = useMultipleTabStore();
 
-  import { nextTick, onMounted, ref, toRaw } from 'vue';
+    import { nextTick, onMounted, ref, toRaw } from 'vue';
 
-  const { data, initProcessData } = userTaskItem();
-  const currentRoute = router.currentRoute;
-  const rParams = currentRoute.value.query;
-  const rSchemaId = rParams.schemaId;
-  let formInformation = ref();
-  let randKey = ref('randkey'); // 强制表单重新渲染
+    const { data, initProcessData } = userTaskItem();
+    const currentRoute = router.currentRoute;
+    const rParams = currentRoute.value.query;
+    const rSchemaId = rParams.schemaId;
+    let formInformation = ref();
+    let randKey = ref('randkey'); // 强制表单重新渲染
 
-  const props = defineProps({
-    schemaId: {
-      type: String,
-      required: true,
-    },
-    draftsJsonStr: {
-      type: String,
-    },
-    draftsId: {
-      type: String,
-    },
-    taskId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    processId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    formData: {
-      type: Object,
-    },
-    formId: {
-      type: String,
-    },
-    rowKeyData: {
-      type: String,
-    },
-  });
+    const props = defineProps({
+        schemaId: {
+            type: String,
+            required: true,
+        },
+        draftsJsonStr: {
+            type: String,
+        },
+        draftsId: {
+            type: String,
+        },
+        taskId: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        processId: {
+            type: String,
+            required: false,
+            default: '',
+        },
+        formData: {
+            type: Object,
+        },
+        formId: {
+            type: String,
+        },
+        rowKeyData: {
+            type: String,
+        },
+    });
 
-  onMounted(async () => {
-    try {
-      if (props.processId) {
-        // 重新发起
-        let res = await getReStartProcessInfo(props.taskId, props.processId);
-        res.taskApproveOpinions = [];
-        initProcessData(res);
-      } else if (props.schemaId && props.formId) {
-        let res = await getStartProcessInfo(props.schemaId);
+    onMounted(async () => {
+        try {
+            if (props.processId) {
+                // 重新发起
+                let res = await getReStartProcessInfo(props.taskId, props.processId);
+                res.taskApproveOpinions = [];
+                initProcessData(res);
+            } else if (props.schemaId && props.formId) {
+                let res = await getStartProcessInfo(props.schemaId);
 
-        if (props.formData && props.formId) {
-          res.formInfos.map((m) => {
-            if (m.formConfig.formId === props.formId) {
-              m.formData = toRaw(props.formData);
+                if (props.formData && props.formId) {
+                    res.formInfos.map((m) => {
+                        if (m.formConfig.formId === props.formId) {
+                            m.formData = toRaw(props.formData);
+                        }
+                    });
+                }
+                initProcessData(res);
+            } else {
+                // 发起流程
+                let res = await getStartProcessInfo(rSchemaId);
+                const title = res?.schemaInfo?.name;
+                if (title) {
+                    tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
+                }
+                initProcessData(res);
             }
-          });
+        } catch (error) {}
+
+        await nextTick();
+        initDraftsFormData();
+
+        randKey.value = Math.random() + '';
+    });
+
+    async function initDraftsFormData() {
+        //isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
+        if (props.draftsJsonStr) {
+            let formDataJson = JSON.parse(props.draftsJsonStr);
+            let formData = [];
+
+            data.formInfos.forEach((item) => {
+                if (
+                    formDataJson &&
+                    item.formConfig &&
+                    item.formConfig.key &&
+                    formDataJson[item.formConfig.key]
+                ) {
+                    formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
+                }
+            });
+            await formInformation.value.setFormData(formData);
         }
-        initProcessData(res);
-      } else {
-        // 发起流程
-        let res = await getStartProcessInfo(rSchemaId);
-        const title = res?.schemaInfo?.name;
-        if (title) {
-          tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
-        }
-        initProcessData(res);
-      }
-    } catch (error) {}
-
-    await nextTick();
-    initDraftsFormData();
-
-    randKey.value = Math.random() + '';
-  });
-
-  async function initDraftsFormData() {
-    //isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
-    if (props.draftsJsonStr) {
-      let formDataJson = JSON.parse(props.draftsJsonStr);
-      let formData = [];
-
-      data.formInfos.forEach((item) => {
-        if (
-          formDataJson &&
-          item.formConfig &&
-          item.formConfig.key &&
-          formDataJson[item.formConfig.key]
-        ) {
-          formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
-        }
-      });
-      await formInformation.value.setFormData(formData);
     }
-  }
 </script>
+
+<style lang="less">
+    .itc-create-flow {
+        padding: 10px 12px;
+        background-color: #fff;
+
+        .toolbar {
+            padding-bottom: 15px;
+            border-bottom: 1px solid #eee;
+        }
+    }
+</style>