引入字典相关代码

src/api/system/dict/data/index.ts

@@ -0,0 +1,53 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DictDataForm, DictDataQuery, DictDataVO } from './types';
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: string): AxiosPromise<DictDataVO[]> {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  });
+}
+
+// 查询字典数据列表
+export function listData(query: DictDataQuery): AxiosPromise<DictDataVO[]> {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询字典数据详细
+export function getData(dictCode: string | number): AxiosPromise<DictDataVO> {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  });
+}
+
+// 新增字典数据
+export function addData(data: DictDataForm) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改字典数据
+export function updateData(data: DictDataForm) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除字典数据
+export function delData(dictCode: string | number | Array<string | number>) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  });
+}

src/api/system/dict/data/types.ts

@@ -0,0 +1,26 @@
+export interface DictDataQuery extends PageQuery {
+  dictName: string;
+  dictType: string;
+  dictLabel: string;
+}
+
+export interface DictDataVO extends BaseEntity {
+  dictCode: string;
+  dictLabel: string;
+  dictValue: string;
+  cssClass: string;
+  listClass: ElTagType;
+  dictSort: number;
+  remark: string;
+}
+
+export interface DictDataForm {
+  dictType?: string;
+  dictCode: string | undefined;
+  dictLabel: string;
+  dictValue: string;
+  cssClass: string;
+  listClass: ElTagType;
+  dictSort: number;
+  remark: string;
+}

src/api/system/dict/type/index.ts

@@ -0,0 +1,62 @@
+import request from '@/utils/request';
+import { DictTypeForm, DictTypeVO, DictTypeQuery } from './types';
+import { AxiosPromise } from 'axios';
+
+// 查询字典类型列表
+export function listType(query: DictTypeQuery): AxiosPromise<DictTypeVO[]> {
+  return request({
+    url: '/system/dict/type/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询字典类型详细
+export function getType(dictId: number | string): AxiosPromise<DictTypeVO> {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'get'
+  });
+}
+
+// 新增字典类型
+export function addType(data: DictTypeForm) {
+  return request({
+    url: '/system/dict/type',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改字典类型
+export function updateType(data: DictTypeForm) {
+  return request({
+    url: '/system/dict/type',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除字典类型
+export function delType(dictId: string | number | Array<string | number>) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'delete'
+  });
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: '/system/dict/type/refreshCache',
+    method: 'delete'
+  });
+}
+
+// 获取字典选择框列表
+export function optionselect(): AxiosPromise<DictTypeVO[]> {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get'
+  });
+}

src/api/system/dict/type/types.ts

@@ -0,0 +1,18 @@
+export interface DictTypeVO extends BaseEntity {
+  dictId: number | string;
+  dictName: string;
+  dictType: string;
+  remark: string;
+}
+
+export interface DictTypeForm {
+  dictId: number | string | undefined;
+  dictName: string;
+  dictType: string;
+  remark: string;
+}
+
+export interface DictTypeQuery extends PageQuery {
+  dictName: string;
+  dictType: string;
+}

src/components/DictTag/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.value)">
+        <span
+          :key="item.value"
+          :index="index"
+          :class="item.elTagClass"
+        >
+          {{ item.label + ' ' }}
+        </span>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray }}
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+
+interface Props {
+  options: [];
+  value: number | string | Array<number | string>;
+  showValue?: boolean;
+  separator?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  showValue: true,
+  separator: ','
+});
+
+const values = computed(() => {
+  if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
+  return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props.separator);
+});
+
+const unmatch = computed(() => {
+  if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === 'undefined') return false;
+  // 传入值为非数组
+  let unmatch = false; // 添加一个标志来判断是否有未匹配项
+  values.value.forEach((item) => {
+    if (!props.options.some((v) => v.value === item)) {
+      unmatch = true; // 如果有未匹配项，将标志设置为true
+    }
+  });
+  return unmatch; // 返回标志的值
+});
+
+const unmatchArray = computed(() => {
+  // 记录未匹配的项
+  const itemUnmatchArray: Array<string | number> = [];
+  if (props.value !== '' && props.value !== null && typeof props.value !== 'undefined') {
+    values.value.forEach((item) => {
+      if (!props.options.some((v) => v.value === item)) {
+        itemUnmatchArray.push(item);
+      }
+    });
+  }
+  // 没有value不显示
+  return handleArray(itemUnmatchArray);
+});
+
+const handleArray = (array: Array<string | number>) => {
+  if (array.length === 0) return '';
+  return array.reduce((pre, cur) => {
+    return pre + ' ' + cur;
+  });
+};
+</script>
+
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

src/main.ts

@@ -9,6 +9,8 @@ import "./styles/tailwind.css";
 // svg icon
 import "virtual:svg-icons-register";
 import 'vant/lib/index.css';
+// 注册插件
+import plugins from './plugins/index'; // plugins
 
 import App from "./App.vue";
 import router from "./router";
@@ -16,5 +18,6 @@ import router from "./router";
 const app = createApp(App);
 app.use(store);
 app.use(router);
