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

主机卡片列表.

Browse Source
This commit is contained in:
lijiahang
2023-10-07 18:08:31 +08:00
parent 25f2bc3040
commit d0f0c9428e
15 changed files with 203 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
View File

@@ -123,10 +123,10 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { deleteHostIdentity, getHostIdentityPage, HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
import { Message, PaginationProps } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { defaultPagination } from '@/types/table';
import { usePagination } from '@/types/table';
import { getHostKeyList } from '@/api/asset/host-key';
import { useCacheStore } from '@/store';
import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
@@ -141,7 +141,7 @@
const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
const cacheStore = useCacheStore();
const pagination = reactive(defaultPagination()) as PaginationProps;
const pagination = usePagination();
const formModel = reactive<HostIdentityQueryRequest>({
id: undefined,

6
orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
View File

@@ -96,16 +96,16 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
import { Message, PaginationProps } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { defaultPagination } from '@/types/table';
import { usePagination } from '@/types/table';
const tableRenderData = ref<HostKeyQueryResponse[]>([]);
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
const pagination = reactive(defaultPagination()) as PaginationProps;
const pagination = usePagination();
const formModel = reactive<HostKeyQueryRequest>({
id: undefined,

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

@@ -1,12 +1,13 @@
<template>
<card-list v-model:searchValue="formModel.name"
<card-list v-model:searchValue="formModel.searchValue"
create-card-position="head"
:card-height="180"
:card-height="172"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"
:pagination="pagination"
:card-layout-cols="cardColLayout"
:filter-count="filterCount"
:add-permission="['asset:host:create']"
@add="emits('openAdd')"
@reset="reset"
@@ -66,9 +67,44 @@
</a-dropdown>
</a-space>
</template>
<!-- 左侧条件 -->
<template #leftHandle>
<span>1</span>
<!-- 过滤条件 -->
<template #filterContent>
<a-form :model="formModel"
class="modal-form"
size="small"
ref="formRef"
label-align="right"
:style="{ width: '300px' }"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }">
<!-- id -->
<a-form-item field="id" label="主机id">
<a-input-number v-model="formModel.id"
placeholder="请输入主机id"
allow-clear
hide-button />
</a-form-item>
<!-- 主机名称 -->
<a-form-item field="name" label="主机名称">
<a-input v-model="formModel.name" placeholder="请输入主机名称" allow-clear />
</a-form-item>
<!-- 主机编码 -->
<a-form-item field="code" label="主机编码">
<a-input v-model="formModel.code" placeholder="请输入主机编码" allow-clear />
</a-form-item>
<!-- 主机地址 -->
<a-form-item field="address" label="主机地址">
<a-input v-model="formModel.address" placeholder="请输入主机地址" allow-clear />
</a-form-item>
<!-- 主机标签 -->
<a-form-item field="tags" label="主机标签">
<tag-multi-selector v-model="formModel.tags"
:allowCreate="false"
:limit="0"
type="HOST"
placeholder="请选择主机标签" />
</a-form-item>
</a-form>
</template>
</card-list>
</template>
@@ -81,13 +117,14 @@
<script setup lang="ts">
import { usePagination, useColLayout } from '@/types/card';
import { reactive, ref } from 'vue';
import { computed, reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { dataColor, resetObject } from '@/utils';
import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
import fieldConfig from '../types/card.fields';
import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
import { Message } from '@arco-design/web-vue';
import { tagColor } from '@/views/asset/host/types/const';
import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
import useCopy from '@/hooks/copy';
const { copy } = useCopy();
@@ -98,10 +135,21 @@
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
const formModel = reactive<HostQueryRequest>({
searchValue: undefined,
id: undefined,
name: undefined,
code: undefined,
address: undefined,
favorite: undefined,
tags: undefined,
extra: true
});
// 条件数量
const filterCount = computed(() => {
return objectTruthKeyCount(formModel, ['searchValue', 'extra']);
});
// 删除当前行
const deleteRow = async (id: number) => {
try {
@@ -133,7 +181,7 @@
// 重置条件
const reset = () => {
resetObject(formModel);
resetObject(formModel, ['extra']);
fetchTableData();
};

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

@@ -160,17 +160,15 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
import { Message, PaginationProps } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { tagColor } from '../types/const';
import { defaultPagination } from '@/types/table';
import { usePagination } from '@/types/table';
import useCopy from '@/hooks/copy';
import useFavorite from '@/hooks/favorite';
import { dataColor } from '@/utils';
import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
import { getTagList } from '@/api/meta/tag';
import { useCacheStore } from '@/store';
const tagSelector = ref();
const tableRenderData = ref<HostQueryResponse[]>([]);
@@ -180,7 +178,7 @@
const { copy } = useCopy();
const { toggle: toggleFavorite } = useFavorite('HOST');
const pagination = reactive(defaultPagination()) as PaginationProps;
const pagination = usePagination();
const formModel = reactive<HostQueryRequest>({
id: undefined,
@@ -244,21 +242,6 @@
};
fetchTableData();
// 加载 tags
const loadTags = async () => {
try {
const { data } = await getTagList('HOST');
// 设置到缓存
const cacheStore = useCacheStore();
cacheStore.set('tags', data);
// 重新初始化
tagSelector.value.initOptionData();
} catch {
Message.error('tag加载失败');
}
};
loadTags();
</script>
<style lang="less" scoped>

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

@@ -14,8 +14,8 @@
@openUpdateConfig="(e) => config.open(e)" />
<!-- 添加修改模态框 -->
<host-form-modal ref="modal"
@added="() => table.addedCallback()"
@updated="() => table.updatedCallback()" />
@added="modalAddCallback"
@updated="modalUpdateCallback" />
<!-- 配置面板 -->
<host-config-drawer ref="config" />
</div>
@@ -34,19 +34,52 @@
import HostCardList from '@/views/asset/host/components/host-card-list.vue';
import HostFormModal from './components/host-form-modal.vue';
import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
import { getTagList } from '@/api/meta/tag';
import { Message } from '@arco-design/web-vue';
const table = ref();
const card = ref();
const modal = ref();
const config = ref();
const appStore = useAppStore();
const cacheStore = useCacheStore();
// FIXME 临时
const renderTable = computed(() => appStore.hostView === 'card');
// 添加回调
const modalAddCallback = () => {
if (renderTable.value) {
table.value.addedCallback();
} else {
card.value.addedCallback();
}
};
// 修改回调
const modalUpdateCallback = () => {
console.log(renderTable.value);
if (renderTable.value) {
table.value.updatedCallback();
} else {
card.value.updatedCallback();
}
};
// 加载 tags
const loadTags = async () => {
try {
const { data } = await getTagList('HOST');
// 设置到缓存
cacheStore.set('tags', data);
} catch {
Message.error('tag加载失败');
}
};
loadTags();
// 卸载时清除 tags cache
onUnmounted(() => {
const cacheStore = useCacheStore();
cacheStore.set('tags', []);
cacheStore.set('hostKeys', []);
cacheStore.set('hostIdentities', []);

2
orion-ops-ui/src/views/asset/host/types/card.fields.ts
View File

@@ -12,11 +12,13 @@ export const fieldConfig = {
label: '主机地址',
dataIndex: 'address',
slotName: 'address',
height: '24px',
tooltip: true,
}, {
label: '主机标签',
dataIndex: 'tags',
slotName: 'tags',
rowAlign: 'start'
},
] as CardField[]
} as CardFieldConfig;

10
orion-ops-ui/src/views/asset/host/types/const.ts
View File

@@ -2,9 +2,9 @@
* tag 颜色
*/
export const tagColor = [
'#52C41A',
'#13C2C2',
'#1890FF',
'#9254de',
'#F759AB'
'arcoblue',
'green',
'purple',
'pinkpurple',
'magenta'
];

6
orion-ops-ui/src/views/user/role/components/role-table.vue
View File

@@ -126,18 +126,18 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { deleteRole, getRolePage, updateRoleStatus, RoleQueryRequest, RoleQueryResponse } from '@/api/user/role';
import { Message, PaginationProps } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { RoleStatusEnum } from '../types/enum.types';
import { toOptions, getEnumValue, toggleEnumValue, toggleEnum } from '@/utils/enum';
import { defaultPagination } from '@/types/table';
import { usePagination } from '@/types/table';
const tableRenderData = ref<RoleQueryResponse[]>([]);
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openGrant']);
const pagination = reactive(defaultPagination()) as PaginationProps;
const pagination = usePagination();
const formModel = reactive<RoleQueryRequest>({
id: undefined,

6
orion-ops-ui/src/views/user/user/components/user-table.vue
View File

@@ -148,11 +148,11 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { deleteUser, getUserPage, updateUserStatus, UserQueryRequest, UserQueryResponse } from '@/api/user/user';
import { Message, PaginationProps } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { UserStatusEnum } from '../types/enum.types';
import { defaultPagination } from '@/types/table';
import { usePagination } from '@/types/table';
import { toOptions, getEnumValue } from '@/utils/enum';
import { useUserStore } from '@/store';
@@ -160,7 +160,7 @@
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
const pagination = reactive(defaultPagination()) as PaginationProps;
const pagination = usePagination();
const formModel = reactive<UserQueryRequest>({
id: undefined,