fix 逐步引入新版表格

CHANGELOG-BETA.md

@@ -11,6 +11,8 @@
 5. 【server】修复 docker 控制台网络选项卡页面空白（感谢@破冰）
 6. 【server】修复 节点历史监控统计图表时间查询不生效（感谢@九問）
 7. 【server】优化 SSH 脚本触发器支持传入参数当环境变量（感谢@小朱）
+8. 【server】修复 h2迁移其它数据库时部分数据丢失（感谢[@王先生](https://gitee.com/whz_gmg1)）[Gitee issues I9977K](https://gitee.com/dromara/Jpom/issues/I9977K)
+9. 【server】优化 逐步引入新版表格（构建、项目、节点、资产机器）（感谢[@a20070322](https://gitee.com/a20070322) [Gitee Pr 218](https://gitee.com/dromara/Jpom/pulls/218) / [Gitee Pr 220](https://gitee.com/dromara/Jpom/pulls/220) / [Gitee Pr 222](https://gitee.com/dromara/Jpom/pulls/222) ）
 
 ------
 

web-vue/src/components/customTable/index.vue

@@ -124,7 +124,7 @@
             </template>
           </template>
           <template v-if="tableLayout === 'table'">
-            <a-table v-bind="props" :columns="customColumn" :size="tableSize">
+            <a-table v-bind="props" :pagination="paginationByLayout" :columns="customColumn" :size="tableSize">
               <template v-if="slots.tableBodyCell" #bodyCell="slotProps">
                 <slot name="tableBodyCell" v-bind="slotProps"></slot>
               </template>
@@ -138,14 +138,14 @@
                 </a-col>
               </template>
               <a-col v-else :span="24">
-                <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="没有任何节点" />
+                <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="props.emptyDescription" />
               </a-col>
             </a-row>
             <div class="card-pagination">
-              <a-pagination v-bind="props.pagination" size="small" @change="paginationChange" />
+              <a-pagination v-bind="paginationByLayout" size="small" @change="paginationChange" />
             </div>
 
-            <slot name="cardPageTool"></slot>
+            <!-- <slot name="cardPageTool"></slot> -->
           </template>
           <template v-else>未知的表格类型</template>
         </a-card>
@@ -174,7 +174,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: customTableProps,
   slots: Object as CustomTableSlotsType,
-  emits: ['refresh', 'change'],
+  emits: ['refresh', 'change', 'changeTableLayout'],
   setup(props, { attrs, slots, emit }) {
     const userStore = useUserStore()
     const storageService: StorageService = new StorageService(props.tableName, {
@@ -266,6 +266,15 @@ export default defineComponent({
       }
       return Object.keys(slots).filter((key) => key === 'cardBodyCell').length > 0
     })
+    const sizeOptions = computed(() => {
+      if (tableLayout.value === 'card') {
+        return ['8', '12', '16', '20', '24']
+      }
+      return ['5', '10', '15', '20', '25', '30', '35', '40', '50']
+    })
+    const paginationByLayout = computed(() => {
+      return { ...props.pagination, pageSizeOptions: sizeOptions.value }
+    })
 
     onMounted(() => {
       // 判断是否需要存储
@@ -278,6 +287,7 @@ export default defineComponent({
     })
     const tableLayoutClick = () => {
       tableLayout.value = tableLayout.value === 'card' ? 'table' : 'card'
+      emit('changeTableLayout', tableLayout.value)
     }
     watch(
       () => tableLayout.value,
@@ -423,7 +433,8 @@ export default defineComponent({
       customCheckColumnList,
       resetCustomColumn,
       onCheckChange,
-      paginationChange
+      paginationChange,
+      paginationByLayout
     }
   }
 })

web-vue/src/components/customTable/props.ts

@@ -48,6 +48,11 @@ export const customTableProps = initDefaultProps(
     activePage: {
       type: Boolean,
       default: false
+    },
+    // 空数据时现在内容
+    emptyDescription: {
+      type: String,
+      deafult: '暂无任何数据'
     }
   },
   {
@@ -56,6 +61,7 @@ export const customTableProps = initDefaultProps(
     isShowTools: false,
     isHideRefresh: false,
     autoRefreshTime: 10,
-    activePage: false
+    activePage: false,
+    emptyDescription: '暂无任何数据'
   }
 )

web-vue/src/components/customTable/types/index.ts

@@ -27,6 +27,7 @@ export type CustomTableSlotsType = CustomSlotsType<{
   tableBodyCell?: any
   expandedRowRender?: any
   expandColumnTitle?: any
+  emptyDescription: string
   bodyCell?: (props: { text: any; value: any; record: Record<string, any>; index: number; column: ColumnType }) => void
   headerCell?: (props: { title: any; column: ColumnType }) => void
   customFilterIcon?: any

web-vue/src/pages/build/list-info.vue

@@ -19,6 +19,7 @@
       default-auto-refresh
       :auto-refresh-time="5"
       table-name="buildList"
+      empty-description="没有任何构建"
       :active-page="activePage"
       :layout="layout"
       size="middle"
@@ -41,6 +42,15 @@
         }
       "
       @refresh="loadData"
+      @change-table-layout="
+        (layoutType) => {
+          tableSelections = []
+          listQuery = CHANGE_PAGE(listQuery, {
+            pagination: { limit: layoutType === 'card' ? 8 : 10 }
+          })
+          loadData()
+        }
+      "
     >
       <template #title>
         <a-space wrap class="search-box">
@@ -119,11 +129,8 @@
             <a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
           </a-tooltip>
           <a-button type="primary" @click="handleAdd">新增</a-button>
-          <!-- <template v-if="layoutType === 'table'"> -->
+          <template v-if="tableSelections && tableSelections.length">
-          <template v-if="!tableSelections || tableSelections.length <= 0">
+            <a-dropdown>
-            <a-button type="primary" :disabled="true"> 操作 <DownOutlined /> </a-button>
-          </template>
-          <a-dropdown v-else>
               <template #overlay>
                 <a-menu>
                   <a-menu-item key="1" @click="batchBuild"> 批量构建 </a-menu-item>
@@ -133,10 +140,10 @@
               </template>
               <a-button type="primary"> 批量操作<DownOutlined /> </a-button>
             </a-dropdown>
-          <!-- </template> -->
+          </template>
-          <!-- <a-tooltip v-else title="表格视图才能使用批量操作功能">
+          <a-tooltip v-else title="表格视图才能使用批量操作功能">
-            <a-button :disabled="true" type="primary"> 操作 <DownOutlined /> </a-button>
+            <a-button :disabled="true" type="primary"> 批量操作 <DownOutlined /> </a-button>
-          </a-tooltip> -->
+          </a-tooltip>
 
           <!-- <a-button v-if="!layout" type="primary" @click="changeLayout">
             <template #icon>
@@ -492,7 +499,7 @@
           </a-space>
         </template>
       </template>
-      <template #cardPageTool>
+      <!-- <template #cardPageTool>
         <a-row type="flex" justify="center">
           <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
           <a-col>
@@ -519,7 +526,7 @@
             />
           </a-col>
         </a-row>
-      </template>
+      </template> -->
     </CustomTable>
     <!-- </template> -->
     <!-- </a-card> -->
@@ -704,8 +711,9 @@ import {
   CHANGE_PAGE,
   COMPUTED_PAGINATION,
   PAGE_DEFAULT_LIST_QUERY,
-  parseTime,
+  parseTime
-  PAGE_DEFAULT_SHOW_TOTAL
+  // PAGE_DEFAULT_SHOW_TOTAL,
+  // getCachePageLimit
 } from '@/utils/const'
 
 export default {
@@ -897,7 +905,8 @@ export default {
   },
   methods: {
     CHANGE_PAGE,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
+    // getCachePageLimit,
     // 分组数据
     loadGroupList() {
       getBuildGroupAll().then((res) => {

web-vue/src/pages/node/list.vue

@@ -29,6 +29,7 @@
         :auto-refresh-time="30"
         :active-page="activePage"
         table-name="nodeSearch"
+        empty-description="没有任何节点"
         :columns="columns"
         :data-source="list"
         bordered
@@ -49,6 +50,15 @@
           }
         "
         @refresh="loadData"
+        @change-table-layout="
+          (layoutType) => {
+            tableSelections = []
+            listQuery = CHANGE_PAGE(listQuery, {
+              pagination: { limit: layoutType === 'card' ? 8 : 10 }
+            })
+            loadData()
+          }
+        "
       >
         <template #title>
           <a-space>
@@ -430,7 +440,7 @@
             </a-row>
           </a-card>
         </template>
-        <template #cardPageTool>
+        <!-- <template #cardPageTool>
           <a-row type="flex" justify="center">
             <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
             <a-col>
@@ -457,7 +467,7 @@
               />
             </a-col>
           </a-row>
-        </template>
+        </template> -->
       </CustomTable>
       <!-- <template v-else-if="layoutType === 'card'">
           <a-row :gutter="[16, 16]">
@@ -654,9 +664,9 @@ import {
   formatDuration,
   renderSize,
   formatPercent2Number,
-  parseTime,
+  parseTime
-  PAGE_DEFAULT_SHOW_TOTAL,
+  // PAGE_DEFAULT_SHOW_TOTAL,
-  getCachePageLimit
+  // getCachePageLimit
 } from '@/utils/const'
 import { getWorkSpaceListAll } from '@/api/workspace'
 import CustomSelect from '@/components/customSelect'
@@ -848,14 +858,14 @@ export default {
       this.listQuery = { ...this.listQuery, '%name%': searchNodeName }
     }
 
-    this.changeLayout()
+    this.loadData()
     this.loadGroupList()
   },
 
   methods: {
     formatDuration,
     renderSize,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
     parseTime,
     CHANGE_PAGE,
     // 获取所有的分组
@@ -1140,22 +1150,22 @@ export default {
         }
       })
     },
-    // 切换视图
+    // // 切换视图
-    changeLayout() {
+    // changeLayout() {
-      if (!this.layoutType) {
+    //   if (!this.layoutType) {
-        const layoutType = localStorage.getItem('tableLayout')
+    //     const layoutType = localStorage.getItem('tableLayout')
-        // 默认表格
+    //     // 默认表格
-        this.layoutType = layoutType === 'card' ? 'card' : 'table'
+    //     this.layoutType = layoutType === 'card' ? 'card' : 'table'
-      } else {
+    //   } else {
-        this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
+    //     this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
-        localStorage.setItem('tableLayout', this.layoutType)
+    //     localStorage.setItem('tableLayout', this.layoutType)
-      }
+    //   }
-      this.listQuery = {
+    //   this.listQuery = {
-        ...this.listQuery,
+    //     ...this.listQuery,
-        limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
+    //     limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
-      }
+    //   }
-      this.loadData()
+    //   this.loadData()
-    },
+    // },
     onFinish() {
       if (this.drawerVisible) {
         // 打开节点 不刷新

web-vue/src/pages/system/assets/machine/machine-list.vue

@@ -1,6 +1,39 @@
 <template>
   <div>
-    <a-card :body-style="{ padding: '10px' }">
+    <!-- <a-card :body-style="{ padding: '10px' }"> -->
+    <!-- 卡片视图 -->
+    <!-- <template v-if="layoutType === 'card'"> </template> -->
+    <!-- 表格视图 -->
+    <!-- <template v-else-if="layoutType === 'table'"> -->
+    <CustomTable
+      is-show-tools
+      default-auto-refresh
+      :auto-refresh-time="30"
+      table-name="buildList"
+      empty-description="没有资产机器"
+      :active-page="activePage"
+      :columns="columns"
+      :data-source="list"
+      bordered
+      size="middle"
+      row-key="id"
+      :pagination="pagination"
+      :row-selection="rowSelection"
+      :scroll="{
+        x: 'max-content'
+      }"
+      @change="changePage"
+      @refresh="getMachineList"
+      @change-table-layout="
+        (layoutType) => {
+          tableSelections = []
+          listQuery = CHANGE_PAGE(listQuery, {
+            pagination: { limit: layoutType === 'card' ? 8 : 10 }
+          })
+          getMachineList()
+        }
+      "
+    >
       <template #title>
         <a-space wrap class="search-box">
           <a-input
@@ -56,7 +89,7 @@
           <a-button :loading="loading" type="primary" @click="getMachineList">搜索</a-button>
           <a-button type="primary" @click="addMachine">新增</a-button>
 
-          <a-dropdown v-if="layoutType === 'table'">
+          <a-dropdown v-if="tableSelections && tableSelections.length">
             <template #overlay>
               <a-menu>
                 <a-menu-item key="1" @click="syncToWorkspaceShow()"> 分配节点 </a-menu-item>
@@ -69,14 +102,9 @@
           <a-tooltip v-else title="表格视图才能使用同步配置功能">
             <a-button :disabled="true" type="primary"> 批量操作<DownOutlined /></a-button>
           </a-tooltip>
-          <a-button type="primary" @click="changeLayout">
+        </a-space>
-            <template #icon>
-              <LayoutOutlined v-if="layoutType === 'card'" />
-              <TableOutlined v-else />
       </template>
-
+      <template #tableHelp>
-            {{ layoutType === 'card' ? '卡片' : '表格' }}
-          </a-button>
         <a-tooltip>
           <template #title>
             <ul>
@@ -90,13 +118,57 @@
           </template>
           <QuestionCircleOutlined />
         </a-tooltip>
+      </template>
+      <template #tableBodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a-tooltip :title="text">
+            <a-button style="padding: 0" type="link" size="small" @click="showMachineInfo(record)">
+              {{ text }}
+            </a-button>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.tooltip">
+          <a-tooltip :title="text">
+            <span>{{ text }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.dataIndex === 'status'">
+          <a-tooltip
+            :title="`当前状态：${statusMap[record.status]} ${
+              record.statusMsg ? '状态消息：' + record.statusMsg : '还没有状态消息'
+            } `"
+          >
+            <a-tag :color="record.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
+              {{ statusMap[record.status] }}
+            </a-tag>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.duration">
+          <a-tooltip placement="topLeft" :title="formatDuration(text)">
+            <span>{{ formatDuration(text, '', 2) }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.duration2">
+          <a-tooltip placement="topLeft" :title="formatDuration((text || 0) * 1000)">
+            <span>{{ formatDuration((text || 0) * 1000, '', 2) }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.percent2Number">
+          <a-tooltip placement="topLeft" :title="`${(text && formatPercent2Number(text) + '%') || '-'}`">
+            <span>{{ (text && formatPercent2Number(text) + '%') || '-' }}</span>
+          </a-tooltip>
+        </template>
+
+        <template v-else-if="column.dataIndex === 'operation'">
+          <a-space>
+            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
+            <a-button type="primary" size="small" @click="syncToWorkspaceShow(record)">分配</a-button>
+            <a-button type="primary" danger size="small" @click="deleteMachineInfo(item)">删除</a-button>
           </a-space>
         </template>
-      <!-- 卡片视图 -->
+      </template>
-      <template v-if="layoutType === 'card'">
+
-        <a-row :gutter="[16, 16]">
+      <template #cardBodyCell="{ item }">
-          <template v-if="list && list.length">
-            <a-col v-for="(item, index) in list" :key="index" :span="6">
         <a-card :head-style="{ padding: '0 6px' }" :body-style="{ padding: '10px' }">
           <template #title>
             <a-row :gutter="[4, 0]">
@@ -183,13 +255,8 @@
             </a-button-group>
           </a-row>
         </a-card>
-            </a-col>
       </template>
-          <!-- </template> -->
+      <!-- <template #cardPageTool>
-          <a-col v-else :span="24">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="没有任何节点" />
-          </a-col>
-        </a-row>
         <a-row type="flex" justify="center">
           <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
           <a-col>
@@ -214,74 +281,11 @@
               "
               @change="getMachineList"
             />
-          </a-col>
+          </a-col> </a-row
-        </a-row>
+      ></template> -->
-      </template>
+    </CustomTable>
-      <!-- 表格视图 -->
+    <!-- </template> -->
-      <template v-else-if="layoutType === 'table'">
+    <!-- </a-card> -->
-        <a-table
-          :columns="columns"
-          :data-source="list"
-          bordered
-          size="middle"
-          row-key="id"
-          :pagination="pagination"
-          :row-selection="rowSelection"
-          :scroll="{
-            x: 'max-content'
-          }"
-          @change="changePage"
-        >
-          <template #bodyCell="{ column, text, record }">
-            <template v-if="column.dataIndex === 'name'">
-              <a-tooltip :title="text">
-                <a-button style="padding: 0" type="link" size="small" @click="showMachineInfo(record)">
-                  {{ text }}
-                </a-button>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.tooltip">
-              <a-tooltip :title="text">
-                <span>{{ text }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.dataIndex === 'status'">
-              <a-tooltip
-                :title="`当前状态：${statusMap[record.status]} ${
-                  record.statusMsg ? '状态消息：' + record.statusMsg : '还没有状态消息'
-                } `"
-              >
-                <a-tag :color="record.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
-                  {{ statusMap[record.status] }}
-                </a-tag>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.duration">
-              <a-tooltip placement="topLeft" :title="formatDuration(text)">
-                <span>{{ formatDuration(text, '', 2) }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.duration2">
-              <a-tooltip placement="topLeft" :title="formatDuration((text || 0) * 1000)">
-                <span>{{ formatDuration((text || 0) * 1000, '', 2) }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.percent2Number">
-              <a-tooltip placement="topLeft" :title="`${(text && formatPercent2Number(text) + '%') || '-'}`">
-                <span>{{ (text && formatPercent2Number(text) + '%') || '-' }}</span>
-              </a-tooltip>
-            </template>
-
-            <template v-else-if="column.dataIndex === 'operation'">
-              <a-space>
-                <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
-                <a-button type="primary" size="small" @click="syncToWorkspaceShow(record)">分配</a-button>
-              </a-space>
-            </template>
-          </template>
-        </a-table>
-      </template>
-    </a-card>
     <!-- 编辑区 -->
     <a-modal
       v-model:open="editVisible"
@@ -614,11 +618,11 @@ import {
   CHANGE_PAGE,
   COMPUTED_PAGINATION,
   PAGE_DEFAULT_LIST_QUERY,
-  PAGE_DEFAULT_SHOW_TOTAL,
+  // PAGE_DEFAULT_SHOW_TOTAL,
   formatDuration,
   parseTime,
-  formatPercent2Number,
+  formatPercent2Number
-  getCachePageLimit
+  // getCachePageLimit
 } from '@/utils/const'
 import CustomSelect from '@/components/customSelect'
 import { useAppStore } from '@/stores/app'
@@ -626,7 +630,7 @@ import { mapState } from 'pinia'
 import machineInfo from './machine-func'
 import { getWorkSpaceListAll } from '@/api/workspace'
 // import Upgrade from "@/pages/node/node-layout/system/upgrade.vue";
-import { Empty } from 'ant-design-vue'
+
 import { getWhiteList } from '@/api/node-system'
 import { getConfigData } from '@/api/system'
 import codeEditor from '@/components/codeEditor'
@@ -640,10 +644,9 @@ export default {
   },
   data() {
     return {
-      Empty,
       statusMap,
       listQuery: Object.assign({ order: 'descend', order_field: 'networkDelay' }, PAGE_DEFAULT_LIST_QUERY, {}),
-      sizeOptions: ['8', '12', '16', '20', '24'],
+      // sizeOptions: ['8', '12', '16', '20', '24'],
       list: [],
       groupList: [],
       loading: true,
@@ -774,7 +777,6 @@ export default {
           dataIndex: 'operation',
           width: '120px',
           fixed: 'right',
-
           align: 'center'
         }
       ],
@@ -790,6 +792,9 @@ export default {
     pagination() {
       return COMPUTED_PAGINATION(this.listQuery)
     },
+    activePage() {
+      return this.$attrs.routerUrl === this.$route.path
+    },
     rowSelection() {
       return {
         onChange: (selectedRowKeys) => {
@@ -801,13 +806,14 @@ export default {
   },
   mounted() {
     this.loadGroupList()
-    this.changeLayout()
+    this.getMachineList()
   },
   methods: {
     parseTime,
     formatDuration,
     formatPercent2Number,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
+    // getCachePageLimit,
     // 获取所有的分组
     loadGroupList() {
       machineListGroup().then((res) => {
@@ -978,22 +984,7 @@ export default {
       })
       window.open(newpage.href, '_blank')
     },
-    // 切换视图
+
-    changeLayout() {
-      if (!this.layoutType) {
-        const layoutType = localStorage.getItem('tableLayout')
-        // 默认表格
-        this.layoutType = layoutType === 'card' ? 'card' : 'table'
-      } else {
-        this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
-        localStorage.setItem('tableLayout', this.layoutType)
-      }
-      this.listQuery = {
-        ...this.listQuery,
-        limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
-      }
-      this.getMachineList()
-    },
     syncNodeWhiteConfig() {
       if (!this.tableSelections || this.tableSelections.length <= 0) {
         $notification.warn({

web-vue/src/utils/const.ts

@@ -93,11 +93,20 @@ export function COMPUTED_PAGINATION(queryParam: any, pageSizeOptions = PAGE_DEFA
  */
 export function CHANGE_PAGE(listQuery, { pagination, sorter }) {
   if (pagination && Object.keys(pagination).length) {
-    listQuery = { ...listQuery, page: pagination.current, limit: pagination.pageSize }
+    let limit = pagination.pageSize || pagination.limit || listQuery.limit
+    if (limit === -1) {
+      limit = getCachePageLimit()
+    }
+    listQuery = {
+      ...listQuery,
+      page: pagination.current || listQuery.page,
+      limit: limit
+    }
+
     //
-    localStorage.setItem(cachePageLimitKeyName, pagination.pageSize)
+    localStorage.setItem(cachePageLimitKeyName, limit)
     //
-    PAGE_DEFAULT_LIST_QUERY.limit = pagination.pageSize
+    PAGE_DEFAULT_LIST_QUERY.limit = limit
   }
   if (sorter && Object.keys(sorter).length) {
     listQuery = { ...listQuery, order: sorter.order, order_field: sorter.field }