| | |
|---|
| | | <div class="createUser"> |
|---|
| | | <main> |
|---|
| | | <div class="mainContent"> |
|---|
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="depart" :rules="createDepartRules" |
|---|
| | | label-position="right"> |
|---|
| | | <el-form |
|---|
| | | ref="user" |
|---|
| | | label-width="140px" |
|---|
| | | autoComplete="on" |
|---|
| | | :model="depart" |
|---|
| | | :rules="createDepartRules" |
|---|
| | | label-position="right" |
|---|
| | | > |
|---|
| | | <!-- 部门名称 --> |
|---|
| | | <el-form-item class="optionItem" label="部门名称:" prop="departName"> |
|---|
| | | <el-input v-model="depart.departName" placeholder="请输入部门名称"></el-input> |
|---|
| | | <el-input |
|---|
| | | v-model="depart.departName" |
|---|
| | | placeholder="请输入部门名称" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- 上级部门 --> |
|---|
| | | <el-form-item class="optionItems" label="上级部门:" prop="parentId"> |
|---|
| | | <el-select v-model="depart.parentId" placeholder="请输入上级部门"> |
|---|
| | | <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 |
|---|
| | | 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 class="optionItem" label="部门类型:" prop="departType"> |
|---|
| | | <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 |
|---|
| | | 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 v-for="(item,index) in cehckedList" :key="index" @click="setLeader(index)"> |
|---|
| | | <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> |
|---|
| | | <i |
|---|
| | | :class="[ |
|---|
| | | 'el-icon-user-solid', |
|---|
| | | item.checked ? 'leader' : '', |
|---|
| | | ]" |
|---|
| | | ></i> |
|---|
| | | </div> |
|---|
| | | <label style="font-size: 12px;" :class="[item.checked ? 'leader': '']">{{item.username}}</label> |
|---|
| | | <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> |
|---|
| | | <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 slot="header" class="myclear"> |
|---|
| | | <span>工作人员</span> |
|---|
| | | <div @click="addUser">添加</div> |
|---|
| | | <div @click="addUser">确认</div> |
|---|
| | | </div> |
|---|
| | | <div class="scrollWrap"> |
|---|
| | | <el-checkbox-group v-model="checkedUser"> |
|---|
| | | <el-checkbox v-for="user in userList" :label="user.id" :key="user.id"> |
|---|
| | | <el-checkbox |
|---|
| | | v-for="user in userList" |
|---|
| | | :label="user.id" |
|---|
| | | :key="user.id" |
|---|
| | | > |
|---|
| | | {{user.username}} |
|---|
| | | </el-checkbox> |
|---|
| | | </el-checkbox-group> |
|---|
| | |
|---|
| | | </el-card> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <label style="color:#ff0000ab">红色代表部门领导，点击头像可设置部门领导</label> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- 部门描述 --> |
|---|
| | | <el-form-item class="optionItem" label="部门描述:" prop="departDes"> |
|---|
| | | <el-input type="textarea" v-model="depart.departDes" placeholder="请输入部门描述"></el-input> |
|---|
| | | <el-input |
|---|
| | | type="textarea" |
|---|
| | | :rows="4" |
|---|
| | | v-model="depart.departDes" |
|---|
| | | placeholder="请输入部门描述" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | <footer> |
|---|
| | | <div class="optionBtn"> |
|---|
| | | <el-button @click="handleClose">取消</el-button> |
|---|
| | | <el-button type="primary" class="btn submit" @click="handleUser">确定</el-button> |
|---|
| | | <el-button type="primary" class="btn submit" @click="handleUser" |
|---|
| | | >确定</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </footer> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import { getTypeList } from '@/utils/helper' |
|---|
| | | import { getTypeList } from "@/utils/helper"; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | const validateNickname = (rule, value, callback) => { |
|---|
| | |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | depart: { |
|---|
| | | departName: '', |
|---|
| | | parentId: '', |
|---|
| | | departType: '', |
|---|
| | | departDes: '', |
|---|
| | | departName: "", |
|---|
| | | parentId: "", |
|---|
| | | departType: "", |
|---|
| | | departDes: "", |
|---|
| | | }, |
|---|
| | | createDepartRules: { |
|---|
| | | departName: [ |
|---|
| | |
|---|
| | | departType: [ |
|---|
| | | { required: false, trigger: "blur", validator: validatePhone }, |
|---|
| | | ], |
|---|
| | | departDes: [ |
|---|
| | | { required: false, trigger: "blur" }, |
|---|
| | | ], |
|---|
| | | departDes: [{ required: false, trigger: "blur" }], |
|---|
| | | }, |
|---|
| | | userList: [], |
|---|
| | | departList: [], |
|---|
| | |
|---|
| | | openUser: false, |
|---|
| | | departTypeList: [], |
|---|
| | | selectOrg: { |
|---|
| | | orgsid: [] |
|---|
| | | orgsid: [], |
|---|
| | | }, |
|---|
| | | mylabel: '', |
|---|
| | | mylabel: "", |
|---|
| | | defaultProps: { |
|---|
| | | children: 'children', |
|---|
| | | label: 'departName', |
|---|
| | | children: "children", |
|---|
| | | label: "departName", |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | const that = this; |
|---|
| | |
|---|
| | | if (valid) { |
|---|
| | | const { depart,cehckedList,selectOrg } = this; |
|---|
| | | const arr = []; |
|---|
| | | cehckedList.forEach(item => { |
|---|
| | | arr.push({ isLeader: item.isLeader, userId: item.id, }); |
|---|
| | | }) |
|---|
| | | cehckedList.forEach((item) => { |
|---|
| | | arr.push({ isLeader: item.isLeader, userId: item.id }); |
|---|
| | | }); |
|---|
| | | console.log(arr); |
|---|
| | | this.$axios({ |
|---|
| | | method: 'post', |
|---|
| | | url: '/sccg/depart/create', |
|---|
| | | method: "post", |
|---|
| | | url: "/sccg/depart/create", |
|---|
| | | data: { |
|---|
| | | departName: depart.departName, |
|---|
| | | parentId: selectOrg.orgsid[0], departType: depart.departType, departDes: depart.departDes, |
|---|
| | | departManagerList: arr |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | 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' |
|---|
| | | }) |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | this.refresh(); |
|---|
| | | } else if (res.code === 2001) { |
|---|
| | | this.$message({ |
|---|
| | | message: res.message, |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | this.refresh(); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 获取部门树形结构图 |
|---|
| | | getDepartTree() { |
|---|
| | | this.$axios({ |
|---|
| | | method: 'get', |
|---|
| | | url: 'sccg/depart/tree', |
|---|
| | | }) |
|---|
| | | .then(res => { |
|---|
| | | method: "get", |
|---|
| | | url: "sccg/depart/tree", |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res); |
|---|
| | | res.data.unshift({ id: 0, departName: '顶级菜单' }) |
|---|
| | | res.data.unshift({ id: 0, departName: "顶级菜单" }); |
|---|
| | | this.departList = res.data; |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 获取所有用户信息 |
|---|
| | | getUserList() { |
|---|
| | | // 获取所有用户信息、用户查询(暂时支持电话号码) |
|---|
| | | this.$axios.get(`sccg/admin/list`).then(res => { |
|---|
| | | this.$axios.get(`sccg/admin/list`).then((res) => { |
|---|
| | | if (res.code === 200) { |
|---|
| | | this.userList = res.data.records; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | addUser() { |
|---|
| | | console.log(this.checkedUser); |
|---|
| | | console.log(this.userList); |
|---|
| | | this.cehckedList = []; |
|---|
| | | this.userList.forEach(item => { |
|---|
| | | this.checkedUser.forEach(child => { |
|---|
| | | 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.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 }); |
|---|
| | | this.$emit("changMyDialog", { flag: false }); |
|---|
| | | }, |
|---|
| | | // 获取部门类型 |
|---|
| | | async getDepartTypeList() { |
|---|
| | | this.departTypeList = await getTypeList(1, '08') |
|---|
| | | this.departTypeList = await getTypeList(1, "08"); |
|---|
| | | }, |
|---|
| | | handleCheck(data, checked) { |
|---|
| | | this.depart.parentId = data.departName; |
|---|
| | | // 获取当前选择的id在数组中的索引 |
|---|
| | | const indexs = this.selectOrg.orgsid.indexOf(data.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 |
|---|
| | | }) |
|---|
| | | message: "只能选择一个部门！", |
|---|
| | | type: "warning", |
|---|
| | | showClose: true, |
|---|
| | | }); |
|---|
| | | // 设置已选择的节点为false 很重要 |
|---|
| | | this.$refs.tree.setChecked(data, 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) |
|---|
| | | 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 = ''; |
|---|
| | | this.selectOrg.orgsid = []; |
|---|
| | | this.depart.parentId = ""; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 设置领导 |
|---|
| | |
|---|
| | | item.checked = false; |
|---|
| | | item.isLeader = 0; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | props: ['refresh', 'changMyDialog'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | props: ["refresh", "changMyDialog"], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .createUser { |
|---|
| | |
|---|
| | | display: flex; |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | |
|---|
| | | flex-wrap: wrap; |
|---|
| | | max-width: 280px; |
|---|
| | | li { |
|---|
| | | background-color: #cccccc; |
|---|
| | | width: 36px; |
|---|
| | | height: 36px; |
|---|
| | | border-radius: 50%; |
|---|
| | | color: #fff; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 30px; |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .li-icon { |
|---|
| | | background-color: #cccccc; |
|---|
| | | width: 36px; |
|---|
| | | height: 36px; |
|---|
| | | border-radius: 50%; |
|---|
| | | margin: 0 auto; |
|---|
| | | } |
|---|
| | | .li-btn { |
|---|
| | | background-color: #cccccc; |
|---|
| | | width: 36px; |
|---|
| | | height: 36px; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | .el-form-item__content { |
|---|
| | | width: 400px; |
|---|
| | | |
|---|
| | |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .add { |
|---|
| | |
|---|
| | | .leader { |
|---|
| | | color: red; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-input { |
|---|
| | | width: 280px !important; |
|---|
| | | } |
|---|
| | | footer { |
|---|
| | | border-top: 1px solid #fff; |
|---|
| | | height: 80px; |
|---|
