refactor: 优化分享组织树

backend/src/main/java/io/dataease/controller/sys/SysUserController.java

@@ -5,6 +5,7 @@ import com.github.pagehelper.Page;
 import com.github.pagehelper.PageHelper;
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.auth.api.dto.CurrentUserDto;
+import io.dataease.base.domain.SysRole;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
@@ -116,4 +117,14 @@ public class SysUserController {
     public List<RoleUserItem> all(){
         return sysRoleService.allRoles();
     }
+
+
+
+    @ApiOperation("查询角色")
+    @PostMapping("/roleGrid/{goPage}/{pageSize}")
+    public Pager<List<SysRole>> roleGrid(@PathVariable int goPage, @PathVariable int pageSize, @RequestBody BaseGridRequest request) {
+        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
+        Pager<List<SysRole>> listPager = PageUtils.setPageInfo(page, sysRoleService.query(request));
+        return listPager;
+    }
 }

backend/src/main/java/io/dataease/service/sys/SysRoleService.java

@@ -5,9 +5,11 @@ package io.dataease.service.sys;
 import io.dataease.base.domain.SysUsersRolesExample;
 import io.dataease.base.mapper.SysRoleMapper;
 import io.dataease.base.mapper.SysUsersRolesMapper;*/
+import io.dataease.base.domain.SysRole;
 import io.dataease.base.mapper.ext.ExtSysRoleMapper;
 /*import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.request.RoleMenusRequest;*/
+import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.response.RoleUserItem;
 import org.springframework.stereotype.Service;
 /*import org.springframework.transaction.annotation.Transactional;*/
@@ -55,12 +57,13 @@ public class SysRoleService {
         return mapper.deleteByPrimaryKey(roleId);
     }
 
-
+    */
     public List<SysRole> query(BaseGridRequest request){
         List<SysRole> result = extSysRoleMapper.query(request.convertExample());
 
         return result;
     }
