<template>
  <div id="role">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>角色管理</BreadcrumbItem>
    </Breadcrumb>
    <div class="toolBar">
      <div class="detailItem">
        <Button type="success" icon="md-add" v-if="roleAddBtn" class="aButton" @click="addNew">新增角色</Button>
      </div>
      <div class="detailItem">
        <Input type="text" placeholder="请输入角色名称" style="width: 200px" v-model="searchName"/>
      </div>
      <div class="detailItem">
        <Button type="primary" icon="md-search" class="aButton" @click="search">查询</Button>
        <Button type="primary" icon="ios-undo" ghost @click="resert">重置</Button>
      </div>
    </div>
    <div>
      <Table border :columns="columns" :data="dataList" sort="table"></Table>
    </div>
    <div class="pages">
      <Page :total="pageTotal" :current="page" show-total show-elevator show-sizer @on-change="getNewPage1" @on-page-size-change="getNewPage2"/>
    </div>
    <!--新增员工-->
    <div class="addRole" v-if="showModel1">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelBtn"><Icon type="md-close" /></span>
        </p>
        <div class="roleMsg">
          <div><span>角色分类:</span>
            <Select v-model="role.category" style="width:200px">
              <Option v-for="item in categoryList" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <div><span>角色编码:</span>
            <Input type="text" v-model="role.roleCode" style="width:200px" placeholder="请输入角色编码"/>
          </div>
          <div><span>角色名称:</span>
            <Input type="text" v-model="role.roleName" style="width:200px" placeholder="请输入角色名称"/>
          </div>
          <div class="remark"><span>角色描述:</span>
            <Input type="textarea" :rows="8" v-model="role.remark" placeholder="请输入备注"/>
          </div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="cancelBtn">取消</Button>
          <Button type="primary" @click="confirmBtn">确定</Button>
        </div>
      </div>
    </div>
    <!--授权-->
    <div class="warrant" v-if="showModel2">
      <div class="warrantBox">
        <p class="modelTitle">
          <span>《{{grade}}》的权限</span>
        </p>
        <div class="gradeTree">
          <Tree :data="gradeData" show-checkbox ref="treeList" @on-check-change="selectTree"></Tree>
        </div>
        <div class="bottomBtn">
          <Button type="primary" class="btn2" icon="ios-undo" ghost @click="showModel2=false">返回</Button>
          <Button type="primary" class="btn1" icon="ios-settings" @click="saveSettings">保存设置</Button>
        </div>
      </div>
    </div>
    <!--删除确认框-->
    <Modal v-model="delMsg" :closable="false" :mask-closable="false" width="400" scrollable>
      <p slot="header" style="height:40px;lineHeight:40px;backgroundColor:#ED4014;color:#fff;text-align:center">
        <span>删除</span>
      </p>
      <p>确定删除 <b>"{{delMsgName}}"</b> 这一条信息吗？</p>
      <div slot="footer">
        <Button type="error" ghost @click="cancel">关闭</Button>
        <Button type="error" @click="ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import axios from './../../assets/js/axios';
    export default {
        name: "Role",
      data(){
          return{
              id:'',
              showModel2:false,
              page:1,
              pageSize:10,
              pageTotal:0,
              searchName:'',
              columns: [{title: '角色分类', key: 'category'},
                {title: '角色编码', key: 'code'},
                {title: '角色名称', key: 'name'},
                {title: '角色描述', key: 'remark'},
                {title: '状态',key: 'action',align: 'center',width:100,
                  render:(h, params) => {
                    return h('div', [
                      h('i-switch', { //数据库1是已处理，0是未处理
                        props: {
                          type: 'primary',
                          value: params.row.enabled==1?true:false,//控制开关的打开或关闭状态，官网文档属性是value
                        },
                        on: {
                          'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                            //参数value是回调值，并没有使用到
                            this.switch(params.row.id,params.row.enabled); //params.index是拿到table的行序列，可以取到对应的表格值
                          }
                        }
                      }, )])}
                },
                {title: '操作', key: 'action', width: 170,align: 'center',
                  render: (h, params) => {
                    let _this=this;
                    let roleEditBtn=false;
                    let roleWarrantBtn=false;
                    let roleRemoveBtn=false;
                    // for(let p of _this.tableBtn){
                      // if(p.code=="roleEdit"){
                        roleEditBtn=true;
                      // }
                      // if(p.code=="roleWarrant"){
                        roleWarrantBtn=true;
                      // }
                      // if(p.code=="roleRemove"){
                        roleRemoveBtn=true;
                      // }
                    // }
                    return h('div', [
                      h('Button', {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          display:roleEditBtn?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            this.showEditor(params.row.id);
                          }
                        }
                      }, '编辑'),
                      h('Button', {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          display:roleWarrantBtn?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            this.jumpWarrant(params.row.id,params.row.name);
                          }
                        }
                      }, '授权'),
                      h('Button', {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style:{
                          display:roleRemoveBtn?'inline-block':'none'
                        },
                        on: {
                          click: () => {
                            this.removeRole(params.row.id,params.row.name);
                          }
                        }
                      }, '删除'),
                    ]);
                  }
                }
              ],
              dataList: [],
              showModel1:false,
              sureBtn:true,
              showTitle:'',//model的标题
              role:{
                category:'',
                roleCode:'',
                roleName:'',
                remark:'',
                id:'',
              },
             categoryList:[],
            delMsg:false,
            delMsgName:'',
            delId:'',
            gradeData: [],//授权数据
            grade:'',
            checkedAll:[],
            tableBtn:[],
            roleAddBtn:false,
          }
      },
      mounted(){
          this.id=this.$route.params.id;
          this.getMenu();
          this.getPage();
          this.getButton();
      },
      methods: {
        /*取出字典项*/
        getMenu(){
          let _this=this;
          _this.selectList=JSON.parse(localStorage.getItem('selectList'));
          let selectList=_this.selectList;
          for(let m of selectList){
            if(m.t=="enabled"){
              _this.enabledList=m.list;
            }
            if(m.t=="category"){
              _this.categoryList=m.list;
            }
          }
        },
        /*加载页面按钮*/
        getButton(){
          this.tableBtn=JSON.parse(sessionStorage.getItem('nMArr'));
          for(let i of this.tableBtn){
            if(i.code=="roleAdd"){ this.roleAddBtn=true;}
          }
        },
        /*获取页面*/
        getPage(){
            let _this=this;
            axios.post('/platform-upms/role/page',{
              current:_this.page,
              name:_this.searchName,
              size:_this.pageSize
            }).then(res=>{
                _this.pageTotal=res.data.data.total;
                if (res.data.data.records) {
                  let temp=res.data.data.records;
                  for(let i of temp){
                    for(let j of _this.categoryList){
                    if(i.category==j.code){
                      i.category=j.name;
                    }
                    }
                  }
                  _this.dataList=temp;
                }else{
                  _this.dataList = []
                }
                
            })
          },
        /*页码改变时加载数据*/
        getNewPage1(current){
          this.page=current;
          this.getPage();
        },
        /*每页显示多少条改变时加载数据*/
        getNewPage2(size){
          this.pageSize=size;
          this.getPage();
        },
        /*查询*/
        search(){
          this.page = 1
          this.getPage();
        },
        /*开关*/
        switch(id,en){
          let _this=this;
          if(en==1){
            en=0;
          }else{
            en=1;
          }
         axios.post('/platform-upms/role/enabled',{
           id:id,
           enabled: en
         }).then(res=>{
             _this.getPage();
         })
        },
        /*编辑*/
        showEditor(id){
          let _this=this;
          _this.clearMsg();
          _this.showTitle='编辑角色';
          _this.showModel1=true;
          _this.sureBtn=true;
          _this.role.id=id;
          axios.post('/platform-upms/role/get',{
            id:id
          }).then(res=>{
            let temp=res.data.data;
            _this.role.category=temp.category+'';
            _this.role.roleCode=temp.code;
            _this.role.roleName=temp.name;
            _this.role.remark=temp.remark;
          })
        },
        /*编辑确定按钮*/
        editBtn(){
          let _this=this;
          if(_this.role.roleName==""){
            _this.$Message.error('角色名称不能为空');
            return false;
          }
          if(_this.role.roleCode==""){
            _this.$Message.error('角色编码不能为空');
            return false;
          }
          axios.post('/platform-upms/role/update',{
            category:_this.role.category,
            code:_this.role.roleCode,
            id:_this.role.id,
            name:_this.role.roleName,
            remark:_this.role.remark
          }).then(res=>{
              _this.showModel1=false;
              _this.$Message.info('修改成功');
              _this.getPage();
          })
        },
        /*新增*/
        addNew(){
          let _this=this;
          _this.clearMsg();
          _this.showModel1=true;
          _this.showTitle="新增角色";
          _this.sureBtn=false;
        },
        /*新增确定*/
        addNewBtn(){
          let _this=this;
          if(_this.role.category==""){
            _this.$Message.error('角色分类不能为空');
            return false;
          }
          if(_this.role.roleName==""){
            _this.$Message.error('角色名称不能为空');
            return false;
          }
          if(_this.role.roleCode==""){
            _this.$Message.error('角色编码不能为空');
            return false;
          }
          axios.post('/platform-upms/role/add',{
            category:_this.role.category,
            code:_this.role.roleCode,
            name:_this.role.roleName,
            remark:_this.role.remark
          }).then(res=>{
              _this.showModel1=false;
              _this.$Message.info('新增成功');
              _this.getPage();
          })
        },
        /*清除数据*/
        clearMsg(){
          this.role.category="";
          this.role.roleCode="";
          this.role.roleName="";
          this.role.remark="";
          this.role.id="";
        },
        /*重置按钮*/
        resert(){
          this.searchName = '';
          this.page = 1
          this.getPage()
        },
        /*确定按钮*/
        confirmBtn(){
          if(this.sureBtn){
            this.editBtn();
          }else{
            this.addNewBtn();
          }
        },
        cancelBtn(){
          this.showModel1=false;
          this.clearMsg();
        },
        /*删除*/
        removeRole(id,name){
          let _this=this;
          _this.delMsgName=name;
          _this.delId=id;
          _this.delMsg=true;
        },
        ok(){
          let _this=this;
          axios.post('/platform-upms/role/delete',{
            id:_this.delId
          }).then(res=>{
             _this.$Message.info('删除成功');
              _this.cancel()
              _this.getPage();
          })
        },
        cancel(){
          this.delMsg=false
          this.delMsgName=''
          this.delId=''
        },
        /*跳转到授权*/
        jumpWarrant(id,name){
          let _this=this;
          _this.showModel2=true;
          _this.role.id=id;
          _this.grade=name;
          axios.post('/platform-upms/menu/listByRole',{
              id:_this.role.id
          }).then(res=>{
            if(res){
              let treeArr=[];
              treeArr=_this.getTree(res.data.data);
              _this.gradeData=treeArr;
            }
          })
        },
        /*解析数据*/
        getTree(tree = []) {
          let arr = [];
          if (!!tree && tree.length !== 0) {
            tree.forEach(item => {
              let obj = {};
              obj.title = item.name;
              obj.id=item.id;
              obj.checked=item.checked;
              obj.expand = false;
              obj.selected = false;
              obj.children = this.getTree(item.children); // 递归调用
              arr.push(obj);
            });
          }
          return arr;
        },
        /*授权*/
        selectTree(a){
          let checkAll=this.$refs.treeList.getCheckedAndIndeterminateNodes();
          this.checkedAll=checkAll;
        },
        /*授权确定*/
        saveSettings(){
          let _this=this;
          let temp=[];
          for(let i of _this.checkedAll){
            temp.push(i.id);
          }
          if (temp.length === 0) {
            _this.$Message.warning('菜单未修改或菜单不能为空')
            return false
          }
          axios.post('/platform-upms/menu/saveRoleMenu',{
            menuIds:temp,
            roleId:_this.role.id
          }).then(res=>{
            if(res){
               _this.showModel2=false;
              _this.role.id='';
              _this.grade='';
              _this.$Message.info('授权成功');
            }
          })
        }
      }
    }
