gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⚔ refactor(pulldownSelecter): 优化并修复部分一直bug

Browse Source
This commit is contained in:
喵你个汪呀 2025-08-18 18:52:37 +08:00
parent 33aa826fc1
commit f28f128625
1 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
Web/src/components/selector/pulldownSelecter.vue
View File

@ -91,7 +91,7 @@ const props = defineProps({
*/
labelFormat: {
type: Function,
default: (item: any) => {},
default: (item: any) => undefined,
},
/**
* 默认查询条件值绑定的属性名
@ -231,7 +231,7 @@ const resetQuery = () => {
};
// 远程查询方法
const remoteMethod = debounce((query) => {
const remoteMethod = debounce((query: any) => {
if (query) {
state.loading = true;
if (typeof query === 'string') {
@ -258,37 +258,42 @@ const handleQuery = () => {
// 选择值改变事件
const handleChange = (row: any) => {
state.tableQuery = Object.assign(state.tableQuery, props.queryParams);
state.defaultOptions = props.defaultOptions ?? [];
state.defaultOptions.push(row);
// 处理初值
if (props.multiple && !state.selectedValues) state.selectedValues = [];
// 去除空格, 回显
if (typeof row[props.valueProp] === 'string') row[props.valueProp] = row[props.valueProp]?.trim();
setDefaultOptions([row]);
// 去重
state.selectedValues = props.multiple ? Array.from(new Set([...state.selectedValues, row[props.valueProp]])) : row[props.valueProp];
emit('update:modelValue', state.selectedValues);
emit('change', state.selectedValues, row);
// 设置表格选中效果，折叠选择器
if (!props.multiple || state.selectedValues) selectRef.value?.blur();
tableRef.value?.setCurrentRow(row);
emit('update:modelValue', state.selectedValues);
emit('change', state.selectedValues, row);
};
watch(
() => props.modelValue,
(val: any) => {
state.selectedValues = val;
},
{ immediate: true }
);
// 选择器下拉框显示隐藏事件
const selectVisibleChange = (visible: boolean) => {
if (visible) {
state.tableQuery[props.keywordProp] = undefined;
handleQuery();
}
};
watch(
() => props.defaultOptions,
(val: any) => {
state.defaultOptions = val;
},
{ immediate: true }
);
// 设置默认值
// 设置默认选项
const setDefaultOptions = (options: any[]) => {
state.defaultOptions = options;
const list = [] as any[];
for(const item of [...options ?? [], ...state.defaultOptions]) {
const value = item?.[props.valueProp];
const label = props.labelFormat?.(item) || item?.[props.labelProp];
if (value && label) list.push({ [props.valueProp]: value, [props.labelProp]: label })
}
state.defaultOptions = Array.from(new Set(list));
};
// 设置查询参数
@ -314,6 +319,9 @@ const setValue = (option: any | any[], row: any) => {
emit('change', state.selectedValues, row);
};
watch(() => props.modelValue, (val: any) => state.selectedValues = val, { immediate: true });
watch(() => props.defaultOptions, (val: any) => setDefaultOptions(val), { immediate: true });
defineExpose({
setValue,
handleQuery,
@ -332,7 +340,7 @@ defineExpose({
:allow-create="allowCreate"
:remote-method="remoteMethod"
:default-first-option="allowCreate"
@visible-change="(val: boolean) => (val ? handleQuery() : null)"
@visible-change="selectVisibleChange"
popper-class="popper-class"
ref="selectRef"
remote-show-suffix
@ -343,13 +351,7 @@ defineExpose({
<el-option style="width: 0; height: 0" />
<!-- 默认选项，用于回显数据 -->
<el-option
v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))"
:key="item[valueProp]"
:label="labelFormat(item) || item[labelProp]"
:value="item[valueProp]"
style="width: 0; height: 0"
/>
<el-option v-for="item in state.defaultOptions ?? []" :key="item[valueProp]" :label="labelFormat(item) || item[labelProp]" :value="item[valueProp]" style="width: 0; height: 0" />
<!-- 下拉框内容区域 -->
<div class="w100" v-loading="state.loading">
@ -370,7 +372,7 @@ defineExpose({
ref="tableRef"
@row-click="handleChange"
:data="state.tableData?.items ?? []"
:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''})`"
:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''}${state.tableQuery[keywordProp] && allowCreate ? ' - 35px' : ''})`"
:style="{ width: dropdownWidth }"
highlight-current-row
>