manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 修改缓存加载逻辑.

Browse Source
This commit is contained in:
lijiahang
2023-12-04 16:08:14 +08:00
parent f4b5ba168a
commit 4cfc22753b
16 changed files with 119 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
orion-ops-ui/src/assets/style/global.less
View File

@@ -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 {

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

@@ -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>

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

@@ -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';

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

@@ -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>

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

@@ -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>

29
orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
View File

@@ -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>

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

@@ -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>

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

@@ -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>

14
orion-ops-ui/src/components/user/role/role-selector.vue
View File

@@ -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>

16
orion-ops-ui/src/components/user/user/user-selector.vue
View File

@@ -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>

12
orion-ops-ui/src/views/asset/host-key/index.vue
View File

@@ -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>

11
orion-ops-ui/src/views/asset/host-list/components/config/host-config-drawer.vue
View File

@@ -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>

2
orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
View File

@@ -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>

1
orion-ops-ui/src/views/asset/host-list/index.vue
View File

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

4
orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue
View File

@@ -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>

22
orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
View File

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