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

1.新增 <dict-tag> 自定义组件，用于回显字典标签 2.重构 useDict 方法，支持查询字典数据 3.优化部分字典相关数据类型
2025-09-29 20:57:18 +08:00 · 2023-09-17 13:26:14 +08:00
parent d5c5bcfe7e
commit 3a3a5d6b71
30 changed files with 224 additions and 84 deletions
--- a/continew-admin-ui/.eslintrc.js
+++ b/continew-admin-ui/.eslintrc.js
@@ -66,5 +66,6 @@ module.exports = {
    'no-param-reassign': 0,
    'prefer-regex-literals': 0,
    'import/no-extraneous-dependencies': 0,
+    'camelcase': 'off',
  },
 };
--- a/continew-admin-ui/src/api/common/index.ts
+++ b/continew-admin-ui/src/api/common/index.ts
@@ -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}`);
 }
--- a/continew-admin-ui/src/api/system/announcement.ts
+++ b/continew-admin-ui/src/api/system/announcement.ts
@@ -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;
--- a/continew-admin-ui/src/components/dict-tag/index.vue
+++ b/continew-admin-ui/src/components/dict-tag/index.vue
@@ -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>
--- a/continew-admin-ui/src/components/index.ts
+++ b/continew-admin-ui/src/components/index.ts
@@ -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);
--- a/continew-admin-ui/src/store/modules/dict/types.ts
+++ b/continew-admin-ui/src/store/modules/dict/types.ts
@@ -1,6 +1,7 @@
 export interface LabelValueState {
  label: string;
  value: any;
+  color?: string;
 }

 export interface DictState {
--- a/continew-admin-ui/src/utils/dict.ts
+++ b/continew-admin-ui/src/utils/dict.ts
@@ -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);
--- a/continew-admin-ui/src/views/dashboard/workplace/components/announcement.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/announcement.vue
@@ -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);
--- a/continew-admin-ui/src/views/monitor/log/login/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/login/index.vue
@@ -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);
--- a/continew-admin-ui/src/views/monitor/log/operation/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/operation/index.vue
@@ -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);
--- a/continew-admin-ui/src/views/system/announcement/index.vue
+++ b/continew-admin-ui/src/views/system/announcement/index.vue
@@ -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>({
--- a/continew-admin-ui/src/views/system/dept/index.vue
+++ b/continew-admin-ui/src/views/system/dept/index.vue
@@ -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>({
--- a/continew-admin-ui/src/views/system/dict/index.vue
+++ b/continew-admin-ui/src/views/system/dict/index.vue
@@ -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>

--- a/continew-admin-ui/src/views/system/dict/item.vue
+++ b/continew-admin-ui/src/views/system/dict/item.vue
@@ -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" />
--- a/continew-admin-ui/src/views/system/menu/index.vue
+++ b/continew-admin-ui/src/views/system/menu/index.vue
@@ -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>>([]);
--- a/continew-admin-ui/src/views/system/role/index.vue
+++ b/continew-admin-ui/src/views/system/role/index.vue
@@ -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[]>([]);
--- a/continew-admin-ui/src/views/system/user/index.vue
+++ b/continew-admin-ui/src/views/system/user/index.vue
@@ -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>({
--- a/continew-admin-ui/src/views/tool/generator/index.vue
+++ b/continew-admin-ui/src/views/tool/generator/index.vue
@@ -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[]>([]);