style: 略微调整只读字段的表现形式

src/components/Form/src/components/Readonly.vue

@@ -9,11 +9,34 @@
         value: String,
         schema: Object,
     });
-  const fieldValue = ref(props.value);
+
+    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 = newValue;
+            fieldValue.value = genFieldValue(newValue);
         },
     );
 </script>
+
+<style>
+    .field-readonly {
+        white-space: pre-wrap;
+    }
+</style>

src/components/SimpleForm/src/components/SimpleFormItem.vue

@@ -3,22 +3,22 @@
         <!--如果是grid 组件 需要新增grid布局包裹-->
         <template v-if="schema.component.includes('Grid')">
             <Row
-        type="flex"
+                v-show="getIsShow(schema)"
+                :align="(schema.componentProps as any ).align"
                 :gutter="(schema.componentProps as any ).gutter ?? 0"
                 :justify="(schema.componentProps as any ).justify"
-        :align="(schema.componentProps as any ).align"
+                type="flex"
-        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"
+                            :form-api="formApi"
                             :isWorkFlow="isWorkFlow"
+                            :label-col="labelCol"
+                            :refreshFieldObj="refreshFieldObj"
+                            :schema="childSchema"
                         />
                     </template>
                 </Col>
@@ -27,26 +27,26 @@
         <!--如果是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"
-        :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"
+                    :forceRender="true"
+                    :tab="tab.name"
                 >
                     <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]"
+                            :form-api="formApi"
+                            :isWorkFlow="isWorkFlow"
+                            :refreshFieldObj="refreshFieldObj"
+                            :schema="childSchema"
                         />
                     </template>
                 </TabPane>
@@ -55,48 +55,48 @@
         <!--如果是子表单 组件 需要v-model:value="表单对象[字段名]"-->
         <template v-else-if="schema.component.includes('Form')">
             <FormItem
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
                 :key="schema.key"
-        :name="schema.field"
                 :label="getComponentsProps.showLabel ? schema.label : ''"
                 :label-col="labelCol"
                 :labelAlign="formProps?.labelAlign"
+                :name="schema.field"
                 :wrapperCol="itemLabelWidthProp.wrapperCol"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
             >
                 <component
-          :disabled="getDisable"
                     :is="formComponent(schema)"
+                    v-model:value="formModel![schema.field]"
+                    :disabled="getDisable"
                     :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
+                v-if="getShow(schema)"
+                v-show="getIsShow(schema)"
                 :key="schema.key"
-        :name="schema.field"
                 :label="getComponentsProps.showLabel ? schema.label : ''"
                 :label-col="labelCol"
                 :labelAlign="formProps?.labelAlign"
+                :name="schema.field"
                 :wrapperCol="itemLabelWidthProp.wrapperCol"
-        v-if="getShow(schema)"
-        v-show="getIsShow(schema)"
             >
                 <component
+                    :is="componentMap.get(schema.component)"
+                    v-model:value="formModel![schema.field]"
                     :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)">
+            <TableLayoutPreview v-if="getShow(schema)" v-show="getIsShow(schema)" :element="schema">
                 <template #tdElement="{ tdElement }">
                     <div class="h-full">
                         <div
@@ -107,14 +107,17 @@
                                 padding: '10px',
                             }"
                         >
-              <template v-for="childSchema in tdElement.children" :key="childSchema.field">
+                            <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]"
+                                    :form-api="formApi"
+                                    :isWorkFlow="isWorkFlow"
+                                    :refreshFieldObj="refreshFieldObj"
+                                    :schema="childSchema"
                                 />
                             </template>
                         </div>
@@ -125,40 +128,40 @@
         <!--如果是时间区间 组件 需要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)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :name="schema.field"
+                :rules="rules"
+                :validateTrigger="['blur', 'change']"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
             >
                 <component
-          :disabled="getDisable"
                     :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"
-          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]"
+                :key="schema.key"
                 :label="getComponentsProps.showLabel ? schema.label : ''"
+                :name="schema.field.split(',')[0]"
             >
                 <input type="hidden" />
             </FormItem>
             <FormItem
-        :key="schema.key"
                 v-show="false"
-        :name="schema.field.split(',')[1]"
+                :key="schema.key"
                 :label="getComponentsProps.showLabel ? schema.label : ''"
+                :name="schema.field.split(',')[1]"
             >
                 <input type="hidden" />
             </FormItem>
@@ -166,41 +169,41 @@
         <!--如果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)"
