Pre Merge pull request !277 from thkdog/dev

snowy-admin-web/src/components/DictColorPicker/index.vue

@@ -0,0 +1,85 @@
+<!-- ColorPicker.vue -->
+<template>
+	<div class="color-picker">
+		<div
+			v-for="(color, index) in Colors"
+			:key="index"
+			:class="['item-color-wrapper', selectedColor === color ? 'item-active' : '']"
+			style="position: relative; display: inline-block;"
+		>
+			<div
+				:class="['color-circle']"
+				:style="{ backgroundColor: color }"
+				@click="toggleColor(color)"
+			></div>
+			<div class="item-color-border" :style="{ borderColor: color }"></div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps, watch } from 'vue'
+
+// 单色数组
+const Colors = [
+	'#2196F3', '#08C9C9', '#00C345', '#FAD714', '#FF9300',
+	'#F52222', '#EB2F96', '#7500EA', '#2D46C4', '#484848'
+]
+
+const props = defineProps({
+	value: {
+		type: String,
+		default: null
+	}
+})
+const emit = defineEmits(['update:value'])
+
+const selectedColor = ref(props.value)
+
+watch(() => props.value, (val) => {
+	selectedColor.value = val
+})
+
+// 切换颜色选择
+function toggleColor(color) {
+	if (selectedColor.value === color) {
+		selectedColor.value = null
+	} else {
+		selectedColor.value = color
+	}
+	emit('update:value', selectedColor.value)
+}
+</script>
+
+<style scoped>
+.color-picker {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.color-circle {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	cursor: pointer;
+	border: 2px solid transparent;
+	transition: all 0.2s ease-in-out;
+}
+
+.item-color-border {
+	visibility: hidden;
+	position: absolute;
+	border: 2px solid;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	top: -3px;
+	left: -3px;
+	pointer-events: none;
+}
+
+.item-active .item-color-border {
+	visibility: visible;
+}
+</style>

snowy-admin-web/src/utils/tool.js

@@ -106,6 +106,24 @@ tool.dictTypeData = (dictValue, value) => {
 	return dict ? dict.dictLabel : ''
 }
 
+// 字典翻译color方法，界面插槽使用方法，一般建议配合自定义标签组件使用 {{ $TOOL.dictTypeDataColor('sex', record.sex) }}
+tool.dictTypeDataColor = (dictValue, value) => {
+	const dictTypeTree = tool.dictDataAll()
+	if (!dictTypeTree) {
+		return '需重新登录'
+	}
+	const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
+	if (!tree) {
+		return ''
+	}
+	const children = tree.children
+	if (!tree.children) {
+		return ''
+	}
+	const dict = children.find((item) => item.dictValue === value)
+	return dict ? dict.dictColor : ''
+}
+
 // 获取某个code下字典的列表，多用于字典下拉框
 tool.dictTypeList = (dictValue) => {
 	const dictTypeTree = tool.dictDataAll()
@@ -135,6 +153,7 @@ tool.dictList = (dictValue) => {
 	return tree.children.map((item) => {
 		return {
 			value: item['dictValue'],
+			color: item['dictColor'],
 			label: item['name']
 		}
 	})

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

@@ -36,6 +36,9 @@
 					:disabled="formData.parentId === '0'"
 				/>
 			</a-form-item>
+			<a-form-item label="颜色值：" name="dictColor">
+				<DictColorPicker v-model:value="formData.dictColor" />
+			</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>
@@ -48,6 +51,7 @@
 </template>
 
 <script setup name="dictForm">
+	import DictColorPicker from '@/components/DictColorPicker/index.vue'
 	import { required } from '@/utils/formRules'
 	import dictApi from '@/api/dev/dictApi'
 

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

@@ -54,6 +54,12 @@
 						<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 === 'dictColor'">
+						<span v-if="record.dictColor" :style="{ display: 'inline-flex', alignItems: 'center' }">
+							<span class="color-circle" :style="{ backgroundColor: record.dictColor }"></span>
+							<span style="margin-left: 8px;">{{ record.dictColor }}</span>
+						</span>
+					</template>
 					<template v-if="column.dataIndex === 'action'">
 						<a @click="formRef.onOpen(record, categoryType)">编辑</a>
 						<a-divider type="vertical" />
@@ -90,6 +96,11 @@
 			dataIndex: 'dictValue',
 			width: 350
 		},
+		{
+			title: '颜色值',
+			dataIndex: 'dictColor',
+			width: 200
+		},
 		{
 			title: '排序',
 			dataIndex: 'sortCode'
@@ -208,4 +219,12 @@
 	.snowy-button-left {
 		margin-left: 8px;
 	}
+	.color-circle {
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		cursor: pointer;
+		border: 2px solid transparent;
+		transition: all 0.2s ease-in-out;
+	}
 </style>

snowy-plugin/snowy-plugin-dev/src/main/java/vip/xiaonuo/dev/modular/dict/entity/DevDict.java

@@ -47,6 +47,11 @@ public class DevDict extends CommonEntity {
     @Schema(description = "字典值")
     private String dictValue;
 
+    /** 字典值 */
+    @Schema(description = "字典颜色")
+    @TableField(updateStrategy = FieldStrategy.ALWAYS)
+    private String dictColor;
+
     /** 编码 */
     @Schema(description = "编码")
     private String code;

snowy-plugin/snowy-plugin-dev/src/main/java/vip/xiaonuo/dev/modular/dict/param/DevDictAddParam.java

@@ -43,6 +43,10 @@ public class DevDictAddParam {
     @NotBlank(message = "dictValue不能为空")
     private String dictValue;
 
+    /** 字典颜色 */
+    @Schema(description = "字典颜色")
+    private String dictColor;
+
     /** 分类 */
     @Schema(description = "分类")
     @NotBlank(message = "category不能为空")

snowy-plugin/snowy-plugin-dev/src/main/java/vip/xiaonuo/dev/modular/dict/param/DevDictEditParam.java

@@ -48,6 +48,10 @@ public class DevDictEditParam {
     @NotBlank(message = "dictValue不能为空")
     private String dictValue;
 
+    /** 字典颜色 */
+    @Schema(description = "字典颜色")
+    private String dictColor;
+
     /** 分类 */
     @Schema(description = "分类")
     @NotBlank(message = "category不能为空")

snowy-plugin/snowy-plugin-dev/src/main/java/vip/xiaonuo/dev/modular/dict/service/impl/DevDictServiceImpl.java

@@ -65,7 +65,7 @@ public class DevDictServiceImpl extends ServiceImpl<DevDictMapper, DevDict> impl
         QueryWrapper<DevDict> queryWrapper = new QueryWrapper<DevDict>().checkSqlInjection();
         // 查询部分字段
         queryWrapper.lambda().select(DevDict::getId, DevDict::getParentId, DevDict::getCategory, DevDict::getDictLabel,
-                DevDict::getDictValue, DevDict::getSortCode);
+                DevDict::getDictValue, DevDict::getDictColor, DevDict::getSortCode);
         if (ObjectUtil.isNotEmpty(devDictPageParam.getParentId())) {
             queryWrapper.lambda().and(q -> q.eq(DevDict::getParentId, devDictPageParam.getParentId())
                     .or().eq(DevDict::getId, devDictPageParam.getParentId()));
@@ -103,7 +103,7 @@ public class DevDictServiceImpl extends ServiceImpl<DevDictMapper, DevDict> impl
         LambdaQueryWrapper<DevDict> lambdaQueryWrapper = new LambdaQueryWrapper<>();
         // 查询部分字段
         lambdaQueryWrapper.select(DevDict::getId, DevDict::getParentId, DevDict::getCategory, DevDict::getDictLabel,
-                DevDict::getDictValue, DevDict::getSortCode);
+                DevDict::getDictValue, DevDict::getDictColor, DevDict::getSortCode);
         lambdaQueryWrapper.orderByAsc(DevDict::getSortCode);
         if (ObjectUtil.isNotEmpty(devDictTreeParam.getCategory())) {
             lambdaQueryWrapper.eq(DevDict::getCategory, devDictTreeParam.getCategory());

snowy-web-app/src/main/resources/_sql/snowy_mysql.sql

@@ -347,6 +347,7 @@ CREATE TABLE `DEV_DICT`  (
   `PARENT_ID` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '父id',
   `DICT_LABEL` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '字典文字',
   `DICT_VALUE` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '字典值',
+  `DICT_COLOR` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '字典颜色',
   `CODE` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '编码',
   `CATEGORY` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '分类',
   `SORT_CODE` int(11) NULL DEFAULT NULL COMMENT '排序码',