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

1
orion-ops-ui/src/api/asset/host.ts
View File

@@ -23,6 +23,7 @@ export interface HostUpdateRequest extends HostCreateRequest {
* 主机查询请求
*/
export interface HostQueryRequest extends Pagination {
searchValue?: string;
id?: number;
name?: string;
code?: string;

4
orion-ops-ui/src/assets/style/layout.less
View File

@@ -80,6 +80,10 @@
cursor: pointer;
}
.card-filter-wrapper {
padding: 18px 24px 14px 24px;
}
.usn {
user-select: none;
}

71
orion-ops-ui/src/components/card/list/index.vue
View File

@@ -26,7 +26,7 @@
<a-space>
<!-- 创建 -->
<div v-permission="addPermission"
v-if="!handleVisible.disableAdd"
v-show="!handleVisible.disableAdd"
class="header-icon-wrapper"
title="创建"
@click="emits('add')">
@@ -53,12 +53,28 @@
@change="e => emits('update:searchValue', e)"
@keydown.enter="emits('search')" />
</div>
<!-- 过滤 -->
<div v-if="!handleVisible.disableFilter"
class="header-icon-wrapper"
title="选择过滤条件">
<icon-filter />
</div>
<!-- 过滤条件 -->
<a-popover position="br" trigger="click" content-class="card-filter-wrapper">
<div v-if="!handleVisible.disableFilter"
ref="filterRef"
class="header-icon-wrapper"
title="选择过滤条件">
<a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
<icon-filter />
</a-badge>
</div>
<template #content>
<!-- 过滤表单 -->
<slot name="filterContent" />
<!-- 操作按钮 -->
<div class="filter-bottom-container">
<a-space>
<a-button size="mini" @click="filterReset">重置</a-button>
<a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
</a-space>
</div>
</template>
</a-popover>
<!-- 搜索 -->
<div v-if="!handleVisible.disableSearch"
class="header-icon-wrapper"
@@ -119,9 +135,10 @@
<template v-if="fieldConfig && fieldConfig.fields">
<div :class="['fields-container', fieldConfig.bodyClass]">
<template v-for="(field, index) in fieldConfig.fields">
<a-row align="center"
<a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
:style="{
'margin-bottom': fieldConfig.rowGap || '10px'
'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '10px') : false,
'height': fieldConfig.height || field.height || 'unset'
}">
<!-- label -->
<a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
@@ -165,7 +182,7 @@
</a-col>
<!-- 添加卡片 -->
<a-col v-permission="addPermission"
v-if="createCardPosition === 'tail'"
v-show="createCardPosition === 'tail'"
v-bind="cardLayoutCols">
<create-card :card-height="cardHeight"
:create-card-description="createCardDescription"
@@ -191,10 +208,12 @@
</script>
<script setup lang="ts">
import { compile, computed, h, PropType } from 'vue';
import { compile, computed, h, PropType, ref } from 'vue';
import { useAppStore } from '@/store';
import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import { Position, CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig } from '@/types/card';
import { CardRecord, ColResponsiveValue, HandleVisible, CardFieldConfig, CardPosition } from '@/types/card';
import fieldConfig from '@/views/asset/host/types/card.fields';
import { triggerMouseEvent } from '@/utils';
const appStore = useAppStore();
const headerWidth = computed(() => {
@@ -204,6 +223,8 @@
return `calc(100% - ${menuWidth}px)`;
});
const filterRef = ref();
const searchValueRef = computed<string>({
get() {
return props.searchValue as string;
@@ -238,6 +259,10 @@
default: () => []
},
cardHeight: Number,
filterCount: {
type: Number,
default: () => 0
},
searchInputWidth: {
type: String,
default: () => '200px'
@@ -251,7 +276,7 @@
default: () => '点击此处进行创建'
},
createCardPosition: {
type: String as PropType<Position>,
type: String as PropType<CardPosition>,
default: () => '暂无数据 点击此处进行创建'
},
cardLayoutGutter: {
@@ -306,6 +331,18 @@
}
};
// 重置过滤
const filterReset = () => {
emits('reset');
triggerMouseEvent(filterRef);
};
// 搜索
const filterSearch = () => {
emits('search');
triggerMouseEvent(filterRef);
};
</script>
<style scoped lang="less">
@@ -371,7 +408,6 @@
align-items: center;
}
}
}
.header-icon-wrapper {
@@ -392,6 +428,12 @@
background: var(--color-fill-3);
}
.filter-bottom-container {
padding-top: 14px;
display: flex;
justify-content: flex-end;
}
:deep(.create-card) {
&-body {
@@ -439,6 +481,7 @@
padding-right: 8px;
font-size: 14px;
font-weight: 500;
user-select: none;
}
.field-value {

13
orion-ops-ui/src/types/card.ts
View File

@@ -2,14 +2,19 @@ import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import { reactive } from 'vue';
/**
* 对齐方式
* 字段对齐方式
*/
export type Align = 'left' | 'center' | 'right';
/**
* 行对齐方式
*/
export type RowAlign = 'stretch' | 'center' | 'end' | 'start';
/**
* 创建卡片位置
*/
export type Position = 'head' | 'tail' | false;
export type CardPosition = 'head' | 'tail' | false;
/**
* 卡片字段配置
@@ -22,6 +27,8 @@ export interface CardFieldConfig {
labelOffset?: number;
labelAlign?: Align;
valueAlign?: Align;
rowAlign?: RowAlign;
height?: string;
labelClass?: string;
valueClass?: string;
@@ -35,6 +42,8 @@ export interface CardField {
label: string;
dataIndex: string;
slotName?: string;
rowAlign?: RowAlign;
height?: string;
labelClass?: string;
valueClass?: string;
ellipsis?: boolean;

26
orion-ops-ui/src/types/table.ts
View File

@@ -1,32 +1,6 @@
import { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
import { reactive } from 'vue';
/**
* FIXME DELETE
* 默认分页
*/
export const defaultPagination = (): PaginationProps => {
return {
current: 1,
pageSize: 10,
showTotal: true,
showPageSize: true,
pageSizeOptions: [10, 20, 30, 50, 100]
};
};
/**
* FIXME DELETE
* 默认行选择器
*/
export const defaultRowSelection = (): TableRowSelection => {
return {
type: 'checkbox',
showCheckedAll: true,
onlyCurrent: true,
};
};
/**
* 创建列表分页
*/

18
orion-ops-ui/src/utils/index.ts
View File

@@ -159,12 +159,26 @@ export function replaceNumber(value: string) {
/**
* 重设对象
*/
export const resetObject = (obj: any) => {
Object.keys(obj).forEach(k => {
export const resetObject = (obj: any, ignore: string[] = []) => {
Object.keys(obj)
.filter(s => !ignore.includes(s))
.forEach(k => {
obj[k] = undefined;
});
};
/**
* 重设对象
*/
export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
return Object.keys(obj)
.filter(s => !ignore.includes(s))
.reduce(function(acc, curr) {
const currVal = obj[curr];
return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
}, 0);
};
/**
* 获取当前页面的缩放值
*/

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,