perf: 优化皮肤管理板块

base-manager-ui/admin/src/pages/basicset/surface/AddSurfaceTemplate.vue

@@ -20,7 +20,7 @@
             </a-space>
             <div style="width: 300px">
               <a-input-search
-                v-model="leftVal"
+                v-model="templateTable.searchForm.productName"
                 allowClear
                 placeholder="请输入设备名称进行搜索"
                 enter-button="搜索"
@@ -31,52 +31,47 @@
           <!-- 表格 -->
           <div class="table-content">
             <!-- 表格 -->
-            <a-table
-              bordered
+            <y-table
               size="middle"
+              :columns="templateTable.columns"
+              :data="templateTable.data"
+              :pageSize.sync="templateTable.size"
+              :page.sync="templateTable.page"
+              :total="templateTable.total"
+              :loading="templateTable.loading"
               :scroll="{ y: 550 }"
-              :loading="leftLoading"
               :pagination="{
-                showTotal: (total) => `共 ${total} 条`,
-                current: leftCurrent,
-                total: leftTotal,
-                defaultPageSize: 10000,
-              }"
-              :columns="leftColumns"
-              :data-source="skinTemplate"
-              :rowKey="(record) => record.id"
-              :row-selection="{
-                onChange: onSelectChange,
-                selectedRowKeys: leftSelectedRowKeys,
+                showSizeChanger: false,
+                showQuickJumper: false,
               }"
+              @changePagination="getTemplateList"
             >
-              <template slot="num" slot-scope="text, record, index">
-                <span>
-                  {{ (leftCurrent - 1) * leftSize + index + 1 }}
-                </span>
-              </template>
+              <span slot="index" slot-scope="{ index }">{{
+                (templateTable.page - 1) * templateTable.size + index + 1
+              }}</span>
+
               <!-- 创建日期 -->
-              <template slot="createTime" slot-scope="text">
-                {{ text.createTime | dateFormat }}
+              <template slot="createTime" slot-scope="{ record }">
+                {{ record.createTime | dateFormat }}
               </template>
               <!-- 操作 -->
-              <template slot="action" slot-scope="text">
+              <template slot="action" slot-scope="{ record }">
                 <a-space size="middle">
                   <a
                     href="javascript:;"
                     class="primary"
-                    @click="handleEdit(text)"
+                    @click="handleEdit(record)"
                     >编辑</a
                   >
                   <a
                     href="javascript:;"
                     class="delete"
-                    @click="handleDel(text.id)"
+                    @click="handleDel(record.id)"
                     >删除</a
                   >
                 </a-space>
               </template>
-            </a-table>
+            </y-table>
           </div>
         </a-card>
       </div>
@@ -93,14 +88,14 @@
               </a-space>
             </div>
             <a-select
-              v-model="rightVal"
+              v-model="templateFieldTable.searchForm.templateId"
               style="width: 220px"
               default-value="all"
               @change="handleChange"
             >
               <a-select-option value=""> 全部皮肤模板 </a-select-option>
               <a-select-option
-                v-for="v in skinTemplate"
+                v-for="v in templateTable.data"
                 :key="v.id"
                 :value="v.id"
               >
@@ -111,68 +106,50 @@
           <!-- 表格 -->
           <div class="table-content">
             <!-- 表格 -->
-            <a-table
-              bordered
-              :scroll="{ y: 550 }"
-              :pagination="{
-                showTotal: (total) => `共 ${total} 条`,
-                current: rightCurrent,
-                total: rightTotal,
-                pageSize: rightSize,
-                showSizeChanger: true,
-                showQuickJumper: true,
-                pageSizeOptions: pageSizeOptions,
-                onChange: changeRight,
-                onShowSizeChange: showSizeChangeRight,
-              }"
-              :loading="rightLoading"
+            <y-table
               size="middle"
-              :rowKey="(record) => record.id"
-              :row-selection="{
-                selectedRowKeys: rightSelectedRowKeys,
-                onChange: onRightSelectChange,
-              }"
-              :columns="rightColumns"
-              :data-source="fieldList"
+              :columns="templateFieldTable.columns"
+              :data="templateFieldTable.data"
+              :pageSize.sync="templateFieldTable.size"
+              :page.sync="templateFieldTable.page"
+              :total="templateFieldTable.total"
+              :loading="templateFieldTable.loading"
+              :scroll="{ y: 550 }"
+              @changePagination="getFieldList"
             >
