baianxi_admin/src/views/company/Department.vue

<style lang="scss">
    .staff{
        display: flex;
        justify-content: space-between;
        .companies{
                height: 75vh;
                overflow: auto;
                margin-right: 10px;
                overflow-x: hidden;
        }
        &>li{
            width: 30%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .active{
                        color:#1989FA;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .staff_list{
            width: 68%;
        }
        
    }
    .staffs{
        margin-right: 10px;
    }
</style>
<template>
  <section>
    <p>公司管理 > 部门列表</p>
    <div class="content">
        <ul class="staff">
            <li class="companies">
                <el-form  size="small">
                    <el-form-item>
                        <el-input suffix-icon="el-icon-search" v-model="name" @change="getData"  placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-tree  
                    :data="data"
                    node-key="id"   :props='props'
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="change(data)" >
                        <span v-if='id==data.id' class="label_name active">{{ node.label }}</span>
                        <span v-else class="label_name">{{ node.label }}</span>
                    </span>
                </el-tree>
            </li>
            <li class="staff_list">
                    <el-form label-width="70px" :inline="true" size="small" label-position="left">
                        <!-- <el-form-item label="公司名称">
                                <el-input clearable placeholder="请输入公司名称" v-model="form.name"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <!-- <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button> -->
                            <el-button icon="el-icon-plus" @click="dialogFormVisible=true,dpt={enterprise_id:'',staffusers:[]}"  type="primary">新增部门</el-button>
                        </el-form-item>
                    </el-form>
                <el-table
                        class="table"
                        :data="list" height="54vh"
                        border  v-loading="loading"
                        style="width: 100%">
                        <el-table-column
                        prop="enterprise_name" 
                        label="公司名称">
                        </el-table-column>
                        <el-table-column
                        prop="name" 
                        label="部门">
                        </el-table-column>
                        <el-table-column
                        prop="ctime" 
                        label="时间">
                        </el-table-column>
                        <el-table-column fixed="right"
                        prop="zip"  width="230"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button  @click="viewStaff(scope.row.staffusers)" size="mini" type="warning">查看员工</el-button>
                            <el-button icon="el-icon-edit" @click="edit(scope.row)" size="mini" type="warning">编辑</el-button>
                            <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
                        </template>
                        </el-table-column>
                </el-table>
                <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
            </li>
        </ul>
    </div>

    <el-dialog title="添加部门" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form :model="form" label-width="80px">
            <el-form-item label="部门名称">
                        <el-input clearable placeholder="请输入部门名称" v-model="dpt.name"></el-input>
            </el-form-item>
            <el-form-item label="部门员工" >
                <el-tag class="staffs"
                :key="index"
                v-for="(item,index) in dpt.staffusers"
                closable  type="info"
                :disable-transitions="false"
                @close="handleClose(index)">
                {{item.name}}
                </el-tag>
                &nbsp;
                <el-button  class="button-new-tag" size="small" @click="dialogFormVisible1=true">+ 添加员工</el-button>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="新增员工" :visible.sync="dialogFormVisible1" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form size="small" label-width="80px">
            <el-form-item label="姓名">
                <el-input clearable  v-model="staff.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
                <el-input clearable  v-model="staff.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input clearable type="password" v-model="staff.password"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input clearable  v-model="staff.phone"></el-input>
            </el-form-item>
            <el-form-item label="账号类型">
                <el-select clearable v-model="staff.utype" placeholder="请选择">
                    <el-option label="部门级" value="部门级"></el-option>
                    <el-option label="岗位级" value="岗位级"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button size="small" type="primary" @click="addStaff">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="员工列表" :visible.sync="dialogFormVisible2" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-table
                        class="table"
                        :data="staffList"  height="300px"
                        border 
                        style="width: 100%">
                        <el-table-column
                        prop="name" 
                        label="姓名">
                        </el-table-column>
                        <el-table-column
                        prop="phonr" 
                        label="电话">
                        </el-table-column>
                        <el-table-column
                        prop="username" 
                        label="账号">
                        </el-table-column>
                        <el-table-column
                        prop="utype" 
                        label="账号类型">
                        </el-table-column>
                </el-table>
        <!-- <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button size="small" type="primary" @click="addStaff">确 定</el-button>
        </div> -->
    </el-dialog>
  </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
	data() {
		return {
            dialogFormVisible:false,
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            data:[],
            form:{page:1,page_size:20},
            list:[],
            total:1,
            loading:false,
            props:{
                label:'name'
            },
            id:'',
            dpt:{enterprise_name:'',enterprise_id:'',staffusers:[]},
            enterprise_name:'',
            name:'',
            staff:{},
            staffList:[]
		};
	},
	methods: {
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        change(data){
                this.id=data.id;
                this.enterprise_name=data.name;
                this.getDpt();
        },
        getData(){
            this.loading=true
            this.$api.getEnterpriseList({name:this.name}).then(res=>{
                this.data=res.data.data.list;
                this.id=this.data[0].id;
                this.enterprise_name=this.data[0].name;
                this.getDpt()
            })
        },
        getDpt(){
            var parm=this.form;
            parm.enterprise_id=this.id
            this.$api.getDepartmentList(parm).then(res=>{
                this.loading=false;
                this.list=res.data.data.list;
                this.total=res.data.data.total
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteDepartment({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getDpt()
                    })
                })
        },
        add(){
            let parm=this.dpt;
            if(!parm.name){
                this.$message.error('请输入部门名称');
                return;
            }
            if(parm.staffusers.length<1){
                this.$message.error('请添加员工');
                return;
            }
            if(parm.id){     
                this.$api.updateDepartment(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '修改成功！',type: 'success'});
                        this.getDpt()
                        this.dpt={enterprise_id:'',staffusers:[]}
                        this.dialogFormVisible=false
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }else{
                parm.enterprise_id=this.id
                parm.enterprise_name=this.enterprise_name
                this.$api.saveDepartment(parm).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '添加成功！',type: 'success'});
                        this.getDpt()
                        this.dpt={enterprise_id:'',staffusers:[]}
                        this.dialogFormVisible=false
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }
            
        },
        addStaff(){
            let parm=this.staff;
            parm.id=0;
            if(!parm.name){
                this.$message.error('请输入员工名称');
                return;
            }
            if(!parm.username){
                this.$message.error('请输入账号');
                return;
            }
            if(!parm.password){
                this.$message.error('请输入密码');
                return;
            }
            if(!parm.utype){
                this.$message.error('请选择账号类型');
                return;
            }
            this.dpt.staffusers.push(parm);
            this.staff={}
            this.dialogFormVisible1=false
        },
        viewStaff(data){
            this.dialogFormVisible2=true;
            this.staffList=data
        },
        handleClose(index){
            this.dpt.staffusers.splice(index,1);
        },
        edit(data){
            this.dialogFormVisible=true
            this.dpt={...data}
        }
    },
	created(){
        this.getData()
	}
};
</script>