refactor: 修改缓存加载逻辑.

2023-12-04 14:35:18 +08:00
parent a22f30a8b4
commit f4b5ba168a
39 changed files with 278 additions and 332 deletions
--- a/orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue
@@ -44,15 +44,10 @@
  const treeData = ref<Array<TreeNodeData>>([]);

  // 初始化选项
-  onBeforeMount(async () => {
-    if (cacheStore.hostGroups.length) {
-      treeData.value = cacheStore.hostGroups;
-    } else {
-      // 加载数据
-      const { data } = await getHostGroupTree();
-      treeData.value = data;
-      cacheStore.set('hostGroups', data);
-    }
+  onBeforeMount(() => {
+    cacheStore.loadHostGroups().then(s => {
+      treeData.value = s;
+    });
  });

 </script>
--- a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
@@ -5,7 +5,7 @@
            ref="tree"
            class="tree-container"
            :blockNode="true"
-            :draggable="draggable"
+            :draggable="editable"
            :data="treeData"
            :checkable="checkable"
            v-model:checked-keys="checkedKeys"
@@ -20,7 +20,6 @@
                   v-model="currName"
                   style="width: 138px;"
                   placeholder="名称"
-                   autofocus
                   :max-length="32"
                   :disabled="node.loading"
                   @blur="() => saveNode(node.key)"
@@ -77,7 +76,7 @@
    <!-- 无数据 -->
    <div v-else-if="!loading" class="empty-container">
      <span>暂无数据</span>
-      <span>点击上方 '<icon-plus />' 添加一个分组吧~</span>
+      <span v-if="editable">点击上方 '<icon-plus />' 添加一个分组吧~</span>
    </div>
  </a-scrollbar>
 </template>
@@ -99,7 +98,7 @@

  const props = defineProps({
    loading: Boolean,
-    draggable: {
+    editable: {
      type: Boolean,
      default: true
    },
@@ -313,20 +312,13 @@

  // 加载数据
  const fetchTreeData = async (force = false) => {
-    if (cacheStore.hostGroups.length && !force) {
-      // 缓存有数据并且非强制加载 直接从缓存中加载
-      treeData.value = cacheStore.hostGroups;
-    } else {
-      // 无数据/强制加载
-      try {
-        emits('loading', true);
-        const { data } = await getHostGroupTree();
-        treeData.value = data;
-        cacheStore.hostGroups = data;
-      } catch (e) {
-      } finally {
-        emits('loading', false);
-      }
+    try {
+      const groups = await cacheStore.loadHostGroups(force);
+      emits('loading', true);
+      treeData.value = groups;
+    } catch (e) {
+    } finally {
+      emits('loading', false);
    }
    // 未选择则选择首个
    if (!tree.value?.getSelectedNodes()?.length && treeData.value.length) {
--- a/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-identity/host-identity-selector.vue
@@ -40,11 +40,13 @@

  // 初始化选项
  onBeforeMount(() => {
-    optionData.value = cacheStore.hostIdentities.map(s => {
-      return {
-        label: `${s.name} (${s.username})`,
-        value: s.id,
-      };
+    cacheStore.loadHostIdentities().then(hostIdentities => {
+      optionData.value = hostIdentities.map(s => {
+        return {
+          label: `${s.name} (${s.username})`,
+          value: s.id,
+        };
+      });
    });
  });

--- a/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
+++ b/orion-ops-ui/src/components/asset/host-key/host-key-selector.vue
@@ -40,11 +40,13 @@

  // 初始化选项
  onBeforeMount(() => {
-    optionData.value = cacheStore.hostKeys.map(s => {
-      return {
-        label: s.name,
-        value: s.id,
-      };
+    cacheStore.loadHostKeys().then(hostKeys => {
+      optionData.value = hostKeys.map(s => {
+        return {
+          label: s.name,
+          value: s.id,
+        };
+      });
    });
  });
 </script>
--- a/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
+++ b/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
@@ -2,6 +2,7 @@
  <a-select v-model:model-value="value"
            :placeholder="placeholder"
            :options="optionData"
+            :loading="loading"
            :limit="limit as number"
            :allow-create="allowCreate"
            @exceed-limit="() => { emits('onLimited', limit, `最多选择${limit}个tag`) }"
@@ -24,6 +25,7 @@
  import { useCacheStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import { createTag } from '@/api/meta/tag';
+  import useLoading from '@/hooks/loading';

  const props = defineProps({
    modelValue: Array as PropType<Array<number>>,
@@ -31,11 +33,11 @@
    limit: Number,
    type: String,
    allowCreate: Boolean,
-    tagType: String,
  });

  const emits = defineEmits(['update:modelValue', 'onLimited']);

+  const { loading, setLoading } = useLoading();
  const cacheStore = useCacheStore();

  const value = computed<Array<number>>({
@@ -51,12 +53,13 @@

  // 初始化选项
  onBeforeMount(() => {
-    const tagCache = cacheStore[props.tagType as string] as Array<any>;
-    optionData.value = tagCache.map(s => {
-      return {
-        label: s.name,
-        value: s.id,
-      };
+    cacheStore.loadTags(props.type as string).then((tags) => {
+      optionData.value = tags.map(s => {
+        return {
+          label: s.name,
+          value: s.id,
+        };
+      });
    });
  });

@@ -78,12 +81,16 @@
        tags.splice(i, 1);
        return;
      }
+      // 不存在则创建 tag
+      setLoading(true);
      try {
        // 创建 tag
        tags[i] = await doCreateTag(tag);
      } catch (e) {
        // 失败删除
        tags.splice(i, 1);
+      } finally {
+        setLoading(false);
      }
    }
  };
@@ -95,8 +102,8 @@
      type: props.type
    } as unknown as TagCreateRequest);
    // 插入缓存
-    const tagCache = cacheStore[props.tagType as string] as Array<any>;
-    tagCache.push({ id, name });
+    const tagCache = await cacheStore.loadTags(props.type as string);
+    tagCache && tagCache.push({ id, name });
    // 插入 options
    optionData.value.push({
      label: name,
--- a/orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue
+++ b/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
+        };
+      });
    });
  });

--- a/orion-ops-ui/src/components/system/menu/grant/menu-grant-table.vue
+++ b/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];
+      });
    }
  };

--- a/orion-ops-ui/src/components/system/menu/selector/menu-tree-selector.vue
+++ b/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>;