addOrRights.vue

<template>
  <div class="addOrRights">
    <a-button type="primary" @click="back()"><img style="margin-top:-4px;margin-right: 6px;width: 14px" src="../../../assets/back.png"/>返回</a-button>
    <div class="title">添加角色</div>
    <a-form :form="form">
      <a-form-item label="角色名称" v-bind="formItemLayout" >
        <a-input
          placeholder="请填写角色名称"
          v-decorator="['roleName',{
            rules: [{required: true, message: '角色名称不能为空'}, {max: 10, message: '角色名称不能超过10个字符'}],
            initialValue: roleName,
          }]"
        />
      </a-form-item>
      <a-form-item label="角色描述" v-bind="formItemLayout" >
        <a-input
          placeholder="请填写角色的描述"
          v-decorator="['roleDesc',{
            rules: [{required: false,  message: '角色描述不能为空'}, {max: 50, message: '角色描述不能超过50个字符'}],
            initialValue: roleDesc,
          }]"
        />
      </a-form-item>
      <a-form-item label="选择成员" v-bind="formItemLayout" >
        <div class="selectPeople" @click="selectPeople">
          <span  v-show="!members.length">选择成员</span>
          <span v-show="members.length" v-for='(item, index) in members' :key="index" :style="{'margin-left': '3px',color:'rgba(0,0,0,0.85)',width:'20%',overflow:'hidden'}">{{item}}</span>
        </div>
      </a-form-item>
    </a-form>
    <div class="permisson">
      <div class="permissonLeft">分配权限：</div>
      <div class="permissonRight">
        <tree v-model="selectList" :trees="treesdata" v-on:closeParent="close" :classId="classList" :idx="0"></tree>
        <a-button @click="confirm" style="margin-top: 40px" type="primary">保存</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { $http } from '../../../api/axios'
