| | |
| | | </el-form-item> |
| | | <!-- 上级部门 --> |
| | | <el-form-item class="optionItems" label="上级部门:" prop="parentId"> |
| | | <el-select v-model="depart.parentId" placeholder="请输入上级部门"> |
| | | <el-option :value="mylabel"> |
| | | <el-select ref="projectApplicant" v-model="depart.parentId" placeholder="请输入上级部门"> |
| | | <el-option :value="mylabel"> |
| | | <el-tree |
| | | ref="tree" |
| | | :check-strictly="true" |
| | | :data="departList" |
| | | :props="defaultProps" |
| | | show-checkbox |
| | | @node-click="handleCheck" |
| | | @check-change="handleCheck" |
| | | default-expand-all |
| | | node-key="id" |
| | |
| | | <el-form-item class="optionItem add" label="添加人员:"> |
| | | <ul class="addPerson"> |
| | | <li |
| | | v-for="(item, index) in cehckedList" |
| | | v-for="(item, index) in checkedList" |
| | | :key="index" |
| | | @click="setLeader(index)" |
| | | > |
| | |
| | | <i |
| | | :class="[ |
| | | 'el-icon-user-solid', |
| | | item.checked ? 'leader' : '', |
| | | item.leader ? 'leader' : '', |
| | | ]" |
| | | ></i> |
| | | </div> |
| | | <label |
| | | style="font-size: 12px" |
| | | :class="[item.checked ? 'leader' : '']" |
| | | :class="[item.leader ? 'leader' : '']" |
| | | >{{ item.username }}</label |
| | | > |
| | | </div> |
| | |
| | | <li class="li-btn"> |
| | | <i class="el-icon-plus" @click="openUser = true"></i> |
| | | </li> |
| | | <li class="li-btn"> |
| | | <el-tooltip class="item" effect="light" content="清除选中人员" placement="top" :enterable="false"> |
| | | <i class="el-icon-minus" @click="clrarUser"></i> |
| | | </el-tooltip> |
| | | |
| | | </li> |
| | | </ul> |
| | | <div class="card" v-if="openUser"> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="myclear"> |
| | | <span>工作人员</span> |
| | | <div @click="addUser">确认</div> |
| | | <div class="box-card-sub" @click="addUser">确认</div> |
| | | </div> |
| | | <div class="scrollWrap"> |
| | | <el-checkbox-group v-model="checkedUser"> |
| | |
| | | </el-card> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <label style="color:#ff0000ab">红色代表部门领导,点击头像可设置部门领导</label> |
| | | <el-form-item style="margin-top: -40px"> |
| | | <label style="color: #ff0000ab" |
| | | >红色代表部门领导,点击头像可设置部门领导</label |
| | | > |
| | | </el-form-item> |
| | | <!-- 部门描述 --> |
| | | <el-form-item class="optionItem" label="部门描述:" prop="departDes"> |
| | |
| | | userList: [], |
| | | departList: [], |
| | | checkedUser: [], |
| | | cehckedList: [], |
| | | checkedList: [], |
| | | openUser: false, |
| | | departTypeList: [], |
| | | selectOrg: { |
| | |
| | | handleUser() { |
| | | this.$refs.user.validate((valid) => { |
| | | if (valid) { |
| | | const { depart, cehckedList, selectOrg } = this; |
| | | const { depart, checkedList, selectOrg } = this; |
| | | const arr = []; |
| | | cehckedList.forEach((item) => { |
| | | arr.push({ isLeader: item.isLeader, userId: item.id }); |
| | | checkedList.forEach((item) => { |
| | | arr.push({ leader: item.leader, userId: item.id }); |
| | | }); |
| | | console.log(arr); |
| | | this.$axios({ |
| | |
| | | method: "get", |
| | | url: "sccg/depart/tree", |
| | | }).then((res) => { |
| | | console.log(res); |
| | | res.data.unshift({ id: 0, departName: "顶级菜单" }); |
| | | // console.log(res); |
| | | // res.data.unshift({ id: 0, departName: "顶级菜单" }); |
| | | this.departList = res.data; |
| | | }); |
| | | }, |
| | | // 获取所有用户信息 |
| | | getUserList() { |
| | | // 获取所有用户信息、用户查询(暂时支持电话号码) |
| | | this.$axios.get(`sccg/admin/list`).then((res) => { |
| | | this.$axios.get(`/sccg/depart/query_surplus_user`).then((res) => { |
| | | if (res.code === 200) { |
| | | this.userList = res.data.records; |
| | | this.userList = res.data; |
| | | } |
| | | }); |
| | | }, |
| | | addUser() { |
| | | console.log(this.checkedUser); |
| | | console.log(this.userList); |
| | | this.cehckedList = []; |
| | | this.checkedList = []; |
| | | this.userList.forEach((item) => { |
| | | this.checkedUser.forEach((child) => { |
| | | if (item.id == child) { |
| | | this.cehckedList.push({ |
| | | this.checkedList.push({ |
| | | id: item.id, |
| | | username: item.username, |
| | | isLeader: 0, |
| | | checked: false, |
| | | leader: false, |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | this.cehckedList[0].isLeader = 1; |
| | | this.cehckedList[0].checked = true; |
| | | if (this.checkedList.length > 0) this.checkedList[0].leader = true; |
| | | this.openUser = false; |
| | | }, |
| | | // 清除选中用户 |
| | | clrarUser(){ |
| | | this.checkedUser=[] |
| | | }, |
| | | handleClose() { |
| | | this.$emit("changMyDialog", { flag: false }); |
| | |
| | | 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 = ""; |
| | | if(checked.childNodes.length == 0){ |
| | | this.depart.parentId = data.departName; |
| | | let _this = this; |
| | | _this.$refs.projectApplicant.blur(); |
| | | this.selectOrg.orgsid = [] |
| | | this.selectOrg.orgsid.push(data.id) |
| | | }else { |
| | | return |
| | | } |
| | | |
| | | // 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; |
| | | } |
| | | this.checkedList.forEach((item, index) => { |
| | | item.leader = index === idx; |
| | | }); |
| | | }, |
| | | }, |
| | |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | |
| | | main { |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainContent { |
| | |
| | | justify-content: center; |
| | | padding-top: 50px; |
| | | |
| | | &::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | // &::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | // &::v-deep .el-input__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | &::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | // &::v-deep .el-textarea__inner { |
| | | // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // } |
| | | |
| | | .addPerson { |
| | | display: flex; |
| | |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | .el-icon-plus{ |
| | | cursor: pointer; |
| | | } |
| | | .el-icon-minus{ |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .el-form-item__content { |
| | | width: 400px; |
| | |
| | | right: 0; |
| | | |
| | | .box-card { |
| | | max-height: 200px; |
| | | min-height: 240px; |
| | | max-height: 260px; |
| | | overflow: hidden; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | position: relative; |
| | | max-width: 220px; |
| | | |
| | | .scrollWrap { |
| | | overflow: scroll; |
| | | height: 160px; |
| | | height: 180px; |
| | | position: relative; |
| | | color: #4b9bb7; |
| | | // color: #4b9bb7; |
| | | |
| | | .el-checkbox-group { |
| | | display: flex; |
| | |
| | | .myclear { |
| | | width: 100%; |
| | | line-height: 20px; |
| | | color: #4b9bb7; |
| | | // color: #4b9bb7; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .box-card-sub{ |
| | | color: #2f54eb; |
| | | margin-left: 5px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .hidebar { |
| | |
| | | top: 77px; |
| | | right: 20px; |
| | | width: 20px; |
| | | height: 160px; |
| | | background-color: #09152f; |
| | | height: 180px; |
| | | // background-color: #09152f; |
| | | } |
| | | |
| | | .item { |
| | |
| | | padding-right: 20px; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |