perf: 优化事项管理

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

@@ -382,7 +382,7 @@ export default {
       this.selectedRowKeys = key;
       this.businessIds = data.map((v) => v.id).join(",");
     },
-    // 批量加入
+    // 一体化业务批量加入站点
     handleBatchJoin() {
       if (this.businessIds) {
         this.handleIn(this.businessIds);

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

@@ -5,24 +5,31 @@
         <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="handleBatchDelSiteMatter">
+              批量移除
+            </a-button>
           </div>
           <div>
             <a-space>
               <a-select
                 style="width: 120px"
-                v-model="leftSource"
+                v-model="siteMatterTable.search.source"
                 class="select-department"
                 placeholder="全部来源"
                 allowClear
               >
-                <a-select-option :value="0"> 一体化添加 </a-select-option>
-                <a-select-option :value="1"> 手动添加 </a-select-option>
+                <a-select-option
+                  v-for="(v, key) in sourceType"
+                  :key="key"
+                  :value="Number(key)"
+                >
+                  {{ v }}
+                </a-select-option>
               </a-select>
               <a-select
                 showSearch
                 style="min-width: 120px"
-                v-model="leftDept"
+                v-model="siteMatterTable.search.deptCode"
                 class="select-department"
                 placeholder="全部部门"
                 optionFilterProp="label"
@@ -38,10 +45,10 @@
                 </a-select-option>
               </a-select>
               <a-input-search
-                v-model="searchLeftVal"
+                v-model="siteMatterTable.search.matterName"
                 placeholder="请输入事项名称搜索"
                 enter-button="搜索"
-                @search="onSearchLeft"
+                @search="onSearchSiteMatter"
                 allowClear
               />
             </a-space>
@@ -50,80 +57,60 @@
       </div>
       <div class="table-content">
         <!-- 表格 -->
-        <a-table
-          bordered
+        <y-table
+          :columns="siteMatterTable.columns"
+          :expandIconColumnIndex="2"
+          :data="siteMatterTable.data"
+          :pageSize.sync="siteMatterTable.size"
+          :current.sync="siteMatterTable.current"
+          :total="siteMatterTable.total"
+          :loading="siteMatterTable.loading"
           size="middle"
-          :loading="leftLoading"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: leftCurrent,
-            total: leftTotal,
-            pageSize: leftSize,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            defaultPageSize: leftSize,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changeLeft,
-            onShowSizeChange: showSizeChange,
-          }"
           :scroll="{ y: 550 }"
-          :columns="leftColumns"
-          :data-source="matterSiteData"
-          :row-selection="{ onChange: onSelectChange }"
-          :rowKey="(record) => record.id"
+          :row-selection="{
+            onChange: onSelectSiteMatterChange,
+          }"
+          @changePagination="getMatterSiteData"
         >
