From 78493e8f6dbe41e76cdca0c7a2d44df558e8d469 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 20 May 2024 15:25:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=8E=E7=BB=86=E8=A1=A8=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E4=B8=8B=E6=8B=89=E6=A1=86=E6=94=AF=E6=8C=81label?=
 =?UTF-8?q?=E3=80=81value=E5=88=86=E5=BC=80=E5=AD=98=E5=82=A8=E4=BB=A5?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E9=A6=96=E6=AC=A1=E6=B8=B2=E6=9F=93=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Designer/src/types/index.ts |   1 +
 src/components/Select/src/Select.vue       | 526 +++++++++++----------
 src/hooks/web/useWorkFlowForm.ts           |   2 +-
 3 files changed, 268 insertions(+), 261 deletions(-)

diff --git a/src/components/Designer/src/types/index.ts b/src/components/Designer/src/types/index.ts
index 732236b..a8a9316 100644
--- a/src/components/Designer/src/types/index.ts
+++ b/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,
diff --git a/src/components/Select/src/Select.vue b/src/components/Select/src/Select.vue
index e65cf4a..24b7438 100644
--- a/src/components/Select/src/Select.vue
+++ b/src/components/Select/src/Select.vue
@@ -1,274 +1,280 @@
 <template>
-  <a-select
-    @dropdown-visible-change="handleFetch"
-    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">
-      <LoadingOutlined spin />
-    </template>
-    <template #notFoundContent v-if="loading">
-      <span>
-        <LoadingOutlined spin class="mr-1" />
-        {{ t('component.form.apiSelectNotFound') }}
-      </span>
-    </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">
+        <template v-for="item in Object.keys($slots)" #[item]="data">
+            <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+        <template v-if="loading" #suffixIcon>
+            <LoadingOutlined spin />
+        </template>
+        <template v-if="loading" #notFoundContent>
+            <span>
+                <LoadingOutlined class="mr-1" spin />
+                {{ t('component.form.apiSelectNotFound') }}
+            </span>
+        </template>
+    </a-select>
 </template>
 <script lang="ts">
