perf: 优化

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

@@ -8,7 +8,7 @@
           width="50"
           height="50"
           v-if="appInfo.appIconPath"
-          :src="api + appInfo.appIconPath"
+          :src="appInfo.appIconPath"
         />
         <div class="name">{{ appInfo.appName }}</div>
         <div class="version">当前版本：v{{ appInfo.version }}</div>
@@ -20,7 +20,7 @@
           :wrapper-col="{ span: 22 }"
         >
           <a-form-model-item label="应用主题">
-            {{ filterItems(appInfo.appThemeName, appDict.appThemeName) }}
+            {{ filterItems(appInfo.appThemeName) }}
           </a-form-model-item>
           <a-form-model-item label="应用简介">
             {{ appInfo.summary }}
@@ -45,60 +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="record.used ? true : false"
+                @click="handleUse(record.id)"
+                >使用</a-button
+              >
+              <a-button
+                type="link"
                 class="primary pointer"
-                :disabled="text.used ? true : false"
-                @click="handleUse(text.id)"
-                >使用</span
+                :disabled="record.used ? false : true"
+                @click="handlePreview(record.id)"
+                >预览</a-button
               >
-              <span class="primary pointer" @click="handlePreview(text.id)"
-                >预览</span
+              <a-button
+                type="link"
+                class="delete pointer"
+                v-permission="[1]"
+                @click="handleDel(record.id)"
+                >删除</a-button
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 站点树弹窗 -->
@@ -117,11 +120,12 @@ import {
   getVersionList,
   usedVersion,
   previewVersion,
+  getCategoryList,
+  deleteVersion,
 } from "@/services/market";
 import CheckSite from "../modal/CheckSite.vue";
-import { pageSizeOptions } from "@/config/pageConfig.js";
-import { filterItems } from "@/utils";
 import { mapGetters } from "vuex";
+import YTable from "@/components/YTable.vue";
 export default {
   props: {
     // 应用信息
@@ -135,15 +139,15 @@ export default {
   },
   components: {
     CheckSite,
+    YTable,
   },
   data() {
     const columns = [
       {
         title: "序号",
-        dataIndex: "num",
         width: "65px",
         scopedSlots: {
-          customRender: "num",
+          customRender: "index",
         },
       },
       {
@@ -153,9 +157,7 @@ export default {
       {
         title: "更新说明",
         width: "40%",
-        customRender: (text) => {
-          return <span>{text.notes ? text.notes : "--"}</span>;
-        },
+        dataIndex: "notes",
       },
       {
         title: "应用包",
@@ -172,29 +174,41 @@ export default {
       },
     ];
     return {
-      filterItems,
       api: process.env.VUE_APP_API_BASE_URL + "/",
       columns,
       appId: this.$route.query.id,
       appInfo: {}, // 应用信息
-      current: 1,
+      page: 1,
       size: 10,
       total: 0,
       loading: false,
-      pageSizeOptions,
       form: {},
       tableData: [],
       siteVisible: false,
+      categoryList: [],
     };
   },
   computed: {
     ...mapGetters("site", ["appDict"]),
   },
   created() {
+    this.getCategoryList();
     this.getAppInfo();
     this.getVersions();
   },
   methods: {
+    // 获取分类列表
+    async getCategoryList() {
+      let res = await getCategoryList({
+        page: 1,
+        size: -1,
+        siteId: this.siteId,
+      });
+      if (res.data.code === 1) {
+        let { data } = res.data.data;
+        this.categoryList = data;
+      }
+    },
     // 获取应用详情
     async getAppInfo() {
       let res = await getAppInfo({ id: this.appId });
@@ -206,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,
       });
@@ -259,22 +273,47 @@ export default {
         window.open(routeUrl.href, "_blank");
       }
     },
-    // 翻页
-    handleChange(cur) {
-      this.current = cur;
-      this.getVersions();
+
+    // 删除
+    handleDel(id) {
+      let _this = this;
+      _this.$confirm({
+        title: "系统提示",
+        content: "删除不可恢复，确定要删除吗？",
+        okText: "确定",
+        okType: "danger",
+        cancelText: "取消",
+        centered: true,
+        icon: "exclamation-circle",
+        maskClosable: true,
+        async onOk() {
+          let res = await deleteVersion({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            _this.$message.success(msg);
+            _this.getVersions();
+          }
         },
-    // 改变每页显示数量
-    showSizeChange(cur, size) {
-      this.current = cur;
-      this.size = size;
-      this.getVersions();
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
     },
+
     // 查看试用范围详情
     checkSite(siteList) {
       this.$refs.CheckSite.getSiteList(siteList);
       this.siteVisible = true;
     },
+    filterItems(appThemeName) {
+      if (!appThemeName) return;
+      let arr = this.categoryList.find((v) => v.id == appThemeName);
+      if (arr) {
+        return arr.categoryName;
+      } else {
+        return "--";
+      }
+    },
   },
 };
 </script>
@@ -333,4 +372,7 @@ export default {
 /deep/.ant-form-item {
   align-items: flex-start;
 }
+/deep/.ant-btn-link {
+  padding: 0px;
+}
 </style>