From 0d7d6fc9a5c40ccc90190b0f24039ec1362f120f Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期一, 17 十月 2022 11:33:10 +0800 Subject: [PATCH] 新增设备管理、完善消息新增,修改bug --- src/views/systemSetting/baseSetting/user/components/createUser/index.vue | 389 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 256 insertions(+), 133 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue index ab14172..2ef5e07 100644 --- a/src/views/systemSetting/baseSetting/user/components/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/createUser/index.vue @@ -5,93 +5,163 @@ <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="濉啓鐢ㄦ埛鍚嶇О" autoComplete="new-username"></el-input> - </el-form-item> - <!-- 鐢ㄦ埛瀵嗙爜 --> - <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> - <!-- 鎵�灞炵敤鎴峰鍚� --> - <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="nickName"> - <el-input v-model="user.nickName" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> - </el-form-item> - <!-- 鎬у埆 --> - <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> - <!-- 鏄惁鍏氬憳 --> - <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" maxlength="11" 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="璇烽�夋嫨鎵�灞炶鑹�" 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="璇烽�夋嫨鎵�灞炶鑹�"> - <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"> - </el-option> - </el-select> - </el-form-item> - <!-- 搴ф満/鍒嗘満 --> <div class="user-item"> - <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 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> + <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">閲嶆柊杈撳叆瀵嗙爜鍗充负淇敼锛屽瘑鐮佹湁鏁堟湡榛樿涓�3涓湀</div> + </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="璇烽�夋嫨鎵�灞為儴闂�" @change="getDepartName"> - <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">鎻愪氦 @@ -106,6 +176,7 @@ </div> </template> <script> +import { getTypeList } from '@/utils/helper' export default { data() { const validateNickname = (rule, value, callback) => { @@ -131,12 +202,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) => { @@ -156,10 +222,10 @@ 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{ + } else { callback(); } - }else{ + } else { callback(); } }; @@ -194,14 +260,14 @@ const validateMac = (rule, value, callback) => { if (value) { callback(); - }else{ + } else { callback() } }; const validateIp = (rule, value, callback) => { if (value) { callback(); - }else{ + } else { callback() } }; @@ -244,7 +310,7 @@ { required: true, trigger: "blur", validator: validatePhone }, ], email: [ - { required: false, trigger: "blur", validator: validateMail }, + { required: true, trigger: "blur", validator: validateMail }, ], role: [ { required: true, trigger: "change", validator: validateRole }, @@ -269,24 +335,34 @@ ], }, roleList: [ - + ], typeList: [ - + ], - 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: { // 鎻愪氦娉ㄥ唽 @@ -294,41 +370,41 @@ 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, - icon:'', + icon: '', isDy: `${user.isDy}`, jobTitle: user.jobTitle, mobile: user.mobile, - note:'', - roleIds:user.role, + note: '', + roleIds: user.role, // nickName: user.nickName, - sex:`${user.sex}`, + sex: `${user.sex}`, password: user.password, userType: `${user.userType}`, username: user.username, - zj:user.zjarea+`${user.zjnumber}`+user.zjother, + zj: user.zjarea + `${user.zjnumber}` + user.zjother, // departName:user.departName, }).then(res => { if (res.code === 200) { console.log(1); this.$message({ - type:'success', - message:res.message, + 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{ + } else { this.$message({ - type:'warning', - message:res.message + type: 'warning', + message: res.message }) } }) @@ -360,16 +436,47 @@ }) }, // 鑾峰彇鐢ㄦ埛绫诲瀷 - getUserTypeList(){ + async getUserTypeList() { + this.typeList = await getTypeList(1, '07'); + }, + // 鑾峰彇閮ㄩ棬鏍� + getDepartList() { this.$axios({ - method:'get', - url:'sccg/dict/query_user_type' + method: 'get', + url: 'sccg/depart/tree' }) - .then(res=>{ - console.log(res); - this.typeList = res.data; - }) - } + .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'] } @@ -388,9 +495,9 @@ .mainContent { display: flex; - justify-content: center; + // justify-content: center; margin-top: 50px; - + width: 100%; &::v-deep .el-form-item__label { color: #4b9bb7; } @@ -402,29 +509,45 @@ .el-form-item__content { width: 400px; - .el-select { width: 100%; } } + .sp-item { + .item-left{ + display: flex; + } + } + .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; + } .left-px :deep(.el-form-item__content) { margin-left: 0px !important; } } - .optionBtn { - display: flex; - margin-top: 20px; - .btn { - padding: 12px 50px; - } + .optionBtn { + display: flex; + margin-top: 20px; + + .btn { + padding: 12px 50px; } - } + } } +} </style> \ No newline at end of file -- Gitblit v1.8.0