【更新】支持字典设定颜色

snowy-admin-web/src/views/dev/dict/category/form.vue

@@ -36,6 +36,13 @@
 					:disabled="formData.parentId === '0'"
 				/>
 			</a-form-item>
+			<a-form-item label="字典颜色：" name="dictColor">
+				<a-select v-model:value="formData.dictColor" placeholder="请选择字典颜色" allow-clear>
+					<a-select-option v-for="item in dictColorList" :key="item" :value="item">
+						<a-tag :color="item">{{ item }}</a-tag>
+					</a-select-option>
+				</a-select>
+			</a-form-item>
 			<a-form-item label="排序：" name="sortCode">
 				<a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="1000" />
 			</a-form-item>
@@ -63,6 +70,9 @@
 	// 默认展开的节点(顶级)
 	const defaultExpandedKeys = ref([0])
 
+	// 定义字典颜色
+	const dictColorList = ['default','pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple','gold','geekblue','volcano','magenta','processing','success','error','warning']
+
 	// 打开抽屉
 	const onOpen = (record, type, parentId) => {
 		visible.value = true
@@ -100,6 +110,7 @@
 	const formRules = {
 		dictLabel: [required('请输入字典名称')],
 		dictValue: [required('请选择字典值')],
+		dictColor: [required('请选择字典颜色')],
 		sortCode: [required('请选择排序')]
 	}
 	// 表单固定label实现

snowy-admin-web/src/views/dev/dict/category/index.vue

@@ -27,10 +27,10 @@
 									allow-clear
 									:tree-data="treeData"
 									:field-names="{
-												children: 'children',
-												label: 'name',
-												value: 'id'
-											}"
+											children: 'children',
+											label: 'name',
+											value: 'id'
+										}"
 									selectable="false"
 									tree-line
 								/>
@@ -84,6 +84,9 @@
 							<a-tag color="blue" v-if="record.level">{{ record.level }}</a-tag>
 							<a-tag color="green" v-else>子级</a-tag>
 						</template>
+						<template v-if="column.dataIndex === 'dictLabel'">
+							<a-tag :color="record.dictColor">{{ record.dictLabel }}</a-tag>
+						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a @click="formRef.onOpen(record, categoryType)">编辑</a>
 							<a-divider type="vertical" />