完善表格组件封装，添加复选框缓存机制勾选及默认展示功能+修改涉及修改相应页面代码

src/api/statistics.js

@@ -15,5 +15,5 @@ export function subStatisticsTable(data) {
 
 // 获取客体统计
 export function objStatisticsTable(data) {
-  return axios.post(`${baseUrl}/sub-statistics`, data);
+  return axios.post(`${baseUrl}/obj-statistics`, data);
 }

src/components/new-table/index.vue

@@ -94,7 +94,14 @@ export default {
     optColumnWidth: {
       type: [String, Number],
       default: '120'
-    }
+    },
+    // 默认选中的数据
+    defaultSelectRows: {
+      type: Array,
+      default: () => []
+    },
+    // 设置合并行根据的key
+    rowSpanKey: String
   },
   components: {},
   data() {
@@ -102,7 +109,18 @@ export default {
       newChooseArr: []
     };
   },
-  computed: {},
+  computed: {
+      
+  },
+  watch: {
+     defaultSelectRows: {
+       immediate: true,
+       deep: true,
+       handler(val) {
+         this.newChooseArr = this.$lodash.cloneDeep(val);
+       }
+     }
+  },
   methods: {
     /**
      * 查询
@@ -115,7 +133,10 @@ export default {
      */
     handleClearSelection() {
       this.$refs.baseTable.clearAll();
-      this.newChooseArr = [];
+      // this.newChooseArr = [];
+    },
+    toggleRowSelection(row, selected) {
+      this.$refs.baseTable.toggleRowSelection(row, selected);
     },
     handleSelectionChange(data) {
       this.$emit('handleSelectionChange', data);
@@ -141,6 +162,40 @@ export default {
       return conditions;
     },
 
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return {
+          rowspan: row.rowspan,
+          colspan: 1
+        };
+      }
+    },
+
+    setRowSpans(tableData) {
+      // 先给所有的数据都加一个v.rowspan = 1
+      tableData.forEach((v) => {
+        v.rowspan = 1;
+      });
+      // 双层循环
+      for (let i = 0; i < tableData.length; i++) {
+        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
+        // 这里进行判断
+        // 如果当前行的id和下一行的id相等
+        // 就把当前v.rowspan + 1
+        // 下一行的v.rowspan - 1
+        for (let j = i + 1; j < tableData.length; j++) {
+          //此处可根据相同字段进行合并，此处是根据的id
+          if (tableData[i][this.rowSpanKey] === tableData[i][this.rowSpanKey]) {
+            tableData[i].rowspan++;
+            tableData[j].rowspan--;
+          }
+        }
+        // 这里跳过已经重复的数据
+        i = i + tableData[i].rowspan - 1;
+      }
+      return tableData;
+    },
+
     /**
      * 进入页面默认选中设置
      */
@@ -163,7 +218,7 @@ export default {
 
       const result = {
         data: {
-          content,
+          content: this.rowSpanKey ? this.setRowSpans(content) : content,
           totalElements
         }
       };
@@ -217,7 +272,9 @@ export default {
       this.$emit('handleRowClick', row);
     }
   },
-  created() {},
+  created() {
+   
+  },
   mounted() {}
 };
 </script>

src/pages/appfun-auth-manage/org-role-manage/index.vue

@@ -24,7 +24,7 @@
       <!-- 权限设置 -->
       <scrollCard contentHeight="calc(100vh - 15.5rem)" :colSpan="19">
         <template #cardHeader>
-          <div style="display:flex;justify-content: space-between;">
+          <div style="display: flex; justify-content: space-between">
             <span>角色列表</span>
             <dg-button type="primary" :icon="'保存' | optIcon" @click="handleSave()">保存</dg-button>
           </div>
@@ -32,27 +32,22 @@
 
         <!-- 角色搜索栏 -->
         <search-bar :conditionForm="roleConditionForm" @submitSearch="receiveRoleSearch"></search-bar>
-        <!-- 角色操作栏 -->
-        <!-- <operate-bar :pageOptList="pageOptList" @submitPageOpt="handleSave()"></operate-bar> -->
 
         <!-- 角色列表 -->
-        <dg-table
+        <new-table
           ref="table"
           :condition="condition"
-          :url="tableUrl"
-          :span-method="objectSpanMethod"
-          border
-          style="width: 100%"
+          :tableUrl="tableUrl"
+          rowSpanKey="appId"
           row-key="roleId"
-          overflow="tooltip"
-          lazyLoad
           @selection-change="handleSelectChange"
-          :before-quest="handleBeforeQuest"
+          :defaultSelectRows="checkRoleList"
+          lazyLoad
         >
           <dg-table-column prop="appName" label="应用系统名称" min-width="120" align="center"> </dg-table-column>
           <dg-table-column type="selection" reserve-selection width="50" align="center"></dg-table-column>
           <dg-table-column prop="roleName" label="角色名称" align="center"> </dg-table-column>
