新增设备管理、完善消息新增,修改bug

“dzb”

2022-10-17 0d7d6fc9a5c40ccc90190b0f24039ec1362f120f

 src/views/systemSetting/baseSetting/department/createUser/index.vue

@@ -1,11 +1,5 @@
<template>
    <div class="createUser">
        <header>
            <div class="headerTitle">新增部门信息</div>
            <div class="headerTip">
                <label>x</label>
            </div>
        </header>
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="depart" :rules="createDepartRules"
@@ -17,79 +11,89 @@
                    <!-- 上级部门 -->
                    <el-form-item class="optionItems" label="上级部门:" prop="parentId">
                        <el-select v-model="depart.parentId" placeholder="请输入上级部门">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :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-select v-model="depart.departType" placeholder="请选择部门类型">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            <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" label="添加人员:">
                    <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"></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 slot="header" class="myclear">
                                    <span>工作人员</span>
                                    <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">
                                            {{user.username}}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                                <div class="hidebar"></div>
                            </el-card>
                        </div>
                    </el-form-item>
                    <!-- 部门描述 -->
                    <el-form-item class="optionItem" label="部门描述:" prop="departDes">
                        <el-input v-model="depart.departDes" placeholder="请输入部门描述"></el-input>
                        <el-input type="textarea" v-model="depart.departDes" placeholder="请输入部门描述"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </main>
        <footer>
            <div class="optionBtn">
                    <el-button>取消</el-button>
                    <el-button type="primary"  class="btn submit" @click="handleUser">确定</el-button>
                </div>
                <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) => {
            if (!value) {
                callback(new Error("请填写用户名称"));
                callback(new Error("请填写部门名称"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
                callback();
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }
            }
        };
        const validateTruename = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户姓名"));
            } else {
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if (!rep.test(value)) {
                    callback("请输入正确的用户姓名");
                }
                callback();
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写手机号码"));
                callback();
            } else {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                }
                callback();
            }
        };
        return {
@@ -104,56 +108,163 @@
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                parentId: [
                    { required: true, trigger: "blur", validator: validatePass },
                    { required: false, trigger: "blur", validator: validatePass },
                ],
                departType: [
                    { required: true, trigger: "blur", validator: validateTruename },
                    { required: false, trigger: "blur", validator: validatePhone },
                ],
                departDes: [
                    { required: true, trigger: "blur" },
                    { required: false, trigger: "blur" },
                ],
            },
            roleList: [
                { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
            ],
            typeList: []
            userList: [],
            departList: [],
            checkedUser: [],
            cehckedList: [],
            openUser: false,
            departTypeList: [],
            selectOrg: {
                orgsid: []
            },
            mylabel: '',
            defaultProps: {
                children: 'children',
                label: 'departName',
            },
        }
    },
    created() {
        const that = this;
        // 获取角色列表
        // this.$axios.get('')
        // 获取用户类型列表
        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
        //     console.log(res);
        // })
        // 获取全部部门列表
        // this.$axios.get('sccg/depart/page').then(res => {
        //     that.typeList = res.data.records;
        // })
        // 获取部门树形结构图
        this.getDepartTree();
        // 获取用户列表
        this.getUserList();
        // 获取部门类型列表
        this.getDepartTypeList();
    },
    methods: {
        handleUser() {
            const { user } = this;
            console.log(user);
            this.$axios.post('sccg/admin/register', {
                departmentId: user.departmentId,
                email: user.email,
                jsDy: user.isDy,
                jobTitle: user.jobTitle,
                mobile: user.mobile,
                nickName: user.nickName,
                password: user.password,
                userType: user.userType,
                username: user.username,
            }).then(res => {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    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;
                }
            })
        },
        // 获取部门树形结构图
        getDepartTree() {
            this.$axios({
                method: 'get',
                url: 'sccg/depart/tree',
            })
                .then(res => {
                    console.log(res);
                    res.data.unshift({ id: 0, departName: '顶级菜单' })
                    this.departList = res.data;
                })
        },
        // 获取所有用户信息
        getUserList() {
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            this.$axios.get(`sccg/admin/list`).then(res => {
                if (res.code === 200) {
                    this.refresh();
                    this.userList = res.data.records;
                }
            })
        },
        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;
            // 获取当前选择的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']
    props: ['refresh', 'changMyDialog']
}
</script>
<style lang="scss" scoped>
@@ -161,30 +272,7 @@
    border-radius: 1px;
    background-color: #09152f;

    header {
        display: flex;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        border: 1px solid #fff;

        .headerTitle {
            color: #4b9bb7;
            font-weight: 600;
        }

        .headerTip span {
            color: #ff3b6c;
        }

        .headerTip label {
            color: #4b9bb7;
        }
    }

    main {
        border: 1px solid #fff;
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;
@@ -193,7 +281,8 @@
        .mainContent {
            display: flex;
            justify-content: center;
            margin-top: 50px;
            padding-top: 50px;

            &::v-deep .el-form-item__label {
                color: #4b9bb7;
            }
@@ -202,11 +291,18 @@
                background-color: #09152f;
                border: 1px solid #17324c;
            }
            .addPerson{

            &::v-deep .el-textarea__inner {
                background-color: #09152f;
                border: 1px solid #17324c;
            }

            .addPerson {
                display: flex;
                list-style: none;
                padding:0;
                li{
                padding: 0;

                li {
                    background-color: #cccccc;
                    width: 36px;
                    height: 36px;
@@ -217,6 +313,7 @@
                    margin-left: 10px;
                }
            }

            .el-form-item__content {
                width: 400px;

@@ -239,9 +336,74 @@
            }

        }

        .add {
            position: relative;

            .card {
                position: absolute;
                z-index: 2000;
                right: 0;

                .box-card {
                    max-height: 200px;
                    overflow: hidden;
                    background-color: #09152f;
                    position: relative;
                    max-width: 220px;

                    .scrollWrap {
                        overflow: scroll;
                        height: 160px;
                        position: relative;
                        color: #4b9bb7;

                        .el-checkbox-group {
                            display: flex;
                            flex-direction: column;

                            .el-checkbox {
                                line-height: 20px;
                            }
                        }
                    }

                    .myclear {
                        width: 100%;
                        line-height: 20px;
                        color: #4b9bb7;
                        display: flex;
                        justify-content: space-between;
                    }

                    .hidebar {
                        position: absolute;
                        top: 77px;
                        right: 20px;
                        width: 20px;
                        height: 160px;
                        background-color: #09152f;
                    }

                    .item {
                        line-height: 40px;
                    }
                }
            }
        }
    }
    footer{
        border: 1px solid #fff;

    .li-item {
        display: flex;
        flex-direction: column;
    }

    .leader {
        color: red;
    }

    footer {
        border-top: 1px solid #fff;
        height: 80px;
        display: flex;
        align-items: center;