refactor: 公告类型适配字典数据

1.新增 <dict-tag> 自定义组件,用于回显字典标签
2.重构 useDict 方法,支持查询字典数据
3.优化部分字典相关数据类型
This commit is contained in:
Charles7c 2023-09-17 13:26:14 +08:00
parent d5c5bcfe7e
commit 3a3a5d6b71
30 changed files with 224 additions and 84 deletions

View File

@ -23,6 +23,8 @@ import lombok.NoArgsConstructor;
import io.swagger.v3.oas.annotations.media.Schema;
import com.fasterxml.jackson.annotation.JsonInclude;
/**
* 键值对信息
*
@ -49,8 +51,21 @@ public class LabelValueVO<V> implements Serializable {
@Schema(description = "", example = "1")
private V value;
/**
* 颜色
*/
@Schema(description = "颜色", example = "#165DFF")
@JsonInclude(JsonInclude.Include.NON_NULL)
private String color;
public LabelValueVO(String label, V value) {
this.label = label;
this.value = value;
}
public LabelValueVO(String label, V value, String color) {
this.label = label;
this.value = value;
this.color = color;
}
}

View File

@ -16,7 +16,12 @@
package top.charles7c.cnadmin.system.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import top.charles7c.cnadmin.common.base.BaseMapper;
import top.charles7c.cnadmin.common.model.vo.LabelValueVO;
import top.charles7c.cnadmin.system.model.entity.DictItemDO;
/**
@ -25,4 +30,14 @@ import top.charles7c.cnadmin.system.model.entity.DictItemDO;
* @author Charles7c
* @since 2023/9/11 21:29
*/
public interface DictItemMapper extends BaseMapper<DictItemDO> {}
public interface DictItemMapper extends BaseMapper<DictItemDO> {
/**
* 根据字典编码查询
*
* @param dictCode
* 字典编码
* @return 字典项列表
*/
List<LabelValueVO> listByDictCode(@Param("dictCode") String dictCode);
}

View File