import { config } from '../../../api/config'
import tree from './tree.vue'
export default {
  components: {
    tree
  },
  name: 'addOrRights',
  data () {
    return {
      type: 0,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        }
      },
      roleId: '',
      trees: [],
      roleName: '', // 角色名称
      roleDesc: '', // 角色描述
      members: [], // 选择成员
      ddUserIds: [],
      treesdata: [],
      classList: [['box1', 'permissonTitle'], ['box2', 'box2-2'], ['box3', 'box3-3']],
      selectList: []
    }
  },
  created () {
    if (JSON.stringify(this.$route.params) === '{}') {
      this.type = 0
      this.getTree()
    } else {
      this.type = 1
      this.roleName = this.$route.params.record.roleName
      this.roleDesc = this.$route.params.record.roleDesc
      this.roleId = this.$route.params.roleId
      this.members = this.$route.params.record.action.name
      this.ddUserIds = this.$route.params.record.action.ddUserId
      let data = {
        roleId: this.$route.params.roleId
      }
      $http.post('/admin/menu/tree/roleById', data).then(res => {
        this.selectList = res.data.data
      }).then(() => {
        this.getTree()
      })
    }
  },
  mounted () {
  },
  methods: {
    close (data) {
      console.log(data)
    },
    back () {
      this.$router.push({ name: 'rightsManagement' })
    },
    // 选人
    selectPeople () {
      config.ddready('ddchooseTen', this.ddUserIds).then((res) => {
        this.members = []
        this.ddUserIds = []
        // this.members = this.duplicateRemoval(this.members)
        res.users.forEach((item, index) => {
          this.ddUserIds.push(item.emplId)
          this.members.push(item.name)
        })
      })
    },
    // 确定 提交表单
    confirm () {
      if (this.ddUserIds.length === 0) {
        this.$confirm({
          content: '请先选择成员',
          onOk () {
            // that.changeData(record, index)
          },
          onCancel () {}
        })
      } else if (!this.form.getFieldValue('roleName')) {
        this.$confirm({
          content: '请先填写角色名称',
          onOk () {
            // that.changeData(record, index)
          },
          onCancel () {}
        })
      } else {
        if (this.type === 0) {
          let data = {
            roleName: this.form.getFieldValue('roleName'),
            roleCode: this.form.getFieldValue('roleName'),
            roleDesc: this.form.getFieldValue('roleDesc'),
            ddUserIds: this.ddUserIds,
            menuIds: this.selectList,
            item: 'e-card'
          }
          $http.post(`/admin/manager/addFullRole`, data).then(res => {
            if (res.data.code === 0) {
              this.$message.success('保存成功')
              this.$router.push({ name: 'rightsManagement' })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          let data = {
            roleId: this.roleId,
            roleName: this.form.getFieldValue('roleName'),
            roleDesc: this.form.getFieldValue('roleDesc'),
            ddUserIds: this.ddUserIds,
            item: 'e-card',
            menuIds: this.selectList
          }
          $http.post(`/admin/manager/modifyFullRole`, data).then(res => {
            if (res.data.code === 0) {
              this.$message.success('保存成功')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      }
    },
    getTree () {
      let that = this
      let data = {
        item: 'e-card'
      }
      $http.post(`/admin/menu/tree`, data).then(success => {
        let souceIndex
        let data = success.data.data
        data.map((item, index) => {
          if (item.code === 'sys_super_admin') {
            souceIndex = index
          }
        })
        data.splice(souceIndex, 1)
        that.treesdata = that.treeAddAttribute(data)
      })
    },
    treeAddAttribute (data) {
      const addKey = data => data.map(item => {
        let plainOptions = []
        item.children.map(item2 => {
          plainOptions.push(item2.id)
        })
        var checkedList = [...this.selectList.filter(function (v) {
          return plainOptions.indexOf(v) !== -1 // 利用filter方法来遍历是否有相同的元素
        })]
        var indeterminate = (checkedList !== '' && checkedList.length > 0 && checkedList.length !== plainOptions.length)
        let checkAll = false
        return {
          ...item,
          indeterminate,
          checkedList,
          plainOptions,
          checkAll,
          children: addKey(item.children)
        }
      })
      const result = addKey(data)
      return result
    }
  }
}
</script>

<style lang="less">
  .title{
    font-weight: bolder;
    line-height: 22px;
    margin:27px 0 18px 0;
  }
  .ant-form-item /deep/ .ant-input {
    height: 40px;
    margin-left: 5px;
  }
  .addOrRights /deep/ .ant-form-item-label {
    width: 9.5% !important;
  }
  .permisson {
    display: flex;
    height: 500px;
  }
  .permissonLeft {
    height: 65px;
    line-height: 65px;
    font-weight: 400;
    width: 9.5%;
    text-align: right;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
  }
  .permissonRight {
    font-family: 'PingFangSC-Medium;';
    height: 500px;
    width: 100%;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
  }
  .permissonTitle {
    padding: 22px 20px;
    background: #FAFAFA;
    border: 1px solid #F8F8F8;
    border-radius: 4px 4px 0px 0px;
  }
  .confirm {
    margin-top: 40px;
  }
  .addOrRights /deep/ .ant-checkbox-group {
    width: 100% !important;
    color: rgba(0,0,0,0.85);
  }
  .addOrRights /deep/.ant-row {
    width: 100% !important;
  }
  .selectPeople {
    width: 100%;
    font-size: 14px;
    color: #cccccc;
    min-height: 39px;
    line-height: 40px;
    margin-left: 5px;
    text-indent: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
  }
  .box2>div{
    display: flex;
    border: 1px solid #f8f8f8;
  }
  .box2-2{
    flex: 4;
    border-right: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .box3{
    flex: 20;
    padding-top: 22px;
  }
  .box3>div{
    width: 25%;
    float: left;
  }
  .box3-3{
    padding-bottom: 22px;
    padding-left: 22px;
  }
</style>