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

✨ fix(sysDict): 修复字典值存在空值时异常的问题

Browse Source
This commit is contained in:
喵你个汪呀 2025-08-19 12:29:19 +08:00
parent 5a9eb4264b
commit c997656323
1 changed files with 43 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
Web/src/components/sysDict/sysDict.vue
View File

@ -16,7 +16,7 @@
* @constant
*/
const RENDER_TYPES = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
type RenderType = (typeof RENDER_TYPES)[number];
type RenderType = typeof RENDER_TYPES[number];
/**
* 支持的标签类型常量
@ -24,7 +24,7 @@ type RenderType = (typeof RENDER_TYPES)[number];
* @constant
*/
const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const;
type TagType = (typeof TAG_TYPES)[number];
type TagType = typeof TAG_TYPES[number];
/**
* 字典项数据结构
@ -40,22 +40,10 @@ interface DictItem {
tagType?: TagType;
styleSetting?: string;
classSetting?: string;
disabled?: boolean;
label?: string;
value?: string | number;
}
/**
* 互斥选项配置
* @type {Object}
* @property {string|number} value - 触发互斥的选项值
* @property {Array<string|number>} excludes - 被互斥的选项值列表
*/
interface MutexConfig {
value: string | number;
excludes: (string | number)[];
}
/**
* 多选值模式枚举
* @enum {string}
@ -93,7 +81,11 @@ import { reactive, watch, computed, PropType } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
const userStore = useUserInfo();
const emit = defineEmits(['update:modelValue', 'change']);
const emit = defineEmits(['update:modelValue']);
const isEmpty = (value: any) => {
return value == null || value === '' || value === undefined;
};
/**
* 组件属性定义
@ -218,19 +210,6 @@ const props = defineProps({
default: MultipleModel.Array,
validator: isMultipleModel,
},
/**
* 互斥配置项（仅在多选模式下有效）
* @type {Array<MutexConfig>}
* @example
* :mutex-configs="[
* { value: 'all', excludes: ['1', '2', '3'] },
* { value: '1', excludes: ['all'] }
* ]"
*/
mutexConfigs: {
type: Array as PropType<MutexConfig[]>,
default: () => [],
},
});
/**
@ -239,26 +218,13 @@ const props = defineProps({
* @returns {DictItem[]} - 过滤并格式化后的字典数据
*/
const formattedDictData = computed(() => {
const baseData = state.dictData.filter(props.onItemFilter).map((item) => ({
...item,
label: item[props.propLabel],
value: item[props.propValue],
}));
// 如果没有互斥配置或多选模式，直接返回基础数据
if (!props.multiple || !props.mutexConfigs || props.mutexConfigs.length === 0) {
return baseData;
}
// 处理互斥逻辑，设置禁用状态
return baseData.map((item) => {
// 检查当前项是否应该被禁用
const isDisabled = isItemDisabled(item.value, state.value, props.mutexConfigs);
return {
...item,
disabled: isDisabled || item.disabled, // 保持原有的disabled状态
};
});
return state.dictData
.filter(props.onItemFilter)
.map(item => ({
...item,
label: item[props.propLabel],
value: item[props.propValue],
}));
});
/**
@ -267,15 +233,17 @@ const formattedDictData = computed(() => {
* @returns {DictItem|DictItem[]|null} - 当前选中的字典项或字典项数组
*/
const currentDictItems = computed(() => {
if (!state.value) return null;
if (isEmpty(state.value)) return null;
if (Array.isArray(state.value)) {
// 确保回显时也去重
const uniqueValues = [...new Set(state.value)];
return formattedDictData.value.filter((item) => uniqueValues.includes(item.value));
return formattedDictData.value.filter(item =>
uniqueValues.includes(item.value)
);
}
return formattedDictData.value.find((item) => item.value == state.value) || null;
return formattedDictData.value.find(item => item.value == state.value) || null;
});
/**
@ -286,13 +254,15 @@ const currentDictItems = computed(() => {
*/
const getDataList = (): DictItem[] => {
try {
if (!props.code) {
if (isEmpty(props.code)) {
console.error('字典编码不能为空');
return [];
}
const source = props.isConst ? userStore.constList : userStore.dictList;
const data = props.isConst ? (source?.find((x: any) => x.code === props.code)?.data?.result ?? []) : (source[props.code] ?? []);
const data = props.isConst
? source?.find((x: any) => x.code === props.code)?.data?.result ?? []
: source[props.code] ?? [];
return data.map((item: any) => ({
...item,
@ -312,8 +282,8 @@ const getDataList = (): DictItem[] => {
*/
const processNumericValues = (value: any) => {
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
state.dictData.forEach((item) => {
if (item.value) {
state.dictData.forEach(item => {
if (!isEmpty(item.value)) {
item.value = Number(item.value);
}
});
@ -328,7 +298,7 @@ const processNumericValues = (value: any) => {
*/
const parseMultipleValue = (value: any): any => {
// 处理空值情况
if (value === null || value === undefined || value === '') {
if (isEmpty(value)) {
return props.multiple ? [] : value;
}
@ -354,14 +324,11 @@ const parseMultipleValue = (value: any): any => {
// 处理逗号分隔格式
if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
// 去重处理
return [
...new Set(
trimmedValue
.split(',')
.map((item) => item.trim())
.filter(Boolean)
),
];
return [...new Set(
trimmedValue.split(',')
.map(item => item.trim())
.filter(Boolean)
)];
}
// 处理单个值情况
@ -377,83 +344,16 @@ const parseMultipleValue = (value: any): any => {
return value;
};
/**
* 检查选项是否应该被禁用
* @function
* @param {string|number} itemValue - 当前选项的值
* @param {any} currentValue - 当前选中的值
* @param {MutexConfig[]} mutexConfigs - 互斥配置列表
* @returns {boolean} - 是否应该禁用
*/
const isItemDisabled = (itemValue: string | number, currentValue: any, mutexConfigs: MutexConfig[]): boolean => {
// 如果没有配置互斥规则，不禁用任何项
if (!mutexConfigs || mutexConfigs.length === 0) {
return false;
}
// 获取当前选中的值数组
const selectedValues = Array.isArray(currentValue) ? currentValue : currentValue ? [currentValue] : [];
// 检查每个互斥配置
for (const config of mutexConfigs) {
// 如果互斥触发项已被选中，且当前项是被互斥项，则禁用
if (selectedValues.includes(config.value) && config.excludes.includes(itemValue)) {
return true;
}
// 如果当前项是互斥触发项，且有被互斥项被选中，则禁用
if (itemValue === config.value && config.excludes.some((exclude) => selectedValues.includes(exclude))) {
return true;
}
}
return false;
};
/**
* 互斥处理函数
* @function
* @param {any} newValue - 新选中的值
* @param {MutexConfig[]} mutexConfigs - 互斥配置列表
* @returns {any} - 处理后的值
*/
const handleMutex = (newValue: any, mutexConfigs: MutexConfig[]): any => {
// 如果没有配置互斥规则，直接返回原值
if (!mutexConfigs || mutexConfigs.length === 0) {
return newValue;
}
// 如果是单选模式，直接返回
if (!props.multiple) {
return newValue;
}
// 对于禁用模式，我们只需要确保新值是有效的（即没有违反互斥规则）
// 实际的禁用逻辑在formattedDictData中处理
let resultValue = Array.isArray(newValue) ? [...newValue] : newValue ? [newValue] : [];
// 过滤掉无效的值（可能由于异步更新导致的无效选择）
const validValues = formattedDictData.value.filter((item) => !item.disabled).map((item) => item.value);
return resultValue.filter((val) => validValues.includes(val));
};
/**
* 更新绑定值（修复逗号模式问题）
* @function
* @param {any} newValue - 新值
*/
const updateValue = (newValue: any) => {
// 如果有互斥配置，先处理互斥
// 先对值进行去重处理
let processedValue = newValue;
if (props.mutexConfigs && props.mutexConfigs.length > 0) {
processedValue = handleMutex(newValue, props.mutexConfigs);
// console.log('[g-sys-dict] 字典数据:', state.dictData);
}
// 去重处理
if (Array.isArray(processedValue)) {
processedValue = [...new Set(processedValue.filter((v) => v !== null && v !== undefined && v !== ''))];
if (Array.isArray(newValue)) {
processedValue = [...new Set(newValue.filter(v => v !== null && v !== undefined && v !== ''))];
}
let emitValue = processedValue;
@ -461,14 +361,13 @@ const updateValue = (newValue: any) => {
if (props.multipleModel === MultipleModel.Comma) {
if (Array.isArray(processedValue)) {
emitValue = processedValue.length > 0 ? processedValue.join(',') : '';
} else if (processedValue === null || processedValue === undefined) {
} else if (isEmpty(processedValue)) {
emitValue = '';
}
}
state.value = processedValue;
emit('update:modelValue', emitValue);
emit('change', state.value, state.dictData);
};
/**
@ -478,7 +377,7 @@ const updateValue = (newValue: any) => {
* @returns {TagType} - 合法的标签类型
*/
const ensureTagType = (item: DictItem): TagType => {
return TAG_TYPES.includes(item.tagType as TagType) ? (item.tagType as TagType) : 'primary';
return TAG_TYPES.includes(item.tagType as TagType) ? item.tagType as TagType : 'primary';
};
/**
@ -517,14 +416,11 @@ const state = reactive({
});
// 监听数据变化
watch(
() => props.modelValue,
(newValue) => {
state.value = parseMultipleValue(newValue);
}
);
watch(() => props.modelValue, (newValue) => {
state.value = parseMultipleValue(newValue);
});
watch(() => [userStore.dictList, userStore.constList, state], initData, { immediate: true });
watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true });
</script>
<template>
@ -545,12 +441,12 @@ watch(() => [userStore.dictList, userStore.constList, state], initData, { immedi
<!-- 渲染选择器 -->
<el-select v-else-if="props.renderAs === 'select'" v-model="state.value" v-bind="$attrs" :multiple="props.multiple" @change="updateValue" clearable>
<el-option v-for="(item, index) in formattedDictData" :key="index" :label="getDisplayText(item)" :value="item.value" :disabled="item.disabled" />
<el-option v-for="(item, index) in formattedDictData" :key="index" :label="getDisplayText(item)" :value="item.value" />
</el-select>
<!-- 渲染复选框（多选） -->
<el-checkbox-group v-else-if="props.renderAs === 'checkbox'" v-model="state.value" v-bind="$attrs" @change="updateValue">
<el-checkbox-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value" :disabled="item.disabled">
<el-checkbox-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
{{ getDisplayText(item) }}
</el-checkbox-button>
</el-checkbox-group>
@ -569,4 +465,4 @@ watch(() => [userStore.dictList, userStore.constList, state], initData, { immedi
</el-radio-button>
</el-radio-group>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss"></style>