From 4cfc22753be83e5a88c32ca1adf68df8faad52c9 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Mon, 4 Dec 2023 16:08:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/assets/style/global.less     |  7 ++++-
 .../host-group/host-group-tree-selector.vue   | 16 ++++++----
 .../asset/host-group/host-group-tree.vue      |  2 +-
 .../host-identity/host-identity-selector.vue  | 14 +++++++--
 .../asset/host-key/host-key-selector.vue      | 14 +++++++--
 .../meta/tag/tag-multi-selector.vue           | 29 +++++++++++--------
 .../system/dict-key/dict-key-selector.vue     | 15 ++++++----
 .../menu/selector/menu-tree-selector.vue      | 16 ++++++++--
 .../components/user/role/role-selector.vue    | 14 ++++++---
 .../components/user/user/user-selector.vue    | 16 ++++++----
 .../src/views/asset/host-key/index.vue        | 12 ++------
 .../components/config/host-config-drawer.vue  | 11 +++----
 .../components/config/ssh/ssh-config-form.vue |  2 +-
 .../src/views/asset/host-list/index.vue       |  1 -
 .../role/components/role-menu-grant-modal.vue |  4 +--
 .../user-grant-roles-form-modal.vue           | 22 +++++---------
 16 files changed, 119 insertions(+), 76 deletions(-)

diff --git a/orion-ops-ui/src/assets/style/global.less b/orion-ops-ui/src/assets/style/global.less
index d8e5457e..ba877e75 100644
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -69,6 +69,10 @@ body {
 }
 
 // -- arco
+.arco-menu-inner::-webkit-scrollbar {
+  display: none;
+}
+
 .arco-table-td-content {
   color: rgba(var(--gray-9), .95);
   font-size: 13px;
@@ -119,7 +123,8 @@ body {
     margin: 0;
   }
 }
