supply-front/src/views/setting/role.vue

<template>
  <div class="app-container">
    <div class="setting_title">权限管理</div>
    <el-divider></el-divider>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')" v-if="checkBtnRole('add')">新增角色</el-button>
        </div>
        <div class="fr">
          <ImportButton :imUrl="'stock/importToll'" @importSuccess="getList" />
        </div>
      </div>

      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
          <el-table-column align="center" label="角色" prop="name"></el-table-column>
          <el-table-column align="center" label="允许访问系统" prop="visitSysStatus" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.visitSysStatus"
                :disabled="scope.row.type === 1 || scope.row.type === 2"
                @change="changeStatus(scope.row.adminRoleId, scope.row.visitSysStatus)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="setMenuRole(scope.row.adminRoleId)" v-if="checkBtnRole('detail')">设置权限</el-button>
              <template v-if="checkBtnRole('detail')">
                <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">编辑</el-button>
              </template>
              <template v-if="checkBtnRole('del')">
                <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog :title="addFormType == 'add' ? '新增角色':'编辑角色'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 设置权限 -->
    <el-dialog title="设置权限" :visible.sync="roleFormVisible" :show-close="false" width="40%" :close-on-click-modal="false" custom-class="tree-dialog" top="50px">
      <el-tree
        :data="menuRoleList"
        show-checkbox
        :check-strictly="true"
        :default-expand-all="true"
        :expand-on-click-node="false"
        node-key="moduleId"
        ref="tree"
        highlight-current
        :props="defaultProps">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span v-if="data.type < 3">
            <el-button type="text" size="mini" @click="() => quickSelection(data)">一键全选</el-button>
            <el-button type="text" size="mini" @click="() => quickCancel(data)" style="color: #f56c6c">一键取消</el-button>
          </span>
        </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleFormVisible = false">{{editId != 1 ? '取 消':'关 闭'}}</el-button>
        <el-button type="primary" @click="submitRoleForm" v-if="editId != 1">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getRoleList, addRole, editRole, getRoleDetail, deleteRole, getMenuList, getMenuRoleIds, setMenuRole } from '@/api/setting'

export default {
  data() {
    return {
      imageURL: this.$imageUrl,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      editId:  null,
      addFormType: 'add',
      addFormVisible: false,
      addForm: {
        name: '', // 角色名
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ],
      },

      roleFormVisible: false,

      menuRoleList: [],
      defaultProps: {
        children: 'children',
        label: 'moduleName'
      },
    }
  },
  computed: {
    ...mapGetters([
      'userid', 
      'name'
    ])
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true;
    },

    getList() {
      this.listLoading = true;

      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };

      getRoleList(params).then(res => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteRole({adminRoleId: id}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 新增编辑
    addOrEdit(type, id) {
      this.addFormType = type;
      this.addFormVisible = true;
      if(type == 'edit') {
        this.editId = id;
        getRoleDetail({adminRoleId: id}).then(res => {
          this.addForm = {
            name: res.data.name
          }
        })
      }
    },

    // 取消 新增编辑
    cancelAddForm(){
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
    },

    // 提交 新增编辑
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let params = {
            name: this.addForm.name
          }
          if(this.addFormType == 'edit') {
            params.adminRoleId = this.editId;
            editRole(params).then(res => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          } else {
            addRole(params).then(res => {
              this.cancelAddForm();
              this.getList();
              this.$successMsg('新增成功');
            })
          }
        }
      })
    },

    // 设置权限 - 获取列表
    setMenuRole(id) {
      this.roleFormVisible = true;
      this.editId = id;
      getMenuList({adminUserId: this.userid}).then(res => {
        this.menuRoleList = res.data;
      })
      getMenuRoleIds({adminRoleId: id}).then(res => {
        this.$refs.tree.setCheckedKeys(res.data);
      })
    },

    // 设置权限 - 提交数据
    submitRoleForm() {
      let params = {
        adminModuleIds: this.$refs.tree.getCheckedKeys().join(','),
        adminRoleId: this.editId,
      }
      setMenuRole(params).then(res => {
        this.roleFormVisible = false;
        this.getList();
        this.$successMsg();
      })
    },

    // 一键全选
    quickSelection(data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if(data.children.length) {
        childId = this.familyTree(data.children);
      }
      
      let setChecked = nowChecked.concat([thisId]).concat(childId);

      this.$refs.tree.setCheckedKeys(setChecked);
    },

    // 一键取消
    quickCancel(data) {
      let nowChecked = this.$refs.tree.getCheckedKeys();
      let thisId = data.moduleId;
      let childId = [];
      if(data.children.length) {
        childId = this.familyTree(data.children);
      }
      
      let setChecked = nowChecked;
      if(setChecked.indexOf(thisId) >= 0) {
        setChecked.splice(setChecked.indexOf(thisId), 1);
      }

      if(childId.length) {
        for (var i = 0; i < childId.length; i++) {
          if(setChecked.indexOf(childId[i]) >= 0) {
            setChecked.splice(setChecked.indexOf(childId[i]), 1);
          }
        }
      }

      this.$refs.tree.setCheckedKeys(setChecked);
    },

    // 递归子id
    familyTree(arr) {
      var temp = [];
      var forFn = function (list) {
        for (var i = 0; i < list.length; i++) {
          var item = list[i];
          if (item.children) {
            temp.push(item.moduleId);
            forFn(item.children);
          }
        }
      };
      forFn(arr);
      return temp;
    },

    changeStatus(id, status) {
      editRole({
        adminRoleId: id,
        visitSysStatus: status
      }).then(res => {
        this.getList();
        this.$successMsg('编辑成功');
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .tree-dialog {
    .el-dialog__body {
      padding: 20px;
      .el-tree {
        max-height: calc(100vh - 140px - 54px - 70px);
        overflow-y: scroll;
        padding: 0 30px;
        >.el-tree-node {
          padding: 15px 0;
          border: 1px dashed #ddd;
          margin-bottom: 15px;
          border-radius: 10px;
        }
      }
    }
  }
  ::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>