Merge pull request '🍉 feat(sysDict): 增加自定义数据源功能' (#431) from jasondom/Admin.NET.Pro:v2-1 into v2
Reviewed-on: https://code.adminnet.top/Admin.NET/Admin.NET.Pro/pulls/431
This commit is contained in:
commit
ef707f6be1
@ -57,15 +57,18 @@ interface MutexConfig {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 多选值模式枚举
|
* 多选值模式常量
|
||||||
* @enum {string}
|
* @enum {string}
|
||||||
* @property {string} Array - 数组模式,如['1','2','3']
|
* @property {string} Array - 数组模式,如['1','2','3']
|
||||||
* @property {string} Comma - 逗号分隔模式,如'1,2,3'
|
* @property {string} Comma - 逗号分隔模式,如'1,2,3'
|
||||||
*/
|
*/
|
||||||
enum MultipleModel {
|
const MultipleModel = {
|
||||||
Array = 'array',
|
Array: 'array',
|
||||||
Comma = 'comma',
|
Comma: 'comma',
|
||||||
}
|
} as const
|
||||||
|
|
||||||
|
// 多选值模式枚举类型
|
||||||
|
type MultipleModelType = typeof MultipleModel[keyof typeof MultipleModel];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 检查是否为合法的渲染类型
|
* 检查是否为合法的渲染类型
|
||||||
@ -83,7 +86,7 @@ function isRenderType(value: any): value is RenderType {
|
|||||||
* @param {any} value - 待检查的值
|
* @param {any} value - 待检查的值
|
||||||
* @returns {value is MultipleModel} - 是否为合法的多选模式
|
* @returns {value is MultipleModel} - 是否为合法的多选模式
|
||||||
*/
|
*/
|
||||||
function isMultipleModel(value: any): value is MultipleModel {
|
function isMultipleModel(value: any): value is MultipleModelType {
|
||||||
return Object.values(MultipleModel).includes(value);
|
return Object.values(MultipleModel).includes(value);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -91,6 +94,7 @@ function isMultipleModel(value: any): value is MultipleModel {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, watch, computed, PropType } from 'vue';
|
import { reactive, watch, computed, PropType } from 'vue';
|
||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
|
import {Nullable} from "/@/types/global";
|
||||||
|
|
||||||
const userStore = useUserInfo();
|
const userStore = useUserInfo();
|
||||||
const emit = defineEmits(['update:modelValue', 'change']);
|
const emit = defineEmits(['update:modelValue', 'change']);
|
||||||
@ -126,7 +130,16 @@ const props = defineProps({
|
|||||||
*/
|
*/
|
||||||
code: {
|
code: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: false,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 直接传入的字典数据源(优先级高于code)
|
||||||
|
* @type {DictItem[]}
|
||||||
|
* @example [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
type: Array as PropType<DictItem[]>,
|
||||||
|
default: () => [],
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 是否为常量字典(true从常量列表获取,false从字典列表获取)
|
* 是否为常量字典(true从常量列表获取,false从字典列表获取)
|
||||||
@ -214,7 +227,7 @@ const props = defineProps({
|
|||||||
* @example 'comma'
|
* @example 'comma'
|
||||||
*/
|
*/
|
||||||
multipleModel: {
|
multipleModel: {
|
||||||
type: String as PropType<MultipleModel>,
|
type: String as PropType<MultipleModelType>,
|
||||||
default: MultipleModel.Array,
|
default: MultipleModel.Array,
|
||||||
validator: isMultipleModel,
|
validator: isMultipleModel,
|
||||||
},
|
},
|
||||||
@ -286,8 +299,17 @@ const currentDictItems = computed(() => {
|
|||||||
*/
|
*/
|
||||||
const getDataList = (): DictItem[] => {
|
const getDataList = (): DictItem[] => {
|
||||||
try {
|
try {
|
||||||
|
// 如果提供了 data 数据源,优先使用
|
||||||
|
if (props.data && props.data.length > 0) {
|
||||||
|
return props.data.map((item: any) => ({
|
||||||
|
...item,
|
||||||
|
label: item[props.propLabel] ?? [item.name, item.desc].filter((x) => x).join('-'),
|
||||||
|
value: item[props.propValue] ?? item.code,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
if (!props.code ) {
|
if (!props.code ) {
|
||||||
console.error('[g-sys-dict] 字典编码不能为空');
|
console.error('[g-sys-dict] code和data不能同时为空');
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -475,6 +497,14 @@ const getDisplayText = (dict?: DictItem): string => {
|
|||||||
* @function
|
* @function
|
||||||
*/
|
*/
|
||||||
const initData = () => {
|
const initData = () => {
|
||||||
|
// 验证 code 和 data 不能同时为空
|
||||||
|
if (!props.code && (!props.data || props.data.length === 0)) {
|
||||||
|
console.error('[g-sys-dict] code和data不能同时为空');
|
||||||
|
state.dictData = [];
|
||||||
|
state.value = props.multiple ? [] : null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
state.dictData = getDataList();
|
state.dictData = getDataList();
|
||||||
processNumericValues(props.modelValue);
|
processNumericValues(props.modelValue);
|
||||||
const initialValue = parseMultipleValue(props.modelValue);
|
const initialValue = parseMultipleValue(props.modelValue);
|
||||||
@ -522,7 +552,7 @@ watch(
|
|||||||
validateInitialValue();
|
validateInitialValue();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
watch(() => [userStore.dictList, userStore.constList, state], initData, { immediate: true });
|
watch(() => [userStore.dictList, userStore.constList, props.data, state], initData, { immediate: true });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user