增加字典功能

src/api/system/dict/data.ts

@@ -0,0 +1,52 @@
+import request from '@/api/request'
+
+// 查询字典数据列表
+export function listData(params: any) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params
+  })
+}
+
+// 查询字典数据详细
+export function getData(dictCode: string) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  })
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: string) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
+
+// 新增字典数据
+export function addData(data: any) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data
+  })
+}
+
+// 修改字典数据
+export function updateData(data: any) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data
+  })
+}
+
+// 删除字典数据
+export function delData(dictCode: string) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  })
+}

src/api/system/dict/index.ts

@@ -0,0 +1,2 @@
+export * from './data'
+export * from './type'

src/api/system/dict/type.ts

@@ -0,0 +1,61 @@
+import request from '@/api/request'
+import type { ID } from '@/api/common'
+
+// 查询字典类型列表
+export function listType(params: any) {
+  return request({
+    url: "/system/dict/type/list",
+    method: "get",
+    params,
+  });
+}
+
+// 查询字典类型详细
+export function getType(dictId: ID) {
+  return request({
+    url: "/system/dict/type/" + dictId,
+    method: "get",
+  });
+}
+
+// 新增字典类型
+export function addType(data: any) {
+  return request({
+    url: "/system/dict/type",
+    method: "post",
+    data,
+  });
+}
+
+// 修改字典类型
+export function updateType(data: any) {
+  return request({
+    url: "/system/dict/type",
+    method: "put",
+    data,
+  });
+}
+
+// 删除字典类型
+export function delType(dictId: ID) {
+  return request({
+    url: "/system/dict/type/" + dictId,
+    method: "delete",
+  });
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: "/system/dict/type/refreshCache",
+    method: "delete",
+  });
+}
+
+// 获取字典选择框列表
+export function getOptions() {
+  return request({
+    url: "/system/dict/type/optionselect",
+    method: "get",
+  });
+}

src/components/common/DictTag/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="isValueMatch(item.value)">
+        <span
+          v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
+          :key="item.value" :index="index" :class="item.elTagClass">{{ item.label + " " }}</span>
+        <a-tag v-else :disable-transitions="true" :key="item.value + ''" :index="index" :color="getColor(item.elTagType)"
+          :class="item.elTagClass + ' ' + size">{{ item.label + " " }}</a-tag>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray || handleArray }}
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface DictOption {
+  label: string;
+  value: string;
+  elTagType?: string;
+  elTagClass?: string;
+}
+
+// 记录未匹配的项
+const unmatchArray = ref<any>([])
+
+const props = defineProps({
+  // 数据
+  options: {
+    type: Array as () => Array<DictOption>,
+    default: null,
+  },
+  // 当前的值
+  value: [Number, String, Array],
+  // 当未找到匹配的数据时，显示value
+  showValue: {
+    type: Boolean,
+    default: true,
+  },
+  separator: {
+    type: String,
+    default: ",",
+  },
+  size: {
+    type: String,
+    default: 'mini',
+  },
+})
+
+const values = computed(() => {
+  if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
+  if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value]
+  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
+})
+
+const unmatch = computed(() => {
+  unmatchArray.value = []
+  // 没有value不显示
+  if (props.value === null || typeof props.value === 'undefined' || props.value === '' || !Array.isArray(props.options) || props.options.length === 0) return false
+  // 传入值为数组
+  let unmatch = false // 添加一个标志来判断是否有未匹配项
+  values.value.forEach(item => {
+    if (!props.options.some(v => v.value == item)) {
+      unmatchArray.value.push(item)
+      unmatch = true // 如果有未匹配项，将标志设置为true
+    }
+  })
+  return unmatch // 返回标志的值
+})
+
+function handleArray(array: string[]) {
+  if (array.length === 0) return ""
+  return array.reduce((pre, cur) => {
+    return pre + " " + cur
+  })
+}
+
+function isValueMatch(itemValue: string) {
+  return values.value.some(val => val == itemValue)
+}
+
+function getColor(tagType: string | undefined) {
+  switch (tagType) {
+    case 'primary':
+      return 'processing'
+    case 'success':
+      return 'success'
+    case 'info':
+      return 'info'
+    case 'warning':
+      return 'warning'
+    case 'danger':
+      return 'error'
+    default:
+      return 'default'
+  }
+}
+</script>
+
+<style scoped>
+.ant-tag+.ant-tag {
+  margin-left: 10px;
+}
+
+.ant-tag{
+  &.large {
+    font-size: 18px;
+    line-height: 28px;
+  }
+  &.medium {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  &.mini {
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+</style>

src/main.ts

@@ -13,4 +13,9 @@ import "ant-design-vue/dist/reset.css";
 import "@/assets/styles/index.scss";
 
 const app = createApp(App);
+
+// 字典方法
+import { useDict } from "@/utils/dict";
+app.config.globalProperties.useDict = useDict;
+
 app.use(pinia).use(router).mount("#app");

src/store/dict.ts

@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useDictStore = defineStore("dict", () => {
+  const dict = ref<any[]>([]);
+
+  // 获取字典
+  function getDict(_key: string) {
+    if (_key == null && _key == "") {
+      return null;
+    }
+    try {
+      dict.value.forEach(item => {
+        if (item.key == _key) {
+          return item.value;
+        }
+      });
+    } catch (e) {
+      return null;
+    }
+  }
+
+  // 设置字典
+  function setDict(_key: string, value: string | number) {
+    if (!_key) return;
+    dict.value.push({
+      key: _key,
+      value: value
+    });
+  }
+
+  // 删除字典
+  function removeDict(_key: string) {
+    var bln = false;
+    try {
+      dict.value.forEach((item, index) => {
+        if (item.key == _key) {
+          dict.value.splice(index, 1);
+          bln = true;
+        }
+      });
+    } catch (e) {
+      bln = false;
+    }
+    return bln;
+  }
+
+  // 清空字典
+  function cleanDict() {
+    dict.value = new Array();
+  }
+  // 初始字典
+  function initDict() { }
+  
+  return {
+    dict,
+    getDict,
+    setDict,
+    removeDict,
+    cleanDict,
+    initDict,
+  };
+});

src/store/index.ts

@@ -2,3 +2,4 @@ export * from './auth';
 export * from './user';
 export * from './pwo';
 export * from './job';
+export * from './dict';

src/utils/dict.ts

@@ -0,0 +1,26 @@
+import { useDictStore } from "@/store";
+import { getDicts } from '@/api/system/dict'
+import { ref, toRefs } from 'vue'
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args: string[]) {
+  const res = ref<any>({})
+
+  return (() => {
+    args.forEach((dictType, index) => {
+      res.value[dictType] = []
+      const dicts = useDictStore().getDict(dictType)
+      if (dicts) {
+        res.value[dictType] = dicts
+      } else {
+        getDicts(dictType).then((resp: any) => {
+          res.value[dictType] = resp.data.map((p: any) => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
+          useDictStore().setDict(dictType, res.value[dictType])
+        })
+      }
+    })
+    return toRefs(res.value)
+  })()
+}