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

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm

@@ -108,7 +108,7 @@
 <script lang="ts" setup>
   import type { ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
   import { usePagination, useColLayout } from '@/types/card';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
@@ -122,11 +122,13 @@
   #end
   import { toOptions, getEnumValue } from '@/utils/enum';
 
-  const { loading, setLoading } = useLoading();
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const list = ref<${vue.featureEntity}QueryResponse[]>([]);
+
   const cardColLayout = useColLayout();
   const pagination = usePagination();
-  const list = ref<${vue.featureEntity}QueryResponse[]>([]);
+  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate']);
 
   const formRef = ref();
   const formModel = reactive<${vue.featureEntity}QueryRequest>({
@@ -155,7 +157,7 @@
           await delete${vue.featureEntity}(id);
           Message.success('删除成功');
           // 重新加载数据
-          await fetchCardData();
+          fetchCardData();
         } catch (e) {
         } finally {
           setLoading(false);
@@ -203,7 +205,10 @@
   const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchCardData({ page, limit, ...form });
   };
-  fetchCardData();
+
+  onMounted(() => {
+    fetchCardData();
+  });
 
 </script>
 

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm

@@ -136,7 +136,7 @@
 
 <script lang="ts" setup>
   import type { ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { batchDelete${vue.featureEntity}, delete${vue.featureEntity}, get${vue.featureEntity}Page } from '@/api/${vue.module}/${vue.feature}';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
@@ -154,15 +154,18 @@
   #end
   import { toOptions, getEnumValue } from '@/utils/enum';
 
-  const tableRenderData = ref<${vue.featureEntity}QueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
+  #if($vue.enableRowSelection)
+  const selectedKeys = ref<number[]>([]);
+  #end
+  const tableRenderData = ref<${vue.featureEntity}QueryResponse[]>([]);
+
   const pagination = usePagination();
   #if($vue.enableRowSelection)
-  const selectedKeys = ref<number[]>([]);
   const rowSelection = useRowSelection();
   #end
+  const { loading, setLoading } = useLoading();
 
   const formModel = reactive<${vue.featureEntity}QueryRequest>({
     #foreach($field in ${table.fields})
@@ -180,7 +183,7 @@
       Message.success(`成功删除${selectedKeys.value.length}条数据`);
       selectedKeys.value = [];
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -198,7 +201,7 @@
       await delete${vue.featureEntity}(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -241,7 +244,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     #if($vue.enableCardView)
     <!-- 列表-表格 -->
     <${vue.feature}-table v-if="renderTable"
@@ -49,12 +49,13 @@
   #end
 
   #if($vue.enableCardView)
-  import { computed, ref } from 'vue';
+  import { computed, ref, onBeforeMount } from 'vue';
   import { useAppStore } from '@/store';
   #else
   import { ref } from 'vue';
   #end
 
+  const render = ref(false);
   const table = ref();
   #if($vue.enableCardView)
   const card = ref();
@@ -97,6 +98,10 @@
     #end
   };
 
+  onBeforeMount(async () => {
+    render.value = true;
+  });
+
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/api/system/dict-value.ts

@@ -66,10 +66,6 @@ export interface DictValueQueryResponse extends TableData {
  * 字典配置值选项查询响应
  */
 export interface DictValueOptionsQueryResponse extends Options {
-  label: string;
-  value: string | number | boolean;
-
-  [key: string]: unknown;
 }
 
 /**

orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue

@@ -4,7 +4,7 @@
             :options="optionData"
             :limit="limit as number"
             :allow-create="allowCreate"
-            @exceed-limit="onLimited"
+            @exceed-limit="() => { emits('onLimited', limit, `最多选择${limit}个tag`) }"
             multiple
             allow-clear>
   </a-select>
@@ -20,7 +20,7 @@
   import type { PropType } from 'vue';
   import type { SelectOptionData } from '@arco-design/web-vue';
   import type { TagCreateRequest } from '@/api/meta/tag';
-  import { ref, computed } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
   import { useCacheStore } from '@/store';
   import { Message } from '@arco-design/web-vue';
   import { createTag } from '@/api/meta/tag';
@@ -34,7 +34,7 @@
     tagType: String,
   });
 
-  const emits = defineEmits(['update:modelValue']);
+  const emits = defineEmits(['update:modelValue', 'onLimited']);
 
   const value = computed<Array<number>>({
     get() {
@@ -58,10 +58,14 @@
       };
     }) as SelectOptionData[];
   };
-  initOptionData();
+
 
   defineExpose({ initOptionData });
 
+  onMounted(() => {
+    initOptionData();
+  });
+
   // 检查是否可以创建tag
   const checkCreateTag = async (tags: Array<any>) => {
     if (!tags.length) {
@@ -107,11 +111,6 @@
     return id;
   };
 
-  // 超出限制
-  const onLimited = () => {
-    Message.warning(`最多选择${props.limit}个tag`);
-  };
-
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/components/user/role/user-role-selector.vue

@@ -20,7 +20,7 @@
   import type { SelectOptionData } from '@arco-design/web-vue';
   import { computed } from 'vue';
   import { useCacheStore } from '@/store';
-  import { RoleStatusEnum } from '@/views/user/role/types/enum.types';
+  import { RoleStatus } from '@/views/user/role/types/const';
 
   const props = defineProps({
     modelValue: [Number, Array] as PropType<number | Array<number>>,
@@ -45,7 +45,7 @@
     return cacheStore.roles.map(s => {
       return {
         label: `${s.name} (${s.code})`,
-        disabled: s.status === RoleStatusEnum.DISABLED.value,
+        disabled: s.status === RoleStatus.DISABLED,
         value: s.id,
       };
     });

orion-ops-ui/src/store/modules/cache/index.ts

@@ -19,6 +19,13 @@ export default defineStore('cache', {
     // 设置
     set(name: CacheType, value: any) {
       this[name] = value;
+    },
+
+    // 清空
+    reset(...names: CacheType[]) {
+      for (let name of names) {
+        this[name] = [];
+      }
     }
   },
 });

orion-ops-ui/src/store/modules/dict/index.ts

@@ -1,4 +1,5 @@
 import type { DictState } from './types';
+import type { Options } from '@/types/global';
 import { defineStore } from 'pinia';
 import { getDictValueList } from '@/api/system/dict-value';
 
@@ -8,7 +9,6 @@ export default defineStore('dict', {
   actions: {
     // 加载字典值
     async loadKeys(keys: string[]) {
-      console.log('loadKeys', keys);
       // 检查是否存在
       const unloadKeys = keys.filter(key => !this.$state.hasOwnProperty(key));
       if (!unloadKeys.length) {
@@ -20,7 +20,6 @@ export default defineStore('dict', {
         this.$patch(data as object);
       } catch (e) {
       } finally {
-        console.log('final');
       }
     },
 
@@ -29,22 +28,32 @@ export default defineStore('dict', {
       return this.$state[key];
     },
 
-    // 获取选择值
+    // 获取字典值
     getDictValue(dict: string,
                  value: any,
                  key = 'label',
                  defaultValue = value) {
       for (let dictValue of this.$state[dict] || []) {
         if (dictValue.value === value) {
-          console.log(dictValue[key]);
           return dictValue[key];
         }
       }
-      console.log('default', dict);
       return defaultValue;
     },
 
-    // 切换字典值对象
+    // 获取字典值对象
+    getDict(dict: string, value: any): Options {
+      for (let dictValue of this.$state[dict] || []) {
+        if (dictValue.value === value) {
+          return dictValue;
+        }
+      }
+      return {
+        value
+      } as Options;
+    },
+
+    // 切换字典值
     toggleDictValue(dict: string,
                     value: any,
                     key = 'value',
@@ -58,13 +67,13 @@ export default defineStore('dict', {
     },
 
     // 切换字典值对象
-    toggleDict(dict: string, value: any) {
+    toggleDict(dict: string, value: any): Options {
       for (let dictValue of this.$state[dict] || []) {
         if (dictValue.value !== value) {
           return dictValue;
         }
       }
-      return {};
+      return {} as Options;
     }
 
   },

orion-ops-ui/src/store/modules/dict/types.ts

@@ -1,5 +1,5 @@
-import { DictValueOptionsQueryResponse } from '@/api/system/dict-value';
+import type { Options } from '@/types/global';
 
 export interface DictState {
-  [key: string]: Array<DictValueOptionsQueryResponse>;
+  [key: string]: Array<Options>;
 }

orion-ops-ui/src/types/global.ts

@@ -3,8 +3,10 @@ export interface AnyObject {
 }
 
 export interface Options {
-  value: unknown;
   label: string;
+  value: string | number | boolean;
+
+  [key: string]: unknown;
 }
 
 export interface NodeOptions extends Options {

orion-ops-ui/src/utils/enum.ts

@@ -1,64 +0,0 @@
-/**
- * 转为 select options
- */
-export const toOptions = (enums: any) => {
-  const arr = [];
-  for (let k in enums) {
-    arr.push(enums[k]);
-  }
-  return arr;
-};
-
-/**
- * 切换枚举值
- */
-export const toggleEnumValue = (value: any,
-                                enums: any,
-                                key = 'value',
-                                defaultValue = value) => {
-  for (let k in enums) {
-    if (enums[k].value !== value) {
-      return enums[k][key];
-    }
-  }
-  return defaultValue;
-};
-
-/**
- * 切换枚举对象
- */
-export const toggleEnum = (value: any, enums: any) => {
-  for (let k in enums) {
-    if (enums[k].value !== value) {
-      return enums[k];
-    }
-  }
-  return {};
-};
-
-/**
- * 获取枚举值
- */
-export const getEnumValue = (value: any,
-                             enums: any,
-                             key = 'label',
-                             defaultValue = value) => {
-  for (let k in enums) {
-    if (enums[k].value === value) {
-      return enums[k][key];
-    }
-  }
-  return defaultValue;
-};
-
-/**
- * 获取枚举对象
- */
-export const getEnum = (value: any, enums: any) => {
-  for (let k in enums) {
-    if (enums[k].value === value) {
-      return enums[k];
-    }
-  }
-  return {};
-};

orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue

@@ -127,7 +127,7 @@
 <script lang="ts" setup>
   import type { HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
   import { usePagination, useColLayout } from '@/types/card';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
@@ -137,14 +137,15 @@
   import useCopy from '@/hooks/copy';
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
 
-  const { copy } = useCopy();
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
-  const { hasAnyPermission } = usePermission();
-  const { loading, setLoading } = useLoading();
 
+  const list = ref<HostIdentityQueryResponse[]>([]);
+
+  const { copy } = useCopy();
   const cardColLayout = useColLayout();
   const pagination = usePagination();
-  const list = ref<HostIdentityQueryResponse[]>([]);
+  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
+  const { hasAnyPermission } = usePermission();
 
   const formRef = ref();
   const formModel = reactive<HostIdentityQueryRequest>({
@@ -174,7 +175,7 @@
           await deleteHostIdentity(id);
           Message.success('删除成功');
           // 重新加载数据
-          await fetchCardData();
+          fetchCardData();
         } catch (e) {
         } finally {
           setLoading(false);
@@ -222,7 +223,10 @@
   const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchCardData({ page, limit, ...form });
   };
-  fetchCardData();
+
+  onMounted(() => {
+    fetchCardData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue

@@ -141,7 +141,12 @@
       }
       if (isAddHandle.value) {
         if (!formModel.value.password && !formModel.value.keyId) {
-          Message.error('创建时密码和秘钥不能同时为空');
+          formRef.value.setFields({
+            password: {
+              status: 'error',
+              message: '创建时密码和秘钥不能同时为空'
+            }
+          });
           return false;
         }
         // 新增

orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue

@@ -126,7 +126,7 @@
 
 <script lang="ts" setup>
   import type { HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { deleteHostIdentity, getHostIdentityPage } from '@/api/asset/host-identity';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
@@ -136,14 +136,14 @@
   import useCopy from '@/hooks/copy';
   import usePermission from '@/hooks/permission';
 
-  const { copy } = useCopy();
-  const { hasAnyPermission } = usePermission();
-
-  const tableRenderData = ref<HostIdentityQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
 
+  const tableRenderData = ref<HostIdentityQueryResponse[]>([]);
+
+  const { copy } = useCopy();
   const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { hasAnyPermission } = usePermission();
 
   const formModel = reactive<HostIdentityQueryRequest>({
     id: undefined,
@@ -162,7 +162,7 @@
       await deleteHostIdentity(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -202,7 +202,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host-identity/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
     <host-identity-table v-if="renderTable"
                          ref="table"
@@ -15,7 +15,7 @@
     <!-- 添加修改模态框 -->
     <host-identity-form-modal ref="modal"
                               @added="modalAddCallback"
-                              @updated="modalAddCallback" />
+                              @updated="modalUpdateCallback" />
     <!-- 添加修改模态框 -->
     <host-key-form-drawer ref="keyDrawer" />
   </div>
@@ -34,9 +34,11 @@
   import HostKeyFormDrawer from '../host-key/components/host-key-form-drawer.vue';
   import { getHostKeyList } from '@/api/asset/host-key';
 
-  import { onUnmounted, ref, computed } from 'vue';
+  import { ref, computed, onBeforeMount, onUnmounted } from 'vue';
   import { useAppStore, useCacheStore } from '@/store';
+  import { Message } from '@arco-design/web-vue';
 
+  const render = ref(false);
   const table = ref();
   const card = ref();
   const modal = ref();
@@ -70,14 +72,20 @@
       const { data } = await getHostKeyList();
       cacheStore.set('hostKeys', data);
     } catch (e) {
+      Message.error('主机秘钥加载失败');
     }
   };
-  fetchHostKeyList();
 
-  // 卸载时清除 tags cache
+  onBeforeMount(async () => {
+    // 加载主机秘钥
+    await fetchHostKeyList();
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
   onUnmounted(() => {
     const cacheStore = useCacheStore();
-    cacheStore.set('hostKeys', []);
+    cacheStore.reset('hostKeys');
   });
 
 </script>

orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue

@@ -81,18 +81,20 @@
 <script lang="ts" setup>
   import type { HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
   import { usePagination, useColLayout } from '@/types/card';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { deleteHostKey, getHostKeyPage } from '@/api/asset/host-key';
   import { Message, Modal } from '@arco-design/web-vue';
 
-  const { loading, setLoading } = useLoading();
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
+
+  const list = ref<HostKeyQueryResponse[]>([]);
+
   const cardColLayout = useColLayout();
   const pagination = usePagination();
-  const list = ref<HostKeyQueryResponse[]>([]);
+  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
   const formModel = reactive<HostKeyQueryRequest>({
     searchValue: undefined,
@@ -112,7 +114,7 @@
           await deleteHostKey(id);
           Message.success('删除成功');
           // 重新加载数据
-          await fetchCardData();
+          fetchCardData();
         } catch (e) {
         } finally {
           setLoading(false);
@@ -160,7 +162,10 @@
   const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchCardData({ page, limit, ...form });
   };
-  fetchCardData();
+
+  onMounted(() => {
+    fetchCardData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue

@@ -99,18 +99,19 @@
 
 <script lang="ts" setup>
   import type { HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { deleteHostKey, getHostKeyPage } from '@/api/asset/host-key';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { usePagination } from '@/types/table';
 
-  const tableRenderData = ref<HostKeyQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
+  const tableRenderData = ref<HostKeyQueryResponse[]>([]);
+
   const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
 
   const formModel = reactive<HostKeyQueryRequest>({
     id: undefined,
@@ -129,7 +130,7 @@
       await deleteHostKey(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -169,7 +170,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host-key/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
     <host-key-table v-if="renderTable"
                     ref="table"
@@ -30,9 +30,10 @@
   import HostKeyTable from './components/host-key-table.vue';
   import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
 
-  import { computed, ref } from 'vue';
+  import { computed, ref, onBeforeMount } from 'vue';
   import { useAppStore } from '@/store';
 
+  const render = ref(false);
   const table = ref();
   const card = ref();
   const drawer = ref();
@@ -58,6 +59,10 @@
     }
   };
 
+  onBeforeMount(async () => {
+    render.value = true;
+  });
+
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/asset/host/components/host-card-list.vue

@@ -144,7 +144,7 @@
 <script lang="ts" setup>
   import type { HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
   import { usePagination, useColLayout } from '@/types/card';
-  import { computed, reactive, ref } from 'vue';
+  import { computed, reactive, ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/host.card.fields';
@@ -154,12 +154,14 @@
   import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
   import useCopy from '@/hooks/copy';
 
-  const { copy } = useCopy();
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
-  const { loading, setLoading } = useLoading();
+
+  const list = ref<HostQueryResponse[]>([]);
+
   const cardColLayout = useColLayout();
   const pagination = usePagination();
-  const list = ref<HostQueryResponse[]>([]);
+  const { copy } = useCopy();
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+  const { loading, setLoading } = useLoading();
 
   const formRef = ref();
   const formModel = reactive<HostQueryRequest>({
@@ -192,7 +194,7 @@
           await deleteHost(id);
           Message.success('删除成功');
           // 重新加载数据
-          await fetchCardData();
+          fetchCardData();
         } catch (e) {
         } finally {
           setLoading(false);
@@ -240,7 +242,10 @@
   const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchCardData({ page, limit, ...form });
   };
-  fetchCardData();
+
+  onMounted(() => {
+    fetchCardData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host/components/host-config-drawer.vue

@@ -29,7 +29,7 @@
 </script>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, onBeforeMount } from 'vue';
   import useVisible from '@/hooks/visible';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
@@ -84,7 +84,6 @@
     } catch (e) {
     }
   };
-  fetchHostKeys();
 
   // 加载主机身份
   const fetchHostIdentities = async () => {
@@ -94,7 +93,13 @@
     } catch (e) {
     }
   };
-  fetchHostIdentities();
+
+  onBeforeMount(async () => {
+    // 加载主机秘钥
+    await fetchHostKeys();
+    // 加载主机身份
+    await fetchHostIdentities();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host/components/host-config-ssh-form.vue

@@ -26,9 +26,9 @@
                      label="用户名"
                      :rules="usernameRules"
                      label-col-flex="60px"
-                     :help="AuthTypeEnum.IDENTITY.value === formModel.authType ? '将使用主机身份的用户名' : undefined">
+                     :help="AuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined">
           <a-input v-model="formModel.username"
-                   :disabled="AuthTypeEnum.IDENTITY.value === formModel.authType"
+                   :disabled="AuthType.IDENTITY === formModel.authType"
                    placeholder="请输入用户名" />
         </a-form-item>
         <!-- SSH 端口 -->
@@ -48,10 +48,10 @@
           <a-radio-group type="button"
                          class="auth-type-group"
                          v-model="formModel.authType"
-                         :options="toOptions(AuthTypeEnum)" />
+                         :options="toOptions(authTypeKey)" />
         </a-form-item>
         <!-- 主机密码 -->
-        <a-form-item v-if="AuthTypeEnum.PASSWORD.value === formModel.authType"
+        <a-form-item v-if="AuthType.PASSWORD === formModel.authType"
                      field="password"
                      label="主机密码"
                      :rules="passwordRules"
@@ -68,7 +68,7 @@
                     unchecked-text="使用原密码" />
         </a-form-item>
         <!-- 主机秘钥 -->
-        <a-form-item v-if="AuthTypeEnum.KEY.value === formModel.authType"
+        <a-form-item v-if="AuthType.KEY === formModel.authType"
                      field="keyId"
                      label="主机秘钥"
                      :hide-asterisk="true"
@@ -76,7 +76,7 @@
           <host-key-selector v-model="formModel.keyId" />
         </a-form-item>
         <!-- 主机身份 -->
-        <a-form-item v-if="AuthTypeEnum.IDENTITY.value === formModel.authType"
+        <a-form-item v-if="AuthType.IDENTITY === formModel.authType"
                      field="identityId"
                      label="主机身份"
                      :hide-asterisk="true"
@@ -139,18 +139,19 @@
 
 <script lang="ts" setup>
   import type { FieldRule } from '@arco-design/web-vue';
-  import type { HostSshConfig } from '@/views/asset/host/types/host-config.types';
+  import type { HostSshConfig } from '../types/host-config.types';
   import { ref, watch } from 'vue';
   import { updateHostConfigStatus, updateHostConfig } from '@/api/asset/host';
-  import { AuthTypeEnum } from '@/views/asset/host/types/host-config.types';
+  import { authTypeKey, AuthType } from '../types/const';
-  import { sshRules } from '@/views/asset/host/types/host-config.form.rules';
+  import { sshRules } from '../types/host-config.form.rules';
   import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
   import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
-  import { toOptions } from '@/utils/enum';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
+  import { useDictStore } from '@/store';
 
   const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
 
   const props = defineProps({
     content: Object
@@ -168,7 +169,7 @@
     username: undefined,
     port: undefined,
     password: undefined,
-    authType: AuthTypeEnum.PASSWORD.value,
+    authType: AuthType.PASSWORD,
     keyId: undefined,
     identityId: undefined,
     connectTimeout: undefined,
@@ -193,7 +194,7 @@
         cb('用户名长度不能大于128位');
         return;
       }
-      if (formModel.value.authType !== AuthTypeEnum.IDENTITY.value && !value) {
+      if (formModel.value.authType !== AuthType.IDENTITY && !value) {
         cb('请输入用户名');
         return;
       }

orion-ops-ui/src/views/asset/host/components/host-form-modal.vue

@@ -39,7 +39,8 @@
                               :limit="5"
                               type="HOST"
                               tag-type="hostTags"
-                              placeholder="请选择主机标签" />
+                              placeholder="请选择主机标签"
+                              @onLimited="onLimitedTag" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -107,6 +108,16 @@
 
   defineExpose({ openAdd, openUpdate });
 
+  // tag 超出所选限制
+  const onLimitedTag = (count: number, message: string) => {
+    formRef.value.setFields({
+      tags: {
+        status: 'error',
+        message
+      }
+    });
+  };
+
   // 确定
   const handlerOk = async () => {
     setLoading(true);

orion-ops-ui/src/views/asset/host/components/host-table.vue

@@ -163,7 +163,7 @@
 
 <script lang="ts" setup>
   import type { HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { deleteHost, getHostPage } from '@/api/asset/host';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
@@ -205,7 +205,7 @@
       await deleteHost(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -245,7 +245,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/asset/host/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
     <host-table v-if="renderTable"
                 ref="table"
@@ -33,11 +33,13 @@
   import HostFormModal from './components/host-form-modal.vue';
   import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
   import { getTagList } from '@/api/meta/tag';
+  import { dictKeys } from './types/const';
   import { Message } from '@arco-design/web-vue';
 
-  import { computed, onUnmounted, ref } from 'vue';
+  import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useAppStore, useCacheStore } from '@/store';
+  import { useAppStore, useCacheStore, useDictStore } from '@/store';
 
+  const render = ref(false);
   const table = ref();
   const card = ref();
   const modal = ref();
@@ -75,13 +77,19 @@
       Message.error('tag加载失败');
     }
   };
-  loadTags();
 
-  // 卸载时清除 tags cache
+  onBeforeMount(async () => {
+    // 加载 tags
+    await loadTags();
+    // 加载字典值
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
   onUnmounted(() => {
-    cacheStore.set('hostTags', []);
+    cacheStore.reset('hostTags', 'hostKeys', 'hostIdentities');
-    cacheStore.set('hostKeys', []);
-    cacheStore.set('hostIdentities', []);
   });
 
 </script>

orion-ops-ui/src/views/asset/host/types/const.ts

@@ -1,6 +1,4 @@
-/**
+// tag 颜色
- * tag 颜色
- */
 export const tagColor = [
   'arcoblue',
   'green',
@@ -8,3 +6,19 @@ export const tagColor = [
   'pinkpurple',
   'magenta'
 ];
+
+// 主机验证方式
+export const AuthType = {
+  // 密码验证
+  PASSWORD: 'PASSWORD',
+  // 秘钥验证
+  KEY: 'KEY',
+  // 身份验证
+  IDENTITY: 'IDENTITY'
+};
+
+// 主机验证方式 字典项
+export const authTypeKey = 'hostAuthTypeType';
+
+// 加载的字典值
+export const dictKeys = [authTypeKey];

orion-ops-ui/src/views/asset/host/types/host-config.types.ts

@@ -1,21 +1,3 @@
-/**
- * 验证方式
- */
-export const AuthTypeEnum = {
-  PASSWORD: {
-    value: 'PASSWORD',
-    label: '密码验证',
-  },
-  KEY: {
-    value: 'KEY',
-    label: '秘钥验证',
-  },
-  IDENTITY: {
-    value: 'IDENTITY',
-    label: '身份验证',
-  },
-};
-
 /**
  * 主机所有配置
  */

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 { definedExtraKeys, innerKeys, dictValueTypeKey, ValueType } from '../types/const';
-  import { ValueTypeEnum } from '../types/enum.types';
+  import { useDictStore } from '@/store';
-  import { toOptions } from '@/utils/enum';
 
   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')">
+        <a-tag :color="getDictValue(dictValueTypeKey, record.valueType, 'color')">
-          {{ getEnumValue(record.valueType, ValueTypeEnum) }}
+          {{ 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 { dictValueTypeKey } from '../types/const';
-  import { ValueTypeEnum } from '../types/enum.types';
-  import { getEnumValue } from '@/utils/enum';
   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',
-  },
-};
-

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

@@ -44,24 +44,25 @@
                      :field="name as string"
                      :label="name">
           <!-- 字符串 -->
-          <a-input v-if="ValueTypeEnum.STRING.value === type"
+          <a-input v-if="ValueType.STRING === type"
                    v-model="extraValue[name]"
                    :placeholder="`请输入 ${name}`"
                    allow-clear />
           <!-- 数字 -->
-          <a-input-number v-else-if="ValueTypeEnum.INTEGER.value === type || ValueTypeEnum.DECIMAL.value === type"
+          <a-input-number v-else-if="ValueType.INTEGER === type || ValueType.DECIMAL === type"
                           v-model="extraValue[name]"
                           :placeholder="`请输入 ${name}`"
+                          :precision="ValueType.INTEGER === type ? 0 : 4"
                           allow-clear
                           hide-button />
           <!-- 布尔值 -->
-          <a-switch v-else-if="ValueTypeEnum.BOOLEAN.value === type"
+          <a-switch v-else-if="ValueType.BOOLEAN === type"
                     type="round"
                     v-model="extraValue[name]"
                     checked-text="TRUE"
                     unchecked-text="FALSE" />
           <!-- 颜色 -->
-          <template v-else-if="ValueTypeEnum.COLOR.value === type">
+          <template v-else-if="ValueType.COLOR === type">
             <a-input v-model="extraValue[name]"
                      :placeholder="`请输入 ${name}`"
                      allow-clear
@@ -84,15 +85,14 @@
 
 <script lang="ts" setup>
   import type { DictValueUpdateRequest } from '@/api/system/dict-value';
+  import type { ExtraParamType } from '../../dict-key/types/const';
   import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
   import formRules from '../types/form.rules';
   import { createDictValue, updateDictValue } from '@/api/system/dict-value';
   import { Message } from '@arco-design/web-vue';
-  import { ExtraParamType, innerKeys } from '../../dict-key/types/const';
+  import { ValueType } from '../../dict-key/types/const';
-  import { ValueTypeEnum } from '../../dict-key/types/enum.types';
-  import {} from '@/utils/enum';
   import DictKeySelector from '@/components/system/dict-key/dict-key-selector.vue';
   import { DictKeyQueryResponse } from '@/api/system/dict-key';
   import { useCacheStore } from '@/store';
@@ -170,7 +170,7 @@
           const nameKey = name as string;
           const value = extraValue.value[nameKey];
           if (value === undefined) {
-            if (type === ValueTypeEnum.BOOLEAN.value) {
+            if (type === ValueType.BOOLEAN) {
               extraValue.value[nameKey] = false;
               continue;
             }

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

@@ -128,7 +128,7 @@
 
 <script lang="ts" setup>
   import type { DictValueQueryRequest, DictValueQueryResponse } from '@/api/system/dict-value';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { batchDeleteDictValue, deleteDictValue, getDictValuePage } from '@/api/system/dict-value';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
@@ -137,14 +137,15 @@
   import useCopy from '@/hooks/copy';
   import DictKeySelector from '@/components/system/dict-key/dict-key-selector.vue';
 
-  const { copy } = useCopy();
-  const tableRenderData = ref<DictValueQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openHistory']);
 
-  const pagination = usePagination();
   const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<DictValueQueryResponse[]>([]);
+
+  const { copy } = useCopy();
+  const pagination = usePagination();
   const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();
 
   const formModel = reactive<DictValueQueryRequest>({
     id: undefined,
@@ -165,7 +166,7 @@
       Message.success(`成功删除${selectedKeys.value.length}条数据`);
       selectedKeys.value = [];
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -182,7 +183,7 @@
       await deleteDictValue(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -238,7 +239,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-value/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
     <dict-value-table ref="table"
                       @openAdd="() => modal.openAdd()"
@@ -21,11 +21,12 @@
   import DictValueTable from './components/dict-value-table.vue';
   import DictValueFormModal from './components/dict-value-form-modal.vue';
 
-  import { onUnmounted, ref } from 'vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
   import { useCacheStore } from '@/store';
   import { getDictKeyList } from '@/api/system/dict-key';
   import { Message } from '@arco-design/web-vue';
 
+  const render = ref(false);
   const table = ref();
   const modal = ref();
   const cacheStore = useCacheStore();
@@ -50,11 +51,16 @@
       Message.error('配置项加载失败');
     }
   };
-  loadDictKeys();
+
+  onBeforeMount(async () => {
+    // 加载字典值
+    await loadDictKeys();
+    render.value = true;
+  });
 
   // 卸载时清除 cache
   onUnmounted(() => {
-    cacheStore.set('dictKeys', []);
+    cacheStore.reset('dictKeys');
   });
 
 </script>

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

@@ -182,7 +182,7 @@
 
 <script lang="ts" setup>
   import type { MenuQueryRequest, MenuQueryResponse } from '@/api/system/menu';
-  import { onMounted, reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { getMenuList, deleteMenu, updateMenuStatus, initCache } from '@/api/system/menu';
   import { menuStatusKey, menuVisibleKey, menuTypeKey, MenuType } from '../types/const';

orion-ops-ui/src/views/system/menu/index.vue

@@ -20,16 +20,14 @@
 <script lang="ts" setup>
   import MenuTable from '@/views/system/menu/components/menu-table.vue';
   import MenuFormModal from '@/views/system/menu/components/menu-form-modal.vue';
-  import { onBeforeMount, onUnmounted, ref } from 'vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
   import { useCacheStore, useDictStore } from '@/store';
   import { dictKeys } from './types/const';
 
   const table = ref();
   const modal = ref();
-  // FIXME
   const render = ref(false);
 
-  // FIXME
   // 加载字典项
   onBeforeMount(async () => {
     const dictStore = useDictStore();
@@ -37,10 +35,10 @@
     render.value = true;
   });
 
-  // 卸载时清除 menu cache
+  // 卸载时清除 cache
   onUnmounted(() => {
     const cacheStore = useCacheStore();
-    cacheStore.set('menus', []);
+    cacheStore.reset('menus');
   });
 
 </script>

orion-ops-ui/src/views/user/role/components/role-table.vue

@@ -18,7 +18,7 @@
       <a-form-item field="status" label="角色状态" label-col-flex="50px">
         <a-select v-model="formModel.status"
                   placeholder="请选择角色状态"
-                  :options="toOptions(RoleStatusEnum)"
+                  :options="toOptions(roleStatusKey)"
                   allow-clear />
       </a-form-item>
     </a-query-header>
@@ -67,24 +67,24 @@
       <!-- 状态 -->
       <template #status="{ record }">
         <span class="circle" :style="{
-          background: getEnumValue(record.status, RoleStatusEnum, 'color')
+          background: getDictValue(roleStatusKey, record.status, 'color')
         }" />
-        {{ getEnumValue(record.status, RoleStatusEnum) }}
+        {{ getDictValue(roleStatusKey, record.status) }}
       </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
           <!-- 修改状态 -->
-          <a-popconfirm :content="`确定要${toggleEnumValue(record.status, RoleStatusEnum, 'label')}当前角色吗?`"
+          <a-popconfirm :content="`确定要${toggleDictValue(roleStatusKey, record.status, 'label')}当前角色吗?`"
                         position="left"
                         type="warning"
                         @ok="toggleRoleStatus(record)">
             <a-button v-permission="['infra:system-role:delete']"
                       :disabled="record.code === 'admin'"
-                      :status="toggleEnumValue(record.status, RoleStatusEnum, 'status')"
+                      :status="toggleDictValue(roleStatusKey, record.status, 'status')"
                       type="text"
                       size="mini">
-              {{ toggleEnumValue(record.status, RoleStatusEnum, 'label') }}
+              {{ toggleDictValue(roleStatusKey, record.status, 'label') }}
             </a-button>
           </a-popconfirm>
           <!-- 分配菜单 -->
@@ -129,20 +129,22 @@
 
 <script lang="ts" setup>
   import type { RoleQueryRequest, RoleQueryResponse } from '@/api/user/role';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { deleteRole, getRolePage, updateRoleStatus } from '@/api/user/role';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { RoleStatusEnum } from '../types/enum.types';
+  import { roleStatusKey } from '../types/const';
-  import { toOptions, getEnumValue, toggleEnumValue, toggleEnum } from '@/utils/enum';
   import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
 
-  const tableRenderData = ref<RoleQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
 
+  const tableRenderData = ref<RoleQueryResponse[]>([]);
+
   const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue, toggleDictValue, toggleDict } = useDictStore();
 
   const formModel = reactive<RoleQueryRequest>({
     id: undefined,
@@ -155,9 +157,12 @@
   const toggleRoleStatus = async (record: any) => {
     try {
       setLoading(true);
-      const toggleStatus = toggleEnum(record.status, RoleStatusEnum);
+      const toggleStatus = toggleDict(roleStatusKey, record.status);
       // 调用修改接口
-      await updateRoleStatus({ id: record.id, status: toggleStatus.value });
+      await updateRoleStatus({
+        id: record.id,
+        status: toggleStatus.value as number
+      });
       Message.success(`${toggleStatus.label}成功`);
       // 修改行状态
       record.status = toggleStatus.value;
@@ -177,7 +182,7 @@
       await deleteRole(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -217,7 +222,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/user/role/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 表格 -->
     <role-table ref="table"
                 @openAdd="() => modal.openAdd()"
@@ -24,17 +24,25 @@
   import RoleTable from './components/role-table.vue';
   import RoleFormModal from './components/role-form-modal.vue';
   import RoleMenuGrantModal from '@/views/user/role/components/role-menu-grant-modal.vue';
-  import { onUnmounted, ref } from 'vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useCacheStore } from '@/store';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
 
+  const render = ref();
   const table = ref();
   const modal = ref();
   const grantModal = ref();
 
-  // 卸载时清除 menu cache
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
   onUnmounted(() => {
     const cacheStore = useCacheStore();
-    cacheStore.set('menus', []);
+    cacheStore.reset('menus');
   });
 
 </script>

orion-ops-ui/src/views/user/role/types/const.ts

@@ -0,0 +1,13 @@
+// 角色状态
+export const RoleStatus = {
+  // 停用
+  DISABLED: 0,
+  // 启用
+  ENABLED: 1,
+};
+
+// 角色状态 字典项
+export const roleStatusKey = 'systemRoleStatus';
+
+// 加载的字典值
+export const dictKeys = [roleStatusKey];

orion-ops-ui/src/views/user/role/types/enum.types.ts

@@ -1,18 +0,0 @@
-/**
- * 角色状态
- */
-export const RoleStatusEnum = {
-  DISABLED: {
-    value: 0,
-    label: '停用',
-    color: 'orange',
-    status: 'danger',
-  },
-  ENABLED: {
-    value: 1,
-    label: '启用',
-    color: 'blue',
-    status: 'default',
-  },
-};
-

orion-ops-ui/src/views/user/user/components/user-table.vue

@@ -24,7 +24,7 @@
       <!-- 用户状态 -->
       <a-form-item field="status" label="用户状态" label-col-flex="50px">
         <a-select v-model="formModel.status"
-                  :options="toOptions(UserStatusEnum)"
+                  :options="toOptions(userStatusKey)"
                   placeholder="请选择用户状态"
                   allow-clear />
       </a-form-item>
@@ -78,17 +78,17 @@
       <!-- 状态 -->
       <template #status="{ record }">
         <span class="circle" :style="{
-          background: getEnumValue(record.status, UserStatusEnum, 'color')
+          background: getDictValue(userStatusKey, record.status, 'color')
         }" />
-        {{ getEnumValue(record.status, UserStatusEnum) }}
+        {{ getDictValue(userStatusKey, record.status) }}
       </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
           <!-- 启用/停用 -->
-          <a-popconfirm :content="`确定要${UserStatusEnum.ENABLED.value === record.status
+          <a-popconfirm :content="`确定要${UserStatus.ENABLED === record.status
-                        ? UserStatusEnum.DISABLED.label
+                        ? getDictValue(userStatusKey, UserStatus.DISABLED)
-                        : UserStatusEnum.ENABLED.label}当前用户?`"
+                        : getDictValue(userStatusKey, UserStatus.ENABLED)}当前用户?`"
                         position="left"
                         type="warning"
                         @ok="updateStatus(record)">
@@ -97,9 +97,9 @@
                       :disabled="record.id === userStore.id"
                       v-permission="['infra:system-user:update-status']">
               {{
-                UserStatusEnum.ENABLED.value === record.status
+                UserStatus.ENABLED === record.status
-                  ? UserStatusEnum.DISABLED.label
+                  ? getDictValue(userStatusKey, UserStatus.DISABLED)
-                  : UserStatusEnum.ENABLED.label
+                  : getDictValue(userStatusKey, UserStatus.ENABLED)
               }}
             </a-button>
           </a-popconfirm>
@@ -151,21 +151,22 @@
 
 <script lang="ts" setup>
   import type { UserQueryRequest, UserQueryResponse } from '@/api/user/user';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, onMounted } from 'vue';
   import { deleteUser, getUserPage, updateUserStatus } from '@/api/user/user';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { UserStatusEnum } from '../types/enum.types';
+  import { userStatusKey, UserStatus } from '../types/const';
   import { usePagination } from '@/types/table';
-  import { toOptions, getEnumValue } from '@/utils/enum';
+  import { useDictStore, useUserStore } from '@/store';
-  import { useUserStore } from '@/store';
 
-  const tableRenderData = ref<UserQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
   const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
 
+  const tableRenderData = ref<UserQueryResponse[]>([]);
+
   const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue, getDict } = useDictStore();
 
   const formModel = reactive<UserQueryRequest>({
     id: undefined,
@@ -191,7 +192,7 @@
       await deleteUser(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -203,12 +204,12 @@
     try {
       setLoading(true);
       // 更新状态
-      const newStatus = UserStatusEnum.ENABLED.value === record.status
+      const newStatus = UserStatus.ENABLED === record.status
-        ? UserStatusEnum.DISABLED
+        ? getDict(userStatusKey, UserStatus.DISABLED)
-        : UserStatusEnum.ENABLED;
+        : getDict(userStatusKey, UserStatus.ENABLED);
       await updateUserStatus({
         id: record.id,
-        status: newStatus.value
+        status: newStatus.value as number
       });
       Message.success(`${newStatus.label}成功`);
       record.status = newStatus.value;
@@ -251,7 +252,10 @@
   const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
     doFetchTableData({ page, limit, ...form });
   };
-  fetchTableData();
+
+  onMounted(() => {
+    fetchTableData();
+  });
 
 </script>
 

orion-ops-ui/src/views/user/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container">
+  <div class="layout-container" v-if="render">
     <!-- 表格 -->
     <user-table ref="table"
                 @openAdd="() => modal.openAdd()"
@@ -28,18 +28,26 @@
   import UserFormModal from './components/user-form-modal.vue';
   import UserResetPasswordFormModal from './components/user-reset-password-form-modal.vue';
   import UserGrantRolesFormModal from './components/user-grant-roles-form-modal.vue';
-  import { ref, onUnmounted } from 'vue';
+  import { ref, onBeforeMount, onUnmounted } from 'vue';
-  import { useCacheStore } from '@/store';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
 
+  const render = ref(false);
   const table = ref();
   const modal = ref();
   const resetModal = ref();
   const grantRoleModal = ref();
 
-  // 卸载时清除 role cache
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
   onUnmounted(() => {
     const cacheStore = useCacheStore();
-    cacheStore.set('roles', []);
+    cacheStore.reset('roles');
   });
 
 </script>

orion-ops-ui/src/views/user/user/types/const.ts

@@ -0,0 +1,15 @@
+// 用户状态
+export const UserStatus = {
+  // 禁用
+  DISABLED: 0,
+  // 启用
+  ENABLED: 1,
+  // 锁定
+  LOCKED: 2,
+};
+
+// 菜单配置值类型 字典项
+export const userStatusKey = 'systemUserStatus';
+
+// 加载的字典值
+export const dictKeys = [userStatusKey];

orion-ops-ui/src/views/user/user/types/enum.types.ts

@@ -1,21 +0,0 @@
-/**
- *用户状态
- */
-export const UserStatusEnum = {
-  DISABLED: {
-    value: 0,
-    label: '停用',
-    color: 'orange',
-  },
-  ENABLED: {
-    value: 1,
-    label: '启用',
-    color: 'blue',
-  },
-  LOCKED: {
-    value: 2,
-    label: '锁定',
-    color: 'orange',
-  },
-};
-