From b9b2d3d63335fa9c72078e64f1ac1b365cf2d8dd Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期五, 21 十月 2022 00:10:27 +0800 Subject: [PATCH] 修改用户管理 --- src/views/systemSetting/baseSetting/user/components/updateUser/index.vue | 452 ++++++++++++++++++------------------------------------- 1 files changed, 149 insertions(+), 303 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue index bdb2020..86f30f7 100644 --- a/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/updateUser/index.vue @@ -4,94 +4,25 @@ <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="username"> - <el-input v-model="user.username" placeholder="濉啓鐢ㄦ埛鍚嶇О" :disabled="true"></el-input> - </el-form-item> - <!-- 鐢ㄦ埛瀵嗙爜 --> - <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> - <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" disabled> - </el-input> - </el-form-item> - <!-- 鎵�灞炵敤鎴峰鍚� --> - <!-- <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name"> - <el-input v-model="user.true_name" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> - </el-form-item> --> - <!-- 鎬у埆 --> - <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="0">濂�</el-radio> - </el-radio-group> - </el-form-item> - <!-- 鏄惁鍏氬憳 --> - <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="isDy"> - <el-radio-group v-model="user.isDy" disabled> - <el-radio :label="1">鏄�</el-radio> - <el-radio :label="0">鍚�</el-radio> - </el-radio-group> - </el-form-item> - <!-- 鎵�灞炴墜鏈哄彿鐮� --> - <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile"> - <el-input v-model="user.mobile" placeholder="璇峰~鍐欐墜鏈哄彿鐮�" :disabled="true"></el-input> - </el-form-item> - <!-- 閭鍦板潃 --> - <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> - <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="璇烽�夋嫨鎵�灞炶鑹�" multiple collapse-tags - @change="handleChangeRole" :disabled="!flag.role"> + <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role" v-if="flag.role"> + <el-select v-model="user.role" placeholder="璇烽�夋嫨鎵�灞炶鑹�" multiple collapse-tags> <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> - <!-- <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.id" :label="item.name" :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <!-- 搴ф満/鍒嗘満 --> - <!-- <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="zj"> - <div class="optionHandleSp"> - <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿"> - </el-input> - <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜"> - </el-input> - <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜"> - </el-input> - </div> - </el-form-item> --> <!-- 鎵�灞為儴闂� --> - <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> - <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-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId" v-else> + <el-select v-model="user.departName" placeholder="璇烽�夋嫨鎵�灞為儴闂�" :disabled="!flag.depart"> + <el-option :value="mylabel"> + <el-tree ref="tree" :check-strictly="true" :data="departList" :props="defaultProps" + show-checkbox @check-change="handleCheck" + :default-checked-keys="[selectOrg.orgsid[0],]" default-expand-all node-key="id"> + </el-tree> </el-option> </el-select> </el-form-item> - <!-- 褰撳墠鑱屽姟 --> - <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle"> - <el-input v-model="user.jobTitle" placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�" :disabled="true"></el-input> - </el-form-item> - <!-- 濉啓鎵�灞瀖ac鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> - <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃" disabled></el-input> - </el-form-item> - <!-- 濉啓鎵�灞瀒p鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> - <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃" disabled></el-input> - </el-form-item> - <el-form-item v-if="updateFlag"> + <el-form-item> <div class="optionBtn"> <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 </el-button> @@ -106,194 +37,43 @@ <script> export default { data() { - const validateNickname = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); - } else { - callback(); - } - }; - const validatePass = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - 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 { - callback(); - // const rep = /^[\u4E00-\u9FA5]{2,4}$/; - // if (!rep.test(value)) { - // callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - // } else { - // callback(); - // } - } - }; - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); - } else { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - } else { - callback(); - } - } - }; - const validateMail = (rule, value, callback) => { - if (value) { - 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(); - } - } else { - callback(); - } - }; - // const validateRole = (rule, value, callback) => { - // console.log(value); - // if (!value) { - // callback(new Error("璇烽�夋嫨鐢ㄦ埛瑙掕壊")); - // } else { - // callback(); - // } - // }; - const validateType = (rule, value, callback) => { - if (!value && value !== 0) { - callback(new Error("璇烽�夋嫨鐢ㄦ埛绫诲瀷")); - } else { - callback(); - } - }; - const validateDepartment = (rule, value, callback) => { - if (!value && value !== 0) { - callback(new Error("璇烽�夋嫨鎵�灞為儴闂�")); - } else { - callback(); - } - }; - const validateWork = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欏綋鍓嶈亴鍔�")); - } else { - callback(); - } - }; - const validateMac = (rule, value, callback) => { - if (!value) { - callback(); - } else { - callback(); - } - }; - const validateIp = (rule, value, callback) => { - if (!value) { - callback(); - } else { - callback(); - } - }; return { user: { - nickName: '', - password: '', - username: '', - sex: 1, - isDy: 1, - mobile: '', - email: '', - // role: null, - userType: null, - zj: { - areaNumber: '', - phoneNumber: "", - moreNumber: "", - }, - // departmentId: null, - // jobTitle: null, - mac: '', - ip: '', }, createUserRules: { - nickName: [ - { required: true, trigger: "blur", validator: validateNickname }, - ], - password: [ - { required: true, trigger: "blur", validator: validatePass }, - ], - username: [ - { required: true, trigger: "blur", validator: validateTruename }, - ], - sex: [ - { required: true, trigger: "blur" }, - ], - isDy: [ - { required: true, trigger: "blur" }, - ], - mobile: [ - { required: true, trigger: "blur", validator: validatePhone }, - ], - email: [ - { required: false, trigger: "blur", validator: validateMail }, - ], - // role: [ - // { required: true, trigger: "change", validator: validateRole }, - // ], - userType: [ - { required: true, trigger: "change", validator: validateType }, - ], - zj: [ - { required: false, trigger: "blur" }, - ], - departmentId: [ - { required: true, trigger: "change", validator: validateDepartment }, - ], - jobTitle: [ - { required: true, trigger: "blur", validator: validateWork }, - ], - // mac: [ - // { required: false, trigger: "blur", validator: validateMac }, - // ], - // ip: [ - // { required: false, trigger: "blur", validator: validateIp }, - // ], }, roleList: [ - { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 } + ], - typeList: [], - departList: [] + departList: [], + mylabel: "", + defaultProps: { + children: "children", + label: "departName", + }, + selectOrg: { + orgsid: [], + }, + tempName: '', + tempRole: [] } }, created() { - const that = this; - this.user = JSON.parse(JSON.stringify(that.userInfo)); - console.log(this.user); + this.user = JSON.parse(JSON.stringify(this.userInfo)); + this.tempName = this.user.departName; + this.selectOrg.orgsid.push(this.user.departmentId); // 鑾峰彇鎵�鏈夎鑹插垪琛� this.getRoleList(); // 鑾峰彇褰撳墠鐢ㄦ埛瑙掕壊鍒楄〃 this.getUserRole(this.user.id) // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃 - this.$axios.get('sccg/depart/page').then(res => { - that.departList = res.data.records; + this.$axios.get('/sccg/depart/tree').then(res => { + this.departList = res.data; }) }, methods: { + // 淇敼閮ㄩ棬 changeDepart(data) { - console.log(data); this.departList.forEach(item => { if (item.id === data) { this.user.departName = item.departName; @@ -302,60 +82,87 @@ }, // 淇敼鐢ㄦ埛淇℃伅 handleUser() { - const { depart, role } = this.flag; + const { flag, user, tempName, selectOrg, tempRole, isArraySame } = this; 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, + if (flag.depart) { + if (tempName === user.departName) { + this.$message({ + type: 'warning', + message: '鎮ㄧ殑閮ㄩ棬杩樻湭鏇存敼' + }) + } else { + if (user.departName) { + 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": selectOrg.orgsid[0], + "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.$message({ + type: 'warning', + message: '鐢ㄦ埛閮ㄩ棬涓嶈兘涓虹┖' + }) } - }) - .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 }); + if (user.role.length === 0) { + this.$message({ + type: 'warning', + message: '鐢ㄦ埛瑙掕壊涓嶈兘涓虹┖', }) + } + else if (isArraySame(tempRole, user.role) && tempRole.length === user.role.length) { + this.$message({ + type: 'warning', + message: '鎮ㄨ繕鏈洿鏀硅鑹�', + }) + } + 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; @@ -372,11 +179,6 @@ this.roleList = res.data; }) }, - // 鏀瑰彉鐢ㄦ埛瑙掕壊 - handleChangeRole(data) { - console.log(this.user.role); - // console.log(data); - }, // 鑾峰彇鐢ㄦ埛鐨勮鑹插垪琛� getUserRole(id) { this.$axios({ @@ -384,16 +186,59 @@ url: `sccg/admin/role/${id}` }) .then(res => { - console.log(res); const arr = []; res.data.forEach(item => { arr.push(item.id); }) this.user.role = arr; + this.tempRole = arr; }) + }, + // 閮ㄩ棬淇敼 + handleCheck(data, checked) { + this.user.departName = data.departName; + // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮� + const indexs = this.selectOrg.orgsid.indexOf(data.id); + // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆� + if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { + this.$message({ + message: "鍙兘閫夋嫨涓�涓儴闂紒", + type: "warning", + showClose: true, + }); + // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕� + this.$refs.tree.setChecked(data, false); + } else if (this.selectOrg.orgsid.length === 0 && checked) { + // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨 + // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push + this.selectOrg.orgsid = []; + this.selectOrg.orgsid.push(data.id); + } else if ( + indexs >= 0 && + this.selectOrg.orgsid.length === 1 && + !checked + ) { + // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣� + this.selectOrg.orgsid = []; + this.user.departName = '' + } + }, + // 鍒ゆ柇鏁扮粍鏄惁鐩哥瓑 + isArraySame(arr1, arr2) { + let flag = true + arr1.sort((a, b) => a - b) + arr2.sort((a, b) => a - b) + arr1.forEach(item => { + arr2.forEach(child => { + if (item !== child) { + flag = false + } + }) + }) + return flag } }, - props: ['userInfo', 'updateFlag', 'flag', 'closeDialog', 'getUserList'] + props: ['userInfo', 'flag', 'closeDialog', 'getUserList'] } </script> <style lang="scss" scoped> @@ -409,6 +254,7 @@ background-color: #09152f; color: #4b9bb7; } + main { text-align: left; padding: 0 55px; -- Gitblit v1.8.0