| | |
| | | <template> |
| | | <div class="updateUser"> |
| | | <!-- <header> |
| | | <div class="headerTitle">{{updateFlag ? '修改用户部门信息' :'查看用户信息'}}</div> |
| | | </header> --> |
| | | <main> |
| | | <!-- <div class="mainTitle">基础信息</div> --> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" |
| | | label-position="right"> |
| | |
| | | </el-form-item> |
| | | <!-- 用户密码 --> |
| | | <el-form-item class="optionItems" label="用户密码:" prop="password"> |
| | | <el-input v-model="user.password" type="password" placeholder="请输入用户密码" :disabled="true"> |
| | | <el-input v-model="user.password" type="password" placeholder="请输入用户密码" disabled> |
| | | </el-input> |
| | | </el-form-item> |
| | | <!-- 所属用户姓名 --> |
| | |
| | | <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input> |
| | | </el-form-item> --> |
| | | <!-- 性别 --> |
| | | <!-- <el-form-item class="optionItem" label="性别:" prop="gender"> |
| | | <el-radio-group v-model="user.gender"> |
| | | <el-form-item class="optionItem" label="性别:" prop="sex"> |
| | | <el-radio-group v-model="user.sex" :disabled="!flag.role"> |
| | | <el-radio :label="1">男</el-radio> |
| | | <el-radio :label="2">女</el-radio> |
| | | <el-radio :label="0">女</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> --> |
| | | </el-form-item> |
| | | <!-- 是否党员 --> |
| | | <el-form-item class="optionItem" label="是否党员:" prop="isDy"> |
| | | <el-radio-group v-model="user.isDy" disabled> |
| | |
| | | <el-input v-model="user.email" placeholder="请填写邮箱地址" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <!-- 选择角色 --> |
| | | <!-- <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色"> |
| | | <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value" |
| | | :disabled="item.disabled"> |
| | | <el-form-item class="optionItem" label="选择角色:" prop="role"> |
| | | <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags |
| | | @change="handleChangeRole" :disabled="!flag.role"> |
| | | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <!-- <el-select v-model="user.role" placeholder="请选择所属角色" :disabled="!flag.role"> |
| | | <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" |
| | | :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> --> |
| | | </el-form-item> |
| | | <!-- 用户类型 --> |
| | | <el-form-item class="optionItem" label="用户类型:" prop="userType"> |
| | | <el-select v-model="user.userType" placeholder="请选择用户类型" disabled> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </el-form-item> --> |
| | | <!-- 所属部门 --> |
| | | <el-form-item class="optionItem" label="所属部门:" prop="departmentId"> |
| | | <el-select v-model="user.department" placeholder="请选择所属部门" :disabled="!updateFlag"> |
| | | <el-option v-for="item in typeList" :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> |
| | | </el-form-item> |
| | | <!-- 当前职务 --> |
| | | <el-form-item class="optionItem" label="当前职务:" prop="jobTitle"> |
| | | <el-select v-model="user.work" placeholder="请选择当前职务" disabled> |
| | | <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-input v-model="user.jobTitle" placeholder="请输入当前职务" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <!-- 填写所属mac地址 --> |
| | | <!-- <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | | <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input> |
| | | </el-form-item> --> |
| | | <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac"> |
| | | <el-input v-model="user.mac" placeholder="请填写所属mac地址" disabled></el-input> |
| | | </el-form-item> |
| | | <!-- 填写所属ip地址 --> |
| | | <!-- <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input> |
| | | </el-form-item> --> |
| | | <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip"> |
| | | <el-input v-model="user.ip" placeholder="请填写所属ip地址" disabled></el-input> |
| | | </el-form-item> |
| | | <el-form-item v-if="updateFlag"> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交 |
| | |
| | | const validateNickname = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户名称")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | const rep = /^\w+$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | } |
| | | callback(); |
| | | // const rep = /^\w+$/; |
| | | // if (!rep.test(value)) { |
| | | // callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串")); |
| | | // } else { |
| | | // callback(); |
| | | // } |
| | | } |
| | | }; |
| | | const validateTruename = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写用户姓名")); |
| | | } else { |
| | | const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的用户姓名"); |
| | | } |
| | | callback(); |
| | | // const rep = /^[\u4E00-\u9FA5]{2,4}$/; |
| | | // if (!rep.test(value)) { |
| | | // callback("请输入正确的用户姓名"); |
| | | // } else { |
| | | // callback(); |
| | | // } |
| | | } |
| | | }; |
| | | const validatePhone = (rule, value, callback) => { |
| | |
| | | const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ |
| | | if (!rep.test(value)) { |
| | | callback("请输入正确的手机号码"); |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | }; |
| | |
| | | const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; |
| | | if (!rep.test(value)) { |
| | | callback(new Error("请输入正确的邮箱")) |
| | | } else { |
| | | callback(); |
| | | } |
| | | } |
| | | }; |
| | | const validateRole = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | // const validateRole = (rule, value, callback) => { |
| | | // console.log(value); |
| | | // if (!value) { |
| | | // callback(new Error("请选择用户角色")); |
| | | // } else { |
| | | // callback(); |
| | | // } |
| | | // }; |
| | | const validateType = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | if (!value && value !== 0) { |
| | | callback(new Error("请选择用户类型")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateDepartment = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | if (!value && value !== 0) { |
| | | callback(new Error("请选择所属部门")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateWork = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | callback(new Error("请填写当前职务")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateMac = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateIp = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请填写登录密码")); |
| | | callback(); |
| | | } else { |
| | | callback(); |
| | | } |
| | |
| | | nickName: '', |
| | | password: '', |
| | | username: '', |
| | | // gender: 1, |
| | | sex: 1, |
| | | isDy: 1, |
| | | mobile: '', |
| | | email: '', |
| | |
| | | phoneNumber: "", |
| | | moreNumber: "", |
| | | }, |
| | | departmentId: null, |
| | | jobTitle: null, |
| | | // mac: '', |
| | | // ip: '', |
| | | // departmentId: null, |
| | | // jobTitle: null, |
| | | mac: '', |
| | | ip: '', |
| | | }, |
| | | createUserRules: { |
| | | nickName: [ |
| | |
| | | username: [ |
| | | { required: true, trigger: "blur", validator: validateTruename }, |
| | | ], |
| | | // gender: [ |
| | | // { required: true, trigger: "blur" }, |
| | | // ], |
| | | sex: [ |
| | | { required: true, trigger: "blur" }, |
| | | ], |
| | | isDy: [ |
| | | { required: true, trigger: "blur" }, |
| | | ], |
| | |
| | | { required: false, trigger: "blur", validator: validateMail }, |
| | | ], |
| | | // role: [ |
| | | // { required: true, trigger: "blur", validator: validateRole }, |
| | | // { required: true, trigger: "change", validator: validateRole }, |
| | | // ], |
| | | userType: [ |
| | | { required: true, trigger: "blur", validator: validateType }, |
| | | { required: true, trigger: "change", validator: validateType }, |
| | | ], |
| | | zj: [ |
| | | { required: false, trigger: "blur" }, |
| | | ], |
| | | departmentId: [ |
| | | { required: true, trigger: "blur", validator: validateDepartment }, |
| | | { required: true, trigger: "change", validator: validateDepartment }, |
| | | ], |
| | | jobTitle: [ |
| | | { required: true, trigger: "blur", validator: validateWork }, |
| | |
| | | roleList: [ |
| | | { name: '角色1', value: 1 }, { name: '角色2', value: 2 } |
| | | ], |
| | | typeList: [] |
| | | typeList: [], |
| | | departList: [] |
| | | } |
| | | }, |
| | | created() { |
| | | const that = this; |
| | | this.user = JSON.parse(JSON.stringify(that.userInfo)); |
| | | // 获取角色列表 |
| | | // this.$axios.get('') |
| | | // 获取用户类型列表 |
| | | // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{ |
| | | // console.log(res); |
| | | // }) |
| | | console.log(this.user); |
| | | // 获取所有角色列表 |
| | | this.getRoleList(); |
| | | // 获取当前用户角色列表 |
| | | this.getUserRole(this.user.id) |
| | | // 获取全部部门列表 |
| | | this.$axios.get('sccg/depart/page').then(res => { |
| | | that.typeList = res.data.records; |
| | | that.departList = res.data.records; |
| | | }) |
| | | }, |
| | | methods: { |
| | | handleUser() { |
| | | const { user } = this; |
| | | this.$axios.post('sccg/depart/status', { |
| | | id: user.departmentId, |
| | | status: user.status ? 1 : 0, |
| | | }).then(res => { |
| | | console.log(res); |
| | | changeDepart(data) { |
| | | console.log(data); |
| | | this.departList.forEach(item => { |
| | | if (item.id === data) { |
| | | this.user.departName = item.departName; |
| | | } |
| | | }) |
| | | }, |
| | | // 修改用户信息 |
| | | handleUser() { |
| | | const { depart, role } = this.flag; |
| | | this.$refs.user.validate((valid) => { |
| | | if (valid) { |
| | | const { user } = this; |
| | | user.isDy = `${user.isDy}`; |
| | | if (depart) { |
| | | console.log(this.user); |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: `sccg/admin/update/${user.id}`, |
| | | data: { |
| | | "id": user.id, |
| | | "username": user.username, |
| | | "password": user.password, |
| | | "icon": user.icon, |
| | | "email": user.email, |
| | | "nickName": user.nickName, |
| | | "note": user.note, |
| | | "createTime": user.createTime, |
| | | "loginTime": user.loginTime, |
| | | "status": user.status ? 1 : 0, |
| | | "macAddress": user.macAddress, |
| | | "ipAddress": user.ipAddress, |
| | | "isDy": `${user.isDy}`, |
| | | "sex": `${user.sex}`, |
| | | "jobTitle": user.jobTitle, |
| | | "departmentId": user.departmentId, |
| | | "departName": user.departName, |
| | | "userType": user.userType, |
| | | "zj": user.zj, |
| | | "mobile": user.mobile, |
| | | } |
| | | }) |
| | | .then(res => { |
| | | this.$message({ |
| | | type: res.code === 200 ? 'success' : 'warning', |
| | | message: res.message, |
| | | }) |
| | | this.getUserList(); |
| | | this.$emit('closeDialog', { flag: false }); |
| | | }) |
| | | } else { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/admin/role/update?adminId=' + user.id + '&roleIds=' + user.role, |
| | | }) |
| | | .then(res => { |
| | | this.$message({ |
| | | type: res.code === 200 ? 'success' : 'warning', |
| | | message: res.message, |
| | | }) |
| | | this.getUserList(); |
| | | this.$emit('closeDialog', { flag: false }); |
| | | }) |
| | | } |
| | | } else { |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | // 获取角色列表 |
| | | getRoleList() { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/role/listAll', |
| | | }) |
| | | .then(res => { |
| | | this.roleList = res.data; |
| | | }) |
| | | }, |
| | | // 改变用户角色 |
| | | handleChangeRole(data) { |
| | | console.log(this.user.role); |
| | | // console.log(data); |
| | | }, |
| | | // 获取用户的角色列表 |
| | | getUserRole(id) { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: `sccg/admin/role/${id}` |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | const arr = []; |
| | | res.data.forEach(item => { |
| | | arr.push(item.id); |
| | | }) |
| | | this.user.role = arr; |
| | | }) |
| | | } |
| | | }, |
| | | props: ['userInfo', 'updateFlag'] |
| | | props: ['userInfo', 'updateFlag', 'flag', 'closeDialog', 'getUserList'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | |
| | | // header { |
| | | // display: flex; |
| | | // justify-content: center; |
| | | // height: 60px; |
| | | // line-height: 60px; |
| | | // padding: 0 20px; |
| | | // border: 1px solid #fff; |
| | | // .headerTitle { |
| | | // color: #4b9bb7; |
| | | // font-weight: 600; |
| | | // } |
| | | :deep(.el-tag) { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | // .headerTip span { |
| | | // color: #ff3b6c; |
| | | // } |
| | | .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { |
| | | background-color: #09152f; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | // .headerTip label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | // .el-select-dropdown__item :deep(.selected){ |
| | | // background-color: #09152f; |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | main { |
| | | // border: 1px solid #fff; |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | // .mainTitle { |
| | | // color: #4b9bb7; |
| | | // font-weight: 600; |
| | | // line-height: 100px; |
| | | // font-size: 14px; |
| | | // } |
| | | |
| | | .mainContent { |
| | | display: flex; |
| | | justify-content: center; |
| | | padding-top: 50px; |
| | | |
| | | .el-form-item__content { |
| | | width: 400px; |
| | | |