refactor: 修改缓存加载逻辑.

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>

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>

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>

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();

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>
 

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);
   };