<template>
  <div id="employeeAccount">
    <Breadcrumb separator=">" class="bread">
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>员工管理</BreadcrumbItem>
    </Breadcrumb>
    <div class="mainBox">
      <div class="leftBox">
        <Tree :data="treeData" @on-select-change="selectTree"></Tree>
      </div>
      <div class="rightBox">
        <div class="toolBar">
          <div class="detailItem">
            <Checkbox v-model="orgScope">仅查看本组织</Checkbox>
          </div>
          <div class="detailItem">
            <span>用户名：</span>
            <Input type="text" placeholder="请输入用户名" style="width: 180px" v-model="name"/>
          </div>
          <div class="detailItem">
            <Button type="primary" icon="md-search" @click="search">查询</Button>
            <Button type="success" icon="md-add" v-if="userAddBtn" class="aButton" @click="addNew">新增员工</Button>
          </div>
        </div>
        <div>
          <Table border :columns="columns" :data="dataList"></Table>
        </div>
        <div class="pages">
          <Page :total="pageTotal" show-total show-elevator show-sizer @on-change="getNewPages1" @on-page-size-change="getNewPages2"/>
        </div>
      </div>
    </div>
    <!--新增编辑员工-->
    <div class="addRole" v-if="showModel">
      <div class="modelBox">
        <p class="modelTitle">
          <span>{{showTitle}}</span>
          <span class="exit" @click="cancelBtn"><Icon type="md-close" /></span>
        </p>
        <div class="employeeMsg">
          <div><span class="employeeMsgTip">姓名:</span>
            <Input type="text" v-model="user.name" :maxlength='32' style="width: 220px"/>
          </div>
          <div v-if="!sureBtn"><span class="employeeMsgTip">密码:</span>
            <Input type="password" v-model="user.password" placeholder="必须同时包含数字,字母,特殊字符" :maxlength='32' style="width: 220px"/>
          </div>
          <div><span class="employeeMsgTip">编号:</span>
            <Input type="text" v-model="user.code" :maxlength='32' style="width: 220px"/>
          </div>
          <div><span class="employeeMsgTip">生日:</span>
            <DatePicker type="date" placeholder="请选择日期" style="width: 220px" v-model="user.birthday" @on-change="changeTime"></DatePicker>
          </div>
          <div><span class="employeeMsgTip">性别:</span>
            <RadioGroup v-model="user.sex">
              <template v-for="item in sexList">
                <Radio :label="item.name" :value="item.code"></Radio>
              </template>
            </RadioGroup>
          </div>
          <div><span class="employeeMsgTip">手机号码:</span>
            <Input type="text" v-model="user.mobile" :disabled="phoneDis" style="width: 220px"/></div>
          <div><span class="employeeMsgTip">邮箱:</span>
            <Input type="text" v-model="user.email" style="width: 220px"/>
          </div>
          <div><span class="employeeMsgTip">组织:</span>
            <Input type="text" v-model="orgName" disabled style="width: 220px"/>
          </div>
          <div class="remark"><span class="employeeMsgTip">备注:</span>
            <Input type="textarea" :rows="4" v-model="user.remark"/></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>
          <span class="exit" @click="cancelWarrant"><Icon type="md-close"/></span>
        </p>
        <ul class="gradeTree">
          <CheckboxGroup v-model="checkedList">
            <li v-for="lab in labList">
              <Checkbox :label="lab.id" :value="lab.id">{{lab.name}}</Checkbox>
            </li>
          </CheckboxGroup>
        </ul>
        <div class="bottomBtn">
          <Button type="primary" class="btn2" icon="ios-undo" ghost @click="cancelWarrant">返回</Button>
          <Button type="primary" class="btn1" icon="ios-settings" @click="saveSettings">保存设置</Button>
        </div>
      </div>
    </div>
    <!--授权管理范围-->
    <div class="warrant" v-if="showModel3">
      <div class="warrantBox">
        <p class="modelTitle">
          <span>《{{grade3}}》的管理范围</span>
          <span class="exit" @click="cancelWarrant3"><Icon type="md-close"/></span>
        </p>
        <div class="gradeTree">
          <Tree :data="gradeData" show-checkbox ref="treeList" @on-check-change="selectTree3"></Tree>
        </div>
        <div class="bottomBtn">
          <Button type="primary" class="btn2" icon="ios-undo" ghost @click="cancelWarrant3">返回</Button>
          <Button type="primary" class="btn1" icon="ios-settings" @click="saveSettings3">保存设置</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';
  import {formatDate} from './../../tools/tools';
    export default {
        name: "EmployeeAccount",
      data(){
        return{
          id:'',
          page:1,
          pageSize:10,
          pageTotal:0,
          treeData:[],
          orgId:'',//组织id
          orgName:'',
          orgScope:false,
          phoneDis:false,
          name:'',
          sureBtn:true,
          showTitle:'',
          showModel:false,
          columns: [
            {title: '员工编号', key: 'code',width:80},
            {title: '所属组织', key: 'orgName',width:160},
            {title: '用户名', key: 'name',width:100},
            {title: '手机号码', key: 'mobile',width:100},
            {title: '邮箱', key: 'email',width:120,
              render:(h,params)=>{
                return h('span',{
                  style:{
                    display: 'inline-block',
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  },
                  domProps:{
                    title:params.row.email
                  }
                },params.row.email)
              }
            },
            {title: '更新时间', key: 'updateTime',width:150},
            {title: '状态', key: 'action',width:40,
              render:(h, params) => {
                return h('div', [
                  h('i-switch', { //数据库1是已处理，0是未处理
                    props: {
                      type: 'primary',
                      size:'small',
                      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: 260,align: 'center',
              render: (h, params) => {
                let _this=this;
                let userEdit=false;
                let userRemove=false;
                let userWarrant=false;
                let userWarrantRange = false;
                for(let p of _this.tableBtn){
                  if(p.code=='userEdit') {
                    userEdit=true;
                  }
                  if(p.code=='userWarrant') {
                    userWarrant=true;
                  }
                  if(p.code=='userRemove') {
                    userRemove=true;
                  }
                  if(p.code=='userWarrantRange') {
                    userWarrantRange=true;
                  }
                }
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      display:userEdit?'inline-block':'none'
                    },
                    on: {
                      click: () => {
                        this.showEdit(params.row.id);
                      }
                    }
                  }, '编辑'),
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      display:userWarrant?'inline-block':'none'
                    },
                    on: {
                      click: () => {
                        this.jumpWarrant(params.row.id,params.row.name);
                      }
                    }
                  }, '授权'),
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px',
                      display:userWarrantRange?'inline-block':'none'
                    },
                    on: {
                      click: () => {
                        this.warrantRange(params.row.id,params.row.name);
                      }
                    }
                  }, '管理范围'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style:{
                      display:userRemove?'inline-block':'none'
                    },
                    on: {
                      click: () => {
                        this.delBtn(params.row.id,params.row.name);
                      }
                    }
                  }, '删除'),
                ]);
              }
            }
          ],
          dataList: [],
          user:{
            id:'',
            password:'',
            birthday:'',
            birthdayNum:'',
            code:'',
            email:'',
            mobile:'',
            sex:'',
            name:'',
            remark:'',
          },
          sexList:[],
          delMsg:false,//删除框
          delMsgName:'',
          delId:'',
          showModel2:false,
          checkedList:[],
          labList:[],
          grade:'',
          tableBtn:[],
          userAddBtn:false,
          //授权管理范围
          showModel3:false,
          grade3:'',
          gradeId3:'',
          gradeList3:[],



        }
      },
      mounted(){
        this.id=this.$route.params.id;
        this.getMenu();
        this.getPage();
        this.getTreePage();
        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=="sex"){
              _this.sexList=m.list;
            }
          }
        },
        /*加载页面按钮*/
        getButton(){
          let msg=JSON.parse(sessionStorage.getItem('userMsg'));
          this.orgId=msg.orgId;
          this.tableBtn = JSON.parse(sessionStorage.getItem('nMArr'))
          for(let i of this.tableBtn){
            if(i.code=="userAdd"){
              this.userAddBtn=true;
            }
          }
        },
        /*获取页面*/
        getPage(){
          let _this=this;
          axios.post('/platform-upms/user/page',{
            current:_this.page,
            orgId:_this.orgId,
            size:_this.pageSize,
            name:_this.name,
            orgScope:_this.orgScope?1:0
          }).then(res=>{
            if(res){
               _this.pageTotal=res.data.data.total;
            let temp=res.data.data.records;
            for(let i of temp){
              i.updateTime=i.updateTime?formatDate(i.updateTime,'01','03'):'';
            }
            _this.dataList=temp;
            }
          })
        },
        getTreePage(){
          let _this=this;
          axios.post('/platform-upms/org/tree',{
          }).then(res=>{
            if(res){
              let temp=res.data.data;
            _this.orgName=temp[0].name;
            _this.treeData=_this.getTree(temp);
            }
          })
        },
        /*解析数据*/
        getTree(tree = []) {
          let arr = [];
          if (!!tree && tree.length !== 0) {
            tree.forEach(item => {
              let obj = {};
              obj.title = item.name;
              obj.id=item.id;
              obj.expand = false;
              obj.selected = false;
              obj.expand=true;
              obj.children = this.getTree(item.children); // 递归调用
              arr.push(obj);
            });
          }
          return arr;
        },
        selectTree(arr){
          this.orgId=arr[0].id;
          this.orgName=arr[0].title;
          this.dataList=[];
          this.getPage();
        },
        /*查询*/
        search(){
          this.page=1;
          this.dataList=[];
          this.getPage();
        },
        /*页码改变时加载数据*/
        getNewPages1(current){
          this.page=current;
          this.getPage();
        },
        /*每页显示多少条改变时加载数据*/
        getNewPages2(size){
          this.pageSize=size;
          this.getPage();
        },
        /*编辑*/
        showEdit(id){
          let _this=this;
          _this.showModel=true;
          _this.showTitle="编辑信息";
          _this.sureBtn=true;
          _this.user.id=id;
          _this.phoneDis=true;
          axios.post('/platform-upms/user/get',{
            id:id
          }).then(res=>{
            if(res){
              let temp=res.data.data;
            _this.user.code=temp.code;
            _this.user.name=temp.name;
            for(let i of _this.sexList){
              if(i.code==temp.sex){
                temp.sex=i.name;
              }
            }
            _this.user.sex=temp.sex;
            _this.user.remark=temp.remark;
            _this.user.birthday=temp.birthday;
            _this.user.birthdayNum=temp.birthday;
            _this.user.mobile=temp.mobile;
            _this.user.email=temp.email;
            _this.user.password=temp.password;
            }
          })
        },
        /*编辑确定*/
        editBtn(){
          let _this=this;
          if(_this.user.name==''){
            _this.$Message.error('姓名不能为空');
            return false;
          }
          if(_this.user.code==''){
            _this.$Message.error('编号不能为空');
            return false;
          }
          if(_this.user.mobile==''){
            _this.$Message.error('手机号码不能为空');
            return false;
          }
          axios.post('/platform-upms/user/update',{
            birthday:_this.user.birthdayNum,
            email:_this.user.email,
            id:_this.user.id,
            orgId:_this.orgId,
            sex:_this.user.sex=='女'?1:2,
            mobile:_this.user.mobile,
            name:_this.user.name,
            remark:_this.user.remark,
            code:_this.user.code
          }).then(res=>{
            if(res){  
               _this.showModel=false;
              _this.getPage();
              _this.$Message.info('修改成功');
              _this. removeMsg();
            }
          })
        },
        /*确定按钮*/
        confirmBtn(){
          if(this.sureBtn){
            this.editBtn();
          }else{
            this.addNewBtn();
          }
        },
        cancelBtn(){
          this.showModel=false;
          this.removeMsg();
        },
        changeTime(a){
         this.user.birthday=a;
         this.user.birthdayNum=a;
        },
        /*清除数据*/
        removeMsg(){
          this.user.id='';
          this.user.email='';
          this.user.mobile='';
          this.user.sex='';
          this.user.birthday='';
          this.user.birthdayNum='';
          this.user.remark='';
          this.user.name='';
          this.user.password='';
          this.user.code='';
        },
        /*新增*/
        addNew(){
          let _this=this;
          _this.showModel=true;
          _this.showTitle="新增员工";
          _this.sureBtn=false;
          _this.phoneDis=false;
          _this.removeMsg();
        },
        /*新增确定*/
        addNewBtn(){
          let _this=this;
          if(_this.user.password==''){
            _this.$Message.error('密码不能为空');
            return false;
          }else if(_this.user.password.length<6){
            _this.$Message.error('密码长度不能小于6位');
            return false;
          }
          if(_this.user.name==''){
            _this.$Message.error('姓名不能为空');
            return false;
          }
          if(_this.user.code==''){
            _this.$Message.error('编号不能为空');
            return false;
          }
          if(_this.user.mobile==''){
            _this.$Message.error('手机号码不能为空');
            return false;
          }
          axios.post('/platform-upms/user/add',{
            birthday:_this.user.birthdayNum,
            email:_this.user.email,
            orgId:_this.orgId,
            sex:_this.user.sex=='女'?1:2,
            mobile:_this.user.mobile,
            password:_this.user.password,
            name:_this.user.name,
            remark:_this.user.remark,
            code:_this.user.code
          }).then(res=>{
            if(res){
              _this.$Message.info('新增成功');
              _this.showModel=false;
              _this.getPage();
            }
          })
        },
        /*删除*/
        delBtn(id,name){
          this.delId=id;
          this.delMsgName=name;
          this.delMsg=true;
        },
        ok(){
          let _this=this;
          axios.post('/platform-upms/user/delete',{
            id:_this.delId
          }).then(res=>{
            if(res){
            _this.$Message.info('删除成功');
            _this.cancel();
            _this.getPage();
            }
          })
        },
        cancel(){
          this.delId = ''
          this.delMsgName = ''
          this.delMsg = false
        },
        /*开关*/
        switch(id,en){
          let _this=this;
          if(en==1){
            en=0;
          }else{
            en=1;
          }
          axios.post('/platform-upms/user/enabled',{
            id:id,
            enabled: en
          }).then(res=>{
            if(res){
              _this.getPage();
            }
          })
        },
        /*跳转到授权*/
        jumpWarrant(id,name){
          let _this=this;
          _this.showModel2=true;
          _this.user.id=id;
          _this.grade=name;
          axios.post('/platform-upms/role/listByUser',{
            id:_this.user.id
          }).then(res=>{
            if(res){
              _this.labList=res.data.data;
            let temp=res.data.data;
            for(let i of temp){
              if(i.checked){
                _this.checkedList.push(i.id);
              }
            }
            }
          })
        },
        /*授权确定*/
        saveSettings(){
          let _this=this;
          axios.post('/platform-upms/role/saveUserRole',{
            roleIds:_this.checkedList,
            userId:_this.user.id
          }).then(res=>{
            if(res){
              _this.showModel2=false;
            _this.user.id='';
            _this.$Message.info('授权成功');
            _this.checkedList=[];
            _this.labList=[];
            }
          })
        },
        /*取消授权*/
        cancelWarrant(){
          this.showModel2=false;
          this.checkedList=[];
          this.labList=[];
          this.$Message.info('取消授权');
        },
        //授权管理范围
        warrantRange (id,name) {
          let _this = this
          _this.grade3 = name
          _this.gradeId3 = id
          axios.post('/platform-upms/user/getUserManageOrg',{
            id:id
          }).then(res=>{
            if(res){
              let treeArr=[];
              treeArr=_this.getTree(res.data.data);
              _this.gradeData=treeArr;
              _this.showModel3 = true
            }
          })
        },
        selectTree3(a){
          let checkAll=this.$refs.treeList.getCheckedAndIndeterminateNodes();
          this.gradeList3=checkAll;
        },
        /*解析数据*/
        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;
        },
        cancelWarrant3 () {
          this.showModel3 = false
          this.gradeId3 = ''
          this.grade3 = ''
          this.gradeList3 = []
        },
        saveSettings3 () {
          let _this = this
          let temp = []
          for(let i of _this.gradeList3){
            temp.push(i.id)
          }
          axios.post('/platform-upms/user/updateUserManageOrg',{
            sysOrgIds:temp,
            userId:_this.gradeId3,
          }).then(res=>{
            if(res){
              _this.$Message.info(res.data.data)
              _this.cancelWarrant3()
              _this.getPage()
            }
          })
        },

      }
    }