-        </dg-table>
+        </new-table>
       </scrollCard>
     </dg-row>
   </div>
@@ -62,7 +57,7 @@
 import orgTree from '@/components/tree';
 import scrollCard from '@/components/scroll-card';
 import searchBar from '@/components/search-bar';
-
+import newTable from '@/components/new-table';
 import * as roleAuthApi from '@/api/role-auth-info';
 import * as Api from '@/api/org-role-manage';
 export default {
@@ -70,6 +65,7 @@ export default {
     orgTree,
     scrollCard,
     searchBar,
+    newTable
   },
   data() {
     return {
@@ -96,10 +92,6 @@ export default {
         }
       ],
       condition: {
-        orgId: {
-          value: '',
-          op: '='
-        },
         appId: {
           value: '',
           op: '='
@@ -109,6 +101,7 @@ export default {
           op: 'like'
         }
       },
+      orgId: "",
       tableUrl: Api.tableUrl,
       pageOptList: ['保存'],
       checkRoleList: [],
@@ -123,81 +116,24 @@ export default {
      * @param {*} node
      */
     async handleGetNode(node) {
-      this.condition.orgId.value = node.id;
+      this.orgId = node.id;
       this.refreshTable();
     },
     async refreshTable() {
-      this.$refs.table.clearAll();
-      await this.getRoleChecked(this.condition.orgId.value);
+      this.$refs.table.handleClearSelection();
+      await this.getRoleChecked(this.orgId);
       this.selectRoleList = [];
-      this.$refs.table.searchForm();
+      this.$refs.table.handleSearch();
     },
     receiveRoleSearch(condition) {
       this.condition = { ...this.condition, ...condition };
       this.refreshTable();
     },
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
-        return {
-          rowspan: row.rowspan,
-          colspan: 1
-        };
-      }
-    },
+
     handleSelectChange(selection) {
       this.selectRoleList = this.$lodash.cloneDeep(selection);
     },
-    // 角色列表数据渲染前整合数据
-    handleBeforeQuest(res) {
-      const { content, totalElements } = res.data;
-      this.currentPageContent = content;
-      if (this.checkRoleList.length > 0) {
-        let rowKeys = [];
-        for (let j = 0; j < content.length; j++) {
-          const cItem = content[j];
-          const index = this.checkRoleList.findIndex((item) => item == cItem.roleId);
-          if (index > -1) {
-            rowKeys.push(this.checkRoleList[index]);
-          }
-        }
-        setTimeout(() => {
-          this.$refs.table.setCheck(rowKeys);
-        }, 500);
-      }
-      this.roleTotal = totalElements;
 
-      const result = {
-        data: {
-          content: this.setRowSpans(content),
-          totalElements
-        }
-      };
-      return result;
-    },
-    setRowSpans(tableData) {
-      // 先给所有的数据都加一个v.rowspan = 1
-      tableData.forEach((v) => {
-        v.rowspan = 1;
-      });
-      // 双层循环
-      for (let i = 0; i < tableData.length; i++) {
-        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
-        // 这里进行判断
-        // 如果当前行的id和下一行的id相等
-        // 就把当前v.rowspan + 1
-        // 下一行的v.rowspan - 1
-        for (let j = i + 1; j < tableData.length; j++) {
-          //此处可根据相同字段进行合并，此处是根据的id
-          if (tableData[i].appId === tableData[j].appId) {
-            tableData[i].rowspan++;
-            tableData[j].rowspan--;
-          }
-        }
-        // 这里跳过已经重复的数据
-        i = i + tableData[i].rowspan - 1;
-      }
-      return tableData;
-    },
     handleSave() {
       if (this.roleTotal == 0) {
         this.$message.warning('没有可保存的数据！');
@@ -213,7 +149,7 @@ export default {
         .map((item) => item.roleId);
 
       const saveParams = {
-        orgId: this.condition.orgId.value,
+        orgId: this.orgId,
         addRoleIds,
         delRoleIds
       };

src/pages/auth-object-manage/object-prop-manage/add-appser-dialog.vue

@@ -10,6 +10,8 @@
         :tableHeader="tableHeader"
         :tableUrl="tableUrl[attrBelongType]"
         :condition="condition"
+        @selection-change="handleSelectChange"
+
       >
       </new-table>
     </dg-row>
@@ -66,13 +68,16 @@ export default {
     handleClose() {
       this.$emit('close');
     },
+    handleSelectChange(selection) {
+      this.selectList = this.$lodash.cloneDeep(selection);
+    },
     /**
      * 添加
      */
     handleSave() {
       const params = {
         attrId: this.parentNode.id,
-        relList: this.$refs.table.newChooseArr.map((item) => {
+        relList: this.selectList.map((item) => {
           return {
             id: item.id,
             code: this.attrBelongType == 'APP' ? item.applyCode : item.serviceCode

src/pages/auth-object-manage/statistics/index.vue

@@ -52,14 +52,21 @@ export default {
       tableData: [],
       tableHeader: [
         {
-          prop: 'envElementType',
+          prop: 'name',
           label: '授权客体类型'
         },
         {
           prop: 'num',
           label: '数量'
         }
-      ]
+      ],
+      // 客体字段名称map集合
+      nameMap: {
+        appFunNum: "功能资源",
+        appNum: "应用资源",
+        dataNum: "数据资源",
+        serviceNum: "服务资源"
+      }
     };
   },
   computed: {},
@@ -95,7 +102,14 @@ export default {
         };
       }
       objStatisticsTable(params).then((res) => {
-        this.tableData = res;
+        let attr = [];
+        for (const key in res) {
+          attr.push({
+             name: this.nameMap[key],
+             num: res[key]
+          })
+        }
+        this.tableData = attr;
       });
     }
   },

src/pages/auth-subject-manage/statistics/index.vue

@@ -52,14 +52,21 @@ export default {
       tableData: [],
       tableHeader: [
         {
-          prop: 'envElementType',
+          prop: 'name',
           label: '授权主体类型'
         },
         {
-          prop: 'envElementType',
+          prop: 'num',
           label: '数量'
         }
-      ]
+      ],
+         // 主体字段名称map集合
+         nameMap: {
+          appNum: "应用资源",
+          orgNum: "组织机构",
+          taskTypeNum: "任务类型",
+          userNum: "用户"
+      }
     };
   },
   computed: {},
@@ -95,7 +102,14 @@ export default {
         };
       }
       subStatisticsTable(params).then((res) => {
-        this.tableData = res;
+        let attr = [];
+        for (const key in res) {
+          attr.push({
+             name: this.nameMap[key],
+             num: res[key]
+          })
+        }
+        this.tableData = attr;
       });
     }
   },

src/pages/list-manage/white-list-manage/component/batch-add-user.vue

@@ -9,7 +9,14 @@
       <!-- 搜索栏 -->
       <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
       <!-- 表格 -->
-      <new-table ref="table" :selection="true" :tableUrl="tableUrl" :tableHeader="tableHeader" :condition="condition">
+      <new-table
+        ref="table"
+        :selection="true"
+        :tableUrl="tableUrl"
+        :tableHeader="tableHeader"
+        :condition="condition"
+        @selection-change="handleSelectChange"
+      >
       </new-table>
     </dg-row>
     <div v-footer>
@@ -44,7 +51,7 @@ export default {
           component: 'ElInput',
           attr: {
             placeholder: '请输入姓名',
-            style: "width: 130px"
+            style: 'width: 130px'
           }
         },
         {
@@ -82,7 +89,8 @@ export default {
           label: '单位名称',
           prop: 'orgName'
         }
-      ]
+      ],
+      selectList: []
     };
   },
   computed: {},
