perf: 优化应用历史版本列表

base-manager-ui/admin/src/pages/basicset/appmarket/components/AppDetailsPage.vue

@@ -45,66 +45,63 @@
     <div class="version-manage flex1">
       <div class="title">版本管理</div>
       <div class="table-content">
-        <a-table
-          :loading="loading"
+        <y-table
           size="small"
           bordered
           :scroll="{ y: 350 }"
           :columns="columns"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: current,
-            total: total,
-            pageSize: size,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            size: 'small',
-            pageSizeOptions: pageSizeOptions,
-            onChange: handleChange,
-            onShowSizeChange: showSizeChange,
-          }"
-          :data-source="tableData"
-          :rowKey="(record) => record.id"
+          :data="tableData"
+          :pageSize.sync="size"
+          :page.sync="page"
+          :total="total"
+          :loading="loading"
+          @changePagination="getVersions"
         >
-          <!-- 序号 -->
-          <span slot="num" slot-scope="text, record, index">{{
-            (current - 1) * size + index + 1
+          <span slot="index" slot-scope="{ index }">{{
+            (page - 1) * size + index + 1
           }}</span>
+
           <!-- 版本号 -->
-          <template slot="version" slot-scope="text">
-            v{{ text.version }}
+          <template slot="version" slot-scope="{ record }">
+            v{{ record.version }}
           </template>
           <!-- 应用包 -->
-          <template slot="fileName" slot-scope="text">
-            <a v-if="text.fileName" class="primary">{{ text.fileName }}</a>
+          <template slot="fileName" slot-scope="{ record }">
+            <a v-if="record.fileName" class="primary">{{ record.fileName }}</a>
             <span v-else>--</span>
           </template>
           <!-- 当前是否使用 -->
-          <template slot="used" slot-scope="text">
-            <a-tag v-if="text.used" color="blue"> 正在使用 </a-tag>
+          <template slot="used" slot-scope="{ record }">
+            <a-tag v-if="record.used" color="blue"> 正在使用 </a-tag>
             <span v-else>否</span>
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space size="middle">
-              <span
+              <a-button
+                type="link"
                 class="primary pointer"
-                :disabled="text.used ? true : false"
-                @click="handleUse(text.id)"
-                >使用</span
+                :disabled="record.used ? true : false"
+                @click="handleUse(record.id)"
+                >使用</a-button
               >
-              <span class="primary pointer" @click="handlePreview(text.id)"
-                >预览</span
+              <a-button
+                type="link"
+                class="primary pointer"
+                :disabled="record.used ? false : true"
+                @click="handlePreview(record.id)"
+                >预览</a-button
               >
-              <span
+              <a-button
+                type="link"
                 class="delete pointer"
                 v-permission="[1]"
-                @click="handleDel(text.id)"
-                >删除</span
+                @click="handleDel(record.id)"
+                >删除</a-button
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 站点树弹窗 -->
@@ -127,8 +124,8 @@ import {
   deleteVersion,
 } from "@/services/market";
 import CheckSite from "../modal/CheckSite.vue";
-import { pageSizeOptions } from "@/config/pageConfig.js";
 import { mapGetters } from "vuex";
+import YTable from "@/components/YTable.vue";
 export default {
   props: {
     // 应用信息
@@ -142,15 +139,15 @@ export default {
   },
   components: {
     CheckSite,
+    YTable,
   },
   data() {
     const columns = [
       {
         title: "序号",
-        dataIndex: "num",
         width: "65px",
         scopedSlots: {
-          customRender: "num",
+          customRender: "index",
         },
       },
       {
@@ -181,11 +178,10 @@ export default {
       columns,
       appId: this.$route.query.id,
       appInfo: {}, // 应用信息
-      current: 1,
+      page: 1,
       size: 10,
       total: 0,
       loading: false,
-      pageSizeOptions,
       form: {},
       tableData: [],
       siteVisible: false,
@@ -224,7 +220,7 @@ export default {
     async getVersions() {
       this.loading = true;
       let res = await getVersionList({
-        page: this.current,
+        page: this.page,
         size: this.size,
         appId: this.appId,
       });
@@ -304,17 +300,6 @@ export default {
       });
     },
 
-    // 翻页
-    handleChange(cur) {
-      this.current = cur;
-      this.getVersions();
-    },
-    // 改变每页显示数量
-    showSizeChange(cur, size) {
-      this.current = cur;
-      this.size = size;
-      this.getVersions();
-    },
     // 查看试用范围详情
     checkSite(siteList) {
       this.$refs.CheckSite.getSiteList(siteList);
@@ -387,4 +372,7 @@ export default {
 /deep/.ant-form-item {
   align-items: flex-start;
 }
+/deep/.ant-btn-link {
+  padding: 0px;
+}
 </style>