sysDict 兼容数字key值,绑定数字值时只显示数字，select 选项不显示问

Web/src/components/sysDict/sysDict.vue

@@ -1,6 +1,6 @@
 <!-- 组件使用文档： https://gitee.com/zuohuaijun/Admin.NET/pulls/1559  -->
 <script setup lang="ts">
-import { reactive, watch, PropType } from 'vue';
+import { reactive, watch, PropType, onMounted } from 'vue';
 import { DictItem } from '/@/types/global';
 import { useUserInfo } from '/@/stores/userInfo';
 
@@ -43,6 +43,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const state = reactive({
@@ -52,7 +56,11 @@ const state = reactive({
 });
 
 const setDictValue = (value: any) => {
-	state.value = value;
+	if (typeof value === 'number' && props.renderAs === 'select') {
+	    state.value = value.toString();
+	} else {
+	    state.value = value;
+	}
 	state.dictData = dictList[props.code]?.filter(props.onItemFilter) ?? [];
 
 	if (Array.isArray(value)) {
@@ -74,21 +82,30 @@ const setDictValue = (value: any) => {
 
 watch(
 	() => props.modelValue,
-	(newValue) => setDictValue(newValue?.toString()),
+	(newValue) => setDictValue(newValue),
 	{ immediate: true }
 );
+onMounted(() => {
+	 if (typeof props.modelValue === 'number' && props.renderAs === 'select') {
+	     state.value = props.modelValue.toString();
+	 } else {
+	     state.value = props.modelValue;
+	 }
+})
 </script>
 
 <template>
 	<!-- 渲染标签 -->
 	<template v-if="props.renderAs === 'tag'">
 		<template v-if="Array.isArray(state.dict)">
-			<el-tag v-for="(item, index) in state.dict" :key="index" v-bind="$attrs" :type="item.tagType" :style="item.styleSetting" :class="item.classSetting" class="mr-1">
+			<el-tag v-for="(item, index) in state.dict" :key="index" v-bind="$attrs" :type="item.tagType"
+				:style="item.styleSetting" :class="item.classSetting" class="mr-1">
 				{{ onItemFormatter(item) ?? item[props.propLabel] }}
 			</el-tag>
 		</template>
 		<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="state.dict" v-bind="$attrs" :type="state.dict.tagType" :style="state.dict.styleSetting"
+				:class="state.dict.classSetting">
 				{{ onItemFormatter(state.dict) ?? state.dict[props.propLabel] }}
 			</el-tag>
 			<span v-else>{{ state.value }}</span>
@@ -96,13 +113,16 @@ watch(
 	</template>
 	<!-- 渲染选择器 -->
 	<template v-if="props.renderAs === 'select'">
-		<el-select v-model="state.value" v-bind="$attrs" :multiple="props.multiple" @change="(newValue: any) => emit('update:modelValue', newValue)">
-			<el-option v-for="(item, index) in state.dictData" :key="index" :label="onItemFormatter(item) ?? item[props.propLabel]" :value="item[props.propValue]" />
+		<el-select :disabled="props.disabled" v-model="state.value" v-bind="$attrs" :multiple="props.multiple"
+			@change="(newValue: any) => emit('update:modelValue', newValue)">
+			<el-option v-for="(item, index) in state.dictData" :key="index"
+				:label="onItemFormatter(item) ?? item[props.propLabel]" :value="item[props.propValue]" />
 		</el-select>
 	</template>
 	<!-- 渲染复选框（多选） -->
 	<template v-if="props.renderAs === 'checkbox'">
-		<el-checkbox-group v-model="state.value" v-bind="$attrs" @change="(newValue: any) => emit('update:modelValue', newValue)">
+		<el-checkbox-group v-model="state.value" v-bind="$attrs"
+			@change="(newValue: any) => emit('update:modelValue', newValue)">
 			<el-checkbox v-for="(item, index) in state.dictData" :key="index" :label="item[props.propValue]">
 				{{ onItemFormatter(item) ?? item[props.propLabel] }}
 			</el-checkbox>
@@ -110,7 +130,8 @@ watch(
 	</template>
 	<!-- 渲染单选框 -->
 	<template v-if="props.renderAs === 'radio'">
-		<el-radio-group v-model="state.value" v-bind="$attrs" @change="(newValue: any) => emit('update:modelValue', newValue)">
+		<el-radio-group v-model="state.value" v-bind="$attrs"
+			@change="(newValue: any) => emit('update:modelValue', newValue)">
 			<el-radio v-for="(item, index) in state.dictData" :key="index" :value="item[props.propValue]">
 				{{ onItemFormatter(item) ?? item[props.propLabel] }}
 			</el-radio>