“dzb”
2022-10-17 0d7d6fc9a5c40ccc90190b0f24039ec1362f120f
src/views/systemSetting/baseSetting/department/createUser/index.vue
@@ -11,8 +11,10 @@
                    <!-- 上级部门 -->
                    <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>
@@ -23,15 +25,19 @@
                                :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">
@@ -66,6 +72,7 @@
    </div>
</template>
<script>
import { getTypeList } from '@/utils/helper'
export default {
    data() {
        const validateNickname = (rule, value, callback) => {
@@ -86,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();
            }
        };
@@ -117,8 +120,17 @@
            userList: [],
            departList: [],
            checkedUser: [],
            cehckedList: [],
            openUser: false,
            departTypeList: [],
            selectOrg: {
                orgsid: []
            },
            mylabel: '',
            defaultProps: {
                children: 'children',
                label: 'departName',
            },
        }
    },
    created() {
@@ -134,23 +146,18 @@
        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 => {
@@ -180,6 +187,7 @@
                url: 'sccg/depart/tree',
            })
                .then(res => {
                    console.log(res);
                    res.data.unshift({ id: 0, departName: '顶级菜单' })
                    this.departList = res.data;
                })
@@ -195,21 +203,65 @@
        },
        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']
@@ -341,6 +393,15 @@
        }
    }
    .li-item {
        display: flex;
        flex-direction: column;
    }
    .leader {
        color: red;
    }
    footer {
        border-top: 1px solid #fff;
        height: 80px;