-              <template slot="num" slot-scope="text, record, index">
-                <span>
-                  {{ (rightCurrent - 1) * rightSize + index + 1 }}
-                </span>
-              </template>
+              <span slot="index" slot-scope="{ index }">{{
+                (templateFieldTable.page - 1) * templateFieldTable.size +
+                index +
+                1
+              }}</span>
               <!-- 数据类型 -->
-              <template slot="fieldType" slot-scope="text">
-                {{ text.fieldType === "1" ? "颜色" : "图片" }}
+              <template slot="fieldType" slot-scope="{ record }">
+                {{ record.fieldType === "1" ? "颜色" : "图片" }}
               </template>
               <!-- 是否使用 -->
-              <template slot="enabled" slot-scope="text">
-                <span>
-                  {{ text.enabled === 1 ? "是" : "否" }}
-                </span>
-              </template>
-              <!-- 排序 -->
-              <template slot="fieldOrderNo" slot-scope="text">
+              <template slot="enabled" slot-scope="{ record }">
                 <span>
-                  {{ text.fieldOrderNo ? text.fieldOrderNo : "--" }}
+                  {{ record.enabled === 1 ? "是" : "否" }}
                 </span>
               </template>
+
               <!-- 创建日期 -->
-              <template slot="createTime" slot-scope="text">
-                {{ text.createTime | dateFormat }}
+              <template slot="createTime" slot-scope="{ record }">
+                {{ record.createTime | dateFormat }}
               </template>
               <!-- 操作 -->
-              <template slot="action" slot-scope="text">
+              <template slot="action" slot-scope="{ record }">
                 <a-space size="middle">
-                  <a class="primary" @click="handleEditRight(text)">编辑</a>
+                  <a class="primary" @click="handleEditRight(record)">编辑</a>
                   <a
                     href="javascript:;"
                     class="delete"
-                    @click="handleDelRight(text.id)"
+                    @click="handleDelRight(record.id)"
                     >删除</a
                   >
                 </a-space>
               </template>
-            </a-table>
+            </y-table>
           </div>
         </a-card>
       </div>
@@ -188,7 +165,7 @@
     <!-- 新增模板属性弹窗 -->
     <AddField
       ref="AddField"
-      :tempLateList="skinTemplate"
+      :tempLateList="templateTable.data"
       :titleField="titleField"
       :visibleField.sync="visibleField"
       @addField="addField"
@@ -206,12 +183,33 @@ import {
 } from "@/services/surface";
 import AddTemplate from "./modal/AddTemplate.vue";
 import AddField from "./modal/AddField.vue";
