caimei-authentic-manager/src/views/normal/settings/roles/edit.vue

<template>
  <div class="app-container roles-edit">
    <el-form ref="ruleRef" label-width="100px" :model="role" :rules="rules">
      <el-form-item label="角色名称：" prop="roleName">
        <el-input v-model="role.roleName" placeholder="角色名称" maxlength="20" />
      </el-form-item>
      <el-form-item label="角色描述：" prop="roleDesc">
        <el-input v-model="role.roleDesc" placeholder="角色描述" maxlength="20" />
      </el-form-item>
      <el-form-item label="角色授权：" prop="menuIds">
        <el-input v-show="false" v-model="role.menuIds" />
        <el-tree
          ref="tree"
          :data="menuTree"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :props="defaultProps"
          @check-change="getCheckedKeys"
        />
      </el-form-item>
      <el-form-item>
        <!-- 确认 取消 -->
        <div class="control-box">
          <el-button type="warning" @click="$_back">返回</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { sysMenuTree, createRole, getRole, updateRole } from '@/api/system'
export default {
  data() {
    return {
      editType: '',
      role: {
        id: '',
        roleName: '',
        roleDesc: '',
        menuIds: ''
      },
      rules: {
        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        menuIds: [{ required: true, message: '角色授权不能为空', trigger: 'change' }]
      },
      menuTree: [],
      defaultProps: {
        children: 'subMenus',
        label: 'title'
      }
    }
  },
  created() {
    this.editType = this.$route.query.type
    if (this.editType === 'edit') {
      this.role.id = parseInt(this.$route.query.id)
      this.fetchRoleInfo()
    }
    this.getMenuTree()
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },
    getCheckedKeys() {
      // console.log(this.$refs.tree.getCheckedNodes(false, true).map(item => item.id))
      this.role.menuIds = this.$refs.tree.getCheckedNodes(false, true).map(item => item.id).join(',')
    },
    // 获取菜单权限列表
    getMenuTree() {
      sysMenuTree({ menuType: 1 }).then(res => {
        this.menuTree = res.data
      })
    },
    // 设置角色信息
    setRoleInfo(data) {
      for (const key in this.role) {
        if (Object.hasOwnProperty.call(this.role, key)) {
          this.role[key] = data[key]
        }
      }
      console.log(this.role.menuIds.split(','))
      this.$refs.tree.setCheckedKeys([...this.role.menuIds.split(',')])
    },
    // 获取角色信息
    fetchRoleInfo() {
      getRole(this.role.id).then(res => {
        console.log(res.data)
        this.setRoleInfo(res.data)
      })
    },
    // 修改角色
    updateRole() {
      updateRole(this.role.id, this.role).then(res => {
        console.log(res)
        this.$message.success('修改角色成功')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.back()
      })
    },
    // 创建角色
    createRole() {
      createRole(this.role).then(res => {
        console.log(res)
        this.$message.success('添加角色成功')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.back()
      })
    },
    // 提交
    handleSubmit() {
      this.$refs.ruleRef.validate(valide => {
        if (!valide) return
        if (this.editType === 'add') {
          this.createRole()
        } else {
          this.updateRole()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.roles-edit {
  width: 600px;
  margin: 0 auto;
  margin-top: 40px;
}
.control-box {
  margin: 20px 0;
  text-align: center;
  .el-button {
    width: 120px;
    margin: 0 8px;
  }
}
</style>