diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm index 435b7cc6..70d655b0 100644 --- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm +++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm @@ -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})}) diff --git a/orion-ops-ui/src/assets/style/layout.less b/orion-ops-ui/src/assets/style/layout.less index ff62d46e..a3154a73 100644 --- a/orion-ops-ui/src/assets/style/layout.less +++ b/orion-ops-ui/src/assets/style/layout.less @@ -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; } diff --git a/orion-ops-ui/src/components/card-list/types.ts b/orion-ops-ui/src/components/card-list/types.ts deleted file mode 100644 index a7949a5e..00000000 --- a/orion-ops-ui/src/components/card-list/types.ts +++ /dev/null @@ -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; -} diff --git a/orion-ops-ui/src/components/card-list/index.vue b/orion-ops-ui/src/components/card/list/index.vue similarity index 90% rename from orion-ops-ui/src/components/card-list/index.vue rename to orion-ops-ui/src/components/card/list/index.vue index 46981ef3..6653a4d8 100644 --- a/orion-ops-ui/src/components/card-list/index.vue +++ b/orion-ops-ui/src/components/card/list/index.vue @@ -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)" /> @@ -28,20 +31,20 @@ @click="emits('add')"> + + - -
- - + +
-
-
+ @@ -133,7 +136,7 @@ @click="emits('add')" /> -
+
@@ -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({ + 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 | PropType, default: () => false }, + loading: { + type: Boolean as PropType, + default: () => false + }, cardHeight: Number, searchInputWidth: { type: String, @@ -267,6 +288,7 @@ } &-body { + display: block; margin-top: @top-height - 16px; padding-top: 4px; } diff --git a/orion-ops-ui/src/components/index.ts b/orion-ops-ui/src/components/index.ts index 3be71b6e..ea1293c9 100644 --- a/orion-ops-ui/src/components/index.ts +++ b/orion-ops-ui/src/components/index.ts @@ -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, diff --git a/orion-ops-ui/src/types/card.ts b/orion-ops-ui/src/types/card.ts new file mode 100644 index 00000000..2be009df --- /dev/null +++ b/orion-ops-ui/src/types/card.ts @@ -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 + }; + }); +}; diff --git a/orion-ops-ui/src/types/table.ts b/orion-ops-ui/src/types/table.ts index 617968a6..9de49222 100644 --- a/orion-ops-ui/src/types/table.ts +++ b/orion-ops-ui/src/types/table.ts @@ -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] - }); -}; - - /** * 创建行选择器 */ diff --git a/orion-ops-ui/src/utils/index.ts b/orion-ops-ui/src/utils/index.ts index 75a8a787..d949dc35 100644 --- a/orion-ops-ui/src/utils/index.ts +++ b/orion-ops-ui/src/utils/index.ts @@ -156,6 +156,15 @@ export function replaceNumber(value: string) { return value; } +/** + * 重设对象 + */ +export const resetObject = (obj: any) => { + Object.keys(obj).forEach(k => { + obj[k] = undefined; + }); +}; + /** * 获取当前页面的缩放值 */ diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue index 06e20d3b..16b09af3 100644 --- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue +++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue @@ -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">