refactor: 修改缓存加载逻辑.

orion-ops-ui/src/components/asset/host-group/host-group-tree-selector.vue

@@ -2,6 +2,7 @@
   <a-tree-select v-model="value"
                  :multiple="true"
                  :data="treeData"
+                 :loading="loading"
                  placeholder="请选择主机分组"
                  :allow-clear="true"
                  :allow-search="true">
@@ -19,7 +20,7 @@
   import type { PropType } from 'vue';
   import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
-  import { getHostGroupTree } from '@/api/asset/host-group';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: Array as PropType<Array<Number>>,
@@ -27,6 +28,7 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed<Array<number>>({
@@ -44,10 +46,14 @@
   const treeData = ref<Array<TreeNodeData>>([]);
 
   // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadHostGroups().then(s => {
-      treeData.value = s;
-    });
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      treeData.value = await cacheStore.loadHostGroups();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>

orion-ops-ui/src/components/asset/host-group/host-group-tree.vue

@@ -92,7 +92,7 @@
   import { computed, nextTick, onMounted, ref } from 'vue';
   import { createGroupGroupPrefix, rootId } from './types/const';
   import { findNode, findParentNode, moveNode } from '@/utils/tree';
-  import { createHostGroup, deleteHostGroup, getHostGroupTree, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
+  import { createHostGroup, deleteHostGroup, updateHostGroupName, moveHostGroup } from '@/api/asset/host-group';
   import { isString } from '@/utils/is';
   import { useCacheStore } from '@/store';
 

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

@@ -1,6 +1,7 @@
 <template>
   <a-select v-model:model-value="value"
             :options="optionData"
+            :loading="loading"
             placeholder="请选择主机身份"
             allow-clear />
 </template>
@@ -15,6 +16,7 @@
   import type { SelectOptionData } from '@arco-design/web-vue';
   import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: Number,
@@ -22,6 +24,7 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed<number>({
@@ -39,15 +42,20 @@
   const optionData = ref<Array<SelectOptionData>>([]);
 
   // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadHostIdentities().then(hostIdentities => {
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const hostIdentities = await cacheStore.loadHostIdentities();
       optionData.value = hostIdentities.map(s => {
         return {
           label: `${s.name} (${s.username})`,
           value: s.id,
         };
       });
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>

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

@@ -1,6 +1,7 @@
 <template>
   <a-select v-model:model-value="value"
             :options="optionData"
+            :loading="loading"
             placeholder="请选择主机秘钥"
             allow-clear />
 </template>
@@ -15,6 +16,7 @@
   import type { SelectOptionData } from '@arco-design/web-vue';
   import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: Number,
@@ -22,6 +24,7 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed<number>({
@@ -39,15 +42,20 @@
   const optionData = ref<Array<SelectOptionData>>([]);
 
   // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadHostKeys().then(hostKeys => {
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const hostKeys = await cacheStore.loadHostKeys();
       optionData.value = hostKeys.map(s => {
         return {
           label: s.name,
           value: s.id,
         };
       });
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 </script>