+                :key="schema.key"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
+                :label-col="labelCol"
+                :name="schema.field"
+                :rules="rules"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
             >
                 <component
-          :key="refreshFieldObj[schema.field]"
                     :is="componentMap.get(schema.component)"
+                    :key="refreshFieldObj[schema.field]"
+                    v-model:checked="formModel![schema.field]"
                     :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"
+                v-show="getIsShow(schema)"
                 :bordered="false"
                 :hasLeftBorder="true"
-        v-show="getIsShow(schema)"
+                :title="(schema.componentProps as any ).title"
             >
                 <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]"
+                        :form-api="formApi"
+                        :isWorkFlow="isWorkFlow"
+                        :refreshFieldObj="refreshFieldObj"
+                        :schema="childSchema"
                     />
                 </template>
             </CollapseContainer>
@@ -217,20 +220,20 @@
                 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"
+                :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"
-          v-bind="getComponentsProps"
                     :value="schema.defaultValue"
+                    v-bind="getComponentsProps"
                 />
             </FormItem>
         </template>
@@ -239,14 +242,16 @@
                 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"
+                :name="schema.field"
                 :rules="rules"
                 :validateTrigger="['blur', 'change']"
+                :wrapperCol="itemLabelWidthProp.wrapperCol"
+            >
+                <template
+                    v-if="getDisable && /Input|AutoCodeRule|DatePicker/.test(schema.component)"
                 >
-        <template v-if="getDisable && /Input/.test(schema.component)">
                     <readonly :schema="schema" :value="formModel![schema.field]" />
                 </template>
                 <template v-else>
@@ -387,7 +392,11 @@
 
         if (isFunction(componentProps)) {
             componentProps =
-        componentProps({ schema: props.schema, formModel, formActionType: props.formApi }) ?? {};
+                componentProps({
+                    schema: props.schema,
+                    formModel,
+                    formActionType: props.formApi,
+                }) ?? {};
         } else {
             if (componentProps['events']) {
                 for (const eventKey in componentProps['events']) {
@@ -404,12 +413,20 @@
                                 let field = camelCaseString(item);
                                 if (field) cloneFormModel[field] = cloneFormModel[item];
                             }
-              event(props.schema, isCamelCase ? cloneFormModel : formModel, props.formApi);
+                            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) {
+                                    if (
+                                        cloneFormModel &&
+                                        field &&
+                                        cloneFormModel[field] !== undefined
+                                    ) {
                                         formModel[item] = cloneFormModel[field];
                                     }
                                 }
@@ -460,7 +477,10 @@
             // console.log('formitem watch!!!!!!!!');
             //填值以后需要手动校验的组件
             const validateComponents = ['User', 'RichTextEditor', 'Upload', 'SelectMap'];
-      if (validateComponents.includes(props.schema.component) && formModel![props.schema.field]) {
+            if (
+                validateComponents.includes(props.schema.component) &&
+                formModel![props.schema.field]
+            ) {
                 setTimeout(() => {
                     props.formApi?.validateFields([props.schema.field]);
                 }, 100);
@@ -491,9 +511,11 @@
 
     const formComponent = (schema) => {
         return componentMap.get(
-      ['caseErpApplyDetailList', 'case_erp_apply_detailList', 'CASE_ERP_APPLY_DETAILList'].includes(
+            [
-        schema.field,
+                'caseErpApplyDetailList',
-      )
+                'case_erp_apply_detailList',
+                'CASE_ERP_APPLY_DETAILList',
+            ].includes(schema.field)
                 ? 'ErpApply'
                 : schema.component,
         );
@@ -514,6 +536,7 @@
             ? !noShowWorkFlowComponents.includes(schema.type)
             : !noShowGenerateComponents.includes(schema.type);
     }
+
     function getShow(schema: FormSchema): boolean {
         const { show } = schema;
         let isIfShow = true;
@@ -543,3 +566,20 @@
         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>

src/views/secondDev/createFlow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div clas="itc-create-flow">
+    <div class="itc-create-flow">
         <div class="toolbar">
             <a-space wrap>
                 <a-button>提交</a-button>
@@ -129,3 +129,15 @@
         }
     }
 </script>
+
+<style lang="less">
+    .itc-create-flow {
+        padding: 10px 12px;
+        background-color: #fff;
+
+        .toolbar {
+            padding-bottom: 15px;
+            border-bottom: 1px solid #eee;
+        }
+    }
+</style>