@ -23,7 +23,6 @@ import lombok.Data;
import com.baomidou.mybatisplus.annotation.TableName;
import top.charles7c.cnadmin.common.base.BaseDO;
import top.charles7c.cnadmin.system.enums.AnnouncementTypeEnum;
/**
* 公告实体
@ -50,7 +49,7 @@ public class AnnouncementDO extends BaseDO {
/**
* 类型
*/
private AnnouncementTypeEnum type;
private String type;
/**
* 生效时间

View File

@ -27,7 +27,6 @@ import io.swagger.v3.oas.annotations.media.Schema;
import org.hibernate.validator.constraints.Length;
import top.charles7c.cnadmin.common.base.BaseRequest;
import top.charles7c.cnadmin.system.enums.AnnouncementTypeEnum;
/**
* 创建或修改公告信息
@ -57,11 +56,11 @@ public class AnnouncementRequest extends BaseRequest {
private String content;
/**
* 类型
* 类型取值于字典 announcement_type
*/
@Schema(description = "类型", type = "Integer", allowableValues = {"1", "2", "3"}, example = "1")
@NotNull(message = "类型非法")
private AnnouncementTypeEnum type;
@Schema(description = "类型(取值于字典 announcement_type", example = "1")
@NotBlank(message = "类型不能为空")
private String type;
/**
* 生效时间

View File

@ -26,8 +26,6 @@ import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
import com.alibaba.excel.annotation.ExcelProperty;
import top.charles7c.cnadmin.common.base.BaseDetailVO;
import top.charles7c.cnadmin.common.config.easyexcel.ExcelBaseEnumConverter;
import top.charles7c.cnadmin.system.enums.AnnouncementTypeEnum;
/**
* 公告详情信息
@ -57,11 +55,11 @@ public class AnnouncementDetailVO extends BaseDetailVO {
private String content;
/**
* 类型
* 类型取值于字典 announcement_type
*/
@Schema(description = "类型", type = "Integer", allowableValues = {"1", "2", "3"}, example = "1")
@ExcelProperty(value = "类型", converter = ExcelBaseEnumConverter.class)
private AnnouncementTypeEnum type;
@Schema(description = "类型(取值于字典 announcement_type", example = "1")
@ExcelProperty(value = "类型")
private String type;
/**
* 生效时间

View File

@ -23,7 +23,6 @@ import lombok.Data;
import io.swagger.v3.oas.annotations.media.Schema;
import top.charles7c.cnadmin.common.base.BaseVO;
import top.charles7c.cnadmin.system.enums.AnnouncementTypeEnum;
/**
* 公告信息
@ -44,10 +43,10 @@ public class AnnouncementVO extends BaseVO {
private String title;
/**
* 类型
* 类型取值于字典 announcement_type
*/
@Schema(description = "类型", type = "Integer", allowableValues = {"1", "2", "3"}, example = "1")
private AnnouncementTypeEnum type;
@Schema(description = "类型(取值于字典 announcement_type", example = "1")
private String type;
/**
* 生效时间

View File

@ -19,6 +19,7 @@ package top.charles7c.cnadmin.system.service;
import java.util.List;
import top.charles7c.cnadmin.common.base.BaseService;
import top.charles7c.cnadmin.common.model.vo.LabelValueVO;
import top.charles7c.cnadmin.system.model.query.DictItemQuery;
import top.charles7c.cnadmin.system.model.request.DictItemRequest;
import top.charles7c.cnadmin.system.model.vo.DictItemDetailVO;
@ -41,6 +42,15 @@ public interface DictItemService extends BaseService<DictItemVO, DictItemDetailV
*/
List<DictItemDetailVO> listByDictId(Long dictId);
/**
* 根据字典编码查询
*
* @param dictCode
* 字典编码
* @return 字典项列表
*/
List<LabelValueVO> listByDictCode(String dictCode);
/**
* 根据字典 ID 列表删除
*

View File

@ -25,6 +25,7 @@ import org.springframework.transaction.annotation.Transactional;
import top.charles7c.cnadmin.common.base.BaseServiceImpl;
import top.charles7c.cnadmin.common.model.query.SortQuery;
import top.charles7c.cnadmin.common.model.vo.LabelValueVO;
import top.charles7c.cnadmin.common.util.validate.CheckUtils;
import top.charles7c.cnadmin.system.mapper.DictItemMapper;
import top.charles7c.cnadmin.system.model.entity.DictItemDO;
@ -73,6 +74,11 @@ public class DictItemServiceImpl
return detailList;
}
@Override
public List<LabelValueVO> listByDictCode(String dictCode) {
return baseMapper.listByDictCode(dictCode);
}
@Override
public void deleteByDictIds(List<Long> dictIds) {
baseMapper.lambdaUpdate().in(DictItemDO::getDictId, dictIds).remove();

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="top.charles7c.cnadmin.system.mapper.DictItemMapper">
<select id="listByDictCode" resultType="top.charles7c.cnadmin.common.model.vo.LabelValueVO">
SELECT t1.`label`, t1.`value`, t1.`color`
FROM `sys_dict_item` AS t1
LEFT JOIN `sys_dict` AS t2 ON t1.`dict_id` = t2.`id`
WHERE t2.`code` = #{dictCode}
ORDER BY t1.`sort` ASC
</select>
</mapper>

View File

@ -66,5 +66,6 @@ module.exports = {
'no-param-reassign': 0,
'prefer-regex-literals': 0,
'import/no-extraneous-dependencies': 0,
'camelcase': 'off',
},
};

View File

@ -6,8 +6,10 @@ import { ListParam as RoleParam } from '@/api/system/role';
import { TreeNodeData } from '@arco-design/web-vue';
import { LabelValueState } from '@/store/modules/dict/types';
const BASE_URL = '/common';
export function listDeptTree(params: DeptParam) {
return axios.get<TreeNodeData[]>('/common/tree/dept', {
return axios.get<TreeNodeData[]>(`${BASE_URL}/tree/dept`, {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
@ -16,7 +18,7 @@ export function listDeptTree(params: DeptParam) {
}
export function listMenuTree(params: MenuParam) {
return axios.get<TreeNodeData[]>('/common/tree/menu', {
return axios.get<TreeNodeData[]>(`${BASE_URL}/tree/menu`, {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
@ -25,7 +27,7 @@ export function listMenuTree(params: MenuParam) {
}
export function listRoleDict(params: RoleParam) {
return axios.get<LabelValueState[]>('/common/dict/role', {
return axios.get<LabelValueState[]>(`${BASE_URL}/dict/role`, {
params,
paramsSerializer: (obj) => {
return qs.stringify(obj);
@ -34,5 +36,9 @@ export function listRoleDict(params: RoleParam) {
}
export function listEnumDict(enumTypeName: string) {
return axios.get<LabelValueState[]>(`/common/dict/enum/${enumTypeName}`);
return axios.get<LabelValueState[]>(`${BASE_URL}/dict/enum/${enumTypeName}`);
}
export function listDict(code: string) {
return axios.get<LabelValueState[]>(`${BASE_URL}/dict/${code}`);
}

View File

@ -7,7 +7,7 @@ export interface DataRecord {
id?: string;
title?: string;
content?: string;
status?: string;
status?: number;
type?: string;
effectiveTime?: string;
terminateTime?: string;
@ -21,7 +21,7 @@ export interface DataRecord {
export interface ListParam {
title?: string;
status?: string;
status?: number;
type?: string;
page?: number;
size?: number;

View File

@ -0,0 +1,50 @@
<template>
<span v-if="!dictItem"></span>
<span v-else-if="!dictItem.color">{{ dictItem.label }}</span>
<a-tag v-else-if="dictItem.color === 'primary'" color="arcoblue">{{
dictItem.label
}}</a-tag>
<a-tag v-else-if="dictItem.color === 'success'" color="green">{{
dictItem.label
}}</a-tag>
<a-tag v-else-if="dictItem.color === 'warning'" color="orangered">{{
dictItem.label
}}</a-tag>
<a-tag v-else-if="dictItem.color === 'error'" color="red">{{
dictItem.label
}}</a-tag>
<a-tag v-else-if="dictItem.color === 'default'" color="gray">{{
dictItem.label
}}</a-tag>
<a-tag v-else :color="dictItem.color">{{ dictItem.label }}</a-tag>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { LabelValueState } from '@/store/modules/dict/types';
const props = defineProps({
dict: {
type: Array<LabelValueState>,
required: true,
},
value: {
type: [Number, String],
required: true,
},
});
const dictItem = computed(() =>
props.dict.find(
(d) => d.value === String(props.value) || d.value === Number(props.value)
)
);
</script>
<script lang="ts">
export default {
name: 'DictTag',
};
</script>
<style scoped lang="less"></style>

View File

@ -12,6 +12,7 @@ import {
import Chart from './chart/index.vue';
import Breadcrumb from './breadcrumb/index.vue';
import DateRangePicker from './date-range-picker/index.vue';
import DictTag from './dict-tag/index.vue';
import RightToolbar from './right-toolbar/index.vue';
import SvgIcon from './svg-icon/index.vue';
import IconSelect from './icon-select/index.vue';
@ -41,6 +42,7 @@ export default {
Vue.component('Chart', Chart);
Vue.component('Breadcrumb', Breadcrumb);
Vue.component('DateRangePicker', DateRangePicker);
Vue.component('DictTag', DictTag);
Vue.component('RightToolbar', RightToolbar);
Vue.component('SvgIcon', SvgIcon);
Vue.component('IconSelect', IconSelect);

View File

@ -1,6 +1,7 @@
export interface LabelValueState {
label: string;
value: any;
color?: string;
}
export interface DictState {

View File

@ -1,25 +1,33 @@
import { ref, toRefs } from 'vue';
import { listEnumDict } from '@/api/common';
import { listEnumDict, listDict } from '@/api/common';
import { useDictStore } from '@/store';
/**
*
*
* @param names
* @param dicts
*/
export default function useDict(...names: Array<string>) {
export default function useDict(
...dicts: Array<{ name: string; isEnum: boolean }>
) {
const res = ref<any>({});
return (() => {
names.forEach((name: string) => {
dicts.forEach((d) => {
const { name } = d;
res.value[name] = [];
const dict = useDictStore().getDict(name);
if (dict) {
res.value[name] = dict;
} else {
} else if (d.isEnum) {
listEnumDict(name).then((resp) => {
res.value[name] = resp.data;
useDictStore().setDict(name, res.value[name]);
});
} else {
listDict(name).then((resp) => {
res.value[name] = resp.data;
useDictStore().setDict(name, res.value[name]);
});
}
});
return toRefs(res.value);

View File

@ -13,9 +13,7 @@
<div>
<a-empty v-if="dataList.length === 0">暂无公告</a-empty>
<div v-for="(item, idx) in dataList" :key="idx" class="item">
<a-tag v-if="item.type === 1" color="orangered">活动</a-tag>
<a-tag v-else-if="item.type === 2" color="cyan">消息</a-tag>
<a-tag v-else color="blue">通知</a-tag>
<dict-tag :dict="announcement_type" :value="item.type" />
<span class="item-content">
<a-link @click="toDetail(item.id)">{{ item.title }}</a-link>
</span>
@ -82,13 +80,19 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { getCurrentInstance, ref } from 'vue';
import {
DashboardAnnouncementRecord,
listAnnouncement,
} from '@/api/common/dashboard';
import { DataRecord, get } from '@/api/system/announcement';
const { proxy } = getCurrentInstance() as any;
const { announcement_type } = proxy.useDict({
name: 'announcement_type',
isEnum: false,
});
const dataList = ref<DashboardAnnouncementRecord[]>([]);
const dataDetail = ref<DataRecord>({});
const detailLoading = ref(false);

View File

@ -91,9 +91,10 @@
} from '@/api/monitor/log';
const { proxy } = getCurrentInstance() as any;
const { SuccessFailureStatusEnum } = proxy.useDict(
'SuccessFailureStatusEnum'
);
const { SuccessFailureStatusEnum } = proxy.useDict({
name: 'SuccessFailureStatusEnum',
isEnum: true,
});
const loginLogList = ref<LoginLogRecord[]>([]);
const total = ref(0);

View File

@ -101,9 +101,10 @@
} from '@/api/monitor/log';
const { proxy } = getCurrentInstance() as any;
const { SuccessFailureStatusEnum } = proxy.useDict(
'SuccessFailureStatusEnum'
);
const { SuccessFailureStatusEnum } = proxy.useDict({
name: 'SuccessFailureStatusEnum',
isEnum: true,
});
const operationLogList = ref<OperationLogRecord[]>([]);
const total = ref(0);

View File

@ -19,7 +19,7 @@
<a-form-item field="type" hide-label>
<a-select
v-model="queryParams.type"
:options="AnnouncementTypeEnum"
:options="announcement_type"
placeholder="类型搜索"
allow-clear
style="width: 150px"
@ -128,15 +128,15 @@
</a-table-column>
<a-table-column title="类型" align="center">
<template #cell="{ record }">
<a-tag v-if="record.type === 1" color="orangered">活动</a-tag>
<a-tag v-else-if="record.type === 2" color="cyan">消息</a-tag>
<a-tag v-else color="blue">通知</a-tag>
<dict-tag :dict="announcement_type" :value="record.type" />
</template>
</a-table-column>
<a-table-column title="状态" align="center">
<template #cell="{ record }">
<a-tag v-if="record.status === 1" color="blue">待发布</a-tag>
<a-tag v-else-if="record.status === 2" color="green">已发布</a-tag>
<a-tag v-else-if="record.status === 2" color="green"
>已发布</a-tag
>
<a-tag v-else color="red">已过期</a-tag>
</template>
</a-table-column>
@ -226,14 +226,10 @@
</a-row>
<a-row :gutter="16">
<a-col :span="8">
<a-form-item
label="类型"
field="type"
tooltip="计划 v1.2.0 增加字典管理,用于维护此类信息"
>
<a-form-item label="类型" field="type">
<a-select
v-model="form.type"
:options="AnnouncementTypeEnum"
:options="announcement_type"
placeholder="请选择类型"
/>
</a-form-item>
@ -358,7 +354,10 @@
import checkPermission from '@/utils/permission';
const { proxy } = getCurrentInstance() as any;
const { AnnouncementTypeEnum } = proxy.useDict('AnnouncementTypeEnum');
const { announcement_type } = proxy.useDict({
name: 'announcement_type',
isEnum: false,
});
const dataList = ref<DataRecord[]>([]);
const dataDetail = ref<DataRecord>({

View File

@ -316,7 +316,10 @@
import checkPermission from '@/utils/permission';
const { proxy } = getCurrentInstance() as any;
const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');
const { DisEnableStatusEnum } = proxy.useDict({
name: 'DisEnableStatusEnum',
isEnum: true,
});
const dataList = ref<DataRecord[]>([]);
const dataDetail = ref<DataRecord>({

View File

@ -168,7 +168,7 @@
</a-table>
</a-col>
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<dictItem ref="dictItemRef" :dict-id="dictId" />
<dict-item ref="dictItemRef" :dict-id="dictId" />
</a-col>
</a-row>

View File

@ -44,23 +44,7 @@
<template #columns>
<a-table-column title="字典标签" align="center">
<template #cell="{ record }">
<a-tag v-if="record.color === 'primary'" color="arcoblue">{{
record.label
}}</a-tag>
<a-tag v-else-if="record.color === 'success'" color="green">{{
record.label
}}</a-tag>
<a-tag v-else-if="record.color === 'warning'" color="orangered">{{
record.label
}}</a-tag>
<a-tag v-else-if="record.color === 'error'" color="red">{{
record.label
}}</a-tag>
<a-tag v-else-if="record.color === 'default'" color="gray">{{
record.label
}}</a-tag>
<span v-else-if="!record.color">{{ record.label }}</span>
<a-tag v-else :color="record.color">{{ record.label }}</a-tag>
<dict-tag :dict="dataList" :value="record.value" />
</template>
</a-table-column>
<a-table-column title="字典值" align="center" data-index="value" />

View File

@ -355,7 +355,10 @@
import checkPermission from '@/utils/permission';
const { proxy } = getCurrentInstance() as any;
const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');
const { DisEnableStatusEnum } = proxy.useDict({
name: 'DisEnableStatusEnum',
isEnum: true,
});
const dataList = ref<DataRecord[]>([]);
const ids = ref<Array<string>>([]);

View File

@ -363,8 +363,12 @@
<span v-else-if="dataDetail.dataScope === 2"
>本部门及以下数据权限</span
>
<span v-else-if="dataDetail.dataScope === 3">本部门数据权限</span>
<span v-else-if="dataDetail.dataScope === 4">仅本人数据权限</span>
<span v-else-if="dataDetail.dataScope === 3"
>本部门数据权限</span
>
<span v-else-if="dataDetail.dataScope === 4"
>仅本人数据权限</span
>
<span v-else>自定义数据权限</span>
</span>
</a-descriptions-item>
@ -445,8 +449,14 @@
const { proxy } = getCurrentInstance() as any;
const { DataScopeEnum, DisEnableStatusEnum } = proxy.useDict(
'DataScopeEnum',
'DisEnableStatusEnum'
{
name: 'DataScopeEnum',
isEnum: true,
},
{
name: 'DisEnableStatusEnum',
isEnum: true,
}
);
const dataList = ref<DataRecord[]>([]);

View File

@ -523,7 +523,10 @@
import checkPermission from '@/utils/permission';
const { proxy } = getCurrentInstance() as any;
const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');
const { DisEnableStatusEnum } = proxy.useDict({
name: 'DisEnableStatusEnum',
isEnum: true,
});
const dataList = ref<DataRecord[]>([]);
const dataDetail = ref<DataRecord>({

View File

@ -302,8 +302,14 @@
const { proxy } = getCurrentInstance() as any;
const { FormTypeEnum, QueryTypeEnum } = proxy.useDict(
'FormTypeEnum',
'QueryTypeEnum'
{
name: 'DisEnableStatusEnum',
isEnum: true,
},
{
name: 'QueryTypeEnum',
isEnum: true,
}
);
const tableList = ref<TableRecord[]>([]);

View File

@ -48,9 +48,7 @@ import top.charles7c.cnadmin.system.model.query.DeptQuery;
import top.charles7c.cnadmin.system.model.query.MenuQuery;
import top.charles7c.cnadmin.system.model.query.RoleQuery;
import top.charles7c.cnadmin.system.model.vo.RoleVO;
import top.charles7c.cnadmin.system.service.DeptService;
import top.charles7c.cnadmin.system.service.MenuService;
import top.charles7c.cnadmin.system.service.RoleService;
import top.charles7c.cnadmin.system.service.*;
/**
* 公共 API
@ -69,6 +67,7 @@ public class CommonController {
private final DeptService deptService;
private final MenuService menuService;
private final RoleService roleService;
private final DictItemService dictItemService;
private final ProjectProperties projectProperties;
@Operation(summary = "查询部门树", description = "查询树结构的部门列表")
@ -113,4 +112,11 @@ public class CommonController {
}).collect(Collectors.toList());
return R.ok(labelValueVOList);
}
@Operation(summary = "查询字典", description = "查询字典列表")
@Parameter(name = "code", description = "字典编码", example = "announcement_type", in = ParameterIn.PATH)
@GetMapping("/dict/{code}")
public R<List<LabelValueVO>> listDict(@PathVariable String code) {
return R.ok(dictItemService.listByDictCode(code));
}
}

View File

@ -36,7 +36,7 @@ CREATE TABLE IF NOT EXISTS `sys_announcement` (
`id` bigint(20) UNSIGNED AUTO_INCREMENT COMMENT 'ID',
`title` varchar(255) NOT NULL COMMENT '标题',
`content` mediumtext NOT NULL COMMENT '内容',
`type` tinyint(1) UNSIGNED DEFAULT 1 COMMENT '类型1活动2消息3通知',
`type` varchar(30) NOT NULL COMMENT '类型',
`effective_time` datetime DEFAULT NULL COMMENT '生效时间',
`terminate_time` datetime DEFAULT NULL COMMENT '终止时间',
`sort` int(11) UNSIGNED DEFAULT 999 COMMENT '排序',

View File

@ -4,7 +4,7 @@
CREATE TABLE IF NOT EXISTS `sys_dict` (
`id` bigint(20) UNSIGNED AUTO_INCREMENT COMMENT 'ID',
`name` varchar(50) NOT NULL COMMENT '字典名称',
`code` varchar(50) NOT NULL COMMENT '字典编码',
`code` varchar(30) NOT NULL COMMENT '字典编码',
`description` varchar(512) DEFAULT NULL COMMENT '描述',
`create_user` bigint(20) UNSIGNED NOT NULL COMMENT '创建人',
`create_time` datetime NOT NULL COMMENT '创建时间',
@ -18,7 +18,7 @@ CREATE TABLE IF NOT EXISTS `sys_dict` (
CREATE TABLE IF NOT EXISTS `sys_dict_item` (
`id` bigint(20) UNSIGNED AUTO_INCREMENT COMMENT 'ID',
`label` varchar(50) NOT NULL COMMENT '字典标签',
`value` varchar(50) NOT NULL COMMENT '字典值',
`value` varchar(30) NOT NULL COMMENT '字典值',
`color` varchar(30) DEFAULT NULL COMMENT '背景颜色',
`sort` int(11) UNSIGNED DEFAULT 999 COMMENT '字典项排序',
`description` varchar(512) DEFAULT NULL COMMENT '描述',