</script>
<style scoped>
  #employeeAccount{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  #employeeAccount .bread{
    font-size: 13px;
    white-space: nowrap;
  }
  #employeeAccount .mainBox{
    margin-top: 20px;
    padding-top: 10px;
    height: 92%;
    display: flex;
    justify-content: space-between;
    border-top:1px solid #ccc;
  }
   #employeeAccount .mainBox .leftBox{
    width: 25%;
    height: 100%;
    padding: 15px 0 0 20px;
    overflow-y:auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #employeeAccount .mainBox .rightBox{
    width: 74%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px 20px 0 20px;
  }
  #employeeAccount .toolBar{
    display: flex;
    flex-flow: row wrap;
  }
  #employeeAccount .toolBar .detailItem{
    width: 255px;
    margin-bottom: 20px;
  }
  #employeeAccount .toolBar .detailItem:last-child{
    width: 240px;
  }
  #employeeAccount .toolBar .detailItem .aButton{
    margin-left: 10px;
  }
  #employeeAccount .toolBar .detailItem:first-child{
    width: 140px;
    line-height: 32px;
  }
  #employeeAccount .pages{
    padding: 30px 0;
    text-align: right;
  }
  #employeeAccount .addRole{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #employeeAccount .modelBox{
    position: absolute;
    width: 680px;
    min-height: 300px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #employeeAccount .modelTitle{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: #00507e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
  #employeeAccount .exit{
    position: absolute;
    font-size: 20px;
    right: 20px;
    cursor: pointer;
  }
  #employeeAccount .employeeMsg{
    display: flex;
    flex-flow: row wrap;
    font-size: 14px;
    padding: 15px 25px;
    justify-content: space-between;
  }
  #employeeAccount .employeeMsg .employeeMsgTip{
    display: inline-block;
    width: 65px;
  }
  #employeeAccount .employeeMsg>div{
    width: 300px;
    line-height: 32px;
    box-sizing: border-box;
    padding:0 10px 10px 0;
  }
  #employeeAccount .employeeMsg .accountInputMsg{
    outline: none;
    border: none;
    width: 220px;
    height: 30px;
    padding-left: 5px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
  }
  #employeeAccount .employeeMsg .permissionStyle{
    width: 630px;
  }
  #employeeAccount .permissionStyle>div{
    border: 1px solid #dcdee2;
    border-radius: 5px;
    padding-left: 5px;
    max-height: 101px;
    overflow: auto;
  }
  #employeeAccount .employeeMsg .remark{
    width: 630px;
    padding: 0;
  }
  #employeeAccount .modelBox .buttons{
    text-align:center;
  }
  #employeeAccount .modelBox .buttons button{
    margin: 10px;
  }
  /*授权*/
  #employeeAccount .warrant{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top:0;
    left:0;
    z-index: 999;
  }
  #employeeAccount .warrantBox{
    position: absolute;
    width: 680px;
    top:80px;
    left: 50%;
    background-color: #fff;
    margin-left: -340px;
    border-radius: 10px;
    padding-bottom: 20px;
  }
  #employeeAccount .gradeTree{
    height: 300px;
    overflow-y: auto;
    padding: 10px;
    margin: 20px;
    border:1px solid #ccc;
    border-radius: 10px;
  }
  #employeeAccount .bottomBtn{
    text-align: center;
  }
  #employeeAccount .bottomBtn .btn1,.btn2{
    width: 100px;
    margin: 0 10px;
  }
</style>

