feat: 明细表中的下拉框支持label、value分开存储以提升首次渲染性能

src/components/Designer/src/types/index.ts

@@ -242,6 +242,7 @@ export const advanceComponents = [
             responsive: false,
             respNewRow: false,
             placeholder: t('请选择下拉选择'),
+            sepTextField: '',
             showLabel: true,
             showSearch: false,
             clearable: false,

src/components/Select/src/Select.vue

@@ -1,41 +1,21 @@
 <template>
-  <a-select
+    <a-select v-model:value="selectedValue" :filter-option="handleFilterOption" :mode="mode" :options="getOptions" :placeholder="placeholder" allowClear v-bind="$attrs" @change="handleChange" @dropdown-visible-change="handleFetch">
-    @dropdown-visible-change="handleFetch"
+        <template v-for="item in Object.keys($slots)" #[item]="data">
-    v-bind="$attrs"
-    @change="handleChange"
-    :options="getOptions"
-    v-model:value="selectedValue"
-    :placeholder="placeholder"
-    :mode="mode"
-    :filter-option="handleFilterOption"
-    allowClear
-  >
-    <template #[item]="data" v-for="item in Object.keys($slots)">
             <slot :name="item" v-bind="data || {}"></slot>
         </template>
-    <template #suffixIcon v-if="loading">
+        <template v-if="loading" #suffixIcon>
             <LoadingOutlined spin />
         </template>
-    <template #notFoundContent v-if="loading">
+        <template v-if="loading" #notFoundContent>
             <span>
-        <LoadingOutlined spin class="mr-1" />
+                <LoadingOutlined class="mr-1" spin />
                 {{ t('component.form.apiSelectNotFound') }}
             </span>
         </template>
     </a-select>
 </template>
 <script lang="ts">
-  import {
+    import { defineComponent, PropType, ref, computed, unref, watch, inject, onMounted, watchEffect } from 'vue';
-    defineComponent,
-    PropType,
-    ref,
-    computed,
-    unref,
-    watch,
-    inject,
-    onMounted,
-    watchEffect,
-  } from 'vue';
     import { isFunction } from '/@/utils/is';
     import { useAttrs } from '/@/hooks/core/useAttrs';
     import { get, omit } from 'lodash-es';
@@ -45,27 +25,28 @@
     import { getDicDetailList } from '/@/api/system/dic';
     import { getDatasourceData } from '/@/api/system/datasource';
     import { apiConfigFunc, camelCaseString, isValidJSON } from '/@/utils/event/design';
+    import {debounce} from 'lodash-es';
 
     type OptionsItem = { label: string; value: string; disabled?: boolean };
 
     export default defineComponent({
         name: 'ApiSelect',
         components: {
-      LoadingOutlined,
+            LoadingOutlined
         },
         inheritAttrs: false,
         props: {
             value: {
-        type: [Array, Object, String, Number],
+                type: [Array, Object, String, Number]
             },
             numberToString: propTypes.bool,
             api: {
                 type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
-        default: null,
+                default: null
             },
             // api params
             params: {
-        type: [Array, Object, String, Number],
+                type: [Array, Object, String, Number]
             },
             placeholder: String,
             resultField: propTypes.string.def(''),
@@ -81,6 +62,8 @@
             mode: String,
             mainKey: String,
             index: Number,
+            sepTextField: String, // 独立存储文本部分
+            row: Object // 行数据，在明细表里生效
         },
         emits: ['options-change', 'change', 'update:value'],
         setup(props, { emit }) {
@@ -94,6 +77,9 @@
             const isCamelCase = inject<boolean>('isCamelCase', false);
             // Embedded in the form, just use the hook binding to perform form verification
             const selectedValue = ref<string | number | undefined>(undefined);
+            const valChanged = ref(false);
+            // label分开存储时，第一次懒加载会同时处罚两次fetch，所以这里延迟执行
+            const fetch = debounce(_fetch, 200, {leading: false, trailing: true});
 
             const getOptions = computed(() => {
                 const { labelField, valueField, numberToString } = props;
@@ -104,7 +90,7 @@
                             prev.push({
                                 ...omit(next, [labelField, valueField]),
                                 label: next[labelField],
-                value: numberToString ? `${value}` : value,
+                                value: numberToString ? `${value}` : value
                             });
                         }
                         return prev;
@@ -122,13 +108,9 @@
                                 let val = isValidJSON(o.value);
                                 let field = '';
                                 if (val && val.bindTable) {
-                  let table = !isCamelCase
+                                    let table = !isCamelCase ? val.bindTable + 'List' : camelCaseString(val.bindTable + '_List');
-                    ? val.bindTable + 'List'
-                    : camelCaseString(val.bindTable + '_List');
                                     field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
-                  formModel &&
+                                    formModel && formModel[table!][props.index || 0] && formModel[table!][props.index || 0][field];
-                    formModel[table!][props.index || 0] &&
-                    formModel[table!][props.index || 0][field];
                                 } else if (val && val.bindField) {
                                     field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
                                     formModel && formModel[field];
@@ -139,42 +121,72 @@
                     fetch();
                 }
             });
+
+            function setInitOptions() {
+                const { sepTextField, row } = props;
+                if (sepTextField && row && row[sepTextField]) {
+                    const labelArr = row[sepTextField].split(',');
+                    const idArr = (selectedValue.value + '').split(',');
+                    options.value = idArr.map((id, index) => {
+                        return {
+                            label: labelArr[index],
+                            value: id
+                        };
+                    });
+                }
+            }
+
             watch(
                 () => [props.params, props.apiConfig],
                 () => {
                     unref(isFirstLoad) && fetch();
                 },
-        { deep: true },
+                { deep: true }
             );
 
             watch(
                 () => props.datasourceType,
                 (val) => {
                     fetch();
-          selectedValue.value =
+                    selectedValue.value = !!props.value && val === 'staticData' ? (props.value as any) : undefined;
-            !!props.value && val === 'staticData' ? (props.value as any) : undefined;
+                }
-        },
             );
 
             watch(
                 () => props.value,
                 () => {
-          selectedValue.value = ((typeof props.value === 'string' && !!props.value
+                    selectedValue.value = ((typeof props.value === 'string' && !!props.value ? props.value?.split(',') : props.value) || undefined) as any;
-            ? props.value?.split(',')
-            : props.value) || undefined) as any;
                 },
                 {
-          immediate: true,
+                    immediate: true
-        },
+                }
             );
+
+            function updateSepTextField(arr) {
+                if (!props.sepTextField || !props.row) {
+                    return;
+                }
+                const options = unref(getOptions);
+                const txtArr = options
+                    .filter((opt) => {
+                        return arr.includes(opt.value);
+                    })
+                    .map((item) => item.label);
+                props.row[props.sepTextField] = txtArr.join(',');
+            }
+
             onMounted(() => {
                 fetch();
-        selectedValue.value = ((typeof props.value === 'string' && !!props.value
+                selectedValue.value = ((typeof props.value === 'string' && !!props.value ? props.value?.split(',') : props.value) || undefined) as any;
-          ? props.value?.split(',')
-          : props.value) || undefined) as any;
             });
 
-      async function fetch() {
+
+
+            async function _fetch() {
+                const { sepTextField } = props;
+                if (!valChanged.value && sepTextField) {
+                    return setInitOptions();
+                }
                 options.value = [];
                 let api;
                 if (props.datasourceType) {
@@ -189,12 +201,7 @@
                         api = getDatasourceData;
                     }
                     if (props.datasourceType === 'api') {
-            options.value = await apiConfigFunc(
+                        options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
-              props.apiConfig,
-              isCamelCase,
-              formModel,
-              props.index,
-            );
                     }
                 } else {
                     api = props.api;
@@ -238,6 +245,9 @@
                     } else if (!props.immediate && unref(isFirstLoad)) {
                         await fetch();
                         isFirstLoad.value = false;
+                    } else if (props.sepTextField && !valChanged.value) {
+                        valChanged.value = true;
+                        await fetch();
                     }
                 }
             }
