🍓 feat(sysDict): 优化组件代码和注释，新增多选模式(数组模式和逗号字符串模式)
This commit is contained in:
喵你个汪呀
parent
75e5b8a06b
commit
383bcaae7f
@ -1,263 +1,464 @@
|
|||||||
<!-- 组件使用文档： https://gitee.com/zuohuaijun/Admin.NET/pulls/1559 -->
|
<!--
|
||||||
|
字典组件 - 根据字典编码渲染不同类型的数据展示控件
|
||||||
|
组件文档：https://gitee.com/zuohuaijun/Admin.NET/pulls/1559
|
||||||
|
|
||||||
|
功能特性：
|
||||||
|
- 支持多种渲染方式：标签、下拉框、单选框、复选框、单选按钮组
|
||||||
|
- 支持常量和普通字典
|
||||||
|
- 支持多选和单选模式
|
||||||
|
- 支持数组多选模式和逗号多选模式
|
||||||
|
- 支持自定义显示格式和过滤
|
||||||
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
const renderTypeArray = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
|
/**
|
||||||
|
* 支持的渲染类型常量
|
||||||
|
* @type {Array}
|
||||||
|
* @constant
|
||||||
|
*/
|
||||||
|
const RENDER_TYPES = ['tag', 'select', 'radio', 'checkbox', 'radio-button'] as const;
|
||||||
|
type RenderType = typeof RENDER_TYPES[number];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 支持的标签类型常量
|
||||||
|
* @type {Array}
|
||||||
|
* @constant
|
||||||
|
*/
|
||||||
|
const TAG_TYPES = ['success', 'warning', 'info', 'primary', 'danger'] as const;
|
||||||
|
type TagType = typeof TAG_TYPES[number];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 字典项数据结构
|
||||||
|
* @interface
|
||||||
|
* @property {string} [tagType] - 标签类型（当renderAs='tag'时生效）
|
||||||
|
* @property {string} [styleSetting] - 自定义样式
|
||||||
|
* @property {string} [classSetting] - 自定义类名
|
||||||
|
* @property {string} [label] - 显示文本
|
||||||
|
* @property {string|number} [value] - 值
|
||||||
|
*/
|
||||||
|
interface DictItem {
|
||||||
|
[key: string]: any;
|
||||||
|
tagType?: TagType;
|
||||||
|
styleSetting?: string;
|
||||||
|
classSetting?: string;
|
||||||
|
label?: string;
|
||||||
|
value?: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 多选值模式枚举
|
||||||
|
* @enum {string}
|
||||||
|
* @property {string} Array - 数组模式，如['1','2','3']
|
||||||
|
* @property {string} Comma - 逗号分隔模式，如'1,2,3'
|
||||||
|
*/
|
||||||
|
enum MultipleModel {
|
||||||
|
Array = 'array',
|
||||||
|
Comma = 'comma',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否为合法的渲染类型
|
||||||
|
* @function
|
||||||
|
* @param {any} value - 待检查的值
|
||||||
|
* @returns {value is RenderType} - 是否为合法的渲染类型
|
||||||
|
*/
|
||||||
|
function isRenderType(value: any): value is RenderType {
|
||||||
|
return RENDER_TYPES.includes(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否为合法的多选模式
|
||||||
|
* @function
|
||||||
|
* @param {any} value - 待检查的值
|
||||||
|
* @returns {value is MultipleModel} - 是否为合法的多选模式
|
||||||
|
*/
|
||||||
|
function isMultipleModel(value: any): value is MultipleModel {
|
||||||
|
return Object.values(MultipleModel).includes(value);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, watch, PropType } from 'vue';
|
import { reactive, watch, computed, PropType } from 'vue';
|
||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
|
|
||||||
type RenderType = (typeof renderTypeArray)[number];
|
|
||||||
type DictItem = {
|
|
||||||
[key: string]: any;
|
|
||||||
tagType?: string;
|
|
||||||
styleSetting?: string;
|
|
||||||
classSetting?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const userStore = useUserInfo();
|
const userStore = useUserInfo();
|
||||||
const emit = defineEmits(['update:modelValue']);
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件属性定义
|
||||||
|
*/
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
/**
|
/**
|
||||||
* 绑定的值，支持多种类型
|
* 绑定值，支持多种类型
|
||||||
* @example
|
* @type {string|number|boolean|Array|null}
|
||||||
* <g-sys-dict v-model="selectedValue" code="xxxx" />
|
* @required
|
||||||
*/
|
* @example
|
||||||
modelValue: {
|
* // 单选选择器
|
||||||
type: [String, Number, Boolean, Array, null] as PropType<string | number | boolean | any[] | null>,
|
* <g-sys-dict v-model="selectedValue" code="gender" renderAs="select" />
|
||||||
default: null,
|
*
|
||||||
required: true,
|
* // 多选选择器（数组模式）
|
||||||
},
|
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple />
|
||||||
/**
|
*
|
||||||
* 字典编码，用于获取字典项
|
* // 多选选择器（逗号模式）
|
||||||
* @example 'gender'
|
* <g-sys-dict v-model="selectedValues" code="roles" renderAs="select" multiple multiple-model="comma" />
|
||||||
*/
|
*/
|
||||||
code: {
|
modelValue: {
|
||||||
type: String,
|
type: [String, Number, Boolean, Array, null] as PropType<string | number | boolean | any[] | null>,
|
||||||
required: true,
|
default: null,
|
||||||
},
|
required: true,
|
||||||
/**
|
},
|
||||||
* 是否是常量
|
/**
|
||||||
* @default false
|
* 字典编码，用于从字典中获取数据
|
||||||
*/
|
* @type {string}
|
||||||
isConst: {
|
* @required
|
||||||
type: Boolean,
|
* @example 'gender'
|
||||||
default: false,
|
*/
|
||||||
},
|
code: {
|
||||||
/**
|
type: String,
|
||||||
* 字典项中用于显示的字段名
|
required: true,
|
||||||
* @default 'label'
|
},
|
||||||
*/
|
/**
|
||||||
propLabel: {
|
* 是否为常量字典（true从常量列表获取，false从字典列表获取）
|
||||||
type: String,
|
* @type {boolean}
|
||||||
default: 'label',
|
* @default false
|
||||||
},
|
* @example true
|
||||||
/**
|
*/
|
||||||
* 字典项中用于取值的字段名
|
isConst: {
|
||||||
* @default 'value'
|
type: Boolean,
|
||||||
*/
|
default: false,
|
||||||
propValue: {
|
},
|
||||||
type: String,
|
/**
|
||||||
default: 'value',
|
* 字典项中用于显示的字段名
|
||||||
},
|
* @type {string}
|
||||||
/**
|
* @default 'label'
|
||||||
* 字典项过滤函数
|
* @example 'name'
|
||||||
* @param dict - 字典项
|
*/
|
||||||
* @returns 是否保留该项
|
propLabel: {
|
||||||
* @default (dict) => true
|
type: String,
|
||||||
*/
|
default: 'label',
|
||||||
onItemFilter: {
|
},
|
||||||
type: Function as PropType<(dict: DictItem) => boolean>,
|
/**
|
||||||
default: (dict: DictItem) => true,
|
* 字典项中用于取值的字段名
|
||||||
},
|
* @type {string}
|
||||||
/**
|
* @default 'value'
|
||||||
* 字典项显示内容格式化函数
|
* @example 'id'
|
||||||
* @param dict - 字典项
|
*/
|
||||||
* @returns 格式化后的显示内容
|
propValue: {
|
||||||
* @default () => undefined
|
type: String,
|
||||||
*/
|
default: 'value',
|
||||||
onItemFormatter: {
|
},
|
||||||
type: Function as PropType<(dict: DictItem) => string | undefined | null>,
|
/**
|
||||||
default: () => undefined,
|
* 字典项过滤函数
|
||||||
},
|
* @type {Function}
|
||||||
/**
|
* @param {DictItem} dict - 当前字典项
|
||||||
* 组件渲染方式
|
* @returns {boolean} - 是否保留该项
|
||||||
* @values 'tag', 'select', 'radio', 'checkbox', 'radio-button'
|
* @default (dict) => true
|
||||||
* @default 'tag'
|
* @example
|
||||||
*/
|
* // 只显示启用的字典项
|
||||||
renderAs: {
|
* :onItemFilter="(dict) => dict.status === 1"
|
||||||
type: String as PropType<RenderType>,
|
*/
|
||||||
default: 'tag',
|
onItemFilter: {
|
||||||
validator(value: any) {
|
type: Function as PropType<(dict: DictItem) => boolean>,
|
||||||
return renderTypeArray.includes(value);
|
default: () => true,
|
||||||
},
|
},
|
||||||
},
|
/**
|
||||||
/**
|
* 字典项显示内容格式化函数
|
||||||
* 是否多选
|
* @type {Function}
|
||||||
* @default false
|
* @param {DictItem} dict - 当前字典项
|
||||||
*/
|
* @returns {string|undefined|null} - 格式化后的显示内容
|
||||||
multiple: {
|
* @default () => undefined
|
||||||
type: Boolean,
|
* @example
|
||||||
default: false,
|
* // 在标签前添加图标
|
||||||
},
|
* :onItemFormatter="(dict) => `${dict.label} <icon-user />`"
|
||||||
|
*/
|
||||||
|
onItemFormatter: {
|
||||||
|
type: Function as PropType<(dict: DictItem) => string | undefined | null>,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件渲染方式
|
||||||
|
* @type {'tag'|'select'|'radio'|'checkbox'|'radio-button'}
|
||||||
|
* @default 'tag'
|
||||||
|
* @example 'select'
|
||||||
|
*/
|
||||||
|
renderAs: {
|
||||||
|
type: String as PropType<RenderType>,
|
||||||
|
default: 'tag',
|
||||||
|
validator: isRenderType,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 是否多选（仅在renderAs为select/checkbox时有效）
|
||||||
|
* @type {boolean}
|
||||||
|
* @default false
|
||||||
|
* @example true
|
||||||
|
*/
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 多选值模式（仅在multiple为true时有效）
|
||||||
|
* @type {'array'|'comma'}
|
||||||
|
* @default 'array'
|
||||||
|
* @example 'comma'
|
||||||
|
*/
|
||||||
|
multipleModel: {
|
||||||
|
type: String as PropType<MultipleModel>,
|
||||||
|
default: MultipleModel.Array,
|
||||||
|
validator: isMultipleModel,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive({
|
/**
|
||||||
dict: undefined as DictItem | DictItem[] | undefined,
|
* 格式化后的字典数据（计算属性）
|
||||||
dictData: [] as DictItem[],
|
* @computed
|
||||||
value: undefined as any,
|
* @returns {DictItem[]} - 过滤并格式化后的字典数据
|
||||||
|
*/
|
||||||
|
const formattedDictData = computed(() => {
|
||||||
|
return state.dictData
|
||||||
|
.filter(props.onItemFilter)
|
||||||
|
.map(item => ({
|
||||||
|
...item,
|
||||||
|
label: item[props.propLabel],
|
||||||
|
value: item[props.propValue],
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
// 获取数据集
|
/**
|
||||||
const getDataList = () => {
|
* 当前选中的字典项（计算属性）
|
||||||
if (props.isConst) {
|
* @computed
|
||||||
const data = userStore.constList?.find((x: any) => x.code === props.code)?.data?.result ?? [];
|
* @returns {DictItem|DictItem[]|null} - 当前选中的字典项或字典项数组
|
||||||
// 与字典的显示文本、值保持一致，方便渲染
|
*/
|
||||||
data?.forEach((item: any) => {
|
const currentDictItems = computed(() => {
|
||||||
item.label = item.name;
|
if (!state.value) return null;
|
||||||
item.value = item.code;
|
|
||||||
delete item.name;
|
if (Array.isArray(state.value)) {
|
||||||
});
|
// 确保回显时也去重
|
||||||
return data;
|
const uniqueValues = [...new Set(state.value)];
|
||||||
} else {
|
return formattedDictData.value.filter(item =>
|
||||||
return userStore.dictList[props.code];
|
uniqueValues.includes(item.value)
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return formattedDictData.value.find(item => item.value == state.value) || null;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取字典数据列表
|
||||||
|
* @function
|
||||||
|
* @returns {DictItem[]} - 字典数据列表
|
||||||
|
* @throws {Error} - 获取数据失败时抛出错误
|
||||||
|
*/
|
||||||
|
const getDataList = (): DictItem[] => {
|
||||||
|
try {
|
||||||
|
if (!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] ?? [];
|
||||||
|
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
...item,
|
||||||
|
label: item[props.propLabel] ?? item.name,
|
||||||
|
value: item[props.propValue] ?? item.code,
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`获取字典[${props.code}]数据失败:`, error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置字典数据
|
/**
|
||||||
const setDictData = () => {
|
* 处理数字类型的值
|
||||||
state.dictData = getDataList()?.filter(props.onItemFilter) ?? [];
|
* @function
|
||||||
processNumericValues(props.modelValue);
|
* @param {any} value - 待处理的值
|
||||||
};
|
*/
|
||||||
|
|
||||||
// 处理数字类型的值
|
|
||||||
const processNumericValues = (value: any) => {
|
const processNumericValues = (value: any) => {
|
||||||
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
|
if (typeof value === 'number' || (Array.isArray(value) && typeof value[0] === 'number')) {
|
||||||
state.dictData.forEach((item) => {
|
state.dictData.forEach(item => {
|
||||||
item[props.propValue] = Number(item[props.propValue]);
|
if (item.value) {
|
||||||
});
|
item.value = Number(item.value);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置多选值
|
/**
|
||||||
const trySetMultipleValue = (value: any) => {
|
* 解析多选值（修复逗号模式问题）
|
||||||
let newValue = value;
|
* @function
|
||||||
if (typeof value === 'string') {
|
* @param {any} value - 待解析的值
|
||||||
const trimmedValue = value.trim();
|
* @returns {any} - 解析后的值
|
||||||
if (trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) {
|
*/
|
||||||
try {
|
const parseMultipleValue = (value: any): any => {
|
||||||
newValue = JSON.parse(trimmedValue);
|
// 处理空值情况
|
||||||
} catch (error) {
|
if (value === null || value === undefined || value === '') {
|
||||||
console.warn('[g-sys-dict]解析多选值失败, 异常信息:', error);
|
return props.multiple ? [] : value;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
} else if ((props.renderAs === 'checkbox' || props.multiple) && !value) {
|
|
||||||
newValue = [];
|
|
||||||
}
|
|
||||||
if (newValue != value) updateValue(newValue);
|
|
||||||
|
|
||||||
setDictData();
|
// 处理字符串值
|
||||||
return newValue;
|
if (typeof value === 'string') {
|
||||||
|
const trimmedValue = value.trim();
|
||||||
|
|
||||||
|
// 处理JSON数组格式
|
||||||
|
if (trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(trimmedValue);
|
||||||
|
if (Array.isArray(parsed)) {
|
||||||
|
// 去重处理
|
||||||
|
return [...new Set(parsed.filter(Boolean))];
|
||||||
|
}
|
||||||
|
return parsed;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('[g-sys-dict] 解析多选值失败:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理逗号分隔格式
|
||||||
|
if (props.multipleModel === MultipleModel.Comma && trimmedValue.includes(',')) {
|
||||||
|
// 去重处理
|
||||||
|
return [...new Set(
|
||||||
|
trimmedValue.split(',')
|
||||||
|
.map(item => item.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
)];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理单个值情况
|
||||||
|
return props.multiple ? [trimmedValue] : trimmedValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理数组值 - 添加去重
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return [...new Set(value.filter(Boolean))];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他情况直接返回
|
||||||
|
return value;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置字典值
|
/**
|
||||||
const setDictValue = (value: any) => {
|
* 更新绑定值（修复逗号模式问题）
|
||||||
value = trySetMultipleValue(value);
|
* @function
|
||||||
if (Array.isArray(value)) {
|
* @param {any} newValue - 新值
|
||||||
state.dict = state.dictData?.filter((x) => value.find((y) => y == x[props.propValue]));
|
*/
|
||||||
state.dict?.forEach(ensureTagType);
|
|
||||||
} else {
|
|
||||||
state.dict = state.dictData?.find((x) => x[props.propValue] == value);
|
|
||||||
if (state.dict) ensureTagType(state.dict);
|
|
||||||
}
|
|
||||||
state.value = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 确保标签类型存在
|
|
||||||
const ensureTagType = (item: DictItem) => {
|
|
||||||
if (!['success', 'warning', 'info', 'primary', 'danger'].includes(item.tagType ?? '')) {
|
|
||||||
item.tagType = 'primary';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新绑定值
|
|
||||||
const updateValue = (newValue: any) => {
|
const updateValue = (newValue: any) => {
|
||||||
emit('update:modelValue', newValue);
|
// 先对值进行去重处理
|
||||||
|
let processedValue = newValue;
|
||||||
|
if (Array.isArray(newValue)) {
|
||||||
|
processedValue = [...new Set(newValue.filter(v => v !== null && v !== undefined && v !== ''))];
|
||||||
|
}
|
||||||
|
|
||||||
|
let emitValue = processedValue;
|
||||||
|
|
||||||
|
if (props.multipleModel === MultipleModel.Comma) {
|
||||||
|
if (Array.isArray(processedValue)) {
|
||||||
|
emitValue = processedValue.length > 0 ? processedValue.join(',') : '';
|
||||||
|
} else if (processedValue === null || processedValue === undefined) {
|
||||||
|
emitValue = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
state.value = processedValue;
|
||||||
|
emit('update:modelValue', emitValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 计算显示的文本
|
/**
|
||||||
const getDisplayText = (dict: DictItem | undefined = undefined) => {
|
* 确保标签类型存在
|
||||||
if (dict) return props.onItemFormatter?.(dict) ?? dict[props.propLabel];
|
* @function
|
||||||
return state.value;
|
* @param {DictItem} item - 字典项
|
||||||
|
* @returns {TagType} - 合法的标签类型
|
||||||
|
*/
|
||||||
|
const ensureTagType = (item: DictItem): TagType => {
|
||||||
|
return TAG_TYPES.includes(item.tagType as TagType) ? item.tagType as TagType : 'primary';
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(
|
/**
|
||||||
() => props.modelValue,
|
* 计算显示的文本
|
||||||
(newValue) => setDictValue(newValue),
|
* @function
|
||||||
{ immediate: true }
|
* @param {DictItem} [dict] - 字典项
|
||||||
);
|
* @returns {string} - 显示文本
|
||||||
|
*/
|
||||||
|
const getDisplayText = (dict?: DictItem): string => {
|
||||||
|
if (!dict) return String(state.value || '');
|
||||||
|
const formattedText = props.onItemFormatter?.(dict);
|
||||||
|
return formattedText ?? dict[props.propLabel] ?? '';
|
||||||
|
};
|
||||||
|
|
||||||
watch(
|
/**
|
||||||
() => userStore.dictList,
|
* 初始化数据
|
||||||
() => setDictValue(state.value),
|
* @function
|
||||||
{ immediate: true }
|
*/
|
||||||
);
|
const initData = () => {
|
||||||
|
state.dictData = getDataList();
|
||||||
|
processNumericValues(props.modelValue);
|
||||||
|
const initialValue = parseMultipleValue(props.modelValue);
|
||||||
|
if (initialValue !== state.value) {
|
||||||
|
state.value = initialValue;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
watch(
|
/**
|
||||||
() => userStore.constList,
|
* 组件状态
|
||||||
() => setDictValue(state.value),
|
* @property {DictItem[]} dictData - 原始字典数据
|
||||||
{ immediate: true }
|
* @property {any} value - 当前值
|
||||||
);
|
*/
|
||||||
|
const state = reactive({
|
||||||
|
dictData: [] as DictItem[],
|
||||||
|
value: parseMultipleValue(props.modelValue),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听数据变化
|
||||||
|
watch(() => props.modelValue, (newValue) => {
|
||||||
|
state.value = parseMultipleValue(newValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => [userStore.dictList, userStore.constList], initData, { immediate: true });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 渲染标签 -->
|
<!-- 渲染标签 -->
|
||||||
<template v-if="props.renderAs === 'tag'">
|
<template v-if="props.renderAs === 'tag'">
|
||||||
<template v-if="Array.isArray(state.dict)">
|
<template v-if="Array.isArray(currentDictItems)">
|
||||||
<el-tag v-for="(item, index) in state.dict" :key="index" v-bind="$attrs" :type="item.tagType" :style="item.styleSetting" :class="item.classSetting" class="mr2">
|
<el-tag v-for="(item, index) in currentDictItems" :key="index" v-bind="$attrs" :type="ensureTagType(item)" :style="item.styleSetting" :class="item.classSetting" class="mr2">
|
||||||
{{ getDisplayText(item) }}
|
{{ getDisplayText(item) }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-tag v-if="state.dict" v-bind="$attrs" :type="state.dict.tagType" :style="state.dict.styleSetting" :class="state.dict.classSetting">
|
<el-tag v-if="currentDictItems" v-bind="$attrs" :type="ensureTagType(currentDictItems)" :style="currentDictItems.styleSetting" :class="currentDictItems.classSetting">
|
||||||
{{ getDisplayText(state.dict) }}
|
{{ getDisplayText(currentDictItems) }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<span v-else>{{ getDisplayText() }}</span>
|
<span v-else>{{ getDisplayText() }}</span>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 渲染选择器 -->
|
<!-- 渲染选择器 -->
|
||||||
<template v-if="props.renderAs === 'select'">
|
<el-select v-else-if="props.renderAs === 'select'" v-model="state.value" v-bind="$attrs" :multiple="props.multiple" @change="updateValue" clearable>
|
||||||
<el-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" />
|
||||||
<el-option v-for="(item, index) in state.dictData" :key="index" :label="getDisplayText(item)" :value="item[propValue]" />
|
</el-select>
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 渲染复选框（多选） -->
|
<!-- 渲染复选框（多选） -->
|
||||||
<template v-if="props.renderAs === 'checkbox'">
|
<el-checkbox-group v-else-if="props.renderAs === 'checkbox'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||||
<el-checkbox-group v-model="state.value" v-bind="$attrs" @change="updateValue">
|
<el-checkbox-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||||
<el-checkbox-button v-for="(item, index) in state.dictData" :key="index" :value="item[propValue]">
|
{{ getDisplayText(item) }}
|
||||||
{{ getDisplayText(item) }}
|
</el-checkbox-button>
|
||||||
</el-checkbox-button>
|
</el-checkbox-group>
|
||||||
</el-checkbox-group>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 渲染单选框 -->
|
<!-- 渲染单选框 -->
|
||||||
<template v-if="props.renderAs === 'radio'">
|
<el-radio-group v-else-if="props.renderAs === 'radio'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||||
<el-radio-group v-model="state.value" v-bind="$attrs" @change="updateValue">
|
<el-radio v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||||
<el-radio v-for="(item, index) in state.dictData" :key="index" :value="item[propValue]">
|
{{ getDisplayText(item) }}
|
||||||
{{ getDisplayText(item) }}
|
</el-radio>
|
||||||
</el-radio>
|
</el-radio-group>
|
||||||
</el-radio-group>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 渲染单选框按钮 -->
|
<!-- 渲染单选框按钮 -->
|
||||||
<template v-if="props.renderAs === 'radio-button'">
|
<el-radio-group v-else-if="props.renderAs === 'radio-button'" v-model="state.value" v-bind="$attrs" @change="updateValue">
|
||||||
<el-radio-group v-model="state.value" v-bind="$attrs" @change="updateValue">
|
<el-radio-button v-for="(item, index) in formattedDictData" :key="index" :value="item.value">
|
||||||
<el-radio-button v-for="(item, index) in state.dictData" :key="index" :value="item[propValue]">
|
{{ getDisplayText(item) }}
|
||||||
{{ getDisplayText(item) }}
|
</el-radio-button>
|
||||||
</el-radio-button>
|
</el-radio-group>
|
||||||
</el-radio-group>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
Loading…
Reference in New Issue
Block a user