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-04 15:47:38 +08:00
parent 0514ea0508
commit 27c24a6f5a
15 changed files with 231 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
View File

@@ -86,7 +86,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
#foreach($field in ${table.fields})
#if(${vue.enums.containsKey(${field.propertyName})})

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

@@ -75,6 +75,11 @@
box-shadow: 2px 2px 12px rgba(0, 0, 0, .15);
}
.card-descriptions {
height: 100%;
overflow-y: auto;
}
.usn {
user-select: none;
}

35
orion-ops-ui/src/components/card-list/types.ts
View File

@@ -1,35 +0,0 @@
import { ResponsiveValue } from '@arco-design/web-vue';
/**
* 创建卡片位置
*/
export type Position = 'head' | 'tail' | false
/**
* 卡片字段
*/
export interface CardRecord {
disabled?: boolean;
[name: string]: any;
}
/**
* col 响应式值
*/
export interface ColResponsiveValue extends ResponsiveValue {
span?: number;
offset?: number;
order?: number;
}
/**
* 显示的操作
*/
export interface HandleVisible {
disableAdd?: boolean;
disableSearchInput?: boolean;
disableFilter?: boolean;
disableSearch?: boolean;
disableReset?: boolean;
}

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

@@ -13,7 +13,10 @@
size="mini"
v-model:current="pagination.current"
v-model:page-size="pagination.pageSize"
v-bind="pagination" />
v-bind="pagination"
:auto-adjust="false"
@change="page => emits('pageChange', page, pagination.pageSize)"
@page-size-change="limit => emits('pageChange', 1, limit)" />
</div>
</div>
<!-- 操作部分 -->
@@ -28,20 +31,20 @@
@click="emits('add')">
<icon-plus />
</div>
<!-- 左侧侧操作槽位 -->
<slot name="leftHandle" />
</a-space>
<!-- 左侧侧操作槽位 -->
<slot name="leftHandle" />
</div>
<!-- 右侧固定 -->
<div class="card-list-handler-right">
<!-- 右侧操作槽位 -->
<slot name="rightHandle" />
<a-space>
<!-- 右侧操作槽位 -->
<slot name="rightHandle" />
<!-- 搜索框 -->
<div v-if="!handleVisible.disableSearchInput"
class="header-input-wrapper"
:style="{width: searchInputWidth}">
<a-input :default-value="searchValue"
<a-input v-model="searchValueRef"
size="small"
placeholder="输入名称/地址"
allow-clear
@@ -75,7 +78,7 @@
</div>
</div>
<!-- 身体部分 -->
<div class="card-list-layout-body">
<a-spin class="card-list-layout-body" :loading="loading">
<!-- 卡片列表 -->
<a-row v-if="list.length !== 0"
:gutter="cardLayoutGutter">
@@ -133,7 +136,7 @@
@click="emits('add')" />
</a-card>
</template>
</div>
</a-spin>
</div>
</template>
@@ -147,7 +150,7 @@
import { compile, computed, h, PropType } from 'vue';
import { useAppStore } from '@/store';
import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import { Position, CardRecord, ColResponsiveValue, HandleVisible } from './types';
import { Position, CardRecord, ColResponsiveValue, HandleVisible } from '@/types/card';
const appStore = useAppStore();
const headerWidth = computed(() => {
@@ -157,9 +160,23 @@
return `calc(100% - ${menuWidth}px)`;
});
const emits = defineEmits(['add', 'update:searchValue', 'search', 'reset']);
const searchValueRef = computed<string>({
get() {
return props.searchValue as string;
},
set(e) {
if (e) {
emits('update:searchValue', e);
} else {
emits('update:searchValue', null);
}
}
});
defineProps({
const emits = defineEmits(['add', 'update:searchValue', 'search',
'reset', 'pageChange']);
const props = defineProps({
key: {
type: String,
default: () => 'id'
@@ -168,6 +185,10 @@
type: Object as PropType<PaginationProps> | PropType<boolean>,
default: () => false
},
loading: {
type: Boolean as PropType<Boolean>,
default: () => false
},
cardHeight: Number,
searchInputWidth: {
type: String,
@@ -267,6 +288,7 @@
}
&-body {
display: block;
margin-top: @top-height - 16px;
padding-top: 4px;
}

2
orion-ops-ui/src/components/index.ts
View File

@@ -12,7 +12,7 @@ import {
} from 'echarts/components';
import Chart from './chart/index.vue';
import Breadcrumb from './breadcrumb/index.vue';
import CardList from './card-list/index.vue';
import CardList from './card/list/index.vue';
use([
CanvasRenderer,

88
orion-ops-ui/src/types/card.ts Normal file
View File

@@ -0,0 +1,88 @@
import { DescData, PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import { reactive } from 'vue';
/**
* 卡片字段
*/
export interface CardField {
field: string;
label: string;
render: (record: CardRecord) => string;
span?: number;
}
/**
* 创建卡片位置
*/
export type Position = 'head' | 'tail' | false;
/**
* 卡片实体
*/
export interface CardRecord {
disabled?: boolean;
[name: string]: any;
}
/**
* col 响应式值
*/
export interface ColResponsiveValue extends ResponsiveValue {
span?: number;
offset?: number;
order?: number;
}
/**
* 显示的操作
*/
export interface HandleVisible {
disableAdd?: boolean;
disableSearchInput?: boolean;
disableFilter?: boolean;
disableSearch?: boolean;
disableReset?: boolean;
}
/**
* 创建卡片列表列布局
*/
export const useColLayout = (): ColResponsiveValue => {
return {
xs: 24,
sm: 12,
md: 8,
lg: 8,
xl: 6,
xxl: 4,
};
};
/**
* 创建创建卡片列表分页
*/
export const usePagination = (): PaginationProps => {
return reactive({
total: 0,
current: 1,
pageSize: 18,
showTotal: true,
showPageSize: true,
pageSizeOptions: [12, 18, 36, 48, 96]
});
};
/**
* 转为卡片描述对象
*/
export const toCardDesc = (fields: CardField[], record: CardRecord): DescData[] => {
return fields.map(s => {
return {
field: s.field,
label: s.label,
value: s.render(record),
span: s.span || 3
};
});
};

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

@@ -1,5 +1,4 @@
import { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
import { ColResponsiveValue } from '@/components/card-list/types';
import { reactive } from 'vue';
/**
@@ -28,20 +27,6 @@ export const defaultRowSelection = (): TableRowSelection => {
};
};
/**
* 卡片列表列布局
*/
export const useCardColLayout = (): ColResponsiveValue => {
return {
xs: 24,
sm: 12,
md: 8,
lg: 8,
xl: 6,
xxl: 4,
};
};
/**
* 创建列表分页
*/
@@ -56,21 +41,6 @@ export const usePagination = (): PaginationProps => {
});
};
/**
* 创建卡片列表分页
*/
export const useCardPagination = (): PaginationProps => {
return reactive({
total: 0,
current: 1,
pageSize: 18,
showTotal: true,
showPageSize: true,
pageSizeOptions: [12, 18, 36, 48, 96]
});
};
/**
* 创建行选择器
*/

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

@@ -156,6 +156,15 @@ export function replaceNumber(value: string) {
return value;
}
/**
* 重设对象
*/
export const resetObject = (obj: any) => {
Object.keys(obj).forEach(k => {
obj[k] = undefined;
});
};
/**
* 获取当前页面的缩放值
*/

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

@@ -58,7 +58,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
<!-- 用户名 -->
<template #username="{ record }">

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

@@ -50,7 +50,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
<!-- 操作 -->
<template #handle="{ record }">

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

@@ -3,15 +3,17 @@
v-model:searchValue="formModel.name"
create-card-position="head"
:card-height="180"
:loading="loading"
:list="list"
:pagination="pagination"
:card-layout-cols="cardColLayout"
@add="add"
@search="search"
@reset="reset">
@reset="reset"
@search="fetchTableData"
@page-change="fetchTableData">
<!-- 标题 -->
<template #title="{ record }">
{{ record.name }}
{{ record.id }}
</template>
<!-- 标题拓展 -->
<template #extra="{ index }">
@@ -19,10 +21,24 @@
</template>
<!-- 卡片 -->
<template #card="{ record }">
{{ record }}
<a-descriptions class="card-descriptions"
:data="convert(record)"
:column="1">
<template #value="{ data }">
{{ data.field }}
<template v-if="data.field === 'id'">
<a-tag>{{ data.value }}</a-tag>
</template>
<template v-else>
{{ data.value }}
</template>
</template>
</a-descriptions>
</template>
<template #leftHandle>
<span>1</span>
</template>
</card-list>
{{ formModel }}
</template>
<script lang="ts">
@@ -32,36 +48,59 @@
</script>
<script setup lang="ts">
import { useCardPagination, useCardColLayout } from '@/types/table';
import { usePagination, useColLayout } from '@/types/card';
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { resetObject } from '@/utils';
import { convert } from '../types/card.fields';
const formModel = reactive({
name: undefined
});
const cardColLayout = useCardColLayout();
const pagination = useCardPagination();
const { loading, setLoading } = useLoading();
const cardColLayout = useColLayout();
const pagination = usePagination();
const list = ref<Array<any>>([]);
for (let i = 0; i < 5; i++) {
list.value.push({
id: i + 1,
name: `名称 ${i + 1}`,
host: `192.168.1.${i}`,
disabled: i === 0
});
}
pagination.total = 270;
// 切换页码
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
console.log(page, limit, form);
setLoading(true);
setTimeout(() => {
try {
const t = 90;
for (let i = 0; i < t; i++) {
list.value.push({
id: i + 1,
name: `名称 ${i + 1}`,
address: `192.168.1.${i}`,
disabled: i === 0
});
}
pagination.total = t;
pagination.current = page;
pagination.pageSize = limit;
setLoading(false);
} catch (e) {
} finally {
setLoading(false);
}
}, 300);
};
fetchTableData();
const add = () => {
console.log('add');
};
const search = () => {
console.log('search');
};
const reset = () => {
console.log('reset');
resetObject(formModel);
fetchTableData();
};
</script>
<style scoped lang="less">

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

@@ -79,7 +79,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
<!-- 编码 -->
<template #code="{ record }">

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

@@ -0,0 +1,30 @@
import { CardField, CardRecord, toCardDesc } from '@/types/card';
export const fields = [
{
field: 'id',
label: 'id',
render: r => r.id,
}, {
field: 'name',
label: '主机名称',
render: r => r.name,
}, {
field: 'code',
label: '主机编码',
render: r => 'code',
}, {
field: 'address',
label: '主机地址',
render: r => 'address',
}, {
field: 'tag',
label: '标签',
render: r => 'tag',
},
] as CardField[];
export const convert = (record: CardRecord) => {
return toCardDesc(fields, record);
};

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

@@ -54,7 +54,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
<!-- 编码 -->
<template #code="{ record }">

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

@@ -69,7 +69,7 @@
:data="tableRenderData"
:pagination="pagination"
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
@page-size-change="(size) => fetchTableData(pagination.current, size)"
@page-size-change="(size) => fetchTableData(1, size)"
:bordered="false">
<!-- 状态 -->
<template #status="{ record }">