config-role.vue

<template lang='pug'>
  el-dialog( width="50%", :visible.sync="visible", append-to-body, :before-close="handleClose" )
    .title-bold(slot="title") 配置角色
    el-card(shadow="never")
      el-checkbox-group( v-model="checkedList", @change="handleCheckedCitiesChange" )
        //- el-row.my_row(:gutter="50")
          el-col(:span="6", v-for="item in roleList", :key="item.roleId")
            el-checkbox(:label="item.roleId") {{ item.roleName }}
        div(style='display: flex;flex-flow: wrap;')
          div(style="width:25%;margin-bottom: 10px;" v-for="item in roleList" :key="item.roleId")
            el-checkbox(:label="item.roleId") {{ item.roleName }}
    div(slot='footer' align='center')
      el-button(type="primary", size="medium", @click="cancel") 取 消
      el-button(type="primary", size="medium", @click="addsave" v-prevent-re-click) 保存
</template>

<script>
export default {
  data() {
    return {
      clickFlag: false,
      visible: false,
      userId: '', //用户id
      checkedList: [],
      roleList: [],
      roleIds: ''
    }
  },
  methods: {
    init(row) {
      this.clickFlag = false
      this.visible = true
      this.userId = row.user_id
      this.checkedList = []
      this.getRoleList()
    },
    // 获取权限列表
    getRoleList() {
      this.$http({
        url: this.$http.adornUrl('/sys/role/select'),
        method: 'GET',
        params: {
          stationId: localStorage.getItem('stationId')
        }
      }).then((data) => {
        if (data && data.code === 0) {
          this.roleList = data.list
        }
      })
      this.getRole()
    },
    // 获取用户权限配置
    getRole() {
      this.$http({
        url: this.$http.adornUrl('/sys/role/getUserRoleByUserId'),
        method: 'get',
        params: { userId: this.userId }
      }).then((res) => {
        this.checkedList = res.data.map((item) => {
          return item.roleId
        })
      })
    },
    handleCheckedCitiesChange(value) {
      this.roleIds = value
    },
    // 提交
    addsave() {
      this.clickFlag = true
      this.$http({
        url: this.$http.adornUrl('/sys/role/updateRoleList'),
        method: 'post',
        data: { userId: this.userId, roleIds: this.checkedList.toString(), stationId: localStorage.getItem('stationId') }
      }).then((data) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
        }
        this.clickFlag = false
        this.handleClose()
      })
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '配置角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            this.visible = false
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
    },
    //关闭前
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
.my_row {
  .el-col {
    margin-bottom: 10px;
  }
}
</style>