refactor: 修改缓存加载逻辑.

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

@@ -139,10 +139,11 @@
   };
 
   // 渲染表单
-  const renderForm = (record: any) => {
+  const renderForm = async (record: any) => {
     formModel.value = Object.assign({}, record);
     // schema
-    const find = record.keyId && cacheStore.dictKeys.find((item) => item.id === record.keyId);
+    const dictKeys = await cacheStore.loadDictKeys();
+    const find = record.keyId && dictKeys.find((item) => item.id === record.keyId);
     keyExtraSchemas.value = (find && find.extraSchema && JSON.parse(find.extraSchema)) || [];
     // 额外参数
     extraValue.value = (formModel.value.extra && JSON.parse(formModel.value.extra)) || {};

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

@@ -10,6 +10,7 @@
       <a-form-item field="keyId" label="配置项" label-col-flex="50px">
         <dict-key-selector v-model="formModel.keyId"
                            @change="changeKey"
+                           allow-create
                            allow-clear />
       </a-form-item>
       <!-- 配置值 -->

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container" v-if="render">
+  <div class="layout-container">
     <!-- 列表-表格 -->
     <dict-value-table ref="table"
                       @openAdd="() => modal.openAdd()"
@@ -27,14 +27,11 @@
   import DictValueTable from './components/dict-value-table.vue';
   import DictValueFormModal from './components/dict-value-form-modal.vue';
   import HistoryValueModal from '@/components/meta/history/history-value-modal.vue';
-  import { ref, onBeforeMount, onUnmounted } from 'vue';
+  import { ref, onUnmounted } from 'vue';
   import { historyType } from './types/const';
   import { useCacheStore } from '@/store';
-  import { getDictKeyList } from '@/api/system/dict-key';
-  import { Message } from '@arco-design/web-vue';
   import { rollbackDictValue } from '@/api/system/dict-value';
 
-  const render = ref(false);
   const table = ref();
   const modal = ref();
   const history = ref();
@@ -55,23 +52,6 @@
     await rollbackDictValue({ id, valueId });
   };
 
-  // 加载字典配置项
-  const loadDictKeys = async () => {
-    try {
-      const { data } = await getDictKeyList();
-      // 设置到缓存
-      cacheStore.set('dictKeys', data);
-    } catch (e) {
-      Message.error('配置项加载失败');
-    }
-  };
-
-  onBeforeMount(async () => {
-    // 加载字典值
-    await loadDictKeys();
-    render.value = true;
-  });
-
   // 卸载时清除 cache
   onUnmounted(() => {
     cacheStore.reset('dictKeys');

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

@@ -125,12 +125,11 @@
   import formRules from '../types/form.rules';
   import { menuCacheKey, sortStep } from '../types/const';
   import { menuVisibleKey, menuTypeKey, MenuType, MenuVisible, MenuCache } from '../types/const';
-
-  import IconPicker from '@sanqi377/arco-vue-icon-picker';
-  import MenuTreeSelector from './menu-tree-selector.vue';
   import { createMenu, updateMenu } from '@/api/system/menu';
   import { Message } from '@arco-design/web-vue';
   import { useDictStore } from '@/store';
+  import IconPicker from '@sanqi377/arco-vue-icon-picker';
+  import MenuTreeSelector from '@/components/system/menu/selector/menu-tree-selector.vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();

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

@@ -263,7 +263,6 @@
       setFetchLoading(true);
       const { data } = await getMenuList(formModel);
       tableRenderData.value = data as MenuQueryResponse[];
-      cacheStore.set('menus', tableRenderData.value);
     } catch (e) {
     } finally {
       setFetchLoading(false);

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

@@ -1,76 +0,0 @@
-<template>
-  <a-tree-select v-model:model-value="value"
-                 :data="treeData()"
-                 :disabled="disabled"
-                 :allow-search="true"
-                 :filter-tree-node="filterTreeNode"
-                 placeholder="请选择菜单" />
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'menu-tree-selector'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { TreeNodeData } from '@arco-design/web-vue';
-  import { useCacheStore } from '@/store';
-  import { computed } from 'vue';
-  import { MenuType } from '../types/const';
-
-  const props = defineProps({
-    modelValue: Number,
-    disabled: Boolean,
-  });
-
-  const emits = defineEmits(['update:modelValue']);
-
-  const value = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(e) {
-      emits('update:modelValue', e);
-    }
-  });
-
-  // 树数据
-  const cacheStore = useCacheStore();
-  const treeData = (): TreeNodeData[] => {
-    let render = (arr: any[]): TreeNodeData[] => {
-      return arr.map((s) => {
-        // 为 function 返回空
-        if (s.type === MenuType.FUNCTION) {
-          return null as unknown as TreeNodeData;
-        }
-        // 当前节点
-        const node = {
-          key: s.id,
-          title: s.name,
-          children: undefined as unknown
-        } as TreeNodeData;
-        // 子节点
-        if (s.children && s.children.length) {
-          node.children = render(s.children);
-        }
-        return node;
-      }).filter(Boolean);
-    };
-    return [{
-      key: 0,
-      title: '根目录',
-      children: render([...cacheStore.menus])
-    }];
-  };
-
-  // 搜索
-  const filterTreeNode = (searchValue: string, nodeData: { title: string; }) => {
-    return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-  };
-
-</script>
-
-<style lang="less" scoped>
-
-</style>;