perf: 大厅管理优化

base-manager-ui/admin/src/components/YTable.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script>
+import { pageSizeOptions } from "@/config/pageConfig.js";
 export default {
   props: {
     columns: {
@@ -90,7 +91,7 @@ export default {
     },
     pageSizeOptions: {
       type: Array,
-      default: () => ["10", "30", "50", "100", "200"],
+      default: () => pageSizeOptions,
     },
   },
   data() {

base-manager-ui/admin/src/pages/basicset/hall/hallmanage/HallManage.vue

@@ -18,56 +18,39 @@
     </div>
     <!-- 表格 -->
     <div class="table-content">
-      <a-table
+      <y-table
+        :columns="columns"
+        :data="dataList"
+        :pageSize.sync="size"
+        :page.sync="page"
+        :total="total"
+        :loading="loading"
+        :scroll="{ y: 580 }"
         :row-selection="{
           selectedRowKeys: selectedRowKeys,
           onChange: onSelectChange,
         }"
-        :loading="loading"
-        bordered
-        :scroll="{ y: 580 }"
-        :columns="columns"
-        :pagination="{
-          showTotal: (total) => `共 ${total} 条`,
-          current: current,
-          total: total,
-          pageSize: size,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: pageSizeOptions,
-          onChange: handleChange,
-          onShowSizeChange: showSizeChange,
-        }"
-        :data-source="dataList"
-        :rowKey="(record) => record.id"
+        @changePagination="getHallList"
       >
-        <!-- 序号 -->
-        <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="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">
-            <span
-              href="javascript:;"
-              class="primary pointer"
-              @click="handleEdit(text)"
+            <span class="primary pointer" @click="handleEdit(record)"
               >编辑</span
             >
-            <span
-              href="javascript:;"
-              class="delete pointer"
-              @click="handleDel(text.id)"
+            <span class="delete pointer" @click="handleDel(record.id)"
               >删除</span
             >
           </a-space>
         </template>
-      </a-table>
+      </y-table>
     </div>
     <!-- 新增、修改大厅 -->
     <AddHall
@@ -81,21 +64,22 @@
 
 <script>
 import { getHallList, delHall } from "@/services/hall";
-import { pageSizeOptions } from "@/config/pageConfig.js";
 import loacl from "@/utils/local";
 import AddHall from "./modal/AddHall.vue";
+import YTable from "@/components/YTable.vue";
 export default {
   components: {
     AddHall,
+    YTable,
   },
   data() {
     const columns = [
       {
         title: "序号",
-        dataIndex: "num",
+        dataIndex: "index",
         width: "65px",
         scopedSlots: {
-          customRender: "num",
+          customRender: "index",
         },
       },
       {
@@ -144,11 +128,10 @@ export default {
       title: "新增大厅",
       visible: false,
       selectedRowKeys: [],
-      current: 1,
+      page: 1,
       size: 10,
       total: 0,
       siteId: loacl.getLocal("siteId"),
-      pageSizeOptions,
       searchValue: "", // 搜索
       dataList: [],
     };
@@ -161,15 +144,15 @@ export default {
     async getHallList() {
       this.loading = true;
       let res = await getHallList({
-        page: this.current,
+        page: this.page,
         size: this.size,
         hallName: `%${this.searchValue}%`,
         siteId: this.siteId,
       });
       if (res.data.code == 1) {
         let { data, total } = res.data.data;
-        if (!data.length && this.current > 1) {
-          this.current -= 1;
+        if (!data.length && this.page > 1) {
+          this.page -= 1;
           this.getHallList();
         }
         this.total = total;
@@ -185,7 +168,7 @@ export default {
     },
     // 搜索
     onSearch() {
-      this.current = 1;
+      this.page = 1;
       this.selectedRowKeys = [];
       this.getHallList();
     },
@@ -233,20 +216,8 @@ export default {
         },
       });
     },
-    // 翻页
-    handleChange(cur) {
-      this.current = cur;
-      this.getHallList();
-    },
-    // 改变每页显示数量
-    showSizeChange(cur, size) {
-      this.current = cur;
-      this.size = size;
-      this.getHallList();
-    },
   },
 };
 </script>
 
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>

base-manager-ui/admin/src/pages/basicset/hall/hallwindow/HallWindow.vue

@@ -9,7 +9,7 @@
             <a-space>
               <a-select
                 style="min-width: 120px"
-                v-model="leftHallSearch"
+                v-model="hallTable.searchForm.hallId"
                 showSearch
                 optionFilterProp="label"
               >
@@ -28,7 +28,7 @@
               <a-input-search
                 placeholder="请输入窗口名称搜索"
                 enter-button="搜索"
-                v-model="leftSearchVal"
+                v-model="hallTable.searchForm.windowName"
                 @search="onSearchLeft"
                 allowClear
               />
@@ -38,44 +38,31 @@
       </div>
       <div class="table-content">
         <!-- 表格 -->
-        <a-table
-          bordered
-          :loading="leftLoading"
+        <y-table
+          :columns="hallTable.columns"
+          :data="hallTable.data"
+          :pageSize.sync="hallTable.size"
+          :page.sync="hallTable.page"
+          :total="hallTable.total"
+          :loading="hallTable.loading"
           size="middle"
           :scroll="{ y: 550 }"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: leftCurrent,
-            total: leftTotal,
-            pageSize: leftSize,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changeLeft,
-            onShowSizeChange: showSizeChange,
-          }"
-          :columns="leftColumns"
-          :data-source="hallWindowData"
+          @changePagination="getWindowHallList"
           :row-selection="{
             selectedRowKeys: selectedLeftRowKeys,
             onChange: onSelectChange,
           }"
-          :rowKey="(record) => record.id"
         >
-          <template slot="num" slot-scope="text, record, index">
-            <span>
-              {{ (leftCurrent - 1) * leftSize + index + 1 }}
-            </span>
-          </template>
-          <template slot="action" slot-scope="text">
-            <span
-              href="javascript:;"
-              class="delete pointer"
-              @click="handleDel(text.id)"
+          <span slot="index" slot-scope="{ index }">{{
+            (hallTable.page - 1) * hallTable.size + index + 1
+          }}</span>
+
+          <template slot="action" slot-scope="{ record }">
+            <span class="delete pointer" @click="handleDel(record.id)"
               >移除</span
             >
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 右 -->
@@ -90,7 +77,7 @@
             <a-space>
               <a-select
                 style="min-width: 120px"
-                v-model="deptSearch"
+                v-model="siteWinTable.searchForm.deptId"
                 showSearch
                 optionFilterProp="label"
               >
@@ -109,7 +96,7 @@
               <a-input-search
                 placeholder="请输入窗口编号搜索"
                 enter-button="搜索"
-                v-model="rightSearchVal"
+                v-model="siteWinTable.searchForm.fromnum"
                 @search="onSearch"
                 allowClear
               />
@@ -118,45 +105,33 @@
         </div>
       </div>
       <div class="table-content">
-        <!-- 表格 -->
-        <a-table
-          bordered
-          :scroll="{ y: 550 }"
-          :loading="rightLoading"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: rightCurrent,
-            total: rightTotal,
-            pageSize: rightSize,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changeRight,
-            onShowSizeChange: showSizeChangeRight,
-          }"
+        <y-table
+          :columns="siteWinTable.columns"
+          :data="siteWinTable.data"
+          :pageSize.sync="siteWinTable.size"
+          :page.sync="siteWinTable.page"
+          :total="siteWinTable.total"
+          :loading="siteWinTable.loading"
           size="middle"
+          :scroll="{ y: 550 }"
+          @changePagination="getSubHalllist"
           :row-selection="{
             selectedRowKeys: selectedRowKeys,
             onChange: onRightSelectChange,
           }"