-import { pageSizeOptions } from "@/config/pageConfig.js";
-const leftColumns = [
+import YTable from "@/components/YTable.vue";
+export default {
+  components: {
+    AddTemplate,
+    AddField,
+    YTable,
+  },
+  data() {
+    return {
+      visibleTemplate: false,
+      visibleField: false,
+      titleTemplate: "",
+      titleField: "",
+      templateTable: {
+        loading: false,
+        page: 1,
+        size: 1000,
+        total: 0,
+        data: [],
+        searchForm: {
+          productName: "",
+        },
+        columns: [
           {
             title: "序号",
-    width: "6%",
-    scopedSlots: { customRender: "num" },
+            width: "80px",
+            scopedSlots: { customRender: "index" },
           },
           {
             title: "设备名称",
@@ -234,12 +232,22 @@ const leftColumns = [
               customRender: "action",
             },
           },
-];
-const rightColumns = [
+        ],
+      },
+      templateFieldTable: {
+        loading: false,
+        page: 1,
+        size: 10,
+        total: 0,
+        data: [],
+        searchForm: {
+          templateId: "",
+        },
+        columns: [
           {
             title: "序号",
-    width: "6%",
-    scopedSlots: { customRender: "num" },
+            width: "80px",
+            scopedSlots: { customRender: "index" },
           },
           {
             title: "字段名称",
@@ -287,34 +295,9 @@ const rightColumns = [
               customRender: "action",
             },
           },
-];
-export default {
-  components: {
-    AddTemplate,
-    AddField,
+        ],
       },
-  data() {
-    return {
-      leftColumns,
-      rightColumns,
-      leftLoading: false,
-      rightLoading: false,
-      leftCurrent: 1,
-      leftSize: -1,
-      leftTotal: 0,
-      rightCurrent: 1,
-      rightSize: 10,
-      rightTotal: 0,
-      pageSizeOptions,
-      visibleTemplate: false,
-      visibleField: false,
-      titleTemplate: "",
-      titleField: "",
-      leftVal: "", // 左边搜索
-      rightVal: "", // 右边搜索
       productList: [], // 设备列表
-      skinTemplate: [], // 皮肤模板列表
-      fieldList: [], // 属性列表
       leftSelectedRowKeys: [],
       rightSelectedRowKeys: [],
     };
@@ -333,42 +316,42 @@ export default {
     },
     //   获取模板列表
     async getTemplateList(search = {}) {
-      this.leftLoading = true;
+      this.templateTable.loading = true;
       let res = await getTemplateList({
-        page: this.leftCurrent,
-        size: this.leftSize,
-        productName: `%${this.leftVal}%`,
+        page: this.templateTable.page,
+        size: this.templateTable.size,
+        productName: `%${this.templateTable.searchForm.productName}%`,
         ...search,
       });
       let { pageInfo, data } = res.data.data;
-      if (!data.length && this.leftCurrent > 1) {
-        this.leftCurrent -= 1;
+      if (!data.length && this.templateTable.page > 1) {
+        this.templateTable.page -= 1;
         this.getTemplateList();
       }
-      this.leftTotal = pageInfo.totalResult;
-      this.skinTemplate = data.sort((a, b) => {
+      this.templateTable.total = pageInfo.totalResult;
+      this.templateTable.data = data.sort((a, b) => {
         return b.createTime - a.createTime;
       });
-      this.leftLoading = false;
+      this.templateTable.loading = false;
     },
     // 获取属性字段列表()
     async getFieldList(search = {}) {
-      this.rightLoading = true;
+      this.templateFieldTable.loading = true;
       let res = await getFieldList({
-        page: this.rightCurrent,
-        size: this.rightSize,
+        page: this.templateFieldTable.page,
+        size: this.templateFieldTable.size,
         skinId: 0,
-        templateId: this.rightVal,
+        templateId: this.templateFieldTable.searchForm.templateId,
         ...search,
       });
       let { pageInfo, data } = res.data.data;
-      if (!data.length && this.rightCurrent > 1) {
-        this.rightCurrent -= 1;
+      if (!data.length && this.templateFieldTable.page > 1) {
+        this.templateFieldTable.page -= 1;
         this.getFieldList();
       }
-      this.fieldList = data;
-      this.rightTotal = pageInfo.totalResult;
-      this.rightLoading = false;
+      this.templateFieldTable.data = data;
+      this.templateFieldTable.total = pageInfo.totalResult;
+      this.templateFieldTable.loading = false;
     },
     //   新增模板
     handleAddTemplate() {
@@ -382,36 +365,16 @@ export default {
       this.visibleField = true;
       this.$refs.AddField.onAdd();
     },
-    //   左边翻页
-    changeLeft(num) {
-      this.leftCurrent = num;
-      this.getTemplateList();
-    },
-    // 左边改变每页显示数量
-    showSizeChange(current, size) {
-      this.leftCurrent = current;
-      this.leftSize = size;
-      this.getTemplateList();
-    },
-    // 右边翻页
-    changeRight(num) {
-      this.rightCurrent = num;
-      this.getFieldList();
-    },
-    // 右边改变显示数量
-    showSizeChangeRight(current, size) {
-      this.rightCurrent = current;
-      this.rightSize = size;
-      this.getFieldList();
-    },
     // 左边搜索
     onSearchLift() {
-      this.leftCurrent = 1;
+      this.templateTable.page = 1;
+      this.leftSelectedRowKeys = [];
       this.getTemplateList();
     },
     // 右边搜索
     handleChange() {
-      this.rightCurrent = 1;
+      this.templateFieldTable.page = 1;
+      this.rightSelectedRowKeys = [];
       this.getFieldList();
     },
     // 左边选择

base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue

@@ -60,6 +60,20 @@ import InfoDisSkin from "../infoDisSkin/InfoDisSkin.vue";
 import DefaultShow from "../defaultshow/DefaultShow.vue";
 import { mapState, mapMutations } from "vuex";
 import { filterItems } from "@/utils";
+const skinCompontens = {
+  pdj: "LandscapeMode",
+  ckp: "WindowSkin",
+  hjq: "CallOutSkin",
+  jzxsp: "CentralizeSkin",
+  dsj: "SignDevicekin",
+  pjq: "AppraiseSkin",
+  zzfwzd: "SelfService",
+  tdj: "WriteFormSkin",
+  ybj: "SampleFormSkin",
+  xxfbp: "InformationSkin",
+  zmszzfwzd: "DesSelfService",
+  xxgk: "InfoDisSkin",
+};
 export default {
   components: {
     LandscapeMode,
@@ -79,6 +93,7 @@ export default {
   props: {},
   data() {
     return {
+      skinCompontens,
       filterItems,
       skinInfo: {},
     };
@@ -88,47 +103,8 @@ export default {
     ...mapState("site", ["imageResolution", "curSkin", "curSkinIndex"]),
     component() {
       let str = "";
-      switch (this.curSkin.productCode) {
-        case "pdj":
-          str = "LandscapeMode";
-          break;
-        case "ckp":
-          str = "WindowSkin";
-          break;
-        case "hjq":
-          str = "CallOutSkin";
-          break;
-        case "jzxsp":
-          str = "CentralizeSkin";
-          break;
-        case "dsj":
-          str = "SignDevicekin";
-          break;
-        case "pjq":
-          str = "AppraiseSkin";
-          break;
-        case "zzfwzd":
-          str = "SelfService";
-          break;
-        case "tdj":
-          str = "WriteFormSkin";
-          break;
-        case "ybj":
-          str = "SampleFormSkin";
-          break;
-        case "xxfbp":
-          str = "InformationSkin";
-          break;
-        case "zmszzfwzd":
-          str = "DesSelfService";
-          break;
-        case "xxgk":
-          str = "InfoDisSkin";
-          break;
-        default:
-          str = "DefaultShow";
-      }
-      return str;
+      str = this.skinCompontens[this.curSkin.productCode];
+      return str || "DefaultShow";
     },
   },
 

base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue

@@ -201,7 +201,20 @@ import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
 import html2canvas from "html2canvas";
 import { Empty } from "ant-design-vue";
 import { mapState } from "vuex";
-
+const skinCompontens = {
+  pdj: "LandscapeMode",
+  ckp: "WindowSkin",
+  hjq: "CallOutSkin",
+  jzxsp: "CentralizeSkin",
+  dsj: "SignDevicekin",
+  pjq: "AppraiseSkin",
+  zzfwzd: "SelfService",
+  tdj: "WriteFormSkin",
+  ybj: "SampleFormSkin",
+  xxfbp: "InformationSkin",
+  zmszzfwzd: "DesSelfService",
+  xxgk: "InfoDisSkin",
+};
 export default {
   components: {
     LandscapeMode,
@@ -234,6 +247,7 @@ export default {
   },
   data() {
     return {
+      skinCompontens,
       loading: false,
       formLoading: false,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
@@ -277,47 +291,8 @@ export default {
     },
     component() {
       let str = "";
-      switch (this.curProduct.productCode) {
-        case "pdj":
-          str = "LandscapeMode";
-          break;
-        case "ckp":
-          str = "WindowSkin";
-          break;
-        case "hjq":
-          str = "CallOutSkin";
-          break;
-        case "jzxsp":
-          str = "CentralizeSkin";
-          break;
-        case "dsj":
-          str = "SignDevicekin";
-          break;
-        case "pjq":
-          str = "AppraiseSkin";
-          break;
-        case "zzfwzd":
-          str = "SelfService";
-          break;
-        case "tdj":
-          str = "WriteFormSkin";
-          break;
-        case "ybj":
-          str = "SampleFormSkin";
-          break;
-        case "xxfbp":
-          str = "InformationSkin";
-          break;
-        case "zmszzfwzd":
-          str = "DesSelfService";
-          break;
-        case "xxgk":
-          str = "InfoDisSkin";
-          break;
-        default:
-          str = "DefaultShow";
-      }
-      return str;
+      str = this.skinCompontens[this.curProduct.productCode];
+      return str || "DefaultShow";
     },
     ...mapState("site", ["imageResolution", "curProduct"]),
   },