From c8a167fd980901fb9aa83064d92ce04bbb9cd87e Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 29 十二月 2022 12:10:17 +0800
Subject: [PATCH] 页面样式修改
---
src/views/systemSetting/baseSetting/role/updateUser/index.vue | 363 +++++++++++++++++++++++++--------------------------
1 files changed, 176 insertions(+), 187 deletions(-)
diff --git a/src/views/systemSetting/baseSetting/role/updateUser/index.vue b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
index 5905a11..0e78b32 100644
--- a/src/views/systemSetting/baseSetting/role/updateUser/index.vue
+++ b/src/views/systemSetting/baseSetting/role/updateUser/index.vue
@@ -1,210 +1,199 @@
<template>
- <div class="updateUser">
- <main>
- <div class="mainContent">
- <div class="my-tree">
- <div class="my-tree__wrap">
- <!-- @node-click="handleNodeClick" -->
- <el-tree ref="tree" :data="roleList" :props="defaultProps" show-checkbox
- @check="handleCheck" :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>
+ <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.getRoleMenus(this.userInfo.id);
- 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;
- })
- },
- // 鐐瑰嚮鏍戣妭鐐�
- 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);
- },
- // 鏍戝舰鎺т欢澶嶉�夋鐐瑰嚮浜嬩欢
- handleCheck(data, checked) {
- console.log(checked.checkedKeys);
- this.checkedIds = checked.checkedKeys;
- console.log(this.checkedIds);
- },
- // 淇濆瓨role
- saveRole() {
- this.resCheckedIds = [];
- const {userInfo} = this;
- this.resCheckedIds = this.checkedIds;
- 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);
- }else{
- this.$message({
- type:'warning',
- message:res.message
- })
- }
- })
- // this.$emit('changeDialog',{dialogUpdate:false});
- },
- // 娑堥櫎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);
- })
- })
+ 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;
- 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%;
- }
- }
+ border-radius: 1px;
+ // 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-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