-          :columns="rightColumns"
-          :data-source="siteWindowData"
-          :rowKey="(record) => record.id"
         >
-          <template slot="num" slot-scope="text, record, index">
-            <span>
-              {{ (rightCurrent - 1) * rightSize + index + 1 }}
-            </span>
-          </template>
+          <span slot="index" slot-scope="{ index }">{{
+            (hallTable.page - 1) * hallTable.size + index + 1
+          }}</span>
 
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space size="middle">
-              <span class="primary pointer" @click="handleIn([text])"
+              <span class="primary pointer" @click="handleIn([record])"
                 >加入大厅</span
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 添加大厅窗口 -->
@@ -171,90 +146,96 @@
 
 <script>
 import { getHallList, getWindowHallList, delWindowHall } from "@/services/hall";
-import { pageSizeOptions } from "@/config/pageConfig.js";
 import WindowToHall from "./modal/WindowToHall.vue";
+import YTable from "@/components/YTable.vue";
 import local from "@/utils/local";
 import { getDeptList, getSubHalllist } from "@/services/dept";
-const leftColumns = [
-  {
-    title: "序号",
-    width: "50px",
-    scopedSlots: { customRender: "num" },
-  },
-  {
-    title: "窗口名称",
-    dataIndex: "windowName",
-  },
-  {
-    title: "窗口编号",
-    dataIndex: "fromnum",
-  },
-  {
-    title: "所属大厅",
-    dataIndex: "hallName",
-  },
-  {
-    title: "操作",
-    width: "110px",
-    scopedSlots: {
-      customRender: "action",
-    },
-  },
-];
-const rightColumns = [
-  {
-    title: "序号",
-    key: "id",
-    width: "50px",
-    scopedSlots: { customRender: "num" },
-  },
-  {
-    title: "窗口名称",
-    dataIndex: "name",
-  },
-  {
-    title: "编号",
-    dataIndex: "fromnum",
-  },
-  {
-    title: "所属部门",
-    dataIndex: "deptName",
-  },
-
-  {
-    title: "操作",
-    width: "110px",
-    scopedSlots: {
-      customRender: "action",
-    },
-  },
-];
-
 export default {
-  components: { WindowToHall },
+  components: { WindowToHall, YTable },
   data() {
     return {
-      leftColumns,
-      rightColumns,
       hallList: [], // 大厅列表
       deptList: [], // 部门列表
-      leftHallSearch: "",
-      deptSearch: "",
-      leftSearchVal: "",
-      rightSearchVal: "",
-      leftLoading: false,
-      rightLoading: false,
+      hallTable: {
+        data: [],
+        page: 1,
+        size: 10,
+        total: 0,
+        searchForm: {
+          hallId: "",
+          windowName: "",
+        },
+        loading: false,
+        columns: [
+          {
+            title: "序号",
+            width: "50px",
+            scopedSlots: { customRender: "index" },
+          },
+          {
+            title: "窗口名称",
+            dataIndex: "windowName",
+          },
+          {
+            title: "窗口编号",
+            dataIndex: "fromnum",
+          },
+          {
+            title: "所属大厅",
+            dataIndex: "hallName",
+          },
+          {
+            title: "操作",
+            width: "110px",
+            scopedSlots: {
+              customRender: "action",
+            },
+          },
+        ],
+      },
+      siteWinTable: {
+        data: [],
+        page: 1,
+        size: 10,
+        total: 0,
+        searchForm: {
+          fromnum: "",
+          deptId: "",
+        },
+        loading: false,
+        columns: [
+          {
+            title: "序号",
+            key: "id",
+            width: "50px",
+            scopedSlots: { customRender: "index" },
+          },
+          {
+            title: "窗口名称",
+            dataIndex: "name",
+          },
+          {
+            title: "编号",
+            dataIndex: "fromnum",
+          },
+          {
+            title: "所属部门",
+            dataIndex: "deptName",
+          },
+
+          {
+            title: "操作",
+            width: "110px",
+            scopedSlots: {
+              customRender: "action",
+            },
+          },
+        ],
+      },
       selectedLeftRowKeys: [],
       selectedRowKeys: [],
       selectedRows: [],
       visible: false,
-      leftCurrent: 1,
-      rightCurrent: 1,
-      leftTotal: 0,
-      rightTotal: 0,
-      leftSize: 10,
-      rightSize: 10,
-      pageSizeOptions,
       siteId: local.getLocal("siteId"), // 站点id
       hallWindowData: [], // 大厅窗口数据
       siteWindowData: [], // 站点窗口数据
@@ -293,45 +274,45 @@ export default {
     },
     // 获取大厅窗口列表
     async getWindowHallList() {
-      this.leftLoading = true;
+      this.hallTable.loading = true;
       let res = await getWindowHallList({
-        page: this.leftCurrent,
-        size: this.leftSize,
+        page: this.hallTable.page,
+        size: this.hallTable.size,
         siteId: this.siteId,
-        windowName: `%${this.leftSearchVal}%`,
-        hallId: this.leftHallSearch,
+        windowName: `%${this.hallTable.searchForm.windowName}%`,
+        hallId: this.hallTable.searchForm.hallId,
       });
       if (res.data.code == 1) {
         let { data, total } = res.data.data;
-        if (!data.length && this.leftCurrent > 1) {
-          this.leftCurrent -= 1;
+        if (!data.length && this.hallTable.page > 1) {
+          this.hallTable.page -= 1;
           this.getWindowHallList();
         }
-        this.hallWindowData = data;
-        this.leftTotal = total;
+        this.hallTable.data = data;
+        this.hallTable.total = total;
       }
-      this.leftLoading = false;
+      this.hallTable.loading = false;
     },
     // 获取站点差集窗口列表
     async getSubHalllist() {
-      this.rightLoading = true;
+      this.siteWinTable.loading = true;
       let res = await getSubHalllist({
-        page: this.rightCurrent,
-        size: this.rightSize,
+        page: this.siteWinTable.page,
+        size: this.siteWinTable.size,
         siteId: this.siteId,
-        fromnum: `%${this.rightSearchVal}%`,
-        deptId: this.deptSearch,
+        fromnum: `%${this.siteWinTable.searchForm.fromnum}%`,
+        deptId: this.siteWinTable.searchForm.deptId,
       });
       if (res.data.code == 1) {
         let { data, total } = res.data.data;
-        this.siteWindowData = data;
-        this.rightTotal = total;
+        this.siteWinTable.data = data;
+        this.siteWinTable.total = total;
       }
-      this.rightLoading = false;
+      this.siteWinTable.loading = false;
     },
     // 左边搜索
     onSearchLeft() {
-      this.leftCurrent = 1;
+      this.hallTable.page = 1;
       this.selectedLeftRowKeys = [];
       this.getWindowHallList();
     },
@@ -397,31 +378,9 @@ export default {
       this.handleIn(this.selectedRows);
     },
 
-    // 左翻页
-    changeLeft(cur) {
-      this.leftCurrent = cur;
-      this.getWindowHallList();
-    },
-    // 左边改变每页显示数量
-    showSizeChange(current, size) {
-      this.leftCurrent = current;
-      this.leftSize = size;
-      this.getWindowHallList();
-    },
-    // 右翻页
-    changeRight(cur) {
-      this.rightCurrent = cur;
-      this.getSubHalllist();
-    },
-    // 右边改变显示数量
-    showSizeChangeRight(current, size) {
-      this.rightCurrent = current;
-      this.rightSize = size;
-      this.getSubHalllist();
-    },
-    // 搜索
+    // 站点窗口搜索
     async onSearch() {
-      this.rightCurrent = 1;
+      this.siteWinTable.page = 1;
       this.getSubHalllist();
     },
     // 加入
@@ -485,4 +444,4 @@ export default {
   background-color: #04cb8f;
   color: #fff;
 }
-</style>
\ No newline at end of file
+</style>