@@ -93,11 +101,14 @@ export default {
     handleCancel() {
       this.$emit('close');
     },
+    handleSelectChange(selection) {
+      this.selectList = this.$lodash.cloneDeep(selection);
+    },
     /**
      * 确定
      */
     handleSubmit() {
-      const selectedData = this.$refs.table.newChooseArr;
+      const selectedData = this.selectList;
       if (selectedData.length > 0) {
         this.setLevel(selectedData);
       } else {

src/pages/list-manage/white-list-manage/component/user-list.vue

@@ -19,6 +19,8 @@
       :selection="true"
       :tableOptList="tableOptList"
        @submitTableOpt="receviceOpt"
+       @selection-change="handleSelectChange"
+
     >
     </new-table>
   </div>
@@ -101,7 +103,8 @@ export default {
           prop: 'listLevel',
           enum: 'ListLevelEnum'
         }
-      ]
+      ],
+      selectList: []
     };
   },
   computed: {},
@@ -117,10 +120,13 @@ export default {
         this.handleRemove(row);
       }
     },
+    handleSelectChange(selection) {
+      this.selectList = this.$lodash.cloneDeep(selection);
+    },
     // 打开弹窗
     openLayer(title, content, operate, area = ['800px', '600px']) {
       const vm = this;
-      const selectedData = vm.$refs.table.newChooseArr;
+      const selectedData = vm.selectList;
       const layer = this.$dgLayer({
         title,
         content,
@@ -157,7 +163,7 @@ export default {
      * 设置名单级别
      */
     verify() {
-      const selectedData = this.$refs.table.newChooseArr;
+      const selectedData = this.selectList;
       if (selectedData.length == 0) {
         this.$message.warning('请至少选择一个人员!');
         return false;