refactor: 修改缓存加载逻辑.

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

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"

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"

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>

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

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>

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

View File

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

View File

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

View File

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

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>