-.arco-scrollbar-track-direction-horizontal{
+
+.arco-scrollbar-track-direction-horizontal {
   height: 9px;
 
   .arco-scrollbar-thumb-bar {
diff --git 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
index 3b48995d..3e47b059 100644
--- 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
@@ -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>
diff --git 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
index bca9d667..9a92134e 100644
--- 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
@@ -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';
 
diff --git 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
index e1dd2832..cdce3f89 100644
--- 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
@@ -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>
diff --git 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
index 3d6ac95d..b6e3d86d 100644
--- 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
@@ -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>
 
diff --git a/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue b/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
index 160435e4..081e43ff 100644
--- a/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
+++ b/orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
@@ -51,18 +51,6 @@
   });
   const optionData = ref<SelectOptionData[]>([]);
 
-  // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadTags(props.type as string).then((tags) => {
-      optionData.value = tags.map(s => {
-        return {
-          label: s.name,
-          value: s.id,
-        };
-      });
-    });
-  });
-
   // 检查是否可以创建tag
   const checkCreateTag = async (tags: Array<any>) => {
     if (!tags.length) {
@@ -112,6 +100,23 @@
     return id;
   };
 
+  // 初始化选项
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const tags = await cacheStore.loadTags(props.type as string);
+      optionData.value = tags.map(s => {
+        return {
+          label: s.name,
+          value: s.id,
+        };
+      });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
 </script>
 
 <style lang="less" scoped>
diff --git 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
index 0abea687..477fe738 100644
--- 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
@@ -20,10 +20,10 @@
   import { computed, onBeforeMount, ref } from 'vue';
   import { useCacheStore } from '@/store';
   import { labelFilter } from '@/types/form';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: Number,
-    loading: Boolean,
     allowCreate: {
       type: Boolean,
       default: false
@@ -32,7 +32,7 @@
 
   const emits = defineEmits(['update:modelValue', 'change']);
 
-  // 选项数据
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed({
@@ -60,8 +60,10 @@
   const optionData = ref<Array<SelectOptionData>>([]);
 
   // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadDictKeys().then(dictKeys => {
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const dictKeys = await cacheStore.loadDictKeys();
       optionData.value = dictKeys.map(s => {
         return {
           label: `${s.keyName} - ${s.description || ''}`,
@@ -69,7 +71,10 @@
           origin: s
         };
       });
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>
diff --git 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
index dc200da8..56f23d6a 100644
--- 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
@@ -2,6 +2,7 @@
   <a-tree-select v-model:model-value="value"
                  :data="treeData"
                  :disabled="disabled"
+                 :loading="loading"
                  :allow-search="true"
                  :filter-tree-node="titleFilter"
                  placeholder="请选择菜单" />
@@ -19,6 +20,7 @@
   import { computed, onBeforeMount, ref } from 'vue';
   import { MenuType } from '@/views/system/menu/types/const';
   import { titleFilter } from '@/types/form';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: Number,
@@ -27,6 +29,7 @@
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const treeData = ref<Array<TreeNodeData>>([]);
@@ -40,7 +43,7 @@
     }
   });
 
-  onBeforeMount(() => {
+  onBeforeMount(async () => {
     let render = (arr: any[]): TreeNodeData[] => {
       return arr.map((s) => {
         // 为 function 返回空
@@ -60,13 +63,20 @@
         return node;
       }).filter(Boolean);
     };
-    cacheStore.loadMenus().then(menus => {
+
+    // 加载数据
+    try {
+      setLoading(true);
+      const menus = await cacheStore.loadMenus();
       treeData.value = [{
         key: 0,
         title: '根目录',
         children: render([...menus])
       }];
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>
diff --git a/orion-ops-ui/src/components/user/role/role-selector.vue b/orion-ops-ui/src/components/user/role/role-selector.vue
index ad3fc6e8..b5781672 100644
--- a/orion-ops-ui/src/components/user/role/role-selector.vue
+++ b/orion-ops-ui/src/components/user/role/role-selector.vue
@@ -22,15 +22,16 @@
   import { useCacheStore } from '@/store';
   import { RoleStatus } from '@/views/user/role/types/const';
   import { labelFilter } from '@/types/form';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: [Number, Array] as PropType<number | Array<number>>,
-    loading: Boolean,
     multiple: Boolean,
   });
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed({
@@ -44,8 +45,10 @@
   const optionData = ref<Array<SelectOptionData>>([]);
 
   // 初始化选项
-  onBeforeMount(() => {
-    cacheStore.loadRoles().then(roles => {
+  onBeforeMount(async () => {
+    setLoading(true);
+    try {
+      const roles = await cacheStore.loadRoles();
       optionData.value = roles.map(s => {
         return {
           label: `${s.name} (${s.code})`,
@@ -53,7 +56,10 @@
           value: s.id,
         };
       });
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>
diff --git a/orion-ops-ui/src/components/user/user/user-selector.vue b/orion-ops-ui/src/components/user/user/user-selector.vue
index e5d6a114..c8b65c8a 100644
--- a/orion-ops-ui/src/components/user/user/user-selector.vue
+++ b/orion-ops-ui/src/components/user/user/user-selector.vue
@@ -21,15 +21,16 @@
   import { computed, ref, onMounted } from 'vue';
   import { useCacheStore } from '@/store';
   import { labelFilter } from '@/types/form';
+  import useLoading from '@/hooks/loading';
 
   const props = defineProps({
     modelValue: [Number, Array] as PropType<number | Array<number>>,
-    loading: Boolean,
     multiple: Boolean,
   });
 
   const emits = defineEmits(['update:modelValue']);
 
+  const { loading, setLoading } = useLoading();
   const cacheStore = useCacheStore();
 
   const value = computed({
@@ -43,16 +44,21 @@
   const optionData = ref<Array<SelectOptionData>>([]);
 
   // 初始化选项
-  onMounted(() => {
-    // 加载用户列表
-    cacheStore.loadUsers().then(users => {
+  onMounted(async () => {
+    setLoading(true);
+    try {
+      // 加载用户列表
+      const users = await cacheStore.loadUsers();
       optionData.value = users.map(s => {
         return {
           label: `${s.nickname} (${s.username})`,
           value: s.id,
         };
       });
-    });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   });
 
 </script>
diff --git a/orion-ops-ui/src/views/asset/host-key/index.vue b/orion-ops-ui/src/views/asset/host-key/index.vue
index 7a6ef175..4c50ec52 100644
--- a/orion-ops-ui/src/views/asset/host-key/index.vue
+++ b/orion-ops-ui/src/views/asset/host-key/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container" v-if="render">
+  <div class="layout-container">
     <!-- 列表-表格 -->
     <host-key-table v-if="renderTable"
                     ref="table"
@@ -26,14 +26,12 @@
 </script>
 
 <script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useAppStore } from '@/store';
   import HostKeyCardList from './components/host-key-card-list.vue';
   import HostKeyTable from './components/host-key-table.vue';
   import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
 
-  import { computed, ref, onBeforeMount } from 'vue';
-  import { useAppStore } from '@/store';
-
-  const render = ref(false);
   const table = ref();
   const card = ref();
   const drawer = ref();
@@ -59,10 +57,6 @@
     }
   };
 
-  onBeforeMount(async () => {
-    render.value = true;
-  });
-
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue b/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
index 2e9f8d1f..d1860734 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
   import type { HostConfigWrapper } from '../../types/const';
-  import { ref, onBeforeMount } from 'vue';
+  import { ref } from 'vue';
   import useVisible from '@/hooks/visible';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
@@ -54,6 +54,9 @@
     try {
       setLoading(true);
       setVisible(true);
+      // 加载字典值
+      const dictStore = useDictStore();
+      await dictStore.loadKeys([...sshDictKeys]);
       // 加载配置
       const { data } = await getHostConfigAll({ hostId: record.value.id });
       data.forEach(s => {
@@ -75,12 +78,6 @@
 
   defineExpose({ open });
 
-  onBeforeMount(async () => {
-    // 加载字典值
-    const dictStore = useDictStore();
-    await dictStore.loadKeys([...sshDictKeys]);
-  });
-
 </script>
 
 <style lang="less" scoped>
diff --git a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
index 71801a23..6227d619 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
@@ -46,7 +46,7 @@
                      :hide-asterisk="true"
                      label-col-flex="60px">
           <a-radio-group type="button"
-                         class="auth-type-group"
+                         class="auth-type-group usn"
                          v-model="formModel.authType"
                          :options="toOptions(authTypeKey)" />
         </a-form-item>
diff --git a/orion-ops-ui/src/views/asset/host-list/index.vue b/orion-ops-ui/src/views/asset/host-list/index.vue
index db831a4b..d92a3ea4 100644
--- a/orion-ops-ui/src/views/asset/host-list/index.vue
+++ b/orion-ops-ui/src/views/asset/host-list/index.vue
@@ -40,7 +40,6 @@
   import HostConfigDrawer from './components/config/host-config-drawer.vue';
   import HostGroupDrawer from './components/group/host-group-drawer.vue';
 
-  const render = ref(false);
   const table = ref();
   const card = ref();
   const modal = ref();
diff --git a/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue b/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
index 0b9aaea5..7b8c8594 100644
--- a/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
+++ b/orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
@@ -14,7 +14,7 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @close="handleClose">
-    <div class="role-menu-wrapper">
+    <a-spin :loading="loading" class="role-menu-wrapper">
       <a-alert class="usn mb8">
         <span>{{ roleRecord.name }} {{ roleRecord.code }}</span>
         <span class="mx8">-</span>
@@ -40,7 +40,7 @@
       </div>
       <!-- 菜单 -->
       <menu-grant-table ref="table" />
-    </div>
+    </a-spin>
   </a-modal>
 </template>
 
diff --git a/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue b/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
index 1a836ed9..bb2927f8 100644
--- a/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
@@ -8,11 +8,11 @@
            :draggable="true"
            :mask-closable="false"
            :unmount-on-close="true"
-           :ok-button-props="{ disabled: saveLoading }"
-           :cancel-button-props="{ disabled: saveLoading }"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @close="handleClose">
-    <a-spin :loading="saveLoading">
+    <a-spin :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
@@ -30,8 +30,7 @@
         <!-- 角色 -->
         <a-form-item field="roles" label="角色">
           <role-selector v-model="formModel.roleIdList"
-                              :loading="roleLoading"
-                              :multiple="true" />
+                         :multiple="true" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -55,8 +54,7 @@
   import { getUserRoleIdList, grantUserRole } from '@/api/user/user';
 
   const { visible, setVisible } = useVisible();
-  const { loading: saveLoading, setLoading: setSaveLoading } = useLoading();
-  const { loading: roleLoading, setLoading: setRoleLoading } = useLoading();
+  const { loading, setLoading } = useLoading();
 
   const formRef = ref();
   const formModel = ref<UserUpdateRequest>({});
@@ -82,13 +80,10 @@
   // 加载角色
   const loadRoles = async () => {
     try {
-      setRoleLoading(true);
       // 加载用户角色
       const { data: roleIdList } = await getUserRoleIdList(formModel.value.id as number);
       formModel.value.roleIdList = roleIdList;
     } catch (e) {
-    } finally {
-      setRoleLoading(false);
     }
   };
 
@@ -96,7 +91,7 @@
 
   // 确定
   const handlerOk = async () => {
-    setSaveLoading(true);
+    setLoading(true);
     try {
       await grantUserRole(formModel.value);
       Message.success('修改成功');
@@ -105,7 +100,7 @@
     } catch (e) {
       return false;
     } finally {
-      setSaveLoading(false);
+      setLoading(false);
     }
   };
 
@@ -116,8 +111,7 @@
 
   // 清空
   const handlerClear = () => {
-    setSaveLoading(false);
-    setRoleLoading(false);
+    setLoading(false);
     setVisible(false);
   };