| | |
| | | <!-- 上级部门 --> |
| | | <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> |
| | |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <!-- <el-input v-model="depart.departType" placeholder="请选择部门类型"></el-input> --> |
| | | </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"> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { getTypeList } from '@/utils/helper' |
| | | export default { |
| | | data() { |
| | | const validateNickname = (rule, value, callback) => { |
| | |
| | | if (!value) { |
| | | callback(); |
| | | } else { |
| | | // const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ |
| | | // if (!rep.test(value)) { |
| | | // callback("请输入正确的手机号码"); |
| | | // } |
| | | callback(); |
| | | } |
| | | }; |
| | |
| | | userList: [], |
| | | departList: [], |
| | | checkedUser: [], |
| | | cehckedList: [], |
| | | openUser: false, |
| | | departTypeList: [], |
| | | selectOrg: { |
| | | orgsid: [] |
| | | }, |
| | | mylabel: '', |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'departName', |
| | | }, |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | handleUser() { |
| | | this.$refs.user.validate((valid) => { |
| | | if (valid) { |
| | | const { depart, checkedUser, userList } = this; |
| | | console.log(depart); |
| | | console.log(checkedUser); |
| | | const { depart,cehckedList,selectOrg } = this; |
| | | const arr = []; |
| | | checkedUser.forEach(item => { |
| | | userList.forEach(child => { |
| | | if (item === child.id) { |
| | | arr.push({ isLeader: 0, userId: item,}); |
| | | } |
| | | }) |
| | | cehckedList.forEach(item => { |
| | | arr.push({ isLeader: item.isLeader, userId: item.id, }); |
| | | }) |
| | | console.log(arr); |
| | | this.$axios({ |
| | | method: 'post', |
| | | url:'/sccg/depart/create', |
| | | url: '/sccg/depart/create', |
| | | data: { |
| | | departName: depart.departName, |
| | | parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes, |
| | | parentId: selectOrg.orgsid[0], departType: depart.departType, departDes: depart.departDes, |
| | | departManagerList: arr |
| | | } |
| | | }).then(res => { |
| | |
| | | url: 'sccg/depart/tree', |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | res.data.unshift({ id: 0, departName: '顶级菜单' }) |
| | | this.departList = res.data; |
| | | }) |
| | |
| | | }, |
| | | 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 }); |
| | | }, |
| | | // 获取部门类型 |
| | | getDepartTypeList() { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/dict/query_depart_type', |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | this.departTypeList = res.data; |
| | | async getDepartTypeList() { |
| | | this.departTypeList = await getTypeList(1, '08') |
| | | }, |
| | | handleCheck(data, checked) { |
| | | this.depart.parentId = data.departName; |
| | | // 获取当前选择的id在数组中的索引 |
| | | const indexs = this.selectOrg.orgsid.indexOf(data.id) |
| | | // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。 |
| | | 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', 'changMyDialog'] |
| | |
| | | } |
| | | } |
| | | |
| | | .li-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .leader { |
| | | color: red; |
| | | } |
| | | |
| | | footer { |
| | | border-top: 1px solid #fff; |
| | | height: 80px; |