From 73b48dd59a2d47b365b87784371c4ef57dde659b Mon Sep 17 00:00:00 2001
From: Oliver <1070107765@qq.com>
Date: 星期四, 22 十二月 2022 11:17:47 +0800
Subject: [PATCH] 首页新增

---
 src/views/systemSetting/baseSetting/role/updateUser/index.vue |  337 +++++++++++++++++++++++++++++---------------------------
 1 files changed, 175 insertions(+), 162 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/role/updateUser/index.vue b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
index d0d18e1..28c9738 100644
--- a/src/views/systemSetting/baseSetting/role/updateUser/index.vue
+++ b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
@@ -1,186 +1,199 @@
 <template>
-    <div class="updateUser">
-        <main>
-            <div class="mainContent">
-                <div class="my-tree">
-                    <div class="my-tree__wrap">
-                        <el-tree :data="roleList" :props="defaultProps" @node-click="handleNodeClick" show-checkbox
-                            @check-change="handleCheckChange" default-expand-all node-key="id">
-                        </el-tree>
-                    </div>
-                    <div class="my-tree__bottom"></div>
-                    <div class="my-tree__right"></div>
-                </div>
-                <div class="selection">
-                    <el-button class="cancel" @click="resetRole">鍙栨秷</el-button>
-                    <el-button class="save" @click="saveRole">淇濆瓨</el-button>
-                </div>
-            </div>
-        </main>
-    </div>
+  <div class="updateUser">
+    <main>
+      <div class="mainContent">
+        <div class="my-tree">
+          <div class="my-tree__wrap">
+            <el-tree
+              ref="tree"
+              :data="roleList"
+              :props="defaultProps"
+              show-checkbox
+              :default-checked-keys="checkedIds"
+              default-expand-all
+              node-key="id"
+            >
+            </el-tree>
+          </div>
+          <!-- <div class="my-tree__bottom"></div> -->
+          <!-- <div class="my-tree__right"></div> -->
+        </div>
+        <div class="selection">
+          <el-button class="cancel" @click="resetRole">鍙栨秷</el-button>
+          <el-button class="save" @click="saveRole">淇濆瓨</el-button>
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {
-            role: {
-                name: '',
-                sort: '',
-                description: '',
-            },
-            roleList: [],
-            defaultProps: {
-                children: 'children',
-                label: 'title'
-            },
-            treeLabel: '',
-            treeId: 23,
-            checkedIds: [],
-            resCheckedIds: [],
-        }
+  data() {
+    return {
+      role: {
+        name: "",
+        sort: "",
+        description: "",
+      },
+      roleList: [],
+      defaultProps: {
+        children: "children",
+        label: "title",
+      },
+      treeLabel: "",
+      treeId: 23,
+      checkedIds: [],
+      resCheckedIds: [],
+    };
+  },
+  created() {
+    const that = this;
+    this.getRoleMenus(this.userInfo.id);
+    this.getMenuList();
+  },
+  methods: {
+    // 鑾峰彇绯荤粺鑿滃崟
+    getMenuList() {
+      this.$axios({
+        method: "get",
+        url: "sccg/menu/treeList",
+      }).then((res) => {
+        this.roleList = res.data;
+      });
     },
-    created() {
-        const that = this;
-        this.getMenuList();
+    // 鏍戝舰鎺т欢澶嶉�夋鐐瑰嚮浜嬩欢
+    handleCheck(data, checked) {
+    //   console.log(checked.checkedKeys);
+    //   this.checkedIds = checked.checkedKeys;
+    //   console.log(this.checkedIds);
     },
-    methods: {
-        handleUser() {
-            this.$refs.user.validate((valid) => {
-                if (valid) {
-                    const { role } = this;
-                    console.log(role);
-                    this.$axios.post('/sccg/role/update/' + role.id, {
-                        id: role.id,
-                        status: role.status,
-                        description: role.description,
-                        name: role.name,
-                        sort: 0
-                    }).then(res => {
-                        this.$emit('changeDialog', { dialogUpdate: false });
-                        this.getUserList();
-                    })
-                } else {
-                    return false;
-                }
-            })
-        },
-        // 鑾峰彇绯荤粺鑿滃崟
-        getMenuList() {
-            this.$axios({
-                method: 'get',
-                url: 'sccg/menu/treeList',
-            })
-                .then(res => {
-                    this.roleList = res.data;
-                    console.log(res);
-                })
-        },
-        // 鐐瑰嚮鏍戣妭鐐�
-        handleNodeClick({ title, id }) {
-            // console.log(obj);
-            this.role.sort = title;
-            this.treeLabel = title;
-            this.treeId = id;
+    // 淇濆瓨role
+    saveRole() {
+      let nodes = this.$refs.tree.getCheckedNodes(false, true);
+   
+      const { userInfo } = this;
+      this.checkedIds = nodes.map((n) => n.id);
 
-        },
-        // 鏍戝舰鎺т欢閫変腑鏇存敼
-        handleCheckChange(data, checked, indeterminate) {
-            // console.log(data,checked,indeterminate);
-            if (checked) {
-                this.checkedIds.push(data.id);
-            } else {
-                let index = 0;
-                this.checkedIds.forEach((item, idx) => {
-                    if (item.id === data.id) {
-                        index = idx;
-                    }
-                })
-                this.checkedIds.splice(index, 1);
-            }
-            console.log(this.checkedIds);
-        },
-        // 淇濆瓨role
-        saveRole() {
-            this.resCheckedIds = [];
-            this.resCheckedIds = this.checkedIds;
-            this.$emit('changeDialog',{dialogUpdate:false});
-        },
-        // 娑堥櫎role
-        resetRole() {
-            this.resCheckedIds = []
+      this.$axios({
+        method: "post",
+        url:
+          "sccg/role/allocMenu?roleId=" +
+          userInfo.id +
+          "&menuIds=" +
+          this.checkedIds,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "淇敼瑙掕壊鏉冮檺鎴愬姛",
+          });
+          this.getRoleMenus(userInfo.id);
+          this.$emit("changeDialog", { flag: false });
+        //   this.getUserList();
+        } else {
+          this.$message({
+            type: "warning",
+            message: res.message,
+          });
         }
+      });
+      // this.$emit('changeDialog',{dialogUpdate:false});
     },
-    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
-}
+    // 娑堥櫎role
+    resetRole() {
+      this.resCheckedIds = [];
+      this.$emit("changeDialog", { dialogUpdate: false });
+    },
+    // 鑾峰彇瑙掕壊鑿滃崟
+    getRoleMenus(roleId) {
+      this.$axios({
+        method: "get",
+        url: `sccg/role/listMenu/${roleId}`,
+      }).then((res) => {
+        this.checkedIds = [];
+        res.data.forEach((item) => {
+          this.checkedIds.push(item.id);
+        });
+      });
+    },
+  },
+  props: ["userInfo", "updateFlag", "getUserList", "changeDialog"],
+};
 </script>
 <style lang="scss" scoped>
 .updateUser {
-    border-radius: 1px;
+  border-radius: 1px;
+  background-color: #09152f;
+
+  main {
+    text-align: left;
+    padding: 50px 55px;
     background-color: #09152f;
-    main {
-        text-align: left;
-        padding: 50px 55px;
-        background-color: #09152f;
-        .mainContent {
-            .my-tree {
-                height: 200px;
-                overflow: hidden;
-                background-color: #17324c;
-                position: relative;
-                border-radius: 4px;
-                .my-tree__wrap{
-                    overflow: scroll;
-                    height: 200px;
-                }
-                .my-tree__bottom{
-                    position: absolute;
-                    left: 0px;
-                    bottom: 0px;
-                    background-color: #17324c;
-                    width: 100%;
-                    height: 20px;
-                    border-bottom-left-radius: 4px;
-                }
-                .my-tree__right{
-                    position: absolute;
-                    right: 0px;
-                    top: 0px;
-                    background-color: #17324c;
-                    width: 20px;
-                    height: 100%;
-                }
-            }
+
+    .mainContent {
+      .my-tree {
+        height: 200px;
+        overflow: hidden;
+        background-color: #17324c;
+        position: relative;
+        border-radius: 4px;
+
+        .my-tree__wrap {
+          overflow-y: scroll;
+          height: 200px;
         }
-    }
 
-    &::v-deep .el-textarea__inner {
-        background-color: #09152f;
-        border: 1px solid #17324c;
-    }
+        .my-tree__bottom {
+          position: absolute;
+          left: 0px;
+          bottom: 0px;
+          background-color: #09152f;
+          width: 100%;
+          height: 20px;
+          border-bottom-left-radius: 4px;
+        }
 
-    ::v-deep .el-input__inner {
-        background-color: #09152f;
-        border: 1px solid #17324c;
+        .my-tree__right {
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          background-color: #09152f;
+          width: 20px;
+          height: 100%;
+        }
+      }
     }
+  }
+
+  &::v-deep .el-textarea__inner {
+    background-color: #09152f;
+    border: 1px solid #17324c;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #09152f;
+    border: 1px solid #17324c;
+  }
 }
 
 .selection {
-    margin-top: 10px;
-    display: flex;
-    justify-content: space-between;
-    .el-button {
-        padding: 10px 20px;
-        border-radius: 4px;
-    }
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
 
-    .save {
-        background-color: #409eff;
-        color: #fff;
-    }
+  .el-button {
+    padding: 10px 20px;
+    border-radius: 4px;
+  }
 
-    .cancel {
-        background-color: #09152f;
-        color: #4b9bb7;
-    }
+  .save {
+    background-color: #409eff;
+    color: #fff;
+  }
+
+  .cancel {
+    background-color: #09152f;
+    color: #4b9bb7;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0