权限

src/utils/api/index.js

@@ -761,6 +761,9 @@ export function getPermission(data) {
     url: "/xymanager/role/getPermission",
     method: "get",
     params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 

src/views/system/roleManagement/components/blindPermiss.vue

@@ -1,13 +1,23 @@
 <template>
   <el-dialog
-    class="addUserDialog"
+    class="blindDialog"
     title="权限绑定"
     :visible.sync="isShow"
     :close-on-click-modal="false"
     width="470px"
     @close="handleclose"
   >
-    绑定权限
+    <div class="treeBoxList" v-loading="treeLoading">
+      <el-tree
+        :data="treeData"
+        show-checkbox
+        node-key="id"
+        ref="tree"
+        highlight-current
+        :props="defaultProps"
+      >
+      </el-tree>
+    </div>
     <div slot="footer" class="dialog-footer">
       <el-button @click="isShow = false">取 消</el-button>
       <el-button type="primary" @click="submitForm()">确 定</el-button>
@@ -15,15 +25,27 @@
   </el-dialog>
 </template>
 <script>
-import { addRole, updateRole } from "@/utils/api/index";
+import {
+  getPermissionTree,
+  getPermission,
+  changePermission,
+} from "@/utils/api/index";
 export default {
   props: {},
   data() {
     return {
       roleUser: "",
       isShow: false,
-
+      treeData: [],
-      formdata: {},
+      defaultProps: {
+        //指定参数格式回显数据
+        children: "list",
+        label: "name",
+      },
+      treeLoading: false,
+      rowData: "",
+      premissData: [],
+      selectTreeNode: [],
       rules: {
         name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
       },
@@ -35,67 +57,75 @@ export default {
   methods: {
     //判断
     getdataform(val) {
-      this.formdata = JSON.parse(JSON.stringify(val));
+      this.rowData = JSON.parse(JSON.stringify(val));
+      this.getPermissionRole();
     },
-    // 保存确定操作
+    //获取权限树结构
-    submitForm() {
+    getPermissionList() {
-      this.$refs.formInfo.validate((valid) => {
+      this.treeLoading = true;
-        if (valid) {
+      getPermissionTree()
-          if (this.title == "新增") {
+        .then((res) => {
-            addRole(this.formdata)
+          if (res.code == 200) {
-              .then((res) => {
+            console.log(res);
-                if (res.code == 200) {
+            this.treeLoading = false;
-                  this.$message({
+            this.treeData = res.data.list;
-                    duration: 1500,
+          } else {
-                    showClose: true,
+            this.$message.error(res.msg);
-                    message: "添加成功",
+          }
-                    type: "success",
+        })
-                  });
+        .catch((err) => {});
-                  this.isShow = false;
+    },
-                } else {
+    //获取查询杈限
-                  this.$message.error(res.msg);
+    getPermissionRole() {
-                }
+      console.log(this.rowData);
-              })
+      getPermission({ id: this.rowData.id })
-              .catch((err) => {});
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.premissData = res.data;
           } else {
-            updateRole(this.formdata)
+            this.$message.error(res.msg);
-              .then((res) => {
-                if (res.code == 200) {
-                  this.$message.success("修改成功");
-                  this.isShow = false;
-                } else {
-                  this.$message.error(res.msg);
-                }
-              })
-              .catch((err) => {});
           }
-        } else {
+        })
-          console.log("error submit!!");
+        .catch((err) => {});
-          return false;
+    },
-        }
+
-      });
+    // 保存确定操作
+    submitForm() {
+      console.log(this.$refs.tree.getCheckedNodes());
+      this.selectTreeNode = this.$refs.tree.getCheckedNodes();
+      console.log(this.selectTreeNode);
+      // changePermission()
+      //   .then((res) => {
+      //     if (res.code == 200) {
+      //       console.log(res);
+      //     } else {
+      //       this.$message.error(res.msg);
+      //     }
+      //   })
+      //   .catch((err) => {});
     },
     display() {
       this.isShow = true;
-      this.roleUser = localStorage.getItem("role");
+      this.getPermissionList();
     },
     hide() {
       this.isShow = false;
     },
     handleclose() {
-      this.$parent.roleListAll();
+      this.treeData = [];
     },
   },
   mounted() {},
 };
 </script>
 <style lang="less">
-.addUserDialog {
+.blindDialog {
-  .el-form-item {
+  .treeBoxList {
-    .el-input,
+    height: 600px;
-    .el-select,
+    overflow: auto;
-    .el-input-number {
+    .el-dialog__body {
-      width: 100%;
+      overflow: auto;
     }
   }
 }