+    /*
 
     public List<Long> menuIds(Long roleId){
         return extSysRoleMapper.menuIds(roleId);

frontend/src/api/system/user.js

@@ -89,4 +89,13 @@ export const allRoles = () => {
   })
 }
 
-export default { editPassword, delUser, editUser, addUser, userLists, editStatus, persionInfo, updatePerson, updatePersonPwd, allRoles }
+export function roleGrid(pageIndex, pageSize, data) {
+  return request({
+    url: '/api/user/roleGrid/' + pageIndex + '/' + pageSize,
+    method: 'post',
+    data,
+    loading: true
+  })
+}
+
+export default { editPassword, delUser, editUser, addUser, userLists, editStatus, persionInfo, updatePerson, updatePersonPwd, allRoles, roleGrid }

frontend/src/views/panel/GrantAuth/dept/index.vue

 <template>
-  <div class="my_table">
-    <el-table
-      ref="table"
-      :data="data"
-      lazy
-      :show-header="true"
-      :load="loadExpandDatas"
-      style="width: 100%"
-      :row-style="{height: '35px'}"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      row-key="deptId"
-    >
-      <el-table-column :label="$t('panel.all_org')" prop="name" />
-      <el-table-column type="selection" fixd />
-      <!-- <el-table-column label="分享给" prop="deptId" width="80" fixed="right">
-        <template slot-scope="scope">
-          <el-checkbox :v-model="scope.row.deptId===0" />
-        </template>
-      </el-table-column> -->
-    </el-table>
-  </div>
+  <el-col>
+    <el-row class="tree-head">
+      <span style="float: left;padding-left: 10px">{{ $t('panel.all_org') }}</span>
+
+    </el-row>
+    <el-row style="margin-top: 5px">
+
+      <el-tree
+        ref="tree"
+        :data="data"
+        lazy
+        :load="loadTree"
+        style="width: 100%"
+        :props="defaultProps"
+        :default-expanded-keys="expandNodeIds"
+        node-key="deptId"
+      >
+        <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span>
+            <span style="margin-left: 6px">{{ data.name }}</span>
+          </span>
+          <span @click.stop>
+
+            <div>
+              <span class="auth-span">
+                <el-checkbox v-model="data.checked" />
+              </span>
+            </div>
+          </span>
+        </span>
+      </el-tree>
+    </el-row>
+  </el-col>
 </template>
 
 <script>
 import { getDeptTree, loadTable } from '@/api/system/dept'
-import { saveShare, loadShares } from '@/api/panel/share'
+import { loadShares } from '@/api/panel/share'
 export default {
   name: 'GrantDept',
   props: {
@@ -48,7 +60,15 @@ export default {
       type: 2, // 类型2代表组织
       shares: [],
       changeIndex: 0,
-      timeMachine: null
+      timeMachine: null,
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+        isLeaf: (data, node) => {
+          return !data.hasChildren
+        }
+      },
+      expandNodeIds: []
     }
   },
   watch: {
@@ -81,9 +101,9 @@ export default {
       this.timeMachine && clearTimeout(this.timeMachine)
       this.timeMachine = null
     },
-    // 加载下一级子节点数据
-    loadExpandDatas(row, treeNode, resolve) {
-      getDeptTree(row.deptId).then(res => {
+    loadTree(node, resolve) {
+      if (!node || !node.data || !node.data.deptId) return
+      getDeptTree(node.data.deptId).then(res => {
         let data = res.data
         data = data.map(obj => {
           if (obj.subCount > 0) {
@@ -91,17 +111,13 @@ export default {
           }
           return obj
         })
-        // this.maps.set(row.deptId, { row, treeNode, resolve })
+        this.setCheckExpandNodes(data)
         resolve && resolve(data)
-        this.$nextTick(() => {
-          this.setCheckExpandNodes(data)
-        })
       })
     },
+
     // 加载表格数据
     search(condition) {
-      // this.setTableAttr()
-
       this.data = []
       let param = {}
       if (condition && condition.value) {
@@ -110,31 +126,41 @@ export default {
         param = { conditions: [this.defaultCondition] }
       }
 
-      loadTable(param).then(res => {
-        let data = res.data
-        data = data.map(obj => {
-          if (obj.subCount > 0) {
-            obj.hasChildren = true
+      this.queryShareNodeIds(() => {
+        loadTable(param).then(res => {
+          let data = res.data
+          data = data.map(obj => {
+            if (obj.subCount > 0) {
+              obj.hasChildren = true
+            }
+            return obj
+          })
+
+          this.setCheckExpandNodes(data)
+          this.expandNodeIds = []
+          if (condition && condition.value) {
+            // data = data.map(node => {
+            //   delete (node.hasChildren)
+            //   return node
+            // })
+            this.data = this.buildTree(data)
+            this.$nextTick(() => {
+              // this.expandNodeIds.push()
+              this.expandResult(this.data)
+            })
+          } else {
+            this.data = data
           }
-          return obj
         })
+      })
+    },
 
-        if (condition && condition.value) {
-          data = data.map(node => {
-            delete (node.hasChildren)
-            return node
-          })
-          this.data = this.buildTree(data)
-          this.$nextTick(() => {
-            data.forEach(node => {
-              this.$refs.table.toggleRowExpansion(node, true)
-            })
-          })
-        } else {
-          this.data = data
+    expandResult(list) {
+      list.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          this.expandNodeIds.push(node.deptId)
+          this.expandResult(node.children)
         }
-
-        this.queryShareNodeIds()
       })
     },
 
@@ -159,22 +185,21 @@ export default {
     },
 
     getSelected() {
+    //   const ids = []
+    //   this.searchChecked(ids)
+    //   return {
+    //     deptIds: ids
+    //   }
+      // const ids = []
+      const nodesMap = this.$refs.tree.store.nodesMap
+
+      const ids = Object.values(nodesMap).filter(node => node.data.checked).map(item => item.data.deptId)
+
       return {
-        deptIds: this.$refs.table.store.states.selection.map(item => item.deptId)
+        deptIds: ids
       }
     },
 
-    save(msg) {
-      const rows = this.$refs.table.store.states.selection
-      const request = this.buildRequest(rows)
-      saveShare(request).then(res => {
-        this.$success(msg)
-        return true
-      }).catch(err => {
-        this.$error(err.message)
-        return false
-      })
-    },
     cancel() {
     },
 
@@ -196,23 +221,23 @@ export default {
         const shares = res.data
         const nodeIds = shares.map(share => share.targetId)
         this.shares = nodeIds
-        this.$nextTick(() => {
-          this.setCheckNodes()
-        })
+        // this.$nextTick(() => {
+        //   this.setCheckNodes()
+        // })
         callBack && callBack()
       })
     },
 
-    setCheckNodes() {
-      this.data.forEach(node => {
-        const nodeId = node.deptId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
-      })
-    },
+    // setCheckNodes() {
+    //   this.data.forEach(node => {
+    //     const nodeId = node.deptId
+    //     this.shares.includes(nodeId) && (node.checked = true)
+    //   })
+    // },
     setCheckExpandNodes(rows) {
       rows.forEach(node => {
         const nodeId = node.deptId
-        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+        this.shares.includes(nodeId) && (node.checked = true)
       })
     }
 
@@ -222,6 +247,37 @@ export default {
 
 <style scoped>
 
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-left: 8px;
+  }
+  .tree-main{
+    height:  calc(100vh - 210px);
+    border: 1px solid #e6e6e6;
+    overflow-y: auto;
+  }
+  .tree-head{
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #e6e6e6;
+    background-color: #f7f8fa;
+    font-size: 12px;
+    color: #3d4d66 ;
+  }
+
+  .auth-span{
+    float: right;
+    width:50px;
+    margin-right: 30px
+  }
+  .highlights-text {
+    color: #faaa39 !important;
+  }
+
 .my_table >>> .el-table__row>td{
   /* 去除表格线 */
   border: none;

frontend/src/views/panel/GrantAuth/role/index.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { roleGrid } from '@/api/system/role'
+import { roleGrid } from '@/api/system/user'
 import { formatCondition } from '@/utils/index'
 import { saveShare, loadShares } from '@/api/panel/share'
 export default {