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 14:35:18 +08:00
parent a22f30a8b4
commit f4b5ba168a
39 changed files with 278 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
orion-ops-ui/src/views/asset/grant/components/host-group-role-grant.vue
View File

@@ -31,7 +31,7 @@
<host-group-tree outer-class="group-main-tree"
:checkable="true"
:checked-keys="checkedGroups"
:draggable="false"
:editable="false"
:loading="loading"
@loading="setLoading"
@select-node="e => selectedGroup = e"

2
orion-ops-ui/src/views/asset/grant/components/host-group-user-grant.vue
View File

@@ -30,7 +30,7 @@
<!-- 分组 -->
<host-group-tree outer-class="group-main-tree"
:checked-keys="checkedGroups"
:draggable="false"
:editable="false"
:loading="loading"
@loading="setLoading"
@select-node="e => selectedGroup = e"

25
orion-ops-ui/src/views/asset/grant/components/host-list.vue
View File

@@ -36,10 +36,8 @@
import type { PropType } from 'vue';
import useLoading from '@/hooks/loading';
import { useCacheStore } from '@/store';
import { onBeforeMount, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { getHostGroupRelList } from '@/api/asset/host-group';
import { getHostList } from '@/api/asset/host';
import { Message } from '@arco-design/web-vue';
const props = defineProps({
group: {
@@ -64,7 +62,8 @@
try {
setLoading(true);
const { data } = await getHostGroupRelList(groupId as number);
selectedGroupHosts.value = data.map(s => cacheStore.hosts.find(h => h.id === s) as HostQueryResponse)
const hosts = await cacheStore.loadHosts();
selectedGroupHosts.value = data.map(s => hosts.find(h => h.id === s) as HostQueryResponse)
.filter(Boolean);
} catch (e) {
} finally {
@@ -72,24 +71,6 @@
}
});
// 加载主机列表
const loadHostList = async () => {
try {
const { data } = await getHostList();
// 设置到缓存
cacheStore.set('hosts', data);
} catch (e) {
Message.error('主机列表加载失败');
}
};
onBeforeMount(async () => {
if (!cacheStore.hosts.length) {
// 加载用户列表
await loadHostList();
}
});
</script>
<style lang="less" scoped>

28
orion-ops-ui/src/views/asset/host-identity/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="layout-container" v-if="render">
<div class="layout-container">
<!-- 列表-表格 -->
<host-identity-table v-if="renderTable"
ref="table"
@@ -16,7 +16,7 @@
<host-identity-form-modal ref="modal"
@added="modalAddCallback"
@updated="modalUpdateCallback" />
<!-- 添加修改模态框 -->
<!-- 主机秘钥抽屉 -->
<host-key-form-drawer ref="keyDrawer" />
</div>
</template>
@@ -28,17 +28,13 @@
</script>
<script lang="ts" setup>
import { ref, computed, onUnmounted } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
import HostIdentityCardList from './components/host-identity-card-list.vue';
import HostIdentityTable from './components/host-identity-table.vue';
import HostIdentityFormModal from './components/host-identity-form-modal.vue';
import HostKeyFormDrawer from '../host-key/components/host-key-form-drawer.vue';
import { getHostKeyList } from '@/api/asset/host-key';
import { ref, computed, onBeforeMount, onUnmounted } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
import { Message } from '@arco-design/web-vue';
const render = ref(false);
const table = ref();
const card = ref();
const modal = ref();
@@ -66,22 +62,6 @@
}
};
// 获取主机秘钥列表
const fetchHostKeyList = async () => {
try {
const { data } = await getHostKeyList();
cacheStore.set('hostKeys', data);
} catch (e) {
Message.error('主机秘钥加载失败');
}
};
onBeforeMount(async () => {
// 加载主机秘钥
await fetchHostKeyList();
render.value = true;
});
// 卸载时清除 cache
onUnmounted(() => {
const cacheStore = useCacheStore();

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

@@ -36,8 +36,6 @@
import { Message } from '@arco-design/web-vue';
import { getHostConfigAll } from '@/api/asset/host';
import { useCacheStore, useDictStore } from '@/store';
import { getHostKeyList } from '@/api/asset/host-key';
import { getHostIdentityList } from '@/api/asset/host-identity';
import { dictKeys as sshDictKeys } from './ssh/types/const';
import SshConfigForm from './ssh/ssh-config-form.vue';
@@ -77,32 +75,10 @@
defineExpose({ open });
// 加载主机秘钥
const fetchHostKeys = async () => {
try {
const { data } = await getHostKeyList();
cacheStore.set('hostKeys', data);
} catch (e) {
}
};
// 加载主机身份
const fetchHostIdentities = async () => {
try {
const { data } = await getHostIdentityList();
cacheStore.set('hostIdentities', data);
} catch (e) {
}
};
onBeforeMount(async () => {
// 加载字典值
const dictStore = useDictStore();
await dictStore.loadKeys([...sshDictKeys]);
// 加载主机秘钥
await fetchHostKeys();
// 加载主机身份
await fetchHostIdentities();
});
</script>

38
orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
View File

@@ -52,9 +52,7 @@
import type { PropType } from 'vue';
import { onMounted, ref, watch, computed } from 'vue';
import { useCacheStore } from '@/store';
import { getHostGroupRelList, updateHostGroupRel } from '@/api/asset/host-group';
import { Message } from '@arco-design/web-vue';
import { getHostList } from '@/api/asset/host';
import { getHostGroupRelList } from '@/api/asset/host-group';
const props = defineProps({
modelValue: {
@@ -114,31 +112,15 @@
}
});
// 加载主机列表
const loadHostList = async () => {
emits('loading', true);
try {
const { data } = await getHostList();
// 设置到缓存
cacheStore.set('hosts', data);
} catch (e) {
Message.error('主机列表加载失败');
} finally {
emits('loading', false);
}
};
onMounted(async () => {
if (!cacheStore.hosts.length) {
// 加载主机列表
await loadHostList();
}
data.value = cacheStore.hosts.map(s => {
return {
value: String(s.id),
label: `${s.name}(${s.code})-${s.address}`,
disabled: false
};
onMounted(() => {
cacheStore.loadHosts().then(hosts => {
data.value = hosts.map(s => {
return {
value: String(s.id),
label: `${s.name}(${s.code})-${s.address}`,
disabled: false
};
});
});
});

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

@@ -78,7 +78,6 @@
:allowCreate="false"
:limit="0"
type="HOST"
tag-type="hostTags"
placeholder="请选择主机标签" />
</a-form-item>
</a-form>

1
orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue
View File

@@ -43,7 +43,6 @@
:allowCreate="true"
:limit="5"
type="HOST"
tag-type="hostTags"
placeholder="请选择主机标签"
@onLimited="onLimitedTag" />
</a-form-item>

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

@@ -32,7 +32,6 @@
:allowCreate="false"
:limit="0"
type="HOST"
tag-type="hostTags"
placeholder="请选择主机标签" />
</a-form-item>
</a-query-header>

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

@@ -1,5 +1,5 @@
<template>
<div class="layout-container" v-if="render">
<div class="layout-container">
<!-- 列表-表格 -->
<host-table v-if="renderTable"
ref="table"
@@ -32,10 +32,8 @@
</script>
<script lang="ts" setup>
import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
import { computed, ref, onUnmounted } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
import { getTagList } from '@/api/meta/tag';
import { Message } from '@arco-design/web-vue';
import HostTable from './components/host-table.vue';
import HostCardList from './components/host-card-list.vue';
import HostFormModal from './components/host-form-modal.vue';
@@ -72,26 +70,9 @@
}
};
// 加载 tags
const loadTags = async () => {
try {
const { data } = await getTagList('HOST');
// 设置到缓存
cacheStore.set('hostTags', data);
} catch (e) {
Message.error('tag加载失败');
}
};
onBeforeMount(async () => {
// 加载 tags
await loadTags();
render.value = true;
});
// 卸载时清除 cache
onUnmounted(() => {
cacheStore.reset('hosts', 'hostTags', 'hostKeys', 'hostIdentities', 'hostGroups');
cacheStore.reset('hosts', 'hostKeys', 'hostIdentities', 'hostGroups', 'HOST_Tags');
});
</script>

5
orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
View File

@@ -139,10 +139,11 @@
};
// 渲染表单
const renderForm = (record: any) => {
const renderForm = async (record: any) => {
formModel.value = Object.assign({}, record);
// schema
const find = record.keyId && cacheStore.dictKeys.find((item) => item.id === record.keyId);
const dictKeys = await cacheStore.loadDictKeys();
const find = record.keyId && dictKeys.find((item) => item.id === record.keyId);
keyExtraSchemas.value = (find && find.extraSchema && JSON.parse(find.extraSchema)) || [];
// 额外参数
extraValue.value = (formModel.value.extra && JSON.parse(formModel.value.extra)) || {};

1
orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
View File

@@ -10,6 +10,7 @@
<a-form-item field="keyId" label="配置项" label-col-flex="50px">
<dict-key-selector v-model="formModel.keyId"
@change="changeKey"
allow-create
allow-clear />
</a-form-item>
<!-- 配置值 -->

24
orion-ops-ui/src/views/system/dict-value/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="layout-container" v-if="render">
<div class="layout-container">
<!-- 列表-表格 -->
<dict-value-table ref="table"
@openAdd="() => modal.openAdd()"
@@ -27,14 +27,11 @@
import DictValueTable from './components/dict-value-table.vue';
import DictValueFormModal from './components/dict-value-form-modal.vue';
import HistoryValueModal from '@/components/meta/history/history-value-modal.vue';
import { ref, onBeforeMount, onUnmounted } from 'vue';
import { ref, onUnmounted } from 'vue';
import { historyType } from './types/const';
import { useCacheStore } from '@/store';
import { getDictKeyList } from '@/api/system/dict-key';
import { Message } from '@arco-design/web-vue';
import { rollbackDictValue } from '@/api/system/dict-value';
const render = ref(false);
const table = ref();
const modal = ref();
const history = ref();
@@ -55,23 +52,6 @@
await rollbackDictValue({ id, valueId });
};
// 加载字典配置项
const loadDictKeys = async () => {
try {
const { data } = await getDictKeyList();
// 设置到缓存
cacheStore.set('dictKeys', data);
} catch (e) {
Message.error('配置项加载失败');
}
};
onBeforeMount(async () => {
// 加载字典值
await loadDictKeys();
render.value = true;
});
// 卸载时清除 cache
onUnmounted(() => {
cacheStore.reset('dictKeys');

5
orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
View File

@@ -125,12 +125,11 @@
import formRules from '../types/form.rules';
import { menuCacheKey, sortStep } from '../types/const';
import { menuVisibleKey, menuTypeKey, MenuType, MenuVisible, MenuCache } from '../types/const';
import IconPicker from '@sanqi377/arco-vue-icon-picker';
import MenuTreeSelector from './menu-tree-selector.vue';
import { createMenu, updateMenu } from '@/api/system/menu';
import { Message } from '@arco-design/web-vue';
import { useDictStore } from '@/store';
import IconPicker from '@sanqi377/arco-vue-icon-picker';
import MenuTreeSelector from '@/components/system/menu/selector/menu-tree-selector.vue';
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();

1
orion-ops-ui/src/views/system/menu/components/menu-table.vue
View File

@@ -263,7 +263,6 @@
setFetchLoading(true);
const { data } = await getMenuList(formModel);
tableRenderData.value = data as MenuQueryResponse[];
cacheStore.set('menus', tableRenderData.value);
} catch (e) {
} finally {
setFetchLoading(false);

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

@@ -1,76 +0,0 @@
<template>
<a-tree-select v-model:model-value="value"
:data="treeData()"
:disabled="disabled"
:allow-search="true"
:filter-tree-node="filterTreeNode"
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 } from 'vue';
import { MenuType } from '../types/const';
const props = defineProps({
modelValue: Number,
disabled: Boolean,
});
const emits = defineEmits(['update:modelValue']);
const value = computed({
get() {
return props.modelValue;
},
set(e) {
emits('update:modelValue', e);
}
});
// 树数据
const cacheStore = useCacheStore();
const treeData = (): TreeNodeData[] => {
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);
};
return [{
key: 0,
title: '根目录',
children: render([...cacheStore.menus])
}];
};
// 搜索
const filterTreeNode = (searchValue: string, nodeData: { title: string; }) => {
return nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
};
</script>
<style lang="less" scoped>
</style>;

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

@@ -57,10 +57,8 @@
import useVisible from '@/hooks/visible';
import { getRoleMenuId, grantRoleMenu } from '@/api/user/role';
import { Message } from '@arco-design/web-vue';
import { useCacheStore } from '@/store';
import { getMenuList } from '@/api/system/menu';
import MenuGrantTable from '@/components/system/menu/grant/menu-grant-table.vue';
import { quickGrantMenuOperator } from '../types/const';
import MenuGrantTable from '@/components/system/menu/grant/menu-grant-table.vue';
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
@@ -74,13 +72,6 @@
setVisible(true);
try {
setLoading(true);
// 获取菜单列表
const cacheStore = useCacheStore();
if (!cacheStore.menus?.length) {
// 加载菜单
const { data: menuData } = await getMenuList({});
cacheStore.set('menus', menuData);
}
// 获取角色菜单
const { data: roleMenuIdList } = await getRoleMenuId(record.id);
table.value.init(roleMenuIdList);

3
orion-ops-ui/src/views/user/role/types/table.columns.ts
View File

@@ -18,10 +18,11 @@ const columns = [
dataIndex: 'code',
slotName: 'code',
}, {
title: '角色状态',
title: '状态',
dataIndex: 'status',
slotName: 'status',
align: 'center',
width: 84,
}, {
title: '创建时间',
dataIndex: 'createTime',