+app.use(plugins);
 
 app.mount("#app");

src/plugins/index.ts

@@ -0,0 +1,7 @@
+import { useDict } from '@/utils/dict';
+import { App } from 'vue';
+
+export default function installPlugin(app: App) {
+  // 全局方法挂载
+  app.config.globalProperties.useDict = useDict;
+}

src/store/modules/dict.ts

@@ -0,0 +1,76 @@
+import {ref} from "vue";
+import {defineStore} from "pinia";
+
+export const useDictStore = defineStore('dict', () => {
+  const dict = ref([]);
+
+  /**
+   * 获取字典
+   * @param _key 字典key
+   */
+  const getDict = (_key: string): [] | null => {
+    if (_key == null && _key == '') {
+      return null;
+    }
+    try {
+      for (let i = 0; i < dict.value.length; i++) {
+        if (dict.value[i].key == _key) {
+          return dict.value[i].value;
+        }
+      }
+    } catch (e) {
+      return null;
+    }
+    return null;
+  };
+
+  /**
+   * 设置字典
+   * @param _key 字典key
+   * @param _value 字典value
+   */
+  const setDict = (_key: string, _value: []) => {
+    if (_key !== null && _key !== '') {
+      dict.value.push({
+        key: _key,
+        value: _value
+      });
+    }
+  };
+
+  /**
+   * 删除字典
+   * @param _key
+   */
+  const removeDict = (_key: string): boolean => {
+    let bln = false;
+    try {
+      for (let i = 0; i < dict.value.length; i++) {
+        if (dict.value[i].key == _key) {
+          dict.value.splice(i, 1);
+          return true;
+        }
+      }
+    } catch (e) {
+      bln = false;
+    }
+    return bln;
+  };
+
+  /**
+   * 清空字典
+   */
+  const cleanDict = (): void => {
+    dict.value = [];
+  };
+
+  return {
+    dict,
+    getDict,
+    setDict,
+    removeDict,
+    cleanDict
+  };
+});
+
+export default useDictStore;

src/utils/dict.ts

@@ -1,11 +1,12 @@
 import { getDicts } from '@/api/system/dict/data';
 import { useDictStore } from '@/store/modules/dict';
+import {ref} from "vue";
 /**
  * 获取字典数据
  */
-export const useDict = (...args: string[]): { [key: string]: DictDataOption[] } => {
+export const useDict = (...args: string[]): { [key: string]: [] } => {
   const res = ref<{
-    [key: string]: DictDataOption[];
+    [key: string]: [];
   }>({});
   return (() => {
     args.forEach(async (dictType) => {
@@ -16,7 +17,7 @@ export const useDict = (...args: string[]): { [key: string]: DictDataOption[] }
       } else {
         await getDicts(dictType).then((resp) => {
           res.value[dictType] = resp.data.map(
-            (p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
+            (p) => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
           );
           useDictStore().setDict(dictType, res.value[dictType]);
         });

src/views/event/index.vue

@@ -18,22 +18,28 @@
                 <div class="item-title-text">
                     {{item.event_title}}
                 </div>
-                <div class="item-title-control">                    
+                <div class="item-title-control">
                     <van-button v-if="item.event_status == '0'" type="primary" size="small" @click="handleStartEvent">开始指挥</van-button>
                     <van-button v-if="item.event_status == '1'" type="danger" size="small" @click="handleCloseEvent">结束指挥</van-button>
                 </div>
             </div>
             <div class="item-data">
                 <div class="item-data-label">事件类型：</div>
-                <div class="item-data-value">{{item.event_type}}</div>
+                <div class="item-data-value">
+                  <dict-tag :options="mm_event_type" :value="item.event_type"></dict-tag>
+                </div>
             </div>
             <div class="item-data">
                 <div class="item-data-label">事件等级：</div>
-                <div class="item-data-value">{{item.event_level}}</div>
+                <div class="item-data-value">
+                  <dict-tag :options="mm_event_level" :value="item.event_level"></dict-tag>
+                </div>
             </div>
             <div class="item-data">
                 <div class="item-data-label">事件状态：</div>
-                <div class="item-data-value">{{item.event_status}}</div>
+                <div class="item-data-value">
+                  <dict-tag :options="mm_event_state" :value="item.event_status"></dict-tag>
+                </div>
             </div>
             <div class="item-data">
                 <div class="item-data-label">事发时间：</div>
@@ -49,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, toRefs } from 'vue';
+import {getCurrentInstance, reactive, ref, toRefs} from 'vue';
 import { useRouter } from 'vue-router'
 import { showConfirmDialog } from 'vant';
 import { getActiveEventList } from "@/api/event";
@@ -149,7 +155,7 @@ const handleStartEvent = () => {
             router.push("/leader/mobile_control")
         })
         .catch(() => {
-            
+
         });
 }
 
@@ -198,4 +204,4 @@ const handleCloseEvent = () => {
         }
     }
 }
-</style>
+</style>