-          <template slot="index" slot-scope="text, record, index">
-            <span>
-              {{ (leftCurrent - 1) * leftSize + 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-if="record.source == 0" color="green"> 一体化添加 </a-tag>
             <a-tag v-else color="blue"> 手动添加 </a-tag>
           </template>
           <!-- 到现场次数 -->
-          <template slot="num" slot-scope="text">
-            <span v-if="text.windowToTheSceneNum">{{
-              text.windowToTheSceneNum
+          <template slot="num" slot-scope="{ record }">
+            <span v-if="record.windowToTheSceneNum">{{
+              record.windowToTheSceneNum
             }}</span>
-            <span v-else-if="text.onlineToTheSceneNum">{{
-              text.onlineToTheSceneNum
+            <span v-else-if="record.onlineToTheSceneNum">{{
+              record.onlineToTheSceneNum
             }}</span>
             <span v-else>0</span>
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space>
               <span
-                href="javascript:;"
-                v-if="text.source == 1"
+                v-if="record.source == 1"
                 class="primary pointer"
-                @click="handleSiteEdit(text)"
+                @click="handleSiteEdit(record)"
                 >编辑</span
               >
               <span href="javascript:;" style="visibility: hidden" v-else
                 >编辑</span
               >
-              <span
-                href="javascript:;"
-                class="delete pointer"
-                @click="handleDel(text.id, text)"
+              <span class="delete pointer" @click="handleDel(record.id, record)"
                 >移除</span
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 右 -->
@@ -143,18 +130,23 @@
             <a-space>
               <a-select
                 style="width: 120px"
-                v-model="rightSource"
+                v-model="baseMatterTable.search.source"
                 class="select-department"
                 placeholder="全部来源"
                 allowClear
               >
-                <a-select-option :value="0"> 一体化事项 </a-select-option>
-                <a-select-option :value="1"> 自建事项 </a-select-option>
+                <a-select-option
+                  v-for="(v, key) in sourceType2"
+                  :key="key"
+                  :value="Number(key)"
+                >
+                  {{ v }}
+                </a-select-option>
               </a-select>
               <a-select
                 showSearch
                 style="min-width: 120px"
-                v-model="rightDept"
+                v-model="baseMatterTable.search.deptCode"
                 class="select-department"
                 placeholder="全部部门"
                 optionFilterProp="label"
@@ -170,10 +162,10 @@
                 </a-select-option>
               </a-select>
               <a-input-search
-                v-model="searchRightVal"
+                v-model="baseMatterTable.search.matterName"
                 placeholder="请输入事项名称搜索"
                 enter-button="搜索"
-                @search="onSearchRight"
+                @search="onSearchBaseMatter"
                 allowClear
               />
             </a-space>
@@ -182,82 +174,61 @@
       </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="baseMatterTable.columns"
+          :expandIconColumnIndex="2"
+          :data="baseMatterTable.data"
+          :pageSize.sync="baseMatterTable.size"
+          :current.sync="baseMatterTable.current"
+          :total="baseMatterTable.total"
+          :loading="baseMatterTable.loading"
           size="middle"
+          :scroll="{ y: 550 }"
           :row-selection="{
-            selectedRowKeys: selectedRowKeys,
-            onChange: onRightSelectChange,
+            selectedRowKeys: selectedBaseMatterKeys,
+            onChange: onBaseSelectChange,
           }"
-          :columns="rightColumns"
-          :data-source="matterDataList"
-          :rowKey="(record) => record.id"
+          @changePagination="getMatterListData"
         >
-          <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-if="record.source == 0" color="green"> 一体化事项 </a-tag>
             <a-tag v-else color="blue"> 自建事项 </a-tag>
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space>
               <span
-                href="javascript:;"
-                v-if="text.source == 1"
+                v-if="record.source == 1"
                 class="primary pointer"
-                @click="handleEdit(text.id)"
-                >编辑</span
-              >
-              <span href="javascript:;" style="visibility: hidden" v-else
+                @click="handleEdit(record.id)"
                 >编辑</span
               >
-              <a href="javascript:;" class="primary" @click="handleIn(text.id)"
-                >加入</a
+              <span style="visibility: hidden" v-else>编辑</span>
+              <span class="primary pointer" @click="handleIn(record.id)"
+                >加入</span
               >
               <span
-                href="javascript:;"
                 class="delete pointer"
-                @click="handleDelRight(text.id)"
+                @click="handleDelBaseMatter(record.id)"
                 >删除</span
               >
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 编辑站点事项 -->
     <EditSiteMatter
       ref="EditSiteMatter"
       :formVisible.sync="formVisible"
-      @editSuccess="getMatterSiteData"
+      @success="getMatterSiteData"
     ></EditSiteMatter>
   </div>
 </template>
@@ -273,25 +244,59 @@ import {
 import { businessMatterList, delBusinessMatter } from "@/services/business";
 import { getDeptList } from "@/services/dept";
 import EditSiteMatter from "../group/EditSiteMatter.vue";
-import { pageSizeOptions } from "@/config/pageConfig.js";
+import YTable from "@/components/YTable.vue";
 import local from "@/utils/local";
 import { mapMutations } from "vuex";
-const leftColumns = [
+
+const sourceType = {
+  0: "一体化添加",
+  1: "手动添加",
+};
+const sourceType2 = {
+  0: "一体化事项",
+  1: "自建事项",
+};
+
+export default {
+  components: {
+    EditSiteMatter,
+    YTable,
+  },
+  data() {
+    return {
+      sourceType, // 类型
+      sourceType2,
+      // 站点事项表格
+      siteMatterTable: {
+        loading: false,
+        data: [],
+        total: 0,
+        size: 10,
+        current: 1,
+        search: {
+          source: undefined, // 事项来源
+          matterName: "", // 事项名称
+          deptCode: undefined, // 部门编码
+        },
+        columns: [
           {
             title: "序号",
             width: "50px",
-    scopedSlots: { customRender: "index" },
+            customRender: (text, record, index) => {
+              return (
+                (this.siteMatterTable.current - 1) * this.siteMatterTable.size +
+                index +
+                1
+              );
+            },
           },
           {
             title: "部门",
             width: "20%",
-    scopedSlots: {
-      customRender: "deptName",
-    },
+            dataIndex: "deptName",
           },
           {
             title: "事项名称",
-    // ellipsis: true,
             align: "left",
             scopedSlots: {
               customRender: "matterName",
@@ -311,19 +316,36 @@ const leftColumns = [
               customRender: "action",
             },
           },
-];
-const rightColumns = [
+        ],
+      },
+      // 基础事项表格
+      baseMatterTable: {
+        loading: false,
+        data: [],
+        total: 0,
+        size: 10,
+        current: 1,
+        search: {
+          source: undefined, // 事项来源
+          matterName: "", // 事项名称
+          deptCode: undefined, // 部门编码
+        },
+        columns: [
           {
             title: "序号",
             width: "50px",
-    scopedSlots: { customRender: "num" },
+            customRender: (text, record, index) => {
+              return (
+                (this.baseMatterTable.current - 1) * this.baseMatterTable.size +
+                index +
+                1
+              );
+            },
           },
           {
             title: "部门",
             width: "20%",
-    scopedSlots: {
-      customRender: "deptName",
-    },
+            dataIndex: "deptName",
           },
           {
             title: "事项名称",
@@ -340,42 +362,16 @@ const rightColumns = [
               customRender: "action",
             },
           },
-];
-
-export default {
-  components: {
-    EditSiteMatter,
+        ],
       },
-  data() {
-    return {
-      leftColumns,
-      rightColumns,
-      leftLoading: false,
-      rightLoading: false,
-      leftSource: undefined, // 左边来源
-      leftDept: undefined, // 左边部门搜索
-      rightDept: undefined, // 右边部门搜索
-      rightSource: undefined, // 右边来源
+      selectedSiteMatterKeys: [],
+      selectedBaseMatterKeys: [],
       selectedRowKeys: [],
-      matterSiteData: [], // 站点事项
-      matterDataList: [], //事项列表数据
-      // source: 0, // 事项来源
-      deleteData: "", // 批量删除数据
+      selectSiteMatterData: "", // 批量删除数据
       visible: false,
-      leftCurrent: 1,
-      rightCurrent: 1,
-      leftTotal: 0,
-      rightTotal: 0,
-      leftSize: 10,
-      rightSize: 10,
-      pageSizeOptions,
       siteId: local.getLocal("siteId"), // 站点id
       matterIds: "", // 事项id
       deptList: [], // 站点部门
-      windowToTheSceneNum: "", // 窗口到现场次数
-      onlineToTheSceneNum: "", // 网办到现场次数
-      searchLeftVal: "", // 站点事项搜索
-      searchRightVal: "", // 一体化事项搜索
       formVisible: false,
     };
   },
@@ -404,52 +400,54 @@ export default {
     },
     // 获取站点事项
     async getMatterSiteData(search = {}) {
-      this.leftLoading = true;
+      this.siteMatterTable.loading = true;
       let res = await getSiteMatterList({
-        page: this.leftCurrent,
-        size: this.leftSize,
+        page: this.siteMatterTable.current,
+        size: this.siteMatterTable.size,
         siteId: this.siteId,
-        source: this.leftSource,
-        matterName: `%${this.searchLeftVal}%`,
-        deptCode: this.leftDept,
+        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;
-      if (!data.length && this.leftCurrent > 1) {
-        this.leftCurrent -= 1;
+        if (!data.length && this.siteMatterTable.current > 1) {
+          this.siteMatterTable.current -= 1;
           this.getMatterSiteData();
         }
-      this.leftTotal = pageInfo.totalResult;
-      this.matterSiteData = data;
-      this.leftLoading = false;
+        this.siteMatterTable.total = pageInfo.totalResult;
+        this.siteMatterTable.data = data;
+      }
+      this.siteMatterTable.loading = false;
     },
     // 获取一体化事项列表
     async getMatterListData(search = {}) {
-      this.rightLoading = true;
+      this.baseMatterTable.loading = true;
       let res = await getMatterListSubList({
         siteId: this.siteId,
-        page: this.rightCurrent,
-        size: this.rightSize,
-        matterName: `%${this.searchRightVal}%`,
-        source: this.rightSource,
-        deptCode: this.rightDept,
+        page: this.baseMatterTable.current,
+        size: this.baseMatterTable.size,
+        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;
-        if (!data.length && this.rightCurrent > 1) {
-          this.rightCurrent -= 1;
+        if (!data.length && this.baseMatterTable.current > 1) {
+          this.baseMatterTable.current -= 1;
           this.getMatterListData();
         }
-        this.matterDataList = data;
-        this.rightTotal = pageInfo.totalResult;
+        this.baseMatterTable.data = data;
+        this.baseMatterTable.total = pageInfo.totalResult;
         this.SET_matterDict(dict);
-        this.rightLoading = false;
       }
+      this.baseMatterTable.loading = false;
     },
-    // 左边搜索
-    onSearchLeft() {
-      this.leftCurrent = 1;
+    // 站点事项搜索
+    onSearchSiteMatter() {
+      this.siteMatterTable.current = 1;
       this.getMatterSiteData();
     },
     // 左边移除站点事项
@@ -471,7 +469,7 @@ export default {
             _this.$message.success(msg);
             _this.getMatterSiteData();
             _this.getMatterListData();
-            _this.deleteData = "";
+            _this.selectSiteMatterData = "";
             _this.deleteMatterSiteRelevance(row);
           }
         },
@@ -489,57 +487,35 @@ export default {
         },
       });
     },
-    onSelectChange(key, data) {
-      this.deleteData = data;
+    onSelectSiteMatterChange(key, data) {
+      this.selectSiteMatterData = data;
     },
     // 批量移除站点事项
-    handleDelAll() {
-      if (this.deleteData.length <= 0) {
+    handleBatchDelSiteMatter() {
+      if (this.selectSiteMatterData.length <= 0) {
         this.$message.warning("请先勾选数据");
         return;
       } else {
-        let str = [...this.deleteData].map((v) => v.id).join(",");
-        this.handleDel(str, this.deleteData);
+        let ids = [...this.selectSiteMatterData].map((v) => v.id).join(",");
+        this.handleDel(ids, this.selectSiteMatterData);
       }
     },
     // 获取批量加入id
-    onRightSelectChange(key) {
-      this.selectedRowKeys = key;
+    onBaseSelectChange(key) {
+      this.selectedBaseMatterKeys = key;
     },
     // 批量加入
     handleAddAll() {
-      if (this.selectedRowKeys.length) {
-        this.handleIn(this.selectedRowKeys.join(","));
+      if (this.selectedBaseMatterKeys.length) {
+        this.handleIn(this.selectedBaseMatterKeys.join(","));
       } else {
         this.$message.warning("请先勾选数据");
         return;
       }
     },
-    // 左翻页
-    changeLeft(num) {
-      this.leftCurrent = num;
-      this.getMatterSiteData();
-    },
-    // 左边改变每页显示数量
-    showSizeChange(current, size) {
-      this.leftCurrent = current;
-      this.leftSize = size;
-      this.getMatterSiteData();
-    },
-    // 右翻页
-    changeRight(num) {
-      this.rightCurrent = num;
-      this.getMatterListData();
-    },
-    // 右边改变显示数量
-    showSizeChangeRight(current, size) {
-      this.rightCurrent = current;
-      this.rightSize = size;
-      this.getMatterListData();
-    },
-    // 右搜索
-    onSearchRight() {
-      this.rightCurrent = 1;
+    // 基础事项搜索
+    onSearchBaseMatter() {
+      this.baseMatterTable.current = 1;
       this.getMatterListData();
     },
     // 加入
@@ -557,11 +533,11 @@ export default {
         this.$message.success(msg);
         this.getMatterSiteData();
         this.getMatterListData();
-        this.selectedRowKeys = [];
+        this.selectedBaseMatterKeys = [];
       }
     },
-    // 右边删除
-    async handleDelRight(val) {
+    // 删除基础事项
+    async handleDelBaseMatter(id) {
       let _this = this;
       this.$confirm({
         title: "系统提示",
@@ -573,7 +549,7 @@ export default {
         icon: "exclamation-circle",
         maskClosable: true,
         async onOk() {
-          let res = await delMatter({ id: String(val) });
+          let res = await delMatter({ id: String(id) });
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
@@ -597,28 +573,28 @@ export default {
     },
     // 站点事项删除联动
     async deleteMatterSiteRelevance(row) {
-      let str = [];
+      let delData;
       if (Array.isArray(row)) {
         let arr = row.map((v) => v.matterId);
-        let num = 0;
-        let delData = async () => {
-          if (num > arr.length - 1) {
-            str = str.map((v) => v.id).join(",");
-            this.businessLinkage(str);
+        let count = 0;
+        let delDataFn = async () => {
+          if (count > arr.length - 1) {
+            delData = delData.map((v) => v.id).join(",");
+            this.businessLinkage(delData);
             return;
           }
           let res = await businessMatterList({
-            matterId: arr[num],
+            matterId: arr[count],
             siteId: this.siteId,
           });
           let { code, data } = res.data;
           if (code === 1) {
-            num++;
-            str = [...str, ...data.data];
+            count++;
+            delData = [...delData, ...data.data];
           }
-          delData();
+          delDataFn();
         };
-        delData();
+        delDataFn();
       } else {
         let res = await businessMatterList({
           matterId: row.matterId,
@@ -626,8 +602,8 @@ export default {
         });
         let { code, data } = res.data;
         if (code === 1 && data.data.length) {
-          str = data.data.map((v) => v.id).join(",");
-          this.businessLinkage(str);
+          delData = data.data.map((v) => v.id).join(",");
+          this.businessLinkage(delData);
         }
       }
     },

base-manager-ui/admin/src/pages/basicset/business/group/EditSiteMatter.vue

@@ -114,7 +114,7 @@ export default {
           let { code, msg } = res.data;
           if (code === 1) {
             this.$message.success(msg);
-            this.$emit("editSuccess");
+            this.$emit("success");
             this.handleClose();
           }
         }

base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue

@@ -641,8 +641,8 @@ export default {
     // 上传限制
     beforeUpload(file) {
       let restrict = 10; // 限制文件大小MB
-      const isJpgOrPng =
-        file.type === "image/jpeg" || file.type === "image/png";
+      const fileType = ["image/jpeg", "image/png"]; // 限制文件类型
+      const isJpgOrPng = fileType.includes(file.type);
       if (!isJpgOrPng) {
         this.$message.error("请上传jpeg或者png图片!");
       }
@@ -702,6 +702,7 @@ export default {
         this.formInfo.districtCode,
       ] = val;
     },
+    // 获取详细地址经纬度
     getAddress(address) {
       this.$refs.ruleForm.validateField("detailAddress", (errVal) => {
         if (errVal !== "中心详细地址不能为空") {