From 0a1d2fe85a280f5543b9b3241aaf8d8a39a32f8c Mon Sep 17 00:00:00 2001 From: mg <maokecheng@163.com> Date: 星期四, 27 十月 2022 18:26:40 +0800 Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui --- src/views/systemSetting/baseSetting/user/components/createUser/index.vue | 485 +++++++++++++++++++++++++++++++++++------------------ 1 files changed, 323 insertions(+), 162 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue index c3b9f52..274dda7 100644 --- a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue @@ -4,87 +4,165 @@ <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 class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> - <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"></el-input> - </el-form-item> - <!-- 鎵�灞炵敤鎴峰鍚� --> - <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="username"> - <el-input v-model="user.username" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> - </el-form-item> - <!-- 鎬у埆 --> - <!-- <el-form-item class="optionItem" label="鎬у埆:" prop="gender"> - <el-radio-group v-model="user.gender"> - <el-radio :label="1">鐢�</el-radio> - <el-radio :label="2">濂�</el-radio> - </el-radio-group> - </el-form-item> --> - <!-- 鏄惁鍏氬憳 --> - <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="isDy"> - <el-radio-group v-model="user.isDy"> - <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="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> - </el-form-item> - <!-- 閭鍦板潃 --> - <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> - <el-input v-model="user.email" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></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.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="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> - <el-option v-for="item in typeList" :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="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 class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="username"> + <el-input v-model="user.username" placeholder="濉啓鐢ㄦ埛鍚嶇О" autoComplete="new-username"> + </el-input> + </el-form-item> </div> - </el-form-item> + <div class="item-right"></div> + </div> + <!-- 鐢ㄦ埛瀵嗙爜 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> + <el-input v-model="user.password" type="password" autoComplete="new-password" + placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + <!-- 閲嶆柊杈撳叆瀵嗙爜鍗充负淇敼锛屽瘑鐮佹湁鏁堟湡榛樿涓�3涓湀 --> + </div> + <!-- 鎵�灞炵敤鎴峰鍚� --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="nickName"> + <el-input v-model="user.nickName" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 鎬у埆 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鎬у埆:" prop="sex"> + <el-radio-group v-model="user.sex"> + <el-radio :label="1">鐢�</el-radio> + <el-radio :label="0">濂�</el-radio> + </el-radio-group> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 鏄惁鍏氬憳 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="isDy"> + <el-radio-group v-model="user.isDy"> + <el-radio :label="1">鏄�</el-radio> + <el-radio :label="0">鍚�</el-radio> + </el-radio-group> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 鎵�灞炴墜鏈哄彿鐮� --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile"> + <el-input v-model="user.mobile" maxlength="11" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 閭鍦板潃 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> + <el-input v-model="user.email" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 閫夋嫨瑙掕壊 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="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-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 鐢ㄦ埛绫诲瀷 --> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType"> + <el-select v-model="user.userType" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </div> + <div class="item-right"></div> + </div> + <!-- 搴ф満/鍒嗘満 --> + <div class="user-item sp-item"> + <div class="item-left"> + <el-form-item label="搴ф満/鍒嗘満:" prop="zjarea"> + <el-input v-model="user.zjarea" placeholder="鐢佃瘽鍖哄彿"> + </el-input> + </el-form-item> + <el-form-item prop="zjnumber" class="left-px"> + <el-input v-model="user.zjnumber" placeholder="鐢佃瘽鍙风爜"> + </el-input> + </el-form-item> + <el-form-item prop="zjother" class="left-px"> + <el-input v-model="user.zjother" placeholder="鍒嗘満鍙风爜"> + </el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> <!-- 鎵�灞為儴闂� --> - <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> - <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�"> - <el-option v-for="item in departList" :key="item.name" :label="item.departName" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> + <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�" @change="getDepartName"> + <el-option :value="mylabel"> + <el-tree ref="tree" :check-strictly="true" :data="departList" + :props="defaultProps" show-checkbox @check-change="handleCheck" + default-expand-all node-key="id"> + </el-tree> + </el-option> + </el-select> + </el-form-item> + </div> + <div class="item-right"></div> + </div> <!-- 褰撳墠鑱屽姟 --> - <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle"> - <el-input v-model="user.jobTitle" placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�"></el-input> - </el-form-item> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle"> + <el-input v-model="user.jobTitle" placeholder="璇疯緭鍏ュ綋鍓嶈亴鍔�"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> <!-- 濉啓鎵�灞瀖ac鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> - <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input> - </el-form-item> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> + <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> <!-- 濉啓鎵�灞瀒p鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> - <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input> - </el-form-item> + <div class="user-item"> + <div class="item-left"> + <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> + <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input> + </el-form-item> + </div> + <div class="item-right"></div> + </div> <el-form-item> <div class="optionBtn"> <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 @@ -99,15 +177,16 @@ </div> </template> <script> +import { getTypeList } from '@/utils/helper' 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("鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖")); @@ -115,7 +194,7 @@ const rep = /^\w+$/; if (!rep.test(value)) { callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆")); - }else{ + } else { callback(); } } @@ -124,12 +203,7 @@ if (!value) { callback(new Error("鐢ㄦ埛濮撳悕涓嶈兘涓虹┖")); } else { - const rep = /^[\u4E00-\u9FA5]{2,4}$/; - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - }else{ - callback(); - } + callback(); } }; const validatePhone = (rule, value, callback) => { @@ -139,19 +213,23 @@ const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ if (!rep.test(value)) { callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - }else{ + } 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("璇疯緭鍏ユ纭殑閭")) - // } - // } - // }; + 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) => { if (!value) { callback(new Error("鎵�灞炶鑹蹭笉鑳戒负绌�")); @@ -180,51 +258,50 @@ callback(); } }; - // const validateMac = (rule, value, callback) => { - // if (value) { - // callback(new Error("")); - // }else{ - // callback() - // } - // }; - // const validateIp = (rule, value, callback) => { - // if (value) { - // }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: '', + nickName: '', password: '', username: '', - gender: 1, + sex: 1, isDy: 0, mobile: '', email: '', role: null, userType: null, - zj: { - areaNumber: '', - phoneNumber: "", - moreNumber: "", - }, + zjarea: '', + zjnumber: '', + zjother: '', departmentId: null, jobTitle: null, mac: '', ip: '', }, createUserRules: { - // nickName: [ - // { required: true, trigger: "blur", validator: validateNickname }, - // ], + nickName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], password: [ { required: true, trigger: "blur", validator: validatePass }, ], username: [ { required: true, trigger: "blur", validator: validateTruename }, ], - gender: [ + sex: [ { required: true, trigger: "blur" }, ], isDy: [ @@ -233,9 +310,9 @@ mobile: [ { required: true, trigger: "blur", validator: validatePhone }, ], - // email: [ - // { required: false, trigger: "blur", validator: validateMail }, - // ], + email: [ + { required: true, trigger: "blur", validator: validateMail }, + ], role: [ { required: true, trigger: "change", validator: validateRole }, ], @@ -251,30 +328,42 @@ jobTitle: [ { required: true, trigger: "blur", validator: validateWork }, ], - // mac: [ - // { required: false, trigger: "blur", validator: validateMac }, - // ], - // ip: [ - // { required: false, trigger: "blur", validator: validateIp }, - // ], + mac: [ + { required: false, trigger: "blur", validator: validateMac }, + ], + ip: [ + { required: false, trigger: "blur", validator: validateIp }, + ], }, roleList: [ - { name: '瑙掕壊1', id: 1 }, { name: '瑙掕壊2', id: 2 } + ], typeList: [ - { name: '绫诲瀷1', id: 1 }, { name: '绫诲瀷2', id: 2 } + ], - departList: [] + departList: [], + mylabel: '', + defaultProps: { + children: 'children', + label: 'departName', + disabled: (data, node) => { + if (node.level === 1 && node.childNodes.length !== 0) { + return !data.leaf + } + } + }, + selectOrg: { + orgsid: [] + }, } }, created() { - const that = this; // 鑾峰彇瑙掕壊鍒楄〃 this.getRoleList(); - // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃 - this.$axios.get('sccg/depart/page').then(res => { - that.departList = res.data.records; - }) + // 鑾峰彇鐢ㄦ埛绫诲瀷 + this.getUserTypeList(); + // 鑾峰彇閮ㄩ棬 + this.getDepartList(); }, methods: { // 鎻愪氦娉ㄥ唽 @@ -282,34 +371,46 @@ this.$refs['user'].validate((valid) => { console.log(valid); if (valid) { - const { user } = this; + const { user, selectOrg } = this; console.log(user); this.$axios.post('sccg/admin/register', { - departmentId: user.departmentId, + departmentId: selectOrg.orgsid[0], email: user.email, - jsDy: user.isDy, + icon: '', + isDy: `${user.isDy}`, jobTitle: user.jobTitle, mobile: user.mobile, - nickName: user.nickName, + note: '', + roleIds: user.role, + // nickName: user.nickName, + sex: `${user.sex}`, password: user.password, userType: user.userType, username: user.username, + zj: user.zjarea + `${user.zjnumber}` + user.zjother, + nickName: user.nickName + // departName:user.departName, }).then(res => { if (res.code === 200) { console.log(1); this.$message({ - type:'success', - message:res.code, + type: 'success', + message: res.message, }) this.$emit('sendDialog', { flag: false }); - }else if(res.code === 500 && res.message === "鎿嶄綔澶辫触"){ + } else if (res.code === 500 && res.message === "鎿嶄綔澶辫触") { this.$message({ - type:'warning', - message:'璇ョ敤鎴峰凡娉ㄥ唽' + type: 'warning', + message: '璇ョ敤鎴峰凡娉ㄥ唽' + }) + } else { + this.$message({ + type: 'warning', + message: res.message }) } }) - }else{ + } else { return false } }) @@ -325,9 +426,59 @@ }) }, // 閲嶇疆琛ㄥ崟 - resetForm(){ + resetForm() { this.$refs['user'].resetFields(); - } + }, + // 鑾峰緱閮ㄩ棬鍚嶇О + getDepartName(data) { + this.departList.forEach(item => { + if (item.id === data) { + this.user.departName = item.departName + } + }) + }, + // 鑾峰彇鐢ㄦ埛绫诲瀷 + async getUserTypeList() { + this.typeList = await getTypeList(1, '07'); + }, + // 鑾峰彇閮ㄩ棬鏍� + getDepartList() { + this.$axios({ + method: 'get', + url: 'sccg/depart/tree' + }) + .then(res => { + this.departList = res.data; + }) + }, + handleCheck(data, checked) { + this.user.departmentId = 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.departmentId = ''; + } + }, }, props: ['sendDialog'] } @@ -346,9 +497,9 @@ .mainContent { display: flex; - justify-content: center; + // justify-content: center; margin-top: 50px; - + width: 100%; &::v-deep .el-form-item__label { color: #4b9bb7; } @@ -360,22 +511,32 @@ .el-form-item__content { width: 400px; - .el-select { width: 100%; } } - .optionHandleSp { - display: flex; + .sp-item { + .item-left{ + display: flex; + } + } - .areaNumber, - .moreNumber { - flex: 1; + .user-item { + display: flex; + justify-content: space-between; + .item-left { + width: 500px; + } + .item-right { + line-height: 40px; + color: #4b9bb7; + font-size: 12px; + // margin-left: 16px; } - .telNumber { - flex: 2; + .left-px :deep(.el-form-item__content) { + margin-left: 0px !important; } } -- Gitblit v1.8.0