-  import {
-    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';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { propTypes } from '/@/utils/propTypes';
-  import { getDicDetailList } from '/@/api/system/dic';
-  import { getDatasourceData } from '/@/api/system/datasource';
-  import { apiConfigFunc, camelCaseString, isValidJSON } from '/@/utils/event/design';
+    import { 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';
+    import { LoadingOutlined } from '@ant-design/icons-vue';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { propTypes } from '/@/utils/propTypes';
+    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 };
+    type OptionsItem = { label: string; value: string; disabled?: boolean };
 
-  export default defineComponent({
-    name: 'ApiSelect',
-    components: {
-      LoadingOutlined,
-    },
-    inheritAttrs: false,
-    props: {
-      value: {
-        type: [Array, Object, String, Number],
-      },
-      numberToString: propTypes.bool,
-      api: {
-        type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
-        default: null,
-      },
-      // api params
-      params: {
-        type: [Array, Object, String, Number],
-      },
-      placeholder: String,
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('label'),
-      valueField: propTypes.string.def('value'),
-      immediate: propTypes.bool.def(true),
-      alwaysLoad: propTypes.bool.def(false),
-      //数据来源 默认为空  如果不为空 则参数 api
-      datasourceType: String,
-      //静态数据默认选项
-      staticOptions: Array as PropType<OptionsItem[]>,
-      apiConfig: Object,
-      mode: String,
-      mainKey: String,
-      index: Number,
-    },
-    emits: ['options-change', 'change', 'update:value'],
-    setup(props, { emit }) {
-      const options = ref<OptionsItem[]>([]);
-      const loading = ref(false);
-      const isFirstLoad = ref(true);
-      const emitData = ref<any[]>([]);
-      const attrs = useAttrs();
-      const { t } = useI18n();
-      const formModel = inject<any>('formModel', null);
-      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);
+    export default defineComponent({
+        name: 'ApiSelect',
+        components: {
+            LoadingOutlined
+        },
+        inheritAttrs: false,
+        props: {
+            value: {
+                type: [Array, Object, String, Number]
+            },
+            numberToString: propTypes.bool,
+            api: {
+                type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
+                default: null
+            },
+            // api params
+            params: {
+                type: [Array, Object, String, Number]
+            },
+            placeholder: String,
+            resultField: propTypes.string.def(''),
+            labelField: propTypes.string.def('label'),
+            valueField: propTypes.string.def('value'),
+            immediate: propTypes.bool.def(true),
+            alwaysLoad: propTypes.bool.def(false),
+            //数据来源 默认为空  如果不为空 则参数 api
+            datasourceType: String,
+            //静态数据默认选项
+            staticOptions: Array as PropType<OptionsItem[]>,
+            apiConfig: Object,
+            mode: String,
+            mainKey: String,
+            index: Number,
+            sepTextField: String, // 独立存储文本部分
+            row: Object // 行数据，在明细表里生效
+        },
+        emits: ['options-change', 'change', 'update:value'],
+        setup(props, { emit }) {
+            const options = ref<OptionsItem[]>([]);
+            const loading = ref(false);
+            const isFirstLoad = ref(true);
+            const emitData = ref<any[]>([]);
+            const attrs = useAttrs();
+            const { t } = useI18n();
+            const formModel = inject<any>('formModel', null);
+            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;
-        if (Array.isArray(unref(options))) {
-          return unref(options).reduce((prev, next: Recordable) => {
-            if (next) {
-              const value = next[valueField];
-              prev.push({
-                ...omit(next, [labelField, valueField]),
-                label: next[labelField],
-                value: numberToString ? `${value}` : value,
-              });
-            }
-            return prev;
-          }, [] as OptionsItem[]);
-        } else {
-          return [];
-        }
-      });
-
-      watchEffect(() => {
-        if (props.datasourceType === 'api' && props.apiConfig?.apiParams) {
-          props.apiConfig.apiParams.forEach((params) => {
-            params.tableInfo?.forEach((o) => {
-              if (o.bindType == 'data') {
-                let val = isValidJSON(o.value);
-                let field = '';
-                if (val && val.bindTable) {
-                  let table = !isCamelCase
-                    ? val.bindTable + 'List'
-                    : camelCaseString(val.bindTable + '_List');
-                  field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
-                  formModel &&
-                    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];
+            const getOptions = computed(() => {
+                const { labelField, valueField, numberToString } = props;
+                if (Array.isArray(unref(options))) {
+                    return unref(options).reduce((prev, next: Recordable) => {
+                        if (next) {
+                            const value = next[valueField];
+                            prev.push({
+                                ...omit(next, [labelField, valueField]),
+                                label: next[labelField],
+                                value: numberToString ? `${value}` : value
+                            });
+                        }
+                        return prev;
+                    }, [] as OptionsItem[]);
+                } else {
+                    return [];
                 }
-              }
             });
-          });
-          fetch();
-        }
-      });
-      watch(
-        () => [props.params, props.apiConfig],
-        () => {
-          unref(isFirstLoad) && fetch();
-        },
-        { deep: true },
-      );
 
-      watch(
-        () => props.datasourceType,
-        (val) => {
-          fetch();
-          selectedValue.value =
-            !!props.value && val === 'staticData' ? (props.value as any) : undefined;
-        },
-      );
+            watchEffect(() => {
+                if (props.datasourceType === 'api' && props.apiConfig?.apiParams) {
+                    props.apiConfig.apiParams.forEach((params) => {
+                        params.tableInfo?.forEach((o) => {
+                            if (o.bindType == 'data') {
+                                let val = isValidJSON(o.value);
+                                let field = '';
+                                if (val && val.bindTable) {
+                                    let table = !isCamelCase ? val.bindTable + 'List' : camelCaseString(val.bindTable + '_List');
+                                    field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
+                                    formModel && 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];
+                                }
+                            }
+                        });
+                    });
+                    fetch();
+                }
+            });
 
-      watch(
-        () => props.value,
-        () => {
-          selectedValue.value = ((typeof props.value === 'string' && !!props.value
-            ? props.value?.split(',')
-            : props.value) || undefined) as any;
-        },
-        {
-          immediate: true,
-        },
-      );
-      onMounted(() => {
-        fetch();
-        selectedValue.value = ((typeof props.value === 'string' && !!props.value
-          ? props.value?.split(',')
-          : props.value) || undefined) as any;
-      });
+            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
+                        };
+                    });
+                }
+            }
 
