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/department/createUser/index.vue | 188 +++++++++++++++++++++++++++++++++------------- 1 files changed, 135 insertions(+), 53 deletions(-) diff --git a/src/views/systemSetting/baseSetting/department/createUser/index.vue b/src/views/systemSetting/baseSetting/department/createUser/index.vue index d25ded5..f07eccf 100644 --- a/src/views/systemSetting/baseSetting/department/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/department/createUser/index.vue @@ -11,22 +11,33 @@ <!-- 涓婄骇閮ㄩ棬 --> <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�"> - <el-option v-for="item in departList" :key="item.departName" :label="item.departName" - :value="item.id" :disabled="item.disabled"> + <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> <!-- 閮ㄩ棬绫诲瀷 --> <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType"> - <el-input v-model="depart.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷"></el-input> + <el-select v-model="depart.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷"> + <el-option v-for="item in departTypeList" :key="item.id" :label="item.name" + :value="item.id"> + </el-option> + </el-select> </el-form-item> <!--娣诲姞浜哄憳 --> <el-form-item class="optionItem add" label="娣诲姞浜哄憳:"> <ul class="addPerson"> - <li><i class="el-icon-user-solid"></i></li> - <li><i class="el-icon-user-solid"></i></li> - <li><i class="el-icon-user-solid"></i></li> - <li><i class="el-icon-plus" @click="openUser = true"></i></li> + <li v-for="(item,index) in cehckedList" :key="index" @click="setLeader(index)"> + <div class="li-item"> + <div class="li-icon"> + <i :class="['el-icon-user-solid',item.checked ? 'leader': '']"></i> + </div> + <label style="font-size: 12px;" :class="[item.checked ? 'leader': '']">{{item.username}}</label> + </div> + </li> + <li class="li-btn"><i class="el-icon-plus" @click="openUser = true"></i></li> </ul> <div class="card" v-if="openUser"> <el-card class="box-card"> @@ -35,8 +46,8 @@ <div @click="addUser">娣诲姞</div> </div> <div class="scrollWrap"> - <el-checkbox-group :max="3" v-model="checkedUser" @change="handleCheckedUserChange"> - <el-checkbox v-for="user in userList" :label="user.username" :key="user.id" :value="user.id"> + <el-checkbox-group v-model="checkedUser"> + <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> {{user.username}} </el-checkbox> </el-checkbox-group> @@ -54,13 +65,14 @@ </main> <footer> <div class="optionBtn"> - <el-button>鍙栨秷</el-button> + <el-button @click="handleClose">鍙栨秷</el-button> <el-button type="primary" class="btn submit" @click="handleUser">纭畾</el-button> </div> </footer> </div> </template> <script> +import { getTypeList } from '@/utils/helper' export default { data() { const validateNickname = (rule, value, callback) => { @@ -81,10 +93,6 @@ if (!value) { callback(); } else { - // const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - // if (!rep.test(value)) { - // callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - // } callback(); } }; @@ -112,7 +120,17 @@ userList: [], departList: [], checkedUser: [], - openUser:false, + cehckedList: [], + openUser: false, + departTypeList: [], + selectOrg: { + orgsid: [] + }, + mylabel: '', + defaultProps: { + children: 'children', + label: 'departName', + }, } }, created() { @@ -121,31 +139,42 @@ this.getDepartTree(); // 鑾峰彇鐢ㄦ埛鍒楄〃 this.getUserList(); + // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃 + this.getDepartTypeList(); }, methods: { handleUser() { this.$refs.user.validate((valid) => { if (valid) { - const { depart } = this; - console.log(depart); - // this.$axios.post('/sccg/depart/create', { - // departName: depart.departName, - // parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes - // }).then(res => { - // if (res.code === 200) { - // this.$message({ - // message:res.message, - // type:'success' - // }) - // this.refresh(); - // }else if(res.code ===2001){ - // this.$message({ - // message:res.message, - // type:'error' - // }) - // this.refresh(); - // } - // }) + const { depart,cehckedList,selectOrg } = this; + const arr = []; + cehckedList.forEach(item => { + arr.push({ isLeader: item.isLeader, userId: item.id, }); + }) + console.log(arr); + this.$axios({ + method: 'post', + url: '/sccg/depart/create', + data: { + departName: depart.departName, + parentId: selectOrg.orgsid[0], departType: depart.departType, departDes: depart.departDes, + departManagerList: arr + } + }).then(res => { + if (res.code === 200) { + this.$message({ + message: res.message, + type: 'success' + }) + this.refresh(); + } else if (res.code === 2001) { + this.$message({ + message: res.message, + type: 'error' + }) + this.refresh(); + } + }) } else { return false; } @@ -158,41 +187,84 @@ url: 'sccg/depart/tree', }) .then(res => { + console.log(res); res.data.unshift({ id: 0, departName: '椤剁骇鑿滃崟' }) this.departList = res.data; }) }, // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� getUserList() { - const that = this; - const { currentPage, pageSize, search } = this; // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) this.$axios.get(`sccg/admin/list`).then(res => { if (res.code === 200) { - console.log(res) this.userList = res.data.records; } }) }, - handleCheckedUserChange(value) { - // console.log(value); - if(value.length>3){ - console.log(this.checkedUser); - this.$message({ - type:'warning', - message:'鏈�澶氬彧鑳芥坊鍔犱笁涓垚鍛�' - }) - } - // let checkedCount = value.length; - // this.checkAll = checkedCount === this.cities.length; - // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; - }, - addUser(){ + addUser() { console.log(this.checkedUser); + console.log(this.userList); + this.cehckedList = []; + this.userList.forEach(item => { + this.checkedUser.forEach(child => { + if (item.id == child) { + this.cehckedList.push({ id: item.id, username: item.username, isLeader: 0, checked: false }); + } + }) + }) + this.cehckedList[0].isLeader = 1; + this.cehckedList[0].checked = true; this.openUser = false; }, + handleClose() { + this.$emit('changMyDialog', { flag: false }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartTypeList() { + this.departTypeList = await getTypeList(1, '08') + }, + handleCheck(data, checked) { + this.depart.parentId = 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.depart.parentId = ''; + } + }, + // 璁剧疆棰嗗 + setLeader(idx){ + this.cehckedList.forEach((item,index)=>{ + if(index === idx){ + item.checked = true; + item.isLeader = 1; + }else{ + item.checked = false; + item.isLeader = 0; + } + }) + } }, - props: ['refresh'] + props: ['refresh', 'changMyDialog'] } </script> <style lang="scss" scoped> @@ -272,6 +344,7 @@ position: absolute; z-index: 2000; right: 0; + .box-card { max-height: 200px; overflow: hidden; @@ -320,6 +393,15 @@ } } + .li-item { + display: flex; + flex-direction: column; + } + + .leader { + color: red; + } + footer { border-top: 1px solid #fff; height: 80px; -- Gitblit v1.8.0