使用字典值替换所有枚举对象.

orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue

@@ -27,7 +27,7 @@
         <!-- 配置值类型 -->
         <a-form-item field="valueType" label="配置值类型">
           <a-select v-model="formModel.valueType"
-                    :options="toOptions(ValueTypeEnum)"
+                    :options="toOptions(dictValueTypeKey)"
                     placeholder="请选择配置值类型" />
         </a-form-item>
         <!-- 配置描述 -->
@@ -43,7 +43,7 @@
           <a-input-group>
             <!-- 参数类型 -->
             <a-select v-model="schema.type"
-                      :options="toOptions(ValueTypeEnum)"
+                      :options="toOptions(dictValueTypeKey)"
                       placeholder="类型"
                       :style="{ width: '110px' }" />
             <!-- 参数值 -->
@@ -100,12 +100,12 @@
   import formRules from '../types/form.rules';
   import { Message } from '@arco-design/web-vue';
   import { createDictKey, updateDictKey } from '@/api/system/dict-key';
-  import { definedExtraKeys, innerKeys } from '../types/const';
-  import { ValueTypeEnum } from '../types/enum.types';
-  import { toOptions } from '@/utils/enum';
+  import { definedExtraKeys, innerKeys, dictValueTypeKey, ValueType } from '../types/const';
+  import { useDictStore } from '@/store';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
 
   const title = ref<string>();
   const isAddHandle = ref<boolean>(true);
@@ -114,7 +114,7 @@
     return {
       id: undefined,
       keyName: undefined,
-      valueType: ValueTypeEnum.INTEGER.value,
+      valueType: ValueType.INTEGER,
       extraSchema: undefined,
       description: undefined,
     };
@@ -161,7 +161,7 @@
     }
     extraSchemaArr.value.push({
       name: name,
-      type: type || ValueTypeEnum.STRING.value
+      type: type || ValueType.STRING
     });
   };
 

orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue

@@ -62,8 +62,8 @@
       </template>
       <!-- 配置值类型 -->
       <template #valueType="{ record }">
-        <a-tag :color="getEnumValue(record.valueType, ValueTypeEnum, 'color')">
-          {{ getEnumValue(record.valueType, ValueTypeEnum) }}
+        <a-tag :color="getDictValue(dictValueTypeKey, record.valueType, 'color')">
+          {{ getDictValue(dictValueTypeKey, record.valueType) }}
         </a-tag>
       </template>
       <!-- 额外参数 -->
@@ -71,7 +71,7 @@
         <template v-if="record.extraSchema">
           <a-space>
             <template v-for="item in JSON.parse(record.extraSchema)" :key="item.name">
-              <a-tag :color="getEnumValue(item.type, ValueTypeEnum, 'color')">
+              <a-tag :color="getDictValue(dictValueTypeKey, item.type, 'color')">
                 {{ item.name }}
               </a-tag>
             </template>
@@ -123,23 +123,23 @@
 
 <script lang="ts" setup>
   import type { DictKeyQueryRequest, DictKeyQueryResponse } from '@/api/system/dict-key';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { batchDeleteDictKey, deleteDictKey, getDictKeyPage } from '@/api/system/dict-key';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { usePagination } from '@/types/table';
-  import {} from '../types/const';
-  import { ValueTypeEnum } from '../types/enum.types';
-  import { getEnumValue } from '@/utils/enum';
+  import { dictValueTypeKey } from '../types/const';
   import useCopy from '@/hooks/copy';
+  import { useDictStore } from '@/store';
 
   const tableRenderData = ref<DictKeyQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
-  const { copy } = useCopy();
   const pagination = usePagination();
+  const { copy } = useCopy();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
 
   const formModel = reactive<DictKeyQueryRequest>({
     id: undefined,
@@ -157,7 +157,7 @@
       await deleteDictKey(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -197,7 +197,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/system/dict-key/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
     <dict-key-table ref="table"
                     @openAdd="() => modal.openAdd()"
@@ -21,19 +21,18 @@
 </script>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, onBeforeMount } from 'vue';
   import DictKeyTable from './components/dict-key-table.vue';
   import DictKeyFormModal from './components/dict-key-form-modal.vue';
   import DictKeyViewModal from './components/dict-key-view-modal.vue';
   import { useDictStore } from '@/store';
   import { dictKeys } from './types/const';
 
+  const render = ref(false);
   const table = ref();
   const modal = ref();
   const view = ref();
 
-  useDictStore().loadKeys(dictKeys);
-
   // 添加回调
   const modalAddCallback = () => {
     table.value.addedCallback();
@@ -44,6 +43,12 @@
     table.value.updatedCallback();
   };
 
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/system/dict-key/types/const.ts

@@ -1,9 +1,14 @@
 // 配置值类型定义
 export const ValueType = {
+  // 字符串
   STRING: 'STRING',
+  // 整数
   INTEGER: 'INTEGER',
+  // 小数
   DECIMAL: 'DECIMAL',
+  // 布尔值
   BOOLEAN: 'BOOLEAN',
+  // 颜色
   COLOR: 'COLOR',
 };
 

orion-ops-ui/src/views/system/dict-key/types/enum.types.ts

@@ -1,31 +0,0 @@
-/**
- * 配置值定义
- */
-export const ValueTypeEnum = {
-  STRING: {
-    label: '字符串',
-    value: 'STRING',
-    color: 'blue',
-  },
-  INTEGER: {
-    label: '整数',
-    value: 'INTEGER',
-    color: 'arcoblue',
-  },
-  DECIMAL: {
-    label: '小数',
-    value: 'DECIMAL',
-    color: 'purple',
-  },
-  BOOLEAN: {
-    label: '布尔值',
-    value: 'BOOLEAN',
-    color: 'pinkpurple',
-  },
-  COLOR: {
-    label: '颜色',
-    value: 'COLOR',
-    color: 'magenta',
-  },
-};
-