mirror of https://gitee.com/xiaonuobase/snowy
字典支持「颜色值」，支持选中与取消，前端tool工具增加 dictTypeDataColor 方法获取字典颜色
shenyi
parent
715451de5d
commit
dfe15ab00b
|
|
@ -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>
|
||||
|
|
@ -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']
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@ public class DevDictAddParam {
|
|||
@NotBlank(message = "dictValue不能为空")
|
||||
private String dictValue;
|
||||
|
||||
/** 字典颜色 */
|
||||
@Schema(description = "字典颜色")
|
||||
private String dictColor;
|
||||
|
||||
/** 分类 */
|
||||
@Schema(description = "分类")
|
||||
@NotBlank(message = "category不能为空")
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@ public class DevDictEditParam {
|
|||
@NotBlank(message = "dictValue不能为空")
|
||||
private String dictValue;
|
||||
|
||||
/** 字典颜色 */
|
||||
@Schema(description = "字典颜色")
|
||||
private String dictColor;
|
||||
|
||||
/** 分类 */
|
||||
@Schema(description = "分类")
|
||||
@NotBlank(message = "category不能为空")
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -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 '排序码',
|
||||
|
|
|
|||
Loading…
Reference in New Issue