@@ -251,12 +261,8 @@
                 emitData.value = args;
                 emit('update:value', val);
                 emit('change', val);
-        selectedValue.value =
+                selectedValue.value = props.value === undefined ? val : (((typeof props.value === 'string' && !!props.value ? props.value?.split(',') : props.value) || undefined) as any);
-          props.value === undefined
+                updateSepTextField(Array.isArray(value) ? value : [value]);
-            ? val
-            : (((typeof props.value === 'string' && !!props.value
-                ? props.value?.split(',')
-                : props.value) || undefined) as any);
             }
 
             return {
@@ -267,8 +273,8 @@
                 t,
                 handleFetch,
                 handleChange,
-        handleFilterOption,
+                handleFilterOption
             };
-    },
+        }
     });
 </script>

src/hooks/web/useWorkFlowForm.ts

@@ -146,7 +146,7 @@ function schemeList(
         if (isViewProcess) {
           schema.dynamicDisabled = true;
         }
-        if ((permissionConfig.children || []).find((item) => item.fieldId === '_row_ctrl_' && !item.edit)) {
+        if ((permissionConfig?.children || []).find((item) => item.fieldId === '_row_ctrl_' && !item.edit)) {
             schema.componentProps.disableAddRow = true;
         }
         if (!permissionConfig?.view) {