Vue_New/src/xt_pages/role/components/PermissionSettings.vue

<template>
  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
    <div class="roleSettings">
      <div class="roleName">
        <div class="roleNameLeft">
          <p>角色名称</p>
          <el-input placeholder="请输入内容" v-model="role.name" :disabled="true"></el-input>
        </div>
        <p style="color:#338AFB" v-if="role.is_system == 0" @click="disableRoleAction(role.id)">删除该角色</p>
      </div>
      <div class="roleMain" >
        <div class="roleMainLeft" >
          <p class="roletitle">选择权限</p>
          <div class="roleMainLeftBox">
            <!--<el-tree-->
            <!--:props="defaultProps"-->
            <!--:data="data"-->
            <!--:default-checked-keys="data"-->
            <!--node-key="id"-->
            <!--ref="tree"-->
            <!--default-expand-all-->
            <!--show-checkbox-->
            <!--&gt;-->
            <!--&lt;!&ndash; <span class="custom-tree-node" slot-scope="{ node, data }">-->
            <!--<span>{{ data.name }}</span>-->
            <!--</span>&ndash;&gt;-->
            <!--</el-tree>-->
            <el-tree  v-loading="loading" :props="treeProps" :data="purviews" :default-checked-keys="default_checkeds" node-key="id"
                     ref="tree" default-expand-all show-checkbox>
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ data.name }}</span>
                            </span>
            </el-tree>
          </div>
        </div>
        <!--<div class="roleMainRight">-->
        <!--<div class="hasChoose">已选择权限</div>-->
        <!--<el-tree-->
        <!--:props="treeProps" :data="check_purviews"   node-key="id" ref="tree" default-expand-all-->

        <!--&gt;</el-tree>-->
        <!--</div>-->
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="submitAction" :loading="submitLoading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { editPurview, getEditPurviewInitData, setRoleStatus } from '@/api/role/role'

  export default {
    data() {
      return {
        visible: false,
        loading: true,
        submitLoading:false,
        role_id: 0,
        name: '',
        role: {
          name:"",
        },
        purviews: [],
        treeProps: {
          label: 'name',
          children: 'childs'
        },
        default_checkeds: [],
        check_purviews: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      disableRoleAction: function(id) {
        this.$msgbox({
          title: '提示',
          message: '是否确定要移除该角色',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {

              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "移除中...";
              setRoleStatus(id, false)
                .then(rs => {
                  done();
                  instance.confirmButtonLoading = false;
                  const resp = rs.data
                  if (resp.state === 1) {
                    this.$emit('delete')
                  } else {
                    this.$message.error(resp.msg)
                  }
                })
                .catch(err => {
                  done();
                  this.$message.error(err);
                  instance.confirmButtonLoading = false;
                })
            }else{

              done();
            }
          }
        })
      },

      submitAction: function() {

        if (this.role_id <= 0) {
          return
        }

        var checkeds = this.$refs.tree.getCheckedKeys(true)

        var ids = []
        var func_ids = []

        if (checkeds.length > 0) {
          this.purviews.forEach(purview => {
            if (purview.childs != null && purview.childs.length > 0) {
              purview.childs.forEach(childs => {
                if (childs.childs == null) {
                  if (checkeds.indexOf(childs.id) != -1) {
                    if (ids.indexOf(purview.id) == -1) {
                      ids.push(purview.id)
                    }
                    ids.push(childs.id)

                  }
                } else {
                  console.log(childs.name)
                  if (childs.name == '透析记录') {

                    childs.childs.forEach(child => {
                      if (checkeds.indexOf(child.id) != -1) {
                        if (func_ids.indexOf(childs.id) == -1) {
                          func_ids.push(childs.id)
                        }
                        func_ids.push(child.id)
                      }
                    })
                  } else {
                    childs.childs.forEach(child => {
                      if (checkeds.indexOf(child.id) != -1) {
                        if (ids.indexOf(childs.id) == -1) {
                          ids.push(childs.id)
                        }
                        ids.push(child.id)
                      }
                    })

                  }

                }
              })

            } else {
              if (checkeds.indexOf(purview.id) != -1) {
                ids.push(purview.id)
              }
            }
          })
        }
        var idsStr = ''
        if (ids.length > 0) {
          idsStr = ids.join(',')
        }

        var funcIdsStr = ''
        if (func_ids.length > 0) {
          funcIdsStr = func_ids.join(',')
        }
        this.submitLoading = true
        editPurview(this.role_id, idsStr, funcIdsStr).then(rs => {
          var resp = rs.data
          this.submitLoading = false

          if (resp.state === 1) {
            this.hide()
          } else {
            this.$message.error(resp.msg)
          }
        }).catch(err => {
          this.submitLoading = false
          this.$message.error(err)
        })
      },

      show(role_id) {
        this.loading = true
        this.visible = true
        this.default_checkeds = []
        this.purviews = []



        var id = parseInt(role_id)
        if (id <= 0) {
          this.$message.error('参数错误')
          return
        }
        this.role_id = role_id
        getEditPurviewInitData(this.role_id).then(rs => {
          var resp = rs.data
          if (resp.state === 1) {
            this.role = resp.data.role
            this.purviews.push(...resp.data.purviews)
            // 初始化默认选中项
            var role_purview_ids = resp.data.role_purview_ids
            var checkeds = []
            if (role_purview_ids.length > 0) {
              var ids = role_purview_ids.split(',')
              this.purviews.forEach(purview => {
                if (purview.childs != null && purview.childs.length > 0) {
                  purview.childs.forEach(childs => {

                    if (childs.childs != null && childs.childs.length > 0) {
                      childs.childs.forEach(child => {
                        if (ids.indexOf(child.id + '') != -1) {
                          checkeds.push(child.id)
                        }
                      })

                      }else{
                      if (ids.indexOf(childs.id + '') != -1) {
                        checkeds.push(childs.id)
                      }
                    }
                  })

                } else {
                  if (ids.indexOf(purview.id + '') != -1) {
                    checkeds.push(purview.id)
                  }
                }
              })
            }



            this.$nextTick(() => {
              this.default_checkeds = checkeds
            })

            this.loading = false

          } else {
            this.loading = false

            this.$message.error(resp.msg)
          }
        }).catch(err => {
          this.loading = false

          this.$message.error(err)
        })
      },
      hide() {
        this.visible =false

      }

    }, created() {

    }
  }
</script>

<style lang="scss" scoped>
  .roleSettings {

  .roleName {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .roleNameLeft {
    display: flex;
    align-items: center;

  p {
    width: 100px;
  }

  }
  .roleMain {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;

  .roleMainLeft {
    display: flex;

  .roletitle {
    width: 74px;
  }

  .roleMainLeftBox {
    width: 500px;
    height: 706px;
    overflow-y: auto;
    border: 1px solid rgba(234, 238, 240, 1);
    border-radius: 4px;
    padding: 20px 0 0 10px;
  }

  }
  .roleMainRight {
    width: 280px;
    height: 706px;
    overflow-y: auto;
    border: 1px solid rgba(235, 238, 240, 1);
    color: #303133;

  .hasChoose {
    height: 42px;
    line-height: 42px;
    padding-left: 20px;
    background: #f6f8f9;
  }

  }
  }
  }
</style>

<style lang="scss">
  .settingDialog {

  .el-dialog__body {
    max-height: 600px !important;
  }

  }
</style>