geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
gaoyunqi
2024-05-20 15:25:38 +08:00
parent 386bba6e75
commit 78493e8f6d
3 changed files with 268 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Designer/src/types/index.ts
View File

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

134
src/components/Select/src/Select.vue
View File

@ -1,41 +1,21 @@
<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)">
<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 #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 {
defineComponent,
PropType,
ref,
computed,
unref,
watch,
inject,
onMounted,
watchEffect,
} from 'vue';
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';
@ -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
? val.bindTable + 'List'
: camelCaseString(val.bindTable + '_List');
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];
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];
@ -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 =
!!props.value && val === 'staticData' ? (props.value as any) : undefined;
},
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;
selectedValue.value = ((typeof props.value === 'string' && !!props.value ? 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
? props.value?.split(',')
: props.value) || undefined) as any;
selectedValue.value = ((typeof props.value === 'string' && !!props.value ? 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(
props.apiConfig,
isCamelCase,
formModel,
props.index,
);
options.value = await apiConfigFunc(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 =
props.value === undefined
? val
: (((typeof props.value === 'string' && !!props.value
? props.value?.split(',')
: props.value) || undefined) as any);
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 {
@ -267,8 +273,8 @@
t,
handleFetch,
handleChange,
handleFilterOption,
handleFilterOption
};
},
}
});
</script>

2
src/hooks/web/useWorkFlowForm.ts
View File

@ -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) {