修改用户管理和角色管理部分问题

“dzb”

2022-09-27 80e0b9da4d4da98452f8930b148750763d85f090

修改用户管理和角色管理部分问题

 src/App.vue

@@ -32,9 +32,9 @@
      const pic = JSON.parse(sessionStorage.getItem('pic'));
      if (pic) {
        result = pic;
        console.log('缓存')
        // console.log('缓存')
      } else {
        console.log('请求');
        // console.log('请求');
        await this.$axios({
          method: 'get',
          url: 'sccg/system/portal/logo/search',
@@ -49,5 +49,23 @@
};
</script>
<style>

  .el-select-dropdown__item{
  height: 100%;
}
.el-select-dropdown,.popper-class{
  background-color: #17324c;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #17324c;
}
.el-tree{
  background-color: #17324c;
}
.el-tree-node__content:hover, .el-upload-list__item:hover{
  background-color: #09152f;
  color: #4b9bb7;
}
.el-tree-node:focus>.el-tree-node__content{
  background-color: #09152f;
}
</style>

 src/main.js

@@ -9,12 +9,25 @@
import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";
// 引入icons
import './assets/icons' 
import './assets/icons'
// 引入全局样式
import '@/styles/index.scss' 
import '@/styles/index.scss'
import api from "./utils/request"
Vue.prototype.$axios=api
console.log(process.env.VUE_APP_BASE_API);
Vue.prototype.$axios = api
router.beforeEach((to, from, next) => {
  if (to.meta.needLogin) {
    const token = sessionStorage.getItem('token');
    const tokenHead = sessionStorage.getItem('tokenHead');
    if (token && tokenHead) {
      next();
    } else {
      router.push("/login");
    }
  } else {
    next();
  }
})
// console.log(process.env.VUE_APP_BASE_API);
Vue.use(ElementUI);
new Vue({
  router,

 src/router/index.js

@@ -11,6 +11,9 @@
    path: '/home',
    name: 'home',
    component: () => import('@/views/layout'),
    meta:{
      needLogin:true,
    },
    children: [
      {
        path: 'system',

 src/utils/request.js

@@ -5,8 +5,8 @@
// 拦截器
// 请求
api.interceptors.request.use((config)=>{
  const token = localStorage.getItem('token');
  const tokenHead = localStorage.getItem('tokenHead');
  const token = sessionStorage.getItem('token');
  const tokenHead = sessionStorage.getItem('tokenHead');
    if(token && tokenHead){
      config.headers.Authorization = tokenHead+token;
    }

 src/views/layout/components/Header/index.vue

@@ -24,6 +24,8 @@
  },
  methods:{
    loginout(){
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('tokenHead');
      this.$router.push({path:"/login"})
    }
  }

 src/views/login/index.vue

@@ -120,9 +120,9 @@
          if (response.code === 200) {
            // 保存token
            console.log(response);
            localStorage.setItem('token',response.data.token);
            sessionStorage.setItem('token',response.data.token);
            // 保存token
            localStorage.setItem('tokenHead',response.data.tokenHead)
            sessionStorage.setItem('tokenHead',response.data.tokenHead)
            // 跳转到首页
            that.$router.push("/home");
          }else{

 src/views/systemSetting/baseSetting/role/index.vue

@@ -12,7 +12,7 @@
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate">
                        <createUser :refresh="getUserList" />
                        <createUser :refresh="context==='' ? getUserList : search" />
                    </el-dialog>
                </div>
            </div>
@@ -63,8 +63,8 @@
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo :getUserList=getUserList
                        @changeDialog="changeDialog" />
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- 分页 -->
                <div class="pagination">
@@ -167,37 +167,26 @@
                    if (res.code === 200) {
                        console.log(res);
                        res.data.list.forEach(item => {
                            item.createTime = helper(item.createTime);
                            // item.createTime = helper(item.createTime);
                            item.status == 1 ? item.status = true : item.status = false;
                        })
                        that.tableData = res.data.list
                        that.tableData = res.data.list;
                        this.totalNum = res.data.list.length;
                    }
                })
            } else {
                this.$axios({
                    method: 'get',
                    url: 'sccg/role/list?keyword='+context + '&pageNum=' + currentPage + '&pageSize=' + pageSize,
                    url: 'sccg/role/list?keyword=' + context + '&pageNum=' + currentPage + '&pageSize=' + pageSize,
                }).then(res => {
                    if (res.code === 200) {
                        console.log(2, res);
                        res.data.list.forEach(item => {
                            item.createTime = helper(item.createTime);
                            item.status == 1 ? item.status = true : item.status = false;
                        })
                        that.tableData = res.data.list
                        this.totalNum = res.data.length;
                        this.totalNum = res.data.list.length;
                    }
                })
                //     this.$axios.get('sccg/role/list?'+context).then(res => {
                //     if (res.code === 200) {
                //         console.log(2,res);
                //         res.data.list.forEach(item => {
                //             item.createTime = helper(item.createTime);
                //             item.status == 1 ? item.status = true : item.status = false;
                //         })
                //         that.tableData = res.data.list
                //     }
                // })
            }
        },
        // 设置表格斑马纹

 src/views/systemSetting/baseSetting/role/updateUser/index.vue

@@ -10,7 +10,14 @@
                    </el-form-item>
                    <!-- 角色类型 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="sort">
                        <el-input v-model="role.sort" placeholder="请选择角色类型" :disabled="!updateFlag"></el-input>
                        <!-- <el-input v-model="role.sort" placeholder="请选择角色类型" :disabled="!updateFlag"></el-input> -->
                        <el-select v-model="role.sort" placeholder="请选择角色类型">
                            <!-- v-for="item in roleList" :key="item.id" :label="item.departName"
                                :value="item.id" -->
                            <el-option :value="treeId" :label="treeLabel">
                                <el-tree :data="roleList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 角色描述 -->
                    <el-form-item class="optionItem" label="角色描述:" prop="description">
@@ -78,26 +85,33 @@
                    { required: false, trigger: "blur", validator: validateTruename },
                ],
            },
            roleList: [],
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            treeLabel:'',
            treeId:23
        }
    },
    created() {
        const that = this;
        this.userInfo.status ? this.userInfo.status = 1 : this.userInfo.status = 0;
        this.role = JSON.parse(JSON.stringify(that.userInfo));
        console.log(this.role);
        this.getMenuList();
    },
    methods: {
        handleUser() {
            this.$refs.user.validate((valid) => {
                console.log(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:role.sort
                        sort: 0
                    }).then(res => {
                        this.$emit('changeDialog', { dialogUpdate: false });
                        this.getUserList();
@@ -106,6 +120,25 @@
                    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;

        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
@@ -175,4 +208,5 @@
        border: 1px solid #17324c;
    }
}

</style>

 src/views/systemSetting/baseSetting/user/components/createUser/index.vue

@@ -4,10 +4,10 @@
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- 用户名称 -->
                    <!-- 用户名称
                    <el-form-item class="optionItem" label="用户名称:" prop="nickName">
                        <el-input v-model="user.nickName" placeholder="填写用户名称"></el-input>
                    </el-form-item>
                    </el-form-item> -->
                    <!-- 用户密码 -->
                    <el-form-item class="optionItems" label="用户密码:" prop="password">
                        <el-input v-model="user.password" type="password" placeholder="请输入用户密码"></el-input>
@@ -89,7 +89,7 @@
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                            <el-button class="btn reset">重置</el-button>
                            <el-button class="btn reset" @click.native.prevent="resetForm">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
@@ -101,13 +101,13 @@
<script>
export default {
    data() {
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户名称不能为空"));
            }else{
                callback();
            }
        };
        // const validateNickname = (rule, value, callback) => {
        //     if (!value) {
        //         callback(new Error("用户名称不能为空"));
        //     }else{
        //         callback();
        //     }
        // };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户密码不能为空"));
@@ -195,7 +195,7 @@
        // };
        return {
            user: {
                nickName: '',
                // nickName: '',
                password: '',
                username: '',
                gender: 1,
@@ -215,9 +215,9 @@
                ip: '',
            },
            createUserRules: {
                nickName: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                // nickName: [
                //     { required: true, trigger: "blur", validator: validateNickname },
                // ],
                password: [
                    { required: true, trigger: "blur", validator: validatePass },
                ],
@@ -277,6 +277,7 @@
        })
    },
    methods: {
        // 提交注册
        handleUser() {
            this.$refs['user'].validate((valid) => {
                console.log(valid);
@@ -296,7 +297,16 @@
                    }).then(res => {
                        if (res.code === 200) {
                            console.log(1);
                            this.$message({
                                type:'success',
                                message:res.code,
                            })
                            this.$emit('sendDialog', { flag: false });
                        }else if(res.code === 500 && res.message === "操作失败"){
                            this.$message({
                                type:'warning',
                                message:'该用户已注册'
                            })
                        }
                    })
                }else{
@@ -313,6 +323,10 @@
                .then(res => {
                    this.roleList = res.data;
                })
        },
        // 重置表单
        resetForm(){
            this.$refs['user'].resetFields();
        }
    },
    props: ['sendDialog']

 src/views/systemSetting/baseSetting/user/components/header/index.vue

@@ -11,7 +11,8 @@
            <div class="addUser">
                <!-- :before-close="handleClose" -->
                <el-button class="addBtn" type="primary" @click="dialogCreate = true">添加用户</el-button>
                <el-dialog :visible.sync="dialogCreate" title="新增账户" width="45%" v-if="dialogCreate">
                <el-dialog :visible.sync="dialogCreate" title="新增账户" width="45%" v-if="dialogCreate"
                    :before-close="handleClose">
                    <createUser @sendDialog="sendDialog" />
                </el-dialog>
            </div>
@@ -37,7 +38,15 @@
        sendDialog(flag) {
            console.log(flag);
            this.dialogCreate = flag.flag;
            this.$emit('setDialog', { flag:true })
            this.$emit('setDialog', { flag: true })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        }
    },
    props: ['setDialog', 'getSearch', 'flag'],
@@ -95,7 +104,7 @@
            padding: 12px 30px;
        }

            

    }
}
</style>

 src/views/systemSetting/baseSetting/user/components/main/index.vue

