修改模板.

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

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

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

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

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)" />
           </div>
         </div>
         <!-- 操作部分 -->
@@ -28,20 +31,20 @@
                    @click="emits('add')">
                 <icon-plus />
               </div>
-            </a-space>
               <!-- 左侧侧操作槽位 -->
               <slot name="leftHandle" />
+            </a-space>
           </div>
           <!-- 右侧固定 -->
           <div class="card-list-handler-right">
+            <a-space>
               <!-- 右侧操作槽位 -->
               <slot name="rightHandle" />
-            <a-space>
               <!-- 搜索框 -->
               <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;
     }

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,

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

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]
-  });
-};
-
-
 /**
  * 创建行选择器
  */

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;
+  });
+};
+
 /**
  * 获取当前页面的缩放值
  */

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">
       <!-- 用户名 -->
       <template #username="{ record }">

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

@@ -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 }">

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

@@ -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 { loading, setLoading } = useLoading();
-  const pagination = useCardPagination();
+  const cardColLayout = useColLayout();
+  const pagination = usePagination();
   const list = ref<Array<any>>([]);
 
-  for (let i = 0; i < 5; i++) {
+  // 切换页码
+  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}`,
-      host: `192.168.1.${i}`,
+            address: `192.168.1.${i}`,
             disabled: i === 0
           });
         }
-  pagination.total = 270;
+        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">

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

@@ -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 }">

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

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

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

@@ -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 }">

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

@@ -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 }">