refactor: 修改缓存加载逻辑.

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

@@ -41,18 +41,18 @@
     },
     set(e) {
       if (typeof e === 'string') {
-        // 创建的值
-        emits('update:modelValue', undefined);
+        // 创建的值 这里必须为 null, 否则 table 的重置不生效
+        emits('update:modelValue', null);
         emits('change', {
-          id: undefined,
+          id: null,
           keyName: e
         });
       } else {
         // 已有的值
         emits('update:modelValue', e);
-        const find = cacheStore.dictKeys.find(s => s.id === e);
+        const find = optionData.value.find(s => s.value === e);
         if (find) {
-          emits('change', find);
+          emits('change', find.origin);
         }
       }
     }
@@ -61,11 +61,14 @@
 
   // 初始化选项
   onBeforeMount(() => {
-    optionData.value = cacheStore.dictKeys.map(s => {
-      return {
-        label: `${s.keyName} - ${s.description || ''}`,
-        value: s.id,
-      };
+    cacheStore.loadDictKeys().then(dictKeys => {
+      optionData.value = dictKeys.map(s => {
+        return {
+          label: `${s.keyName} - ${s.description || ''}`,
+          value: s.id,
+          origin: s
+        };
+      });
     });
   });
 

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

@@ -67,7 +67,9 @@
     unTriggerChange.value = true;
     checkedKeys.value = keys;
     if (!menuData.value.length) {
-      menuData.value = [...cacheStore.menus];
+      cacheStore.loadMenus().then(menus => {
+        menuData.value = [...menus];
+      });
     }
   };
 

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

@@ -0,0 +1,76 @@
+<template>
+  <a-tree-select v-model:model-value="value"
+                 :data="treeData"
+                 :disabled="disabled"
+                 :allow-search="true"
+                 :filter-tree-node="titleFilter"
+                 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, onBeforeMount, ref } from 'vue';
+  import { MenuType } from '@/views/system/menu/types/const';
+  import { titleFilter } from '@/types/form';
+
+  const props = defineProps({
+    modelValue: Number,
+    disabled: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const cacheStore = useCacheStore();
+
+  const treeData = ref<Array<TreeNodeData>>([]);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  onBeforeMount(() => {
+    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);
+    };
+    cacheStore.loadMenus().then(menus => {
+      treeData.value = [{
+        key: 0,
+        title: '根目录',
+        children: render([...menus])
+      }];
+    });
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>;