-      async function fetch() {
-        options.value = [];
-        let api;
-        if (props.datasourceType) {
-          if (props.datasourceType === 'staticData') {
-            options.value = props.staticOptions!;
-            emitChange();
-          }
-          if (props.datasourceType === 'dic') {
-            api = getDicDetailList;
-          }
-          if (props.datasourceType === 'datasource') {
-            api = getDatasourceData;
-          }
-          if (props.datasourceType === 'api') {
-            options.value = await apiConfigFunc(
-              props.apiConfig,
-              isCamelCase,
-              formModel,
-              props.index,
+            watch(
+                () => [props.params, props.apiConfig],
+                () => {
+                    unref(isFirstLoad) && fetch();
+                },
+                { deep: true }
             );
-          }
-        } else {
-          api = props.api;
+
+            watch(
+                () => props.datasourceType,
+                (val) => {
+                    fetch();
+                    selectedValue.value = !!props.value && val === 'staticData' ? (props.value as any) : undefined;
+                }
+            );
+
+            watch(
+                () => props.value,
+                () => {
+                    selectedValue.value = ((typeof props.value === 'string' && !!props.value ? props.value?.split(',') : props.value) || undefined) as any;
+                },
+                {
+                    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 ? props.value?.split(',') : props.value) || undefined) as any;
+            });
+
+
+
+            async function _fetch() {
+                const { sepTextField } = props;
+                if (!valChanged.value && sepTextField) {
+                    return setInitOptions();
+                }
+                options.value = [];
+                let api;
+                if (props.datasourceType) {
+                    if (props.datasourceType === 'staticData') {
+                        options.value = props.staticOptions!;
+                        emitChange();
+                    }
+                    if (props.datasourceType === 'dic') {
+                        api = getDicDetailList;
+                    }
+                    if (props.datasourceType === 'datasource') {
+                        api = getDatasourceData;
+                    }
+                    if (props.datasourceType === 'api') {
+                        options.value = await apiConfigFunc(props.apiConfig, isCamelCase, formModel, props.index);
+                    }
+                } else {
+                    api = props.api;
+                }
+
+                if (!api || !isFunction(api)) return;
+                options.value = [];
+
+                try {
+                    if (!props.params) return;
+                    loading.value = true;
+                    const res = await api(props.params);
+                    isFirstLoad.value = false;
+
+                    if (Array.isArray(res)) {
+                        options.value = res;
+
+                        emitChange();
+                        return;
+                    }
+                    if (props.resultField) {
+                        options.value = get(res, props.resultField) || [];
+                    }
+                    emitChange();
+                } catch (error) {
+                    console.warn(error);
+                } finally {
+                    loading.value = false;
+                }
+            }
+
+            const handleFilterOption = (input: string, option) => {
+                const label = option.label || option.name;
+                return label.toLowerCase().includes(input.toLowerCase());
+            };
+
+            async function handleFetch(visible) {
+                if (visible) {
+                    if (props.alwaysLoad) {
+                        await fetch();
+                    } else if (!props.immediate && unref(isFirstLoad)) {
+                        await fetch();
+                        isFirstLoad.value = false;
+                    } else if (props.sepTextField && !valChanged.value) {
+                        valChanged.value = true;
+                        await fetch();
+                    }
+                }
+            }
+
+            function emitChange() {
+                emit('options-change', unref(getOptions));
+            }
+
+            function handleChange(value, ...args) {
+                const val = Array.isArray(value) ? value.join(',') : value;
+                emitData.value = args;
+                emit('update:value', val);
+                emit('change', val);
+                selectedValue.value = props.value === undefined ? val : (((typeof props.value === 'string' && !!props.value ? props.value?.split(',') : props.value) || undefined) as any);
+                updateSepTextField(Array.isArray(value) ? value : [value]);
+            }
+
+            return {
+                selectedValue,
+                attrs,
+                getOptions,
+                loading,
+                t,
+                handleFetch,
+                handleChange,
+                handleFilterOption
+            };
         }
-
-        if (!api || !isFunction(api)) return;
-        options.value = [];
-
-        try {
-          if (!props.params) return;
-          loading.value = true;
-          const res = await api(props.params);
-          isFirstLoad.value = false;
-
-          if (Array.isArray(res)) {
-            options.value = res;
-
-            emitChange();
-            return;
-          }
-          if (props.resultField) {
-            options.value = get(res, props.resultField) || [];
-          }
-          emitChange();
-        } catch (error) {
-          console.warn(error);
-        } finally {
-          loading.value = false;
-        }
-      }
-
-      const handleFilterOption = (input: string, option) => {
-        const label = option.label || option.name;
-        return label.toLowerCase().includes(input.toLowerCase());
-      };
-
-      async function handleFetch(visible) {
-        if (visible) {
-          if (props.alwaysLoad) {
-            await fetch();
-          } else if (!props.immediate && unref(isFirstLoad)) {
-            await fetch();
-            isFirstLoad.value = false;
-          }
-        }
-      }
-
-      function emitChange() {
-        emit('options-change', unref(getOptions));
-      }
-
-      function handleChange(value, ...args) {
-        const val = Array.isArray(value) ? value.join(',') : value;
-        emitData.value = args;
-        emit('update:value', val);
-        emit('change', val);
-        selectedValue.value =
-          props.value === undefined
-            ? val
-            : (((typeof props.value === 'string' && !!props.value
-                ? props.value?.split(',')
-                : props.value) || undefined) as any);
-      }
-
-      return {
-        selectedValue,
-        attrs,
-        getOptions,
-        loading,
-        t,
-        handleFetch,
-        handleChange,
-        handleFilterOption,
-      };
-    },
-  });
+    });
 </script>
diff --git a/src/hooks/web/useWorkFlowForm.ts b/src/hooks/web/useWorkFlowForm.ts
index f223a8e..1efcb51 100644
--- a/src/hooks/web/useWorkFlowForm.ts
+++ b/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) {