manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/team/index.vue

<template>
    <section>
        <el-col :span="4" class="left" :style="'height:'+ (tableHeight + 113) + 'px'">
            <div class="department">
                <span>部门</span>
                <div v-on:click="createDepartment(-1)">
                    <i class="fa fa-plus-circle"></i>
                    创建部门
                </div>
            </div>
            <div class="tree" :style="'height:'+ (tableHeight + 83) + 'px'">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" accordion></el-tree>
            </div>
        </el-col>

        <el-col :span="20" class="right">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true">
                    <el-form-item>
                        <div v-if="depData == null || depData.id == -1" class="nowTime" style="cursor:unset">
                            <i class="fa fa-home"></i>全部人员
                        </div>
                        <div v-else-if="depData.id == 0" class="nowTime" style="cursor:unset">
                            <i class="fa fa-home"></i>未分配
                        </div>
                        <div v-else-if="depData != null && depData.id != -1 && depData.id != 0" class="nowTime" @click="createDepartment(0)">
                            <i class="fa fa-pencil-square-o"></i>
                            {{depData!=null?depData.label:''}}
                        </div>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <el-link type="primary" :underline="false" @click="openInsertDialog(null)">添加人员</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="depData != null && depData.id != -1 && depData.id != 0">
                        <el-upload ref="upload" action="#" :limit="1" :http-request="importUser" :show-file-list="false">
                            <el-link type="primary" :underline="false">批量导入</el-link>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <el-link type="primary" :underline="false" href="./upload/人员导入模板.xlsx" download="人员导入模板.xlsx">模板下载</el-link>
                    </el-form-item>
                    <el-form-item  v-if="depData != null && depData.id != -1 && depData.id != 0" style="float:right;border: 0.5px solid #20a0ff;height: 27px;margin-top: 6px;">
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <el-link type="danger" v-if="depData != null && depData.id != -1 && depData.id != 0" :underline="false" @click="deleteDep(null)">删除部门</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <el-link type="primary" v-if="depData != null && depData.id != -1 && depData.id != 0" :underline="false" @click="createDepartment(-1)">新增子部门</el-link>
                    </el-form-item>
                </el-form>
            </el-col>

            <!--列表-->
            <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
                <el-table-column type="index" width="40"></el-table-column>
                <el-table-column prop="name" label="姓名" sortable></el-table-column>
                <el-table-column prop="phone" label="手机" width="120"></el-table-column>
                <el-table-column prop="departmentName" label="部门" sortable></el-table-column>
                <el-table-column label="角色" width="100">
                    <template slot-scope="scope">{{scope.row.role == 0 ? "普通员工" : scope.row.role == 1 ? "负责人" : "管理员"}}</template>
                </el-table-column>
                <el-table-column prop="cost" label="成本" sortable>
                    <template slot-scope="scope">{{scope.row.cost==null?0:scope.row.cost}} 元 / 小时</template>
                </el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button size="small" v-if="scope.row.role == 0 && user.role == 1" @click="switchRole(scope.$index)">切换为管理员</el-button>
                        <el-button size="small" v-if="scope.row.role == 2 && user.role == 1" @click="switchRole(scope.$index)">切换为员工</el-button>
                        <el-button size="small" type="primary" v-if="scope.row.role != 1" @click="openInsertDialog(scope.$index)">编辑</el-button>
                        <el-button size="small" type="primary" v-if="scope.row.role == 1" @click="openInsertDialog1(scope.$index)">编辑</el-button>
                        <el-button size="small" type="danger" v-if="scope.row.role == 0" @click="deleteUser(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[20 , 50 , 80 , 100]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    style="float:right;"
                ></el-pagination>
            </el-col>
        </el-col>

        <!-- 新增部门 -->
        <el-dialog :title="depTitle" :visible.sync="departmentVisible" width="400px">
            <el-form ref="depForm" :model="depForm" :rules="depRules" label-width="80px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="depForm.name" placeholder="请输入部门名称" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="departmentVisible = false">取消</el-button>
                <el-button type="primary" @click="submitDepartment">提交</el-button>
            </span>
        </el-dialog>

        <!-- 新增单个人员的Dialog -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="400px">
            <el-form ref="form1" :model="insertForm" :rules="rules" label-width="60px">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="insertForm.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="insertForm.phone" placeholder="请输入电话号码" clearable></el-input>
                </el-form-item>
                <el-form-item label="成本" prop="cost">
                    <el-input v-model.number="insertForm.cost" placeholder="请输入成本 单位：元/小时" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <el-cascader v-model="insertForm.departmentId" placeholder="请选择部门" style="width: 100%"
                    :options="option" :props="{ checkStrictly: true }" :show-all-levels="false" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="insertForm.role" placeholder="请选择角色" style="width: 100%">
                        <el-option label="普通员工" :value="0"></el-option>
                        <el-option label="管理员" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="submitInsert">提交</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改成本" :visible.sync="dialogVisible1" width="400px">
            <el-form ref="form1" :model="insertForm" :rules="rules" label-width="60px">
                <el-form-item label="成本" prop="cost">
                    <el-input v-model.number="insertForm.cost" placeholder="请输入成本 单位：元/小时" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <el-cascader v-model="insertForm.departmentId" placeholder="请选择部门" style="width: 100%"
                    :options="option" :props="{ checkStrictly: true }" :show-all-levels="false" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1=false">取消</el-button>
                <el-button type="primary" @click="submitInsert1">提交</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem("user")),

                tableHeight: 0,
                listLoading: false,
                total: 0,
                page: 1,
                size: 20,
                list: [],

                data: [
                    {
                        id: -1,
                        label: '全部人员',
                    },
                    {
                        id: 0,
                        label: '未分配',
                    }
                ],
                option: [],
                depData: {
                    id: -1,
                    label: '全部人员',
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                
                dialogVisible: false,
                title: "",
                insertForm: {
                    id: null,
                    name: null,
                    phone: null,
                    role: null,
                    cost: null,
                    departmentId: null,
                },
                rules: {
                    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
                    role: [{ required: true, message: "请选择角色", trigger: "blur" }],
                    cost: [{ required: true, message: "请输入成本", trigger: "blur" }]
                },

                dialogVisible1: false,

                departmentVisible: false,
                depTitle: '',
                depForm: {
                    id: null,
                    name: null,
                    parentId: null,
                },
                depRules: {
                    name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
                },

            };
        },
        methods: {
            // 批量导入人员
            importUser(item) {
                //首先判断文件类型
                let str = item.file.name.split(".");
                let format = str[str.length - 1];
                if (format != "xls" && format != "xlsx") {
                    this.$message({
                        message: "请选择.xls或.xlsx文件",
                        type: "error"
                    });
                } else {
                    this.listLoading = true;
                    let formData = new FormData();
                    formData.append("file", item.file);
                    formData.append("departmentId", this.depData.id);
                    this.http.uploadFile( this.port.manage.import, formData,
                    res => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "导入成功",
                                type: "success"
                            });
                            //重新读取列表
                            this.getUser();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },

            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getUser();
            },

            handleSizeChange(val) {
                this.size = val;
                this.getUser();
            },

            //获取所有员工的列表
            getUser() {
                this.listLoading = true;
                this.http.post( this.port.manage.list, {
                    departmentId: this.depData.id,
                    pageIndex: this.page,
                    pageSize: this.size
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.list = res.data.records;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 新增、编辑人员
            openInsertDialog(i) {
                if (i != null) {
                    var list = JSON.parse(JSON.stringify(this.list[i])) , arr = [] , array = [];
                    if(list.departmentCascade!='0' && list.departmentCascade!=null) {
                        if(list.departmentCascade.indexOf(",")>-1) {
                            arr = list.departmentCascade.split(",");
                        } else {
                            arr = [].concat(list.departmentCascade)
                        }
                    }
                        
                    for(var i in arr) {
                        array.push(parseInt(arr[i]))
                    }
                    
                    this.insertForm = {
                        id: list.id,
                        name: list.name,
                        phone: list.phone,
                        role: list.role,
                        cost: list.cost,
                        departmentId: array,
                    };
                    this.title = "编辑人员"
                } else {
                    this.insertForm = {
                        id: null,
                        name: null,
                        phone: null,
                        role: null,
                        cost: null,
                        departmentId: null,
                    };
                    this.title = "新增人员"
                }
                this.dialogVisible = true;
            },

            submitInsert() {
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        this.listLoading = true;
                        var form = {
                            name: this.insertForm.name,
                            phone: this.insertForm.phone,
                            role: this.insertForm.role,
                            cost: this.insertForm.cost
                        };
                        if (this.insertForm.id != null) {
                            form.id = this.insertForm.id;
                        }
                        if (this.insertForm.departmentId != null) {
                            form.departmentId = this.insertForm.departmentId[this.insertForm.departmentId.length-1];
                        }
                        this.http.post( this.port.manage.insert, form,
                        res => {
                            this.listLoading = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.insertForm.id != null ? "修改" : "创建" + "成功",
                                    type: "success"
                                });
                                this.dialogVisible = false;
                                this.getUser();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

            // 切换角色
            switchRole(index) {
                this.listLoading = true;
                this.http.post( this.port.manage.permission, { id: this.list[index].id },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.$message({
                        message: "切换角色成功",
                        type: "success"
                        });
                        //重新读取列表
                        this.getUser();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 删除用户
            deleteUser(index) {
                this.$confirm( "确定要删除用户" + this.list[index].name + "吗?", "删除用户", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post( this.port.manage.delete, { userId: this.list[index].id },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            //重新读取列表
                            this.getUser();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                })
                .catch(() => {});
            },

            // 修改老板的成本
            openInsertDialog1(i) {
                var list1 = JSON.parse(JSON.stringify(this.list[i])) , arr1 = [] , array1 = [];
                if(list1.departmentCascade!='0' && list1.departmentCascade!=null) {
                    if(list1.departmentCascade.indexOf(",")>-1) {
                        arr1 = list1.departmentCascade.split(",");
                    } else {
                        arr1 = [].concat(list1.departmentCascade)
                    }
                }
                    
                for(var i in arr1) {
                    array1.push(parseInt(arr1[i]))
                }
                this.insertForm = {
                    id: this.list[i].id,
                    name: this.list[i].name,
                    phone: this.list[i].phone,
                    role: this.list[i].role,
                    cost: this.list[i].cost,
                    departmentId: array1,
                };
                this.dialogVisible1 = true;
            },

            submitInsert1() {
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        this.listLoading = true;
                        var form = {
                            id: this.insertForm.id,
                            name: this.insertForm.name,
                            phone: this.insertForm.phone,
                            role: this.insertForm.role,
                            cost: this.insertForm.cost
                        };
                        if (this.insertForm.departmentId != null) {
                            form.departmentId = this.insertForm.departmentId[this.insertForm.departmentId.length-1];
                        }
                        this.http.post( this.port.manage.insert, form,
                        res => {
                            this.listLoading = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: "修改成功",
                                    type: "success"
                                });
                                this.dialogVisible1 = false;
                                //重新读取列表
                                this.getUser();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

            // 获取部门列表
            getDepartment() {
                this.http.post( this.port.manage.depList, {},
                res => {
                    if (res.code == "ok") {
                        var list = res.data , list1 = JSON.parse(JSON.stringify(res.data));
                        list.splice(0,0,{
                            id: -1,
                            label: '全部人员',
                        })
                        list.push({
                            id: 0,
                            label: '未分配',
                        })
                        this.data = list;
                        this.option = this.changeArr(list1);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 修改数组
            changeArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    if(arr[i].id != -1 && arr[i].id != 0) {
                        if (arr[i].children != null && arr[i].children.length>0) {
                            arr[i].children = this.changeArr(arr[i].children);
                        }
                        arr[i].id && (arr[i].value = arr[i].id);
                        delete arr[i].id;
                    }
                }
                for(var i in arr) {
                    if(arr[i].id == -1 || arr[i].id == 0) {
                        arr.splice(i,1)
                    }    
                }
                return arr;
            },

            // 部门列表点击
            handleNodeClick(data) {
                if(this.depData == null || data.id != this.depData.id) {
                    this.depData = data;
                    this.getUser();
                }
            },

            // 新增、修改部门
            createDepartment(i) {
                if(i == -1) {
                    this.depForm = {
                        id: null,
                        name: null,
                        parentId: null,
                    }
                    if(this.depData.id != -1 && this.depData.id != 0) {
                        this.depForm.parentId = this.depData.id;
                    }
                    this.depTitle = "新增部门";
                } else {
                    this.depForm = {
                        id: this.depData.id,
                        name: this.depData.label,
                        parentId: this.depData.parentId,
                    }
                    this.depTitle = "编辑部门";
                }
                this.departmentVisible = true;
            },
            
            submitDepartment() {
                this.$refs.depForm.validate(valid => {
                    if (valid) {
                        var form = {
                            name: this.depForm.name,
                        };
                        if(this.depForm.id != null) {
                            form.id = this.depForm.id
                        }
                        if(this.depForm.parentId != null) {
                            form.parentId = this.depForm.parentId
                        }
                        this.http.post( this.depForm.id==null?this.port.manage.add:this.port.manage.edit, form,
                        res => {
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.depForm.id==null?"新增成功":"修改成功",
                                    type: "success"
                                });
                                this.departmentVisible = false;
                                this.depData.label = form.name;
                                this.getDepartment();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    }
                });
            },

            // 删除部门
            deleteDep() {
                this.$confirm( "确定要删除部门" + this.depData.label + "吗?", "删除部门", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post( this.port.manage.del, { id: this.depData.id },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            this.depData = {
                                id: -1,
                                label: '全部人员',
                            }
                            this.getDepartment();
                            this.getUser();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                })
                .catch(() => {});
            },
        },

        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.getDepartment();
            this.getUser();
        }
    };
</script>

<style lang="scss" scoped>
    .left {
        border: 1px solid #f2f2f2;
        overflow: hidden;
        .department {
            color: #8f8f8f;
            margin: 15px 0 10px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 16px;
            div {
                float: right;
                color: #20a0ff;
                font-size: 14px;
                cursor: pointer;
            }
        }
        .tree {
            overflow: auto;
        }
    }

    .nowTime {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #20a0ff;
        margin-left: 10px;
        cursor: pointer;
        i {
            margin-right: 10px;
        }
    }
</style>

<style lang="scss">
    .tree {
        .el-tree-node__label {
            overflow-x: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>