Foshan4A4.0/src/views/authorityManagement/components/authorityRoleAdd.vue

<!--
 * @Author: your name
 * @Date: 2021-11-29 16:31:31
 * @LastEditTime: 2022-04-07 10:24:52
 * @LastEditors: your name
 * @Description: 新增/编辑角色
 * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
-->
<template>
  <div class="authorityPower">
    <!--新增权限项-->
    <div class="addApp-form">
      <div class="addApp-form-title flex">
        <div class="title">新增角色</div>
        <div class="btn">
          <el-button @click="saveBtn('form')" type="primary">保存</el-button>
        </div>
      </div>
      <div class="addApp-form-content dialog-public-background">
        <el-form :inline="true" :rules="rules" ref="form" class="form" :model="form">
          <el-form-item prop="name" label="角色名称">
            <el-input placeholder="请输入角色名称" v-model.trim="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="desc" label="描述">
            <el-input style="width: 640px" placeholder="请输入描述" v-model.trim="form.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="power-content flex-wrap">
      <div class="r24 flex1 part">
        <Permissiontree @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
      </div>
      <div :class="isClass ? '':'r24'" class="flex1 part">
        <Rulesofcompetency @getData="getData" title="权限规则" />
      </div>
      <div v-is="['role_add_mutually_exclusive','role_add_mutually_exclusive_list']" class="flex1 part">
        <Rolelist v-is="['role_add_mutually_exclusive']" @checkChange="checkChange" @checkClick="checkClick" :imageSize="80" needType="1" :roleType="roleType" :active="true" class="hucRole" :number="8" style="height: 280px; overflow: hidden" title="互斥角色" />
        <Permissionlist v-is="['role_add_mutually_exclusive_list']" v-loading="permission" :imageSize="80" :RoleList="RoleList" :check="true" class="hucPower" style="margin-top: 24px" title="互斥角色已有权限列表" />
      </div>
    </div>
  </div>
</template>

<script>
import Permissionlist from "@/components/permissionlist";
import Rulesofcompetency from "@/components/rulesofcompetency";
import Permissiontree from "@/components/permissiontree";
import Rolelist from "@/components/rolelist";
import roleData from "../minixs/roleData";
import { SaveRole, RoleAuths } from "@/api/apiAuthority";
import { checkPermission } from '@/utils/add-is-class';

import { lengthValidator } from '@/utils/validate'

export default {
  name: "AuthorityRoleAdd",
  components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
  mixins: [roleData],
  data () {
    return {
      radio: 1,
      form: {
        //应用表单
        name: "",
        id: "",
        desc: "",
      },
      rules: {
        //表单验证
        name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }
        ],
        desc: [
          { validator: lengthValidator, max: 256, message: '长度在 1 到 256 个字符', trigger: ['change', 'blur'] }
        ],
      },
      permission: false,
      RoleList: [],
      checkedBoxs: [],
      arrs: [],
      dataObj: {}, //上级权限指定树数据
      type: null, //参数类型
      defRoleId: null,
      AuthObj: {},
      treeData: [],
      roleType: ''
    };
  },
  watch: {
    arrs: {
      handler (arr) {
        arr.forEach((item) => {
          item.name = item.RoleName;
        });
        this.arrs = arr;
      },
      deep: true,
    },
  },
  computed: {
    isClass () {
      const le = checkPermission(['role_add_mutually_exclusive', 'role_add_mutually_exclusive_list']);
      return le;
    }
  },
  mounted () {
    this.roleType = 'onlyRole';
  },
  methods: {
    //获取权限树回调
    getTreeData (arr) {
      this.treeData = arr;
    },
    //获取权限规则回调
    getData (obj) {
      this.AuthObj = obj;
    },
    //互斥角色选中回调
    checkChange (arr) {
      const arrs = [];
      arr.forEach((item) => {
        const obj = {
          DefRoleId: item.RoleId,
          IsSelected: 1,
          DefRoleName: item.RoleName,
        };
        arrs.push(obj);
      });
      this.checkedBoxs = arrs;
    },
    //互斥角色点击回调
    checkClick (item) {
      this.roleAuths(item.RoleId);
    },
    //互斥角色回调
    async roleAuths (id) {
      try {
        this.permission = true;
        let params = {
          RoleId: id,
        };
        const res = await RoleAuths(params);
        if (res.code === 0) {
          this.RoleList = res.returnData;
          this.permission = false;
        } else {
          this.$message.error(res.message);
          this.permission = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.permission = false;
      }
    },
    //权限树点击
    nodeClick (obj) {
      const arr = this.$store.getters.authArrs;
      arr.push(obj);
      this.$store.dispatch("auth/changeAuthArrs", arr);
    },
    //新增
    saveBtn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveRole();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增保存
    async saveRole () {
      try {
        const datas = [];
        this.treeData.forEach((item) => {
          item.AuthList && datas.push(item.AuthList);
        });
        const res = await SaveRole({
          RoleName: this.form.name,
          RoleDesc: this.form.desc,
          DefRoleList: this.checkedBoxs,
          AuthList: datas,
          RoleStatus: this.radio,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push("/role");
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../css/role.scss";
</style>