@@ -23,6 +23,9 @@
                <el-table-column prop="jobTitle" label="所属职务" min-width="8">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="10">
                    <template slot-scope="scope">
                        <span>{{changeTime(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="启用" min-width="5">
                    <template slot-scope="scope">
@@ -111,6 +114,9 @@
        this.getUserList();
    },
    methods: {
        changeTime({createTime}){
            return helper(createTime);
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();


 src/views/systemSetting/baseSetting/user/components/updateUser/index.vue

@@ -68,8 +68,8 @@
                    </el-form-item> -->
                    <!-- 所属部门 -->
                    <el-form-item class="optionItem" label="所属部门:" prop="departmentId">
                        <el-select v-model="user.departmentId" placeholder="请选择所属部门" :disabled="!flag.depart">
                            <el-option v-for="item in departList" :key="item.name" :label="item.departName"
                        <el-select v-model="user.departmentId" placeholder="请选择所属部门" :disabled="!flag.depart" @change="changeDepart">
                            <el-option v-for="item in departList" :key="item.id" :label="item.departName"
                                :value="item.id">
                            </el-option>
                        </el-select>
@@ -285,29 +285,32 @@
        })
    },
    methods: {
        changeDepart(data){
            console.log(data);
            this.departList.forEach(item=>{
                if(item.id===data){
                    this.user.departName = item.departName;
                }
            })
        },
        // 修改用户信息
        handleUser() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { user } = this;
                    console.log(user);
                    // for(let key in user){
                    //     if(user[key]===null){
                    //         user[key] = '';
                    //     }
                    // }
                    // user.status = String(user.status);
                    // user.isDy = String(user.isDy);
                    // user.userType = String(user.userType);
                    // this.$axios({
                    //     method: 'post',
                    //     url: 'sccg/admin/update/' + user.id,
                    //     data: user
                    // })
                    //     .then(res => {
                    //         console.log(res);
                    //         this.getUserList();
                    //         this.$emit('closeDialog', { flag: false });
                    //     })
                    this.$axios({
                        method: 'post',
                        url: 'sccg/admin/update/' + user.id,
                        data: user
                    })
                        .then(res => {
                            this.$message({
                                type:res.code===200 ? 'success' : 'warning',
                                message:res.message,
                            })
                            this.getUserList();
                            this.$emit('closeDialog', { flag: false });
                        })
                } else {
                    return false;
                }

 src/views/systemSetting/baseSetting/user/index.vue

@@ -18,6 +18,9 @@
            keyword: '',
        }
    },
    created(){
        
    },
    methods: {
        // 获取搜索返回结果
        getSearch({ text }) {
@@ -33,7 +36,7 @@
        resetFresh({ flag }) {
            this.isFresh = flag;
            console.log(this.isFresh);
        }
        },
    }
}
</script>