角色管理修改

src/views/authorityManagement/components/authorityRoleEdit copy.vue

@@ -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>

src/views/authorityManagement/components/authorityRoleEdit.vue

@@ -9,33 +9,40 @@
 <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 class="power-content flex-wrap">
+      <div class="r24 flex1 part">
+        <div style="padding: 27px 24px;height: 100%;" class="addApp-form">
+          <div class="addApp-form-title flex">
+            <div class="manageTitle">角色授权</div>
+            <!-- <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" label-width="80px" 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: 340px" type="textarea" :rows="3" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+              </el-form-item>
+              <el-form-item label="是否启用">
+                <el-radio v-model="radio" :label="1">是</el-radio>
+                <el-radio v-model="radio" :label="0">否</el-radio>
+              </el-form-item>
+            </el-form>
+          </div>
         </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>

src/views/authorityManagement/components/authorityRoleHome.vue

@@ -32,6 +32,7 @@
                     <div class="msg flex-wrap">
                       <p :title="item.RoleName" class="name">{{item.RoleName}}</p>
                       <div v-is="['role_edit']" @click="editRole(item)" class="cap cap-edit"></div>
+                      <div @click="authRole(item)" class="cap cap-auth"></div>
                     </div>
                   </div>
                   <div v-is="['role_delete']" class="info-close">
@@ -79,6 +80,30 @@
         </div>
       </div>
     </Dialog>
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
+      <div class="airportInfoDialog dialog-public-background">
+        <div class="title">{{ editDialogTitle }}</div>
+        <div class="content">
+          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
+            <el-form-item label="角色名称" prop="RoleName">
+              <el-input v-model="ruleForm.RoleName" size="medium" placeholder="请输入节点名称（必填）" />
+            </el-form-item>
+            <el-form-item label="角色描述" prop="RoleDesc">
+              <el-input v-model="ruleForm.RoleDesc" size="medium" type="textarea" :rows="3" placeholder="请输入跟踪节点描述" />
+            </el-form-item>
+            <el-form-item label="是否启用" prop="RoleStatus">
+              <el-radio v-model="ruleForm.RoleStatus" :label="1">是</el-radio>
+              <el-radio v-model="ruleForm.RoleStatus" :label="0">否</el-radio>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="foot center t30">
+          <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
+          <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -86,7 +111,7 @@
 import Search from '@/layout/components/Search'
 import Dialog from '@/layout/components/Dialog'
 import roleData from '../minixs/roleData'
-import { UpdateStatus } from '@/api/apiAuthority'
+import { UpdateStatus, SaveRole, RoleDetails, EditRole } from '@/api/apiAuthority'
 export default {
   name: 'AuthorityRole',
   components: { Search, Dialog },
@@ -105,7 +130,24 @@ export default {
       loading: false,
       keyWords: '',
       total: null,
-      search: null
+      search: null,
+      editDialogVisible: false,
+      editDialogTitle: '新增角色',
+      editType: 'add',
+      ruleForm: {
+        // 协议信息表单
+        RoleName: "",
+        RoleStatus: "",
+        RoleDesc: "",
+      },
+      rules: {
+        // 协议信息表单验证
+        RoleName: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+        ],
+      },
+      ruleFormObj: {},
+      roleId: ''
     }
   },
   created () {
@@ -141,10 +183,22 @@ export default {
     },
     //角色新增
     addRole () {
-      this.$router.push('/role/addRole')
+      this.editDialogTitle = '新增角色'
+      this.editDialogVisible = true
+      this.editType = 'add'
+      // this.$router.push('/role/addRole')
     },
     //角色编辑
     editRole (item) {
+      this.editDialogVisible = true
+      this.editType = 'edit'
+      this.editDialogTitle = '编辑角色'
+      this.roleId = item.RoleId
+      this.roleDetails(item.RoleId)
+      // this.$router.push({ path: '/role/editRole', query: { RoleId: item.RoleId, Status: item.Status } })
+    },
+    // 角色授权
+    authRole (item) {
       this.$router.push({ path: '/role/editRole', query: { RoleId: item.RoleId, Status: item.Status } })
     },
     //查询
@@ -195,6 +249,85 @@ export default {
         console.log('出错了', error)
       }
     },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.editType == 'add') {
+            this.saveRole()
+          } else {
+            this.editRoleFunc()
+          }
+          this.resetForm('ruleForm')
+        } else {
+          return false
+        }
+      });
+    },
+    // 重置
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+      this.editDialogVisible = false
+    },
+    //新增保存
+    async saveRole () {
+      try {
+        const res = await SaveRole(this.ruleForm);
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.gueryRole({
+            QueryName: this.keyWords,
+            PageSize: this.PageSize,
+            PageIndex: this.pageNum
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //角色明细
+    async roleDetails (id) {
+      try {
+        const res = await RoleDetails({
+          RoleId: id,
+        });
+        if (res.code === 0) {
+          const { RoleName, RoleDesc, RoleStatus } = res.returnData;
+          this.ruleForm.RoleName = RoleName;
+          this.ruleForm.RoleDesc = RoleDesc;
+          this.ruleForm.RoleStatus = RoleStatus;
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+    //确认保存
+    async editRoleFunc () {
+      try {
+        const res = await EditRole({
+          RoleName: this.ruleForm.RoleName,
+          RoleDesc: this.ruleForm.RoleDesc,
+          RoleStatus: this.ruleForm.RoleStatus,
+          RoleId: this.roleId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.gueryRole({
+            QueryName: this.keyWords,
+            PageSize: this.PageSize,
+            PageIndex: this.pageNum
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
     //滚动加载数据
     load () {
       this.pageNum += 1
@@ -301,6 +434,13 @@ export default {
             background-image: url("../../../assets/status/ic_subordinate_hovar.png");
           }
         }
+        .cap-auth {
+          margin-left: 12px;
+          background-image: url("../../../assets/status/ic_edit_authorization.png");
+          &:hover {
+            background-image: url("../../../assets/status/ic_edit_authorization_hover.png");
+          }
+        }
       }
     }
     .team {

src/views/authorityManagement/css/role.scss

@@ -25,10 +25,10 @@
   .addApp-form-content {
     margin-top: 30px;
     ::v-deep .form {
-      .el-form-item {
-        margin-bottom: 0;
-        margin-right: 40px;
-      }
+      // .el-form-item {
+      //   margin-bottom: 0;
+      //   margin-right: 40px;
+      // }
       .el-input__inner {
         height: 32px;
         line-height: 32px;