diff --git a/Web/src/components/selector/pulldownSelecter.vue b/Web/src/components/selector/pulldownSelecter.vue index 781de041..272280d4 100644 --- a/Web/src/components/selector/pulldownSelecter.vue +++ b/Web/src/components/selector/pulldownSelecter.vue @@ -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, @@ -324,32 +332,26 @@ defineExpose({