|
|
@@ -0,0 +1,260 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2021-11-29 16:31:31
|
|
|
+ * @LastEditTime: 2022-03-02 13:51:29
|
|
|
+ * @LastEditors: Please set LastEditors
|
|
|
+ * @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">
|
|
|
+ 编辑角色
|
|
|
+ <!-- <span class="isqy">
|
|
|
+ <span>是否启用</span>
|
|
|
+ <el-radio v-model="radio" :label="1">是</el-radio>
|
|
|
+ <el-radio v-model="radio" :label="0">否</el-radio>
|
|
|
+ </span> -->
|
|
|
+ </div>
|
|
|
+ <div v-is="['role_edit save']" class="btn">
|
|
|
+ <!-- <el-button class="r24" @click="removeRole" type="danger">删除</el-button> -->
|
|
|
+ <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addApp-form-content dialog-public-background">
|
|
|
+ <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
|
|
|
+ <el-form-item prop="name" label="角色名称">
|
|
|
+ <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述">
|
|
|
+ <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="power-content flex-wrap">
|
|
|
+ <div class="r24 flex1 part">
|
|
|
+ <Permissiontree v-loading="loading" element-loading-text="数据加载中" @getTreeData="getTreeData" :checkedKeys="checkedKeys" title="权限树" />
|
|
|
+ </div>
|
|
|
+ <div class="flex1 part">
|
|
|
+ <Rulesofcompetency v-loading="loading" element-loading-text="数据加载中" :authList="authList" :authTo="authTo" title="权限规则" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="flex1 part">
|
|
|
+ <Rolelist
|
|
|
+ v-is="['role_edit_mutually_exclusive']"
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="数据加载中"
|
|
|
+ @checkChange="checkChange"
|
|
|
+ @checkClick="checkClick"
|
|
|
+ :roleType="roleType"
|
|
|
+ :checkBoxList="radioCheck"
|
|
|
+ :active="true"
|
|
|
+ class="hucRole"
|
|
|
+ :imageSize="80"
|
|
|
+ :number="8"
|
|
|
+ style="height: 280px; overflow: hidden"
|
|
|
+ title="互斥角色"
|
|
|
+ />
|
|
|
+ <Permissionlist
|
|
|
+ v-is="['role_edit_mutually_exclusive_list']"
|
|
|
+ v-loading="permission"
|
|
|
+ element-loading-text="数据加载中"
|
|
|
+ :check="true"
|
|
|
+ :imageSize="80"
|
|
|
+ :RoleList="RoleList"
|
|
|
+ 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 { RoleDetails, EditRole, RoleAuths } from "@/api/apiAuthority";
|
|
|
+import roleData from "../minixs/roleData";
|
|
|
+export default {
|
|
|
+ name: "AuthorityRoleEdit",
|
|
|
+ components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
|
|
|
+ mixins: [roleData],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ radio: 1,
|
|
|
+ form: {
|
|
|
+ //应用表单
|
|
|
+ name: "",
|
|
|
+ id: "",
|
|
|
+ app: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ //表单验证
|
|
|
+ name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ permission: false,
|
|
|
+ treeData: [],
|
|
|
+ arrs: [],
|
|
|
+ checkedKeys: [],
|
|
|
+ RoleList: [],
|
|
|
+ radioCheck: [],
|
|
|
+ checkedBoxs: [],
|
|
|
+ defRoleId: [],
|
|
|
+ roleId: null,
|
|
|
+ Status: null,
|
|
|
+ authTo: {},
|
|
|
+ authList: [],
|
|
|
+ authId: [],
|
|
|
+ type: null, //参数类型
|
|
|
+ roleType: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ //this.getAuthTree();
|
|
|
+ const { RoleId, Status } = this.$route.query;
|
|
|
+ this.roleId = RoleId;
|
|
|
+ this.Status = Status;
|
|
|
+ this.roleDetails(RoleId);
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.roleType = "onlyRole";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //角色明细
|
|
|
+ async roleDetails (id) {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const res = await RoleDetails({
|
|
|
+ RoleId: id,
|
|
|
+ });
|
|
|
+ if (res.code === 0) {
|
|
|
+ const { RoleName, RoleDesc, AuthList, RoleStatus, DefRoleList } =
|
|
|
+ res.returnData;
|
|
|
+ this.form.name = RoleName;
|
|
|
+ this.form.app = RoleDesc;
|
|
|
+ this.radio = RoleStatus;
|
|
|
+ if (AuthList && AuthList.length) {
|
|
|
+ AuthList.forEach((item) => {
|
|
|
+ this.authId.push(item.AuthId);
|
|
|
+ });
|
|
|
+ this.checkedKeys = this.authId;
|
|
|
+ this.authList = _.cloneDeep(AuthList);
|
|
|
+ this.authTo = AuthList[0];
|
|
|
+ }
|
|
|
+ if (DefRoleList && DefRoleList.length) {
|
|
|
+ this.checkedBoxs = DefRoleList;
|
|
|
+ DefRoleList.forEach((item) => {
|
|
|
+ item.RoleId = item.DefRoleId;
|
|
|
+ });
|
|
|
+ this.radioCheck = DefRoleList;
|
|
|
+ this.roleAuths(DefRoleList[0].DefRoleId);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log("出错了", error);
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ removeRole () {
|
|
|
+ this.deleteRole(this.roleId);
|
|
|
+ },
|
|
|
+ //获取权限树回调
|
|
|
+ getTreeData (arr) {
|
|
|
+ this.treeData = arr;
|
|
|
+ },
|
|
|
+ //获取权限规则回调
|
|
|
+ getData (obj) {
|
|
|
+ this.authTo = 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 {
|
|
|
+ let params = {
|
|
|
+ RoleId: id,
|
|
|
+ };
|
|
|
+ this.permission = true;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ saveBtn (formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.editRole();
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //确认保存
|
|
|
+ async editRole () {
|
|
|
+ try {
|
|
|
+ const datas = [];
|
|
|
+ this.treeData.forEach((item) => {
|
|
|
+ datas.push(item.AuthList);
|
|
|
+ });
|
|
|
+ const res = await EditRole({
|
|
|
+ RoleName: this.form.name,
|
|
|
+ RoleDesc: this.form.app,
|
|
|
+ DefRoleList: this.checkedBoxs,
|
|
|
+ AuthList: datas,
|
|
|
+ RoleStatus: this.radio,
|
|
|
+ RoleId: this.roleId,
|
|
|
+ });
|
|
|
+ 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>
|