</script>

<style scoped>
  #role{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #role .bread{
    font-size: 13px;
    white-space: nowrap;
  }
  #role .toolBar{
    display: flex;
    padding: 20px 20px 0;
    flex-flow: row wrap;
  }
  #role .toolBar .detailItem{
    width: 230px;
    margin-bottom: 20px;
  }
  #role .toolBar .detailItem:first-child{
    width: 140px;
  }
  #role table{
    width: 100%;
    min-width: 1100px;
    border-collapse:collapse;
    font-size: 13px;
  }
  #role table tr{
    height: 40px;
  }
  #role table tr td,#role table tr th{
    border: 1px solid #e8eaec;
    text-align: center;
    white-space: nowrap;
  }
  #role table tr th{
    background-color: #f8f8f9;
  }
  #role .pages{
    padding: 30px 0;
    text-align: right;
  }
  #role .addRole{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #role .modelBox{
    position: absolute;
    width: 680px;
    min-height: 300px;
    top:10px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #role .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #role .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #role .roleMsg{
    display: flex;
    flex-flow: row wrap;
    font-size: 14px;
    padding: 15px 25px;
    justify-content: space-between;
  }
  #role .roleMsg div{
    padding:0 10px 10px 0;
  }
  #role .roleMsg span{
    display: inline-block;
    width: 80px;
    text-align: justify;
  }
  #role .roleMsg input{
    outline: none;
    border: none;
    width: 210px;
    height: 30px;
    padding-left: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #role .roleMsg .remark{
    width: 630px;
    padding: 0;
  }
  #role .modelBox .buttons{
    text-align:center;
  }
  #role .modelBox .buttons button{
    margin: 10px;
  }
  /*授权*/
  #role .warrant{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #role .warrantBox{
    position: absolute;
    width: 680px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #role .gradeTree{
    height: 300px;
    overflow-y: auto;
    padding-left: 10px;
    margin: 20px;
    border:1px solid #ccc;
    border-radius: 10px;
  }
  #role .bottomBtn{
    text-align: center;
  }
  #role .bottomBtn .btn1,.btn2{
    width: 100px;
    margin: 0 10px;
  }
</style>
