role.vue

<template>
  <div class="role">
    <div class="head clear-both">
      <el-button @click="add" plain type="success" style="float: right" v-if="!$store.state.readonly">新增角色</el-button>
    </div>
    <el-table
      :data="roleList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="角色ID">
      </el-table-column>
      <el-table-column
        label="角色名称">
        <template slot-scope="scope">
          <el-button type="text" @click="rowClick(scope.row)"> {{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间" sortable>
      </el-table-column>
      <el-table-column
        v-if="!$store.state.readonly"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" v-if="!$store.state.readonly" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row)" v-if="$store.state.deletePermission && !$store.state.readonly">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog
      :title="dialog.title"
      center
      append-to-body
      :visible.sync="dialog.show"
      width="100vw">
      <el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="dialog.form.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单选项">
          <div class="custom-tree-container">
          <el-tree :data="dialog.select"
                   show-checkbox
                   node-key="id"
                   ref="tree"
                   :default-checked-keys="dialog.chooseed"
                   default-expand-all
                   :expand-on-click-node="false"
                   :props="{children:'children',label:'name',value:false}">
             <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="data.pid !== 0">
                  <el-checkbox v-model="data.refund" v-if="data.cover ==='5-1'|| data.cover=== '5-10'|| data.cover=== '5-9'">退款</el-checkbox>
                  <el-checkbox v-model="data.refund" v-if="data.cover ==='10-1' ">类别管理</el-checkbox>
                  <el-checkbox v-model="data.promoter" v-if="data.cover ==='5-1' ">编辑推广人</el-checkbox>
                  <el-checkbox v-model="data.refund" v-if="data.cover ==='2-3'|| data.cover=== '3-1'|| data.cover=== '3-2' ">添加观摩班用户</el-checkbox>
                  <el-checkbox v-model="data.classManage" v-if="data.cover ==='2-3'|| data.cover=== '3-1'|| data.cover=== '3-2' ">添加带班班用户</el-checkbox>
                  <el-checkbox v-model="data.classManageUnlimited" v-if="data.cover ==='2-3'|| data.cover=== '3-1'|| data.cover=== '3-2' ">添加观摩班(无限制)</el-checkbox>
                  <el-checkbox v-model="data.classTakeUnlimited" v-if="data.cover ==='2-3'|| data.cover=== '3-1'|| data.cover=== '3-2' ">添加带班班(无限制)</el-checkbox>
                  <el-checkbox v-model="data.distribution" v-if="data.cover ==='5-9'||data.cover ==='7-9'" @change="distribution" >批量分配</el-checkbox>
                  <el-checkbox v-model="data.export" v-if="exportMenuList.indexOf(data.cover) >-1" >导出</el-checkbox>
                  <el-checkbox v-model="data.readonly">只读</el-checkbox>
                  <el-checkbox v-model="data.delete">删除</el-checkbox>
              </span>
            </span>
          </el-tree>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getMenuListApi,getRoleListApi,getRoleDetailApi,delRoleApi,updateRoleApi,saveRoleApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    components:{
      page
    },
    data(){
      return {
        nowPage:1,
        total:0,
        limit: 10,
        roleList:[],
        exportMenuList:[
          '2-3','5-10','5-2','5-1','5-3','5-8','5-9','3-1','7-9','6-3'
        ],
        dialog:{
          title:'新增角色',
          show:false,
          select:[],
          chooseed:[],
          rules: {
            name: [
              {required: true, message: '请填写角色名称', trigger: 'change'},
            ],
          },
          form:{
            name:'',
            menu_ids:[],
            id: ''
          }
        },
      }
    },
    created(){
      this.getList();
      this.getMenuList();
    },
    methods:{
      distribution(val){
      },
      rowClick(data){
        this.$router.push({name:'admin',query:{roleId:data.id}})
      },
      getMenuList(){
        getMenuListApi().then(res=>{
          if (res) {
            res.forEach(i=>{
              if(i.children){
                i.children.forEach(j=>{
                  j.readonly= false;
                  j.delete = false;
                  if(this.exportMenuList.indexOf(j.cover)>-1)j.export = false;
                  if(j.cover==="5-9"||j.cover==="7-9" )j.distribution = false;
                  if(j.name==='月课订单列表' || j.name==='日课订单列表' || j.name==="来源码管理" ||j.cover==="5-9" || j.cover==="2-3" || j.cover==="3-1"|| data.cover=== '3-2')j.refund = false;
                  if(j.cover==="2-3"||j.cover==="3-1"|| data.cover=== '3-2' ){
                    j.classManageUnlimited= false;
                    j.classManage = false;
                    j.classTakeUnlimited = false;
                  }
                  if(j.cover==="5-1")j.promoter = false;
                  // promoter
                })
              }
            });
            this.dialog.select = res
          }
        })
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList();
      },
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList();
      },
      getList(){
        let json = {
            limit: this.limit,
            page: this.nowPage
        };
        getRoleListApi(json).then(res=>{
          if (res) {
            this.roleList = res.list;
            this.total = res.total;
          }
        })
      },
      edit(data){
        this.dialog.form.id = data.id;
        this.dialog.title = '编辑角色';
        // 初始化
        getMenuListApi().then(res=>{
          if (res) {
            res.forEach(i=>{
              if(i.children){
                i.children.forEach(j=>{
                  j.readonly= false;
                  j.delete = false;
                  if(this.exportMenuList.indexOf(j.cover)>-1)j.export = false;
                  if(j.cover==="5-9"||j.cover==="7-9" )j.distribution = false;
                  if(j.name==='月课订单列表' || j.name==='日课订单列表' || j.name==="来源码管理"|| j.cover==="5-9" || j.cover==="2-3" || j.cover==="3-1"|| data.cover=== '3-2')j.refund = false;
                  if(j.cover==="2-3"||j.cover==="3-1"|| data.cover=== '3-2' ){
                    j.classManageUnlimited= false;
                    j.classManage = false;
                    j.classTakeUnlimited = false;
                  }
                  if(j.cover==="5-1")j.promoter = false;
                })
              }
            });
            this.dialog.select = res;
            // 回显
            getRoleDetailApi(data.id).then((res)=>{
            console.log(res)
              this.dialog.form.name = res.name;
              this.dialog.form.menu_ids = JSON.parse(res.menu_ids);
              this.dialog.chooseed  = [];
              this.dialog.form.menu_ids.forEach(i=>{
                this.dialog.chooseed.push(i.id);
                this.dialog.select.forEach(j=>{
                  if(j.children){
                    // 选中的子项赋值权限
                    j.children.forEach(x=>{
                      if(x.id===i.id){
                        x.readonly = !!i.readonly;
                        x.delete = !!i.delete;
                        if(this.exportMenuList.indexOf(i.cover)>-1)x.export = !!i.export;
                        if(i.cover==='5-1' || i.cover==='5-10' || i.cover === "10-1"|| i.cover==="5-9" || i.cover==="2-3" || i.cover==="3-1"|| data.cover=== '3-2'){
                          x.refund = !!i.refund;
                        }
                        if(i.cover==="2-3"||i.cover==="3-1"|| data.cover=== '3-2'){
                          x.classManage = !!i.classManage;
                          x.classManageUnlimited = !!i.classManageUnlimited;
                          x.classTakeUnlimited = !!i.classTakeUnlimited;
                        }
                        if(i.cover==="5-9"||i.cover==="7-9"){
                          x.distribution = !!i.distribution;
                        }
                        if(i.cover==="5-1"){
                          x.promoter = !!i.promoter;
                        }
                      }
                    })
                  }
                })
              });
              this.dialog.show = true;
              this.$nextTick(function () {
                this.$refs.tree.setCheckedKeys(this.dialog.chooseed);
              })
            })
          }
        });
      },
      add(){
        this.dialog.show = true;
        this.dialog.form.id = '';
        this.dialog.title = '新增菜单';
        this.dialog.form.name = '';
        this.dialog.form.menu_ids = [];
        this.getMenuList();
      },
      del(data){
        this.$confirm('此操作将删除该角色?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delRoleApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          });
        });
      },
      sub(){
        this.$refs['form'].validate((valid) => {
          if(valid){
            let checked = this.$refs.tree.getCheckedNodes();
            let menu_ids = [];
            checked.forEach(i=>{
              let json;
              if(i.readonly === false || i.readonly === true){
                json = {id:i.id,cover:i.cover,readonly:i.readonly}
              }
              if(i.delete === false || i.delete === true){
                json.delete = i.delete
              }
              if(i.refund === false || i.refund === true){
                json.refund = i.refund
              }
              if(i.classManage === false || i.classManage === true){
                json.classManage = i.classManage
              }
              if(i.classManageUnlimited === false || i.classManageUnlimited === true){
                json.classManageUnlimited = i.classManageUnlimited
              }
              if(i.classTakeUnlimited === false || i.classTakeUnlimited === true){
                json.classTakeUnlimited = i.classTakeUnlimited
              }
              if(i.promoter === false || i.promoter === true){
                json.promoter = i.promoter
              }
              if(i.export === false || i.export === true){
                json.export = i.export
              }
              if(i.distribution === false || i.distribution === true){
                json.distribution = i.distribution
              }
              if(json){
                menu_ids.push(json)
              }
            });
            let dia = this.dialog;
            if(dia.form.id){
              let json = {
                name:dia.form.name,
                menu_ids:JSON.stringify(menu_ids)
              };
              this.$confirm('此操作将修改该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                updateRoleApi(dia.form.id,json).then(()=>{
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                  dia.show = false;
                  this.getList()
                })
              })
            }else{
              let json = {
                name:dia.form.name,
                menu_ids:JSON.stringify(menu_ids)
              };
              this.$confirm('此操作将添加新角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                saveRoleApi(json).then(()=>{
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  });
                  dia.show = false;
                  this.getList()
                })
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .role{
  .head{
    margin-bottom: 10px;
  }
  width: 100%;
  padding: 20px 0;
  .page-div{
    text-align: center;
    padding-top: 20px
  }
  }
  .clear-both{
  &:after{
     content: '';
     display: block;
     clear: both;
   }
  }
</style>