perf: 优化业务事项关联

base-manager-ui/admin/src/pages/basicset/business/components/businessTabs1.vue

@@ -252,14 +252,13 @@ export default {
       });
     },
     // 获取站点业务列表
-    async getSiteBusinessData(search = {}) {
+    async getSiteBusinessData() {
       this.siteBusinessTable.loading = true;
       let res = await siteBusinessList({
         page: this.siteBusinessTable.current,
         size: this.siteBusinessTable.size,
         siteId: this.siteId,
         businessName: `%${this.serchSiteBusiness}%`,
-        ...search,
       });
       let { code, data } = res.data;
       if (code === 1) {
@@ -279,7 +278,7 @@ export default {
         page: this.businessTable.current,
         size: this.businessTable.size,
         name: `%${this.serchData}%`,
-        businessType: 0, //
+        businessType: 0, //一体化业务
       });
       let { code, data } = res.data;
       if (code === 1) {

base-manager-ui/admin/src/pages/basicset/business/components/businessTabs2.vue

@@ -59,7 +59,6 @@
         <!-- 表格 -->
         <y-table
           :columns="siteMatterTable.columns"
-          :expandIconColumnIndex="2"
           :data="siteMatterTable.data"
           :pageSize.sync="siteMatterTable.size"
           :current.sync="siteMatterTable.current"
@@ -176,7 +175,6 @@
         <!-- 表格 -->
         <y-table
           :columns="baseMatterTable.columns"
-          :expandIconColumnIndex="2"
           :data="baseMatterTable.data"
           :pageSize.sync="baseMatterTable.size"
           :current.sync="baseMatterTable.current"
@@ -384,22 +382,19 @@ export default {
   methods: {
     ...mapMutations("site", ["SET_matterDict"]),
     // 获取部门列表
-    async getDeptListData(obj = {}) {
-      this.deptLoading = true;
+    async getDeptListData() {
       let res = await getDeptList({
         siteId: this.siteId,
         page: 1,
         size: -1,
-        ...obj,
       });
-      this.deptLoading = false;
       let { code, data } = res.data;
       if (code === 1) {
         this.deptList = data.data;
       }
     },
     // 获取站点事项
-    async getMatterSiteData(search = {}) {
+    async getMatterSiteData() {
       this.siteMatterTable.loading = true;
       let res = await getSiteMatterList({
         page: this.siteMatterTable.current,
@@ -408,7 +403,6 @@ export default {
         source: this.siteMatterTable.search.source,
         matterName: `%${this.siteMatterTable.search.matterName}%`,
         deptCode: this.siteMatterTable.search.deptCode,
-        ...search,
       });
       if (res.data.code == 1) {
         let { pageInfo, data } = res.data.data;
@@ -422,7 +416,7 @@ export default {
       this.siteMatterTable.loading = false;
     },
     // 获取一体化事项列表
-    async getMatterListData(search = {}) {
+    async getMatterListData() {
       this.baseMatterTable.loading = true;
       let res = await getMatterListSubList({
         siteId: this.siteId,
@@ -431,7 +425,6 @@ export default {
         matterName: `%${this.baseMatterTable.search.matterName}%`,
         source: this.baseMatterTable.search.source,
         deptCode: this.baseMatterTable.search.deptCode,
-        ...search,
       });
       if (res.data.code === 1) {
         let { pageInfo, data, dict } = res.data.data;

base-manager-ui/admin/src/pages/basicset/business/components/businessTabs3.vue

@@ -5,14 +5,16 @@
         <div class="titel">站点业务列表</div>
         <div class="header-bottom pdr6">
           <div class="left-btn">
-            <a-button type="danger" @click="handleDelAll"> 批量解除 </a-button>
+            <a-button type="danger" @click="batchDelSiteBusiness">
+              批量解除
+            </a-button>
           </div>
           <div class="search-box">
             <a-input-search
               placeholder="请输入业务名称搜索"
-              v-model="leftSearchVal"
+              v-model="siteBusinessTable.search.siteBusinessName"
               enter-button="搜索"
-              @search="onSearchLeft"
+              @search="onSiteBusinessSearch"
               allowClear
             />
           </div>
@@ -20,43 +22,35 @@
       </div>
       <div class="table-content">
         <!-- 表格 -->
-        <a-table
-          bordered
+        <y-table
+          :columns="siteBusinessTable.columns"
+          :data="siteBusinessTable.data"
+          :pageSize.sync="siteBusinessTable.size"
+          :current.sync="siteBusinessTable.current"
+          :total="siteBusinessTable.total"
+          :loading="siteBusinessTable.loading"
           size="middle"
-          :loading="Leftloading"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: leftCurrent,
-            total: leftTotal,
-            pageSize: leftSize,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changeLeft,
-            onShowSizeChange: showSizeChange,
-          }"
           :scroll="{ y: 550 }"
-          :columns="leftColumns"
-          :data-source="businessMatterData"
-          :row-selection="{ onChange: onSelectChange }"
-          :rowKey="(record) => record.id"
+          :row-selection="{
+            onChange: onSelectChange,
+          }"
+          @changePagination="getBusinessMatterData"
         >
-          <template slot="num" slot-scope="text, record, index">
-            <span>
-              {{ (leftCurrent - 1) * leftSize + index + 1 }}
-            </span>
-          </template>
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space>
-              <span class="primary pointer" @click="handleisUnbound(true, text)"
+              <span
+                class="primary pointer"
+                @click="handleisUnbound(true, record)"
                 >关联详情</span
               >
-              <span class="delete pointer" @click="handleisUnbound(false, text)"
+              <span
+                class="delete pointer"
+                @click="handleisUnbound(false, record)"
                 >解除</span
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 右 -->
@@ -72,7 +66,7 @@
               <a-select
                 showSearch
                 style="min-width: 120px"
-                v-model="deptSearch"
+                v-model="siteMatterTable.search.deptCode"
                 class="select-department"
                 placeholder="全部部门"
                 optionFilterProp="label"
@@ -88,10 +82,10 @@
                 </a-select-option>
               </a-select>
               <a-input-search
-                v-model="rightSearchVal"
+                v-model="siteMatterTable.search.matterName"
                 placeholder="请输入事项名称搜索"
                 enter-button="搜索"
-                @search="onSearchRight"
+                @search="onSearchSiteMatter"
                 allowClear
               />
             </a-space>
@@ -100,60 +94,35 @@
       </div>
       <div class="table-content">
         <!-- 表格 -->
-        <a-table
-          bordered
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: rightCurrent,
-            total: rightTotal,
-            pageSize: rightSize,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changeRight,
-            onShowSizeChange: showSizeChangeRight,
-          }"
-          :scroll="{ y: 550 }"
-          :loading="rightloading"
+        <y-table
+          :columns="siteMatterTable.columns"
+          :data="siteMatterTable.data"
+          :pageSize.sync="siteMatterTable.size"
+          :current.sync="siteMatterTable.current"
+          :total="siteMatterTable.total"
+          :loading="siteMatterTable.loading"
           size="middle"
+          :scroll="{ y: 550 }"
           :row-selection="{
             selectedRowKeys: selectedRowKeys,
             onChange: onRightSelectChange,
           }"
-          :columns="rightColumns"
-          :data-source="SiteMatterData"
-          :rowKey="(record) => record.id"
+          @changePagination="getMatterSiteData"
         >
-          <template slot="num" slot-scope="text, record, index">
-            <span>
-              {{ (rightCurrent - 1) * rightSize + index + 1 }}
-            </span>
-          </template>
-          <!-- 部门 -->
-          <template slot="deptName" slot-scope="text">
-            {{ text.deptName ? text.deptName : "--" }}
-          </template>
           <!-- 事项名称 -->
-          <template slot="matterName" slot-scope="text">
+          <template slot="matterName" slot-scope="{ record }">
             <a-tooltip placement="topLeft">
               <template slot="title">
-                {{ text.matterName }}
+                {{ record.matterName }}
               </template>
-              <div class="matter-name">{{ text.matterName }}</div>
+              <div class="matter-name">{{ record.matterName }}</div>
             </a-tooltip>
-            <!-- <a-tag v-if="text.source === 0" color="green"> 一体化添加 </a-tag>
-            <a-tag v-else color="blue"> 手动添加 </a-tag> -->
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
-            <span
-              href="javascript:;"
-              class="primary pointer"
-              @click="handleIn(text)"
-              >关联</span
-            >
+          <template slot="action" slot-scope="record">
+            <span class="primary pointer" @click="handleIn(record)">关联</span>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 关联 -->
@@ -280,7 +249,6 @@
 
 <script>
 import { getSiteMatterList } from "@/services/matter";
-import { pageSizeOptions } from "@/config/pageConfig.js";
 import { getDeptList } from "@/services/dept";
 import {
   siteBusinessList,
@@ -292,13 +260,36 @@ import {
   // getMatterlistData,
 } from "@/services/business";
 import local from "@/utils/local";
-const leftColumns = [
+import YTable from "@/components/YTable.vue";
+
+export default {
+  components: { YTable },
+  data() {
+    return {
+      SiteBusinessData: [], // 站点业务
+      SiteMatterData: [], //站点事项
+      // 站点业务表格
+      siteBusinessTable: {
+        loading: false,
+        data: [],
+        total: 0,
+        size: 10,
+        current: 1,
+        search: {
+          siteBusinessName: "", // 站点业务名称
+        },
+        columns: [
           {
             title: "序号",
-    dataIndex: "id",
-    key: "id",
             width: "50px",
-    scopedSlots: { customRender: "num" },
+            customRender: (text, record, index) => {
+              return (
+                (this.siteBusinessTable.current - 1) *
+                  this.siteBusinessTable.size +
+                index +
+                1
+              );
+            },
           },
           {
             title: "业务名称",
@@ -313,28 +304,42 @@ const leftColumns = [
               customRender: "action",
             },
           },
-];
-const rightColumns = [
+        ],
+      },
+      // 站点事项表格
+      siteMatterTable: {
+        loading: false,
+        data: [],
+        total: 0,
+        size: 10,
+        current: 1,
+        search: {
+          deptCode: undefined, // 部门编码
+          matterName: "", // 事项名称
+        },
+        columns: [
           {
             title: "序号",
-    dataIndex: "id",
             width: "50px",
-    scopedSlots: { customRender: "num" },
+            customRender: (text, record, index) => {
+              return (
+                (this.siteMatterTable.current - 1) * this.siteMatterTable.size +
+                index +
+                1
+              );
+            },
           },
           {
             title: "部门",
             width: "20%",
-    scopedSlots: {
-      customRender: "deptName",
-    },
+            ellipsis: true,
+            dataIndex: "deptName",
           },
           {
             title: "事项名称",
-    // ellipsis: true,
+            ellipsis: true,
             align: "left",
-    scopedSlots: {
-      customRender: "matterName",
-    },
+            dataIndex: "matterName",
           },
           {
             title: "操作",
@@ -343,37 +348,16 @@ const rightColumns = [
               customRender: "action",
             },
           },
-];
-
-export default {
-  data() {
-    return {
-      leftColumns,
-      rightColumns,
-      Leftloading: false,
-      rightloading: false,
-      leftSearchVal: "", // 左边搜索
-      deptSearch: undefined, // 右边
-      rightSearchVal: "", // 右边搜索
-      SiteBusinessData: [], // 站点业务
-      SiteMatterData: [], //站点事项
+        ],
+      },
       selectedRowKeys: [],
       isCorrelation: false,
       isUnbound: false,
       visible: false,
       isUnboundAll: false, //批量解除框
       iscConfirmLoading: false, // 关联loading
-      leftCurrent: 1,
-      rightCurrent: 1,
-      leftTotal: 0,
-      rightTotal: 0,
-      leftSize: 10,
-      rightSize: 10,
-      pageSizeOptions,
       siteId: local.getLocal("siteId"), // 站点id
-      matterIds: "", // 业务id
       deptList: [], // 站点部门
-      rightSearch: "", // 事项搜索
       businessMatterData: [], // 业务关联事项列表数据
       unboundBusinessData: {}, // 解除-业务数据
       unboundMatterData: [], // 解除-事项数据
@@ -404,38 +388,36 @@ export default {
 
   methods: {
     // 获取部门列表
-    async getDeptListData(obj = {}) {
-      this.deptLoading = true;
+    async getDeptListData() {
       let res = await getDeptList({
         siteId: this.siteId,
         page: 1,
         size: -1,
-        ...obj,
       });
-      this.deptLoading = false;
       let { code, data } = res.data;
       if (code === 1) {
         this.deptList = data.data;
       }
     },
     // 获取站点业务关联列表
-    async getBusinessMatterData(search = {}) {
-      this.Leftloading = true;
+    async getBusinessMatterData() {
+      this.siteBusinessTable.loading = true;
       let res = await getBusinesslistData({
-        page: this.leftCurrent,
-        size: this.leftSize,
+        page: this.siteBusinessTable.current,
+        size: this.siteBusinessTable.size,
         siteId: Number(this.siteId),
-        siteBusinessName: `%${this.leftSearchVal}%`,
-        ...search,
+        siteBusinessName: `%${this.siteBusinessTable.search.siteBusinessName}%`,
       });
+      if (res.data.code == 1) {
         let { total, data } = res.data.data;
-      if (!data.length && this.leftCurrent > 1) {
-        this.leftCurrent -= 1;
+        if (!data.length && this.siteBusinessTable.current > 1) {
+          this.siteBusinessTable.current -= 1;
           this.getBusinessMatterData();
         }
-      this.leftTotal = total;
-      this.businessMatterData = data;
-      this.Leftloading = false;
+        this.siteBusinessTable.total = total;
+        this.siteBusinessTable.data = data;
+      }
+      this.siteBusinessTable.loading = false;
     },
 
     // 获取站点业务关联-事项列表
@@ -444,12 +426,11 @@ export default {
       this.unboundMatterData = res.data.data.data;
     },
     // 获取站点业务列表
-    async getSiteBusinessData(search = {}) {
+    async getSiteBusinessData() {
       let res = await siteBusinessList({
         siteId: this.siteId,
         page: 1,
         size: -1,
-        ...search,
       });
       let { data } = res.data.data;
       this.SiteBusinessData = data
@@ -473,33 +454,34 @@ export default {
     },
 
     // 获取站点事项
-    async getMatterSiteData(search = {}) {
-      this.rightloading = true;
+    async getMatterSiteData() {
+      this.siteMatterTable.loading = true;
       let res = await getSiteMatterList({
-        page: this.rightCurrent,
-        size: this.rightSize,
-        matterName: `%${this.rightSearchVal}%`,
+        page: this.siteMatterTable.current,
+        size: this.siteMatterTable.size,
+        matterName: `%${this.siteMatterTable.search.matterName}%`,
         siteId: this.siteId,
-        deptCode: this.deptSearch,
-        ...search,
+        deptCode: this.siteMatterTable.search.deptCode,
       });
+      if (res.data.code == 1) {
         let { pageInfo, data } = res.data.data;
-      if (!data.length && this.rightCurrent > 1) {
-        this.rightCurrent -= 1;
+        if (!data.length && this.siteMatterTable.current > 1) {
+          this.siteMatterTable.current -= 1;
           this.getMatterSiteData();
         }
-      this.rightTotal = pageInfo.totalResult;
-      this.SiteMatterData = data;
-      this.rightloading = false;
+        this.siteMatterTable.total = pageInfo.totalResult;
+        this.siteMatterTable.data = data;
+      }
+      this.siteMatterTable.loading = false;
     },
 
-    // 左边搜索
-    async onSearchLeft() {
-      this.leftCurrent = 1;
+    // 站点关联业务列表搜索
+    async onSiteBusinessSearch() {
+      this.siteBusinessTable.current = 1;
       this.getBusinessMatterData();
     },
 
-    // 左边解除按钮
+    // 站点业务解除关联
     handleisUnbound(isCheck, data) {
       this.checkFlag = isCheck;
       this.unboundBusinessData = data;
@@ -585,7 +567,7 @@ export default {
     },
 
     // 批量解除按钮
-    handleDelAll() {
+    batchDelSiteBusiness() {
       if (this.businessMatterAll.length > 0) {
         this.isUnboundAll = true;
       } else {
@@ -633,31 +615,9 @@ export default {
         return;
       }
     },
-    // 左翻页
-    changeLeft(num) {
-      this.leftCurrent = num;
-      this.getBusinessMatterData();
-    },
-    // 左边改变每页显示数量
-    showSizeChange(current, size) {
-      this.leftCurrent = current;
-      this.leftSize = size;
-      this.getBusinessMatterData();
-    },
-    // 右翻页
-    changeRight(num) {
-      this.rightCurrent = num;
-      this.getMatterSiteData();
-    },
-    // 右边改变显示数量
-    showSizeChangeRight(current, size) {
-      this.rightCurrent = current;
-      this.rightSize = size;
-      this.getMatterSiteData();
-    },
-    // 右搜索
-    onSearchRight() {
-      this.rightCurrent = 1;
+    // 站点事项搜索
+    onSearchSiteMatter() {
+      this.siteMatterTable.current = 1;
       this.getMatterSiteData();
     },
     // 关联