feat: 仪表盘分享页面完善

2021-03-18 16:55:31 +08:00 · 2021-03-18 16:55:31 +08:00 · 9e9fb73892
commit 9e9fb73892
parent 3f5d2bee53
14 changed files with 354 additions and 97 deletions
--- a/backend/src/main/java/io/dataease/base/domain/PanelShare.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelShare.java
@ -9,7 +9,7 @@ public class PanelShare implements Serializable {

    private String panelGroupId;

-    private Long userId;
+    private Long targetId;

    private Long createTime;

--- a/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelShareExample.java
@ -234,63 +234,63 @@ public class PanelShareExample {
            return (Criteria) this;
        }

-        public Criteria andUserIdIsNull() {
-            addCriterion("user_id is null");
+        public Criteria andTargetIdIsNull() {
+            addCriterion("target_id is null");
            return (Criteria) this;
        }

-        public Criteria andUserIdIsNotNull() {
-            addCriterion("user_id is not null");
+        public Criteria andTargetIdIsNotNull() {
+            addCriterion("target_id is not null");
            return (Criteria) this;
        }

-        public Criteria andUserIdEqualTo(Long value) {
-            addCriterion("user_id =", value, "userId");
+        public Criteria andTargetIdEqualTo(Long value) {
+            addCriterion("target_id =", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdNotEqualTo(Long value) {
-            addCriterion("user_id <>", value, "userId");
+        public Criteria andTargetIdNotEqualTo(Long value) {
+            addCriterion("target_id <>", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdGreaterThan(Long value) {
-            addCriterion("user_id >", value, "userId");
+        public Criteria andTargetIdGreaterThan(Long value) {
+            addCriterion("target_id >", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdGreaterThanOrEqualTo(Long value) {
-            addCriterion("user_id >=", value, "userId");
+        public Criteria andTargetIdGreaterThanOrEqualTo(Long value) {
+            addCriterion("target_id >=", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdLessThan(Long value) {
-            addCriterion("user_id <", value, "userId");
+        public Criteria andTargetIdLessThan(Long value) {
+            addCriterion("target_id <", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdLessThanOrEqualTo(Long value) {
-            addCriterion("user_id <=", value, "userId");
+        public Criteria andTargetIdLessThanOrEqualTo(Long value) {
+            addCriterion("target_id <=", value, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdIn(List<Long> values) {
-            addCriterion("user_id in", values, "userId");
+        public Criteria andTargetIdIn(List<Long> values) {
+            addCriterion("target_id in", values, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdNotIn(List<Long> values) {
-            addCriterion("user_id not in", values, "userId");
+        public Criteria andTargetIdNotIn(List<Long> values) {
+            addCriterion("target_id not in", values, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdBetween(Long value1, Long value2) {
-            addCriterion("user_id between", value1, value2, "userId");
+        public Criteria andTargetIdBetween(Long value1, Long value2) {
+            addCriterion("target_id between", value1, value2, "targetId");
            return (Criteria) this;
        }

-        public Criteria andUserIdNotBetween(Long value1, Long value2) {
-            addCriterion("user_id not between", value1, value2, "userId");
+        public Criteria andTargetIdNotBetween(Long value1, Long value2) {
+            addCriterion("target_id not between", value1, value2, "targetId");
            return (Criteria) this;
        }

--- a/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelShareMapper.xml
@ -4,7 +4,7 @@
  <resultMap id="BaseResultMap" type="io.dataease.base.domain.PanelShare">
    <id column="share_id" jdbcType="BIGINT" property="shareId" />
    <result column="panel_group_id" jdbcType="VARCHAR" property="panelGroupId" />
-    <result column="user_id" jdbcType="BIGINT" property="userId" />
+    <result column="target_id" jdbcType="BIGINT" property="targetId" />
    <result column="create_time" jdbcType="BIGINT" property="createTime" />
    <result column="type" jdbcType="INTEGER" property="type" />
  </resultMap>
@ -67,7 +67,7 @@
    </where>
  </sql>
  <sql id="Base_Column_List">
-    share_id, panel_group_id, user_id, create_time, `type`
+    share_id, panel_group_id, target_id, create_time, `type`
  </sql>
  <select id="selectByExample" parameterType="io.dataease.base.domain.PanelShareExample" resultMap="BaseResultMap">
    select
@ -100,9 +100,9 @@
    </if>
  </delete>
  <insert id="insert" parameterType="io.dataease.base.domain.PanelShare">
-    insert into panel_share (share_id, panel_group_id, user_id, 
+    insert into panel_share (share_id, panel_group_id, target_id, 
      create_time, `type`)
-    values (#{shareId,jdbcType=BIGINT}, #{panelGroupId,jdbcType=VARCHAR}, #{userId,jdbcType=BIGINT}, 
+    values (#{shareId,jdbcType=BIGINT}, #{panelGroupId,jdbcType=VARCHAR}, #{targetId,jdbcType=BIGINT}, 
      #{createTime,jdbcType=BIGINT}, #{type,jdbcType=INTEGER})
  </insert>
  <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelShare">
@ -114,8 +114,8 @@
      <if test="panelGroupId != null">
        panel_group_id,
      </if>
-      <if test="userId != null">
-        user_id,
+      <if test="targetId != null">
+        target_id,
      </if>
      <if test="createTime != null">
        create_time,
@ -131,8 +131,8 @@
      <if test="panelGroupId != null">
        #{panelGroupId,jdbcType=VARCHAR},
      </if>
-      <if test="userId != null">
-        #{userId,jdbcType=BIGINT},
+      <if test="targetId != null">
+        #{targetId,jdbcType=BIGINT},
      </if>
      <if test="createTime != null">
        #{createTime,jdbcType=BIGINT},
@ -157,8 +157,8 @@
      <if test="record.panelGroupId != null">
        panel_group_id = #{record.panelGroupId,jdbcType=VARCHAR},
      </if>
-      <if test="record.userId != null">
-        user_id = #{record.userId,jdbcType=BIGINT},
+      <if test="record.targetId != null">
+        target_id = #{record.targetId,jdbcType=BIGINT},
      </if>
      <if test="record.createTime != null">
        create_time = #{record.createTime,jdbcType=BIGINT},
@ -175,7 +175,7 @@
    update panel_share
    set share_id = #{record.shareId,jdbcType=BIGINT},
      panel_group_id = #{record.panelGroupId,jdbcType=VARCHAR},
-      user_id = #{record.userId,jdbcType=BIGINT},
+      target_id = #{record.targetId,jdbcType=BIGINT},
      create_time = #{record.createTime,jdbcType=BIGINT},
      `type` = #{record.type,jdbcType=INTEGER}
    <if test="_parameter != null">
@ -188,8 +188,8 @@
      <if test="panelGroupId != null">
        panel_group_id = #{panelGroupId,jdbcType=VARCHAR},
      </if>
-      <if test="userId != null">
-        user_id = #{userId,jdbcType=BIGINT},
+      <if test="targetId != null">
+        target_id = #{targetId,jdbcType=BIGINT},
      </if>
      <if test="createTime != null">
        create_time = #{createTime,jdbcType=BIGINT},
@ -203,7 +203,7 @@
  <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.PanelShare">
    update panel_share
    set panel_group_id = #{panelGroupId,jdbcType=VARCHAR},
-      user_id = #{userId,jdbcType=BIGINT},
+      target_id = #{targetId,jdbcType=BIGINT},
      create_time = #{createTime,jdbcType=BIGINT},
      `type` = #{type,jdbcType=INTEGER}
    where share_id = #{shareId,jdbcType=BIGINT}
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.java
@ -3,12 +3,13 @@ package io.dataease.base.mapper.ext;
 import io.dataease.base.domain.PanelShare;
 import io.dataease.base.mapper.ext.query.GridExample;
 import io.dataease.dto.panel.PanelShareDto;
+import org.apache.ibatis.annotations.Param;

 import java.util.List;

 public interface ExtPanelShareMapper {

-    int batchInsert(List<PanelShare> shares);
+    int batchInsert(@Param("shares") List<PanelShare> shares);

    List<PanelShareDto> query(GridExample example);

--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelShareMapper.xml
@ -6,13 +6,14 @@
        <id column="id" property="id" />
        <result column="name" property="name" />
        <result column="pid" property="pid" />
+        <result column="creator" property="create_by" />
    </resultMap>

-    <insert id="batchInsert" parameterType="io.dataease.base.domain.PanelStore">
-        INSERT INTO panel_store (panel_group_id,user_id,create_time)
+    <insert id="batchInsert" parameterType="io.dataease.base.domain.PanelShare">
+        INSERT INTO panel_share (panel_group_id,target_id,create_time,type)
        VALUES 
-        <foreach collection="list" item="store" separator=",">
-            (#{store.panelGroupId}, #{store.userId}, #{store.createTime})
+        <foreach collection="shares" item="share" separator=",">
+            (#{share.panelGroupId}, #{share.targetId}, #{share.createTime}, #{share.type})
        </foreach>
    </insert>

@ -33,7 +34,7 @@
    </select>

    <select id="queryWithResource" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="io.dataease.base.mapper.PanelShareMapper.BaseResultMap">
-        select from panel_share
+        select * from panel_share
        <if test="_parameter != null">
            <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
        </if>
--- a/backend/src/main/java/io/dataease/controller/request/panel/PanelShareRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/panel/PanelShareRequest.java
@ -8,9 +8,10 @@ import java.util.List;

@Data
 public class PanelShareRequest implements Serializable {
-
-    @ApiModelProperty("分享目标用户集合")
-    private List<Long> userIds;
+    @ApiModelProperty(value = "分享目标类型", allowableValues = "0:user,1:role,2:dept")
+    private Integer type;
+    @ApiModelProperty("分享目标集合")
+    private List<Long> targetIds;
    @ApiModelProperty("分享仪表板集合")
    private List<String> panelIds;
 }
--- a/backend/src/main/java/io/dataease/service/panel/ShareService.java
+++ b/backend/src/main/java/io/dataease/service/panel/ShareService.java
@ -2,6 +2,7 @@ package io.dataease.service.panel;

 import io.dataease.base.domain.PanelShare;
 import io.dataease.base.domain.PanelShareExample;
+import io.dataease.base.domain.SysUser;
 import io.dataease.base.mapper.PanelShareMapper;
 import io.dataease.base.mapper.ext.ExtPanelShareMapper;
 import io.dataease.base.mapper.ext.query.GridExample;
@ -36,21 +37,26 @@ public class ShareService {
    public void save(PanelShareRequest request){

        //1.先根据仪表板删除所有已经分享的
+        Integer type = request.getType();
        List<String> panelIds = request.getPanelIds();
-        List<Long> userIds = request.getUserIds();
+        List<Long> targetIds = request.getTargetIds();
        // 使用原生对象会导致事物失效 所以这里需要使用spring代理对象
        if (CollectionUtils.isNotEmpty(panelIds)){
            ShareService proxy = CommonBeanFactory.getBean(ShareService.class);
-            panelIds.forEach(proxy::delete);
+            panelIds.forEach(panelId -> {
+                proxy.delete(panelId, type);
+            });
        }
-        if (CollectionUtils.isEmpty(userIds)) return;
+        if (CollectionUtils.isEmpty(targetIds)) return;
+
        long now = System.currentTimeMillis();
        List<PanelShare> shares = panelIds.stream().flatMap(panelId ->
-            userIds.stream().map(userId -> {
+                targetIds.stream().map(targetId -> {
                PanelShare share = new PanelShare();
                share.setCreateTime(now);
                share.setPanelGroupId(panelId);
-                share.setUserId(userId);
+                share.setTargetId(targetId);
+                share.setType(type);
                return share;
            })
        ).collect(Collectors.toList());
@ -64,20 +70,31 @@ public class ShareService {
     * @param panel_group_id
     */
    @Transactional
-    public void delete(String panel_group_id){
+    public void delete(String panel_group_id, Integer type){
        PanelShareExample example = new PanelShareExample();
-        example.createCriteria().andPanelGroupIdEqualTo(panel_group_id);
+        example.createCriteria().andPanelGroupIdEqualTo(panel_group_id).andTypeEqualTo(type);
        mapper.deleteByExample(example);
    }


    public List<PanelShareDto> queryTree(BaseGridRequest request){
-        Long userId = AuthUtils.getUser().getUserId();
+        SysUser user = AuthUtils.getUser();
+        Long userId = user.getUserId();
+        Long deptId = user.getDeptId();
+        List<Long> roleIds = new ArrayList<>();
+
+        List<Long> targetIds = new ArrayList<>();
+        targetIds.add(userId);
+        targetIds.add(deptId);
+        targetIds.addAll(roleIds);
+
        ConditionEntity condition = new ConditionEntity();
-        condition.setField("s.user_id");
-        condition.setOperator("eq");
-        condition.setValue(userId);
+        condition.setField("s.target_id");
+        condition.setOperator("in");
+        condition.setValue(targetIds);
+
        request.setConditions(new ArrayList<ConditionEntity>(){{add(condition);}});
+
        GridExample example = request.convertExample();
        List<PanelShareDto> datas = extPanelShareMapper.query(example);
        return convertTree(datas);
@ -86,7 +103,6 @@ public class ShareService {
    //List构建Tree
    private List<PanelShareDto> convertTree(List<PanelShareDto> datas){
        Map<String, List<PanelShareDto>> map = datas.stream().collect(Collectors.groupingBy(PanelShareDto::getCreator));
-        List<PanelShareDto> roots = new ArrayList<>();
        return map.entrySet().stream().map(entry -> PanelShareDto.builder().name(entry.getKey()).children(entry.getValue()).build()).collect(Collectors.toList());
    }

--- a/backend/src/main/java/io/dataease/service/sys/DeptService.java
+++ b/backend/src/main/java/io/dataease/service/sys/DeptService.java
@ -14,6 +14,7 @@ import io.dataease.controller.sys.request.DeptDeleteRequest;
 import io.dataease.controller.sys.request.DeptStatusRequest;
 import io.dataease.controller.sys.request.SimpleTreeNode;
 import io.dataease.controller.sys.response.DeptTreeNode;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@ -134,8 +135,10 @@ public class DeptService {
        List<SimpleTreeNode> targetNodes = nodeByCondition(request);
        List<Long> ids = upTree(allNodes, targetNodes);
        SysDeptExample example = new SysDeptExample();
-        SysDeptExample.Criteria criteria = example.createCriteria();
-        criteria.andDeptIdIn(ids);
+        if (CollectionUtils.isNotEmpty(ids)){
+            SysDeptExample.Criteria criteria = example.createCriteria();
+            criteria.andDeptIdIn(ids);
+        }
        example.setOrderByClause("dept_sort");
        List<SysDept> sysDepts = sysDeptMapper.selectByExample(example);
        return sysDepts;
--- a/backend/src/main/resources/db/migration/V12__panel_table.sql
+++ b/backend/src/main/resources/db/migration/V12__panel_table.sql
@ -67,7 +67,7 @@ CREATE TABLE `panel_store` (
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `create_time` bigint(13) DEFAULT NULL COMMENT '创建日期',
  PRIMARY KEY (`store_id`) USING BTREE,
-  UNIQUE KEY `UK_store_user_id` (`user_id`) USING BTREE
+  KEY `UK_store_user_id` (`user_id`)

 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板收藏';

@ -86,13 +86,13 @@ DROP TABLE IF EXISTS `panel_share`;
 CREATE TABLE `panel_share` (
  `share_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分享ID',
  `panel_group_id` varchar(50) DEFAULT NULL COMMENT '仪表板ID',
-  `user_id` bigint(20) DEFAULT NULL COMMENT '用户ID',
+  `target_id` bigint(20) DEFAULT NULL COMMENT '目标ID',
  `create_time` bigint(13) DEFAULT NULL COMMENT '创建日期',
-  `type` int(8) DEFAULT NULL COMMENT '类型',
+  `type` int(8) DEFAULT NULL COMMENT '类型0:user,1:role,2dept',
  PRIMARY KEY (`share_id`) USING BTREE,
-  UNIQUE KEY `UK_share_user_id` (`user_id`) USING BTREE,
-  UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE,
-  UNIQUE KEY `UK_share_type` (`type`) USING BTREE
+  KEY `UK_share_arget_id` (`target_id`) ,
+  KEY `UK_share_panel_group_id` (`panel_group_id`) ,
+  KEY `UK_share_type` (`type`)

 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板分享';

--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@ -24,13 +24,17 @@

 <script>
 import { getDeptTree, loadTable } from '@/api/system/dept'
-import { formatCondition } from '@/utils/index'
+import { saveShare, loadShares } from '@/api/panel/share'
 export default {
  name: 'GrantDept',
  props: {
    resourceId: {
      type: String,
      default: null
+    },
+    keyWord: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -40,14 +44,44 @@ export default {
        field: 'pid',
        operator: 'eq',
        value: 0
-      }
-    //   maps: new Map()
+      },
+      type: 2, // 类型2代表组织
+      shares: [],
+      changeIndex: 0,
+      timeMachine: null
+    }
+  },
+  watch: {
+    keyWord(v, o) {
+      this.destryTimeMachine()
+      this.changeIndex++
+      this.searchWithKey(this.changeIndex)
    }
  },
  created() {
    this.search()
  },
  methods: {
+    // 根据关键字搜索
+    // 1500ms内 key不发生变化则执行查询
+    searchWithKey(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.changeIndex) {
+          const condition = {
+            field: 'name',
+            operator: 'like',
+            value: this.keyWord
+          }
+          this.search(condition)
+          console.log('start execute search')
+        }
+        this.destryTimeMachine()
+      }, 1500)
+    },
+    destryTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
    // 加载下一级子节点数据
    loadExpandDatas(row, treeNode, resolve) {
      getDeptTree(row.deptId).then(res => {
@ -60,21 +94,23 @@ export default {
        })
        // this.maps.set(row.deptId, { row, treeNode, resolve })
        resolve && resolve(data)
+        this.$nextTick(() => {
+          this.setCheckExpandNodes(data)
+        })
      })
    },
    // 加载表格数据
    search(condition) {
      // this.setTableAttr()
+
      this.data = []
      let param = {}
-      if (condition && condition.quick) {
-        const con = this.quick_condition(condition)
-        param = formatCondition(con)
+      if (condition && condition.value) {
+        param = { conditions: [condition] }
      } else {
        param = { conditions: [this.defaultCondition] }
      }

-      // param.conditions.push(this.defaultCondition)
      loadTable(param).then(res => {
        let data = res.data
        data = data.map(obj => {
@ -84,11 +120,22 @@ export default {
          return obj
        })

-        if (condition && condition.quick) {
-          data = this.buildTree(data)
-          // this.setTableAttr(true)
+        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
        }
-        this.data = data
+
+        this.queryShareNodeIds()
      })
    },

@ -110,7 +157,62 @@ export default {
        parentEl.children = [...(parentEl.children || []), el]
      })
      return roots
+    },
+
+    save() {
+      const rows = this.$refs.table.store.states.selection
+      const request = this.buildRequest(rows)
+      saveShare(request).then(res => {
+        this.$success('保存成功')
+        return true
+      }).catch(err => {
+        this.$error(err.message)
+        return false
+      })
+      console.log('dept save')
+    },
+    cancel() {
+      console.log('dept cancel')
+    },
+
+    buildRequest(rows) {
+      const targetIds = rows.map(row => row.deptId)
+      const panelIds = [this.resourceId]
+      return {
+        targetIds: targetIds,
+        panelIds: panelIds,
+        type: this.type
+      }
+    },
+
+    queryShareNodeIds(callBack) {
+      const conditionResourceId = { field: 'panel_group_id', operator: 'eq', value: this.resourceId }
+      const conditionType = { field: 'type', operator: 'eq', value: this.type }
+      const param = { conditions: [conditionResourceId, conditionType] }
+      loadShares(param).then(res => {
+        const shares = res.data
+        const nodeIds = shares.map(share => share.targetId)
+        this.shares = nodeIds
+        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)
+      })
+    },
+    setCheckExpandNodes(rows) {
+      rows.forEach(node => {
+        const nodeId = node.deptId
+        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      })
    }
+
  }
 }
 </script>
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@ -8,10 +8,16 @@
    </div>

    <el-tabs v-model="activeName" :class="{'de-search-header': showSearchInput}" @tab-click="handleClick">
-      <el-tab-pane :lazy="true" class="de-tab" label="部门" name="1"><grant-dept :resource-id="resourceId" /></el-tab-pane>
-      <el-tab-pane :lazy="true" class="de-tab" label="角色" name="2"><grant-role :resource-id="resourceId" /></el-tab-pane>
-      <el-tab-pane :lazy="true" class="de-tab" label="用户" name="3"><grant-user :resource-id="resourceId" /></el-tab-pane>
+      <el-tab-pane :lazy="true" class="de-tab" label="部门" :name="tabNames[0]"><grant-dept :ref="tabNames[0]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
+      <el-tab-pane :lazy="true" class="de-tab" label="角色" :name="tabNames[1]"><grant-role :ref="tabNames[1]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
+      <el-tab-pane :lazy="true" class="de-tab" label="用户" :name="tabNames[2]"><grant-user :ref="tabNames[2]" :resource-id="resourceId" :key-word="key" /></el-tab-pane>
    </el-tabs>
+    <div class="auth-root-class">
+      <span slot="footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </span>
+    </div>
  </div>

 </template>
@ -31,11 +37,15 @@ export default {
  },
  data() {
    return {
-      activeName: '1',
+      tabNames: ['grantDept', 'grantRole', 'grantUser'],
+      activeName: null,
      showSearchInput: false,
-      key: null
+      key: ''
    }
  },
+  created() {
+    this.activeName = this.tabNames[0]
+  },

  methods: {
    handleClick(tab, event) {
@ -45,7 +55,16 @@ export default {
      this.showSearchInput = true
    },
    closeSearchWidget() {
+      this.key = ''
      this.showSearchInput = false
+    },
+    save() {
+      this.$refs[this.activeName].save()
+      this.$emit('close-grant', 0)
+    },
+    cancel() {
+      this.$refs[this.activeName].cancel()
+      this.$emit('close-grant', 0)
    }
  }
 }
@ -71,6 +90,11 @@ export default {
    border-right: none;
 }

+.auth-root-class {
+    margin: 15px 0px 5px;
+    text-align: right;
+}
+
 // ::-webkit-scrollbar {

 // }
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@ -2,7 +2,7 @@
  <div class="my_table">
    <el-table
      ref="table"
-      :data="data"
+      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
      :show-header="true"
      style="width: 100%"
      :row-style="{height: '35px'}"
@ -17,12 +17,17 @@
 <script>
 import { roleGrid } from '@/api/system/role'
 import { formatCondition } from '@/utils/index'
+import { saveShare, loadShares } from '@/api/panel/share'
 export default {
  name: 'GrantRole',
  props: {
    resourceId: {
      type: String,
      default: null
+    },
+    keyWord: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -31,7 +36,9 @@ export default {
      defaultHeadName: '全部',
      columnLabel: null,
      filter_options: [{ text: '未分享角色', value: 0 }, { text: '已分享角色', value: 1 }],
-      fieldName: 'name'
+      fieldName: 'name',
+      type: 1, // 类型1代表角色
+      shares: []
    }
  },
  created() {
@ -50,12 +57,14 @@ export default {
        const data = response.data
        // this.total = data.itemCount
        this.data = data.listObject
+        this.queryShareNodeIds()
      })
    },
    filterHandler(value, row, column) {
      // const property = column['property']
      // return row[property] === value
-      return row['code'] === 'admin'
+      const roleId = row['roleId']
+      return !(value ^ this.shares.includes(roleId))
    },

    filterChange(obj) {
@ -65,6 +74,52 @@ export default {
        return
      }
      this.columnLabel = this.filter_options[arr[0]].text
+    },
+    save() {
+      const rows = this.$refs.table.store.states.selection
+      const request = this.buildRequest(rows)
+      saveShare(request).then(res => {
+        this.$success('保存成功')
+        return true
+      }).catch(err => {
+        this.$error(err.message)
+        return false
+      })
+    },
+
+    cancel() {
+      console.log('role cancel')
+    },
+    buildRequest(rows) {
+      const targetIds = rows.map(row => row.roleId)
+      const panelIds = [this.resourceId]
+      return {
+        targetIds: targetIds,
+        panelIds: panelIds,
+        type: this.type
+      }
+    },
+
+    queryShareNodeIds(callBack) {
+      const conditionResourceId = { field: 'panel_group_id', operator: 'eq', value: this.resourceId }
+      const conditionType = { field: 'type', operator: 'eq', value: this.type }
+      const param = { conditions: [conditionResourceId, conditionType] }
+      loadShares(param).then(res => {
+        const shares = res.data
+        const nodeIds = shares.map(share => share.targetId)
+        this.shares = nodeIds
+        this.$nextTick(() => {
+          this.setCheckNodes()
+        })
+        callBack && callBack()
+      })
+    },
+
+    setCheckNodes() {
+      this.data.forEach(node => {
+        const nodeId = node.roleId
+        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      })
    }

  }
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@ -2,7 +2,7 @@
  <div class="my_table">
    <el-table
      ref="table"
-      :data="data"
+      :data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
      :show-header="true"
      style="width: 100%"
      :row-style="{height: '35px'}"
@ -17,12 +17,17 @@
 <script>
 import { userLists } from '@/api/system/user'
 import { formatCondition } from '@/utils/index'
+import { saveShare, loadShares } from '@/api/panel/share'
 export default {
  name: 'GrantUser',
  props: {
    resourceId: {
      type: String,
      default: null
+    },
+    keyWord: {
+      type: String,
+      default: ''
    }
  },
  data() {
@ -31,7 +36,9 @@ export default {
      defaultHeadName: '全部',
      columnLabel: null,
      filter_options: [{ text: '未分享人员', value: 0 }, { text: '已分享人员', value: 1 }],
-      fieldName: 'nickName'
+      fieldName: 'nickName',
+      type: 0, // 类型0代表用户
+      shares: []
    }
  },
  created() {
@ -49,12 +56,14 @@ export default {
        const data = response.data
        // this.total = data.itemCount
        this.data = data.listObject
+        this.queryShareNodeIds()
      })
    },
    filterHandler(value, row, column) {
      // const property = column['property']
      // return row[property] === value
-      return row['code'] === 'admin'
+      const userId = row['userId']
+      return !(value ^ this.shares.includes(userId))
    },

    filterChange(obj) {
@ -64,6 +73,53 @@ export default {
        return
      }
      this.columnLabel = this.filter_options[arr[0]].text
+    },
+
+    save() {
+      const rows = this.$refs.table.store.states.selection
+      const request = this.buildRequest(rows)
+      saveShare(request).then(res => {
+        this.$success('保存成功')
+        return true
+      }).catch(err => {
+        this.$error(err.message)
+        return false
+      })
+    },
+
+    cancel() {
+      console.log('user cancel')
+    },
+    buildRequest(rows) {
+      const targetIds = rows.map(row => row.userId)
+      const panelIds = [this.resourceId]
+      return {
+        targetIds: targetIds,
+        panelIds: panelIds,
+        type: this.type
+      }
+    },
+
+    queryShareNodeIds(callBack) {
+      const conditionResourceId = { field: 'panel_group_id', operator: 'eq', value: this.resourceId }
+      const conditionType = { field: 'type', operator: 'eq', value: this.type }
+      const param = { conditions: [conditionResourceId, conditionType] }
+      loadShares(param).then(res => {
+        const shares = res.data
+        const nodeIds = shares.map(share => share.targetId)
+        this.shares = nodeIds
+        this.$nextTick(() => {
+          this.setCheckNodes()
+        })
+        callBack && callBack()
+      })
+    },
+
+    setCheckNodes() {
+      this.data.forEach(node => {
+        const nodeId = node.userId
+        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      })
    }

  }
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@ -113,15 +113,13 @@
      <el-dialog
        :title="authTitle"
        :visible.sync="authVisible"
-        :show-close="false"
        custom-class="de-dialog"
-        :before-close="handleClose"
      >
-        <grant-auth :resource-id="authResourceId" />
-        <span slot="footer" class="dialog-footer">
+        <grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
+        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="authVisible = false">取 消</el-button>
          <el-button type="primary" @click="authVisible = false">确 定</el-button>
-        </span>
+        </span> -->
      </el-dialog>
    </el-col>
  </el-col>
@ -486,9 +484,9 @@ export default {
      this.authTitle = '把[' + data.label + ']分享给'
      this.authVisible = true
    },
-    handleClose(done) {
+    closeGrant() {
      this.authResourceId = null
-      this.handleClose = false
+      this.authVisible = false
    }
  }
 }