fix: 日期时间区间支持只读显示，选人组件在只读状态下不再可选

fix: 略微调整表单标签的高度

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,

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

@@ -8,38 +8,52 @@ import { ref, watch } from 'vue';
     const props = defineProps({
         value: String,
         schema: Object,
+        model: Object
     });
 
     const fieldValue = ref(genFieldValue(props.value));
+    const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Info', 'Text', 'InputTextArea', 'InputNumber'];
+
+    function parseRangeVal(val, component) {
+        if (component !== 'RangePicker' || !val) {
+            return val || '';
+        }
+        return val.split(' ')[0];
+    }
 
     function genFieldValue(val) {
-    if (!props?.schema || (!val && val !== 0)) {
+        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 '';
         }
-    const schema = props.schema;
-    const { componentProps, component } = schema;
 
-    if ([
+        if (textComponents.includes(component)) {
-        "Input",
-        "AutoCodeRule",
-        "DatePicker",
-        "TimePicker",
-        "Info",
-        "Text",
-        'InputTextArea',
-        'InputNumber'].includes(component)) {
             return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
-    }
+        } else if (component === 'Switch') {
-    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>
 

src/components/Form/src/components/SelectUser.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+    <div :class="{ disabled }" class="form-select-user">
         <FormItemRest>
             <SelectUser
+                :key="key"
                 :multiple="multiple"
                 :selectedIds="selectedIds"
-        :key="key"
+                :disabled="disabled"
                 @change="
                     (ids, options) => {
                         emit('update:value', ids.join(','));
@@ -18,18 +19,11 @@
                     }
                 "
             >
-        <a-input
+                <a-input v-model:value="userNames" :bordered="bordered" :disabled="disabled" :placeholder="placeholder" :size="size" readonly>
-          readonly
+                    <template v-if="prefix" #prefix>
-          :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">
+                    <template v-if="suffix" #suffix>
                         <Icon :icon="suffix" />
                     </template>
                 </a-input>
@@ -56,12 +50,12 @@
         size: String,
         bordered: {
             type: Boolean,
-      default: true,
+            default: true
         },
         multiple: {
             type: Boolean,
-      default: true,
+            default: true
-    },
+        }
     });
 
     const userNames = ref<string>();
@@ -80,7 +74,29 @@
             key.value++;
         },
         {
-      immediate: true,
+            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>

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;

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"
+            <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">
-                :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]"
+                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
-                        :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"
+            <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" :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]"
+                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
-                            :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"
+            <FormItem
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
+                v-if="getShow(schema)"
-                :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                v-show="getIsShow(schema)"
-                <component :is="formComponent(schema)" v-model:value="formModel![schema.field]" :disabled="getDisable"
+                :key="schema.key"
-                    :size="formProps?.size" v-bind="schema.componentProps" />
+                :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"
+            <FormItem
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol"
+                v-if="getShow(schema)"
-                :labelAlign="formProps?.labelAlign" :name="schema.field" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                v-show="getIsShow(schema)"
-                <component :is="componentMap.get(schema.component)" v-model:value="formModel![schema.field]"
+                :key="schema.key"
-                    :disabled="getDisable" :refreshFieldObj="refreshFieldObj" :size="formProps?.size"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
-                    v-bind="schema.componentProps" />
+                :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="{
+                        <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)"
+                                <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="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"
+            <FormItem
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
+                v-if="getShow(schema)"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                v-show="getIsShow(schema)"
-                <component :is="componentMap.get(schema.component)" v-model:endField="schema.field.split(',')[1]"
+                :key="schema.key"
-                    v-model:startField="schema.field.split(',')[0]" v-model:value="formModel![schema.field]"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
-                    :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+                :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 : ''"
+            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[0]">
-                :name="schema.field.split(',')[0]">
                 <input type="hidden" />
             </FormItem>
-            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''"
+            <FormItem v-show="false" :key="schema.key" :label="getComponentsProps.showLabel ? schema.label : ''" :name="schema.field.split(',')[1]">
-                :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"
+            <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">
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
+                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]" v-model:checked="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
-                :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"
+            <CollapseContainer v-show="getIsShow(schema)" :bordered="false" :hasLeftBorder="true" :title="(schema.componentProps as any).title">
-                :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]"
+                    <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
-                        :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
-                        :schema="childSchema" />
                 </template>
             </CollapseContainer>
         </template>
@@ -115,25 +128,37 @@
         </template>
         <!--如果是 意见簿 组件 需要使用defaultValue直接赋值 -->
         <template v-else-if="schema.component.includes('Opinion')">
-            <FormItem v-if="getShow(schema)" v-show="getIsShow(schema)" :key="schema.key"
+            <FormItem
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
+                v-if="getShow(schema)"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                v-show="getIsShow(schema)"
-                <component :is="componentMap.get(schema.component)" :key="refreshFieldObj[schema.field]"
+                :key="schema.key"
-                    :disabled="getDisable" :size="formProps?.size" :value="schema.defaultValue"
+                :label="getComponentsProps.showLabel ? schema.label : ''"
-                    v-bind="getComponentsProps" />
+                :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"
+            <FormItem
-                :label="getComponentsProps.showLabel ? schema.label : ''" :label-col="labelCol" :name="schema.field"
+                v-if="getShow(schema)"
-                :rules="rules" :validateTrigger="['blur', 'change']" :wrapperCol="itemLabelWidthProp.wrapperCol">
+                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]"
+                    <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
-                        v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size"
-                        v-bind="getComponentsProps" />
                 </template>
             </FormItem>
         </template>
@@ -392,7 +417,7 @@ function showComponent(schema) {
     }
 
     function readonlySupport(name) {
-    return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Info/.test(name)
+        return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Info|Range/.test(name);
     }
 
     function getShow(schema: FormSchema): boolean {
@@ -421,7 +446,7 @@ function getIsShow(schema: FormSchema): boolean {
     :deep(.ant-form-item-label > label) {
         white-space: normal;
         display: inline;
-    line-height: 28px;
+        line-height: 32px;
     }
 </style>
 <style lang="less">