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><i class="iconfont firerock-iconzuzhijiegou" style="font-size:10px;" ></i>&nbsp;部门</span>
                <div v-on:click="createDepartment(-1)">
                    <i class="fa fa-plus-circle"></i>
                    创建
                </div>
            </div>
            <el-divider style="margin: 0px 0px !important;height:0.5px;"></el-divider>
            <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">
                    <!-- <div style="width: 300px;display: inline-block;">
                        <el-input v-model="keyword" class="input-with-select" placeholder="请输入人员名字搜索" clearable="true">
                            <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button>
                        </el-input>
                    </div> -->
                    <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>
                        <div style="color:#999;font-size:13px;">共{{total}}人</div>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <el-link type="primary" :underline="false" @click="showExportDialog">导出人员</el-link>
                    </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(-2)">新增子部门</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <div style="width: 300px;display: inline-block;">
                            <el-input v-model="keyword" class="input-with-select" placeholder="请输入人员名字搜索" clearable="true">
                                <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </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="50">
                    <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
                </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">{{roleArray[scope.row.role]}}</template>
                </el-table-column>
                <el-table-column prop="monthCost" label="月成本" sortable>
                    <template slot-scope="scope">{{scope.row.monthCost==null?0:scope.row.monthCost}} 元</template>
                </el-table-column>
                <el-table-column prop="cost" label="时薪" sortable>
                    <template slot-scope="scope">{{scope.row.cost==null?0:scope.row.cost}} 元
                        <el-link @click.native="showSalaryList(scope.row)"><i class="iconfont firerock-iconrecord"></i></el-link>
                    </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="mini" type="default" v-if="scope.row.role == 1 && user.role == 1" @click="transferRole(scope.row)">转让</el-button>
                        <el-button size="mini" type="default" v-if="scope.row.role != 1" @click="resetPwd(scope.row)">重置</el-button>
                        <el-button size="mini" type="primary" v-if="scope.row.role != 1" @click="openInsertDialog(scope.$index)">编辑</el-button>
                        <el-button size="mini" type="primary" v-if="scope.row.role == 1" @click="openInsertDialog1(scope.$index)">编辑</el-button>
                        <el-button size="mini" type="default" v-if="scope.row.role != 1 && scope.row.isActive==1" @click="showDeactiveDialog(scope.row)">停用</el-button>
                        <el-button size="mini" type="success" v-if="scope.row.role != 1 && scope.row.isActive==0" @click="setActive(scope.row, 1)">启用</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="size"
                    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-item label="负责人" prop="managerId">
                    <el-select v-model="depForm.managerId" filterable  clearable  placeholder="请选择部门负责人" >
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </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="550px" >
            <el-form ref="form1" :model="insertForm" :rules="rules" label-width="80px">
                <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="salaryType">
                    <el-radio-group v-model="insertForm.salaryType" @change="onSalaryTypeChange">
                    <el-radio  :label="0" >固定月成本</el-radio>
                    <el-radio  :label="1">计时工资</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="月成本" prop="monthCost" v-if="insertForm.salaryType == 0">
                    <el-input v-model="insertForm.monthCost" id="mc" @input="oninput" placeholder="请输入月成本,单位:元" clearable @keyup.native="restrictNumber('mc')"></el-input>
                    <span style="color:orange;font-size:12px;">按照每个月工作{{timeType.monthDays}}天，每天{{timeType.allday}}小时预估时薪</span>
                    <el-link :underline="false" style="color:blue;font-size:12px;margin-left:7px;" href="#/timetype">修改工作时长</el-link>
                </el-form-item>
                <el-form-item label="时薪" prop="cost">
                    <el-input v-model="insertForm.cost" :disabled="insertForm.salaryType == 0" id="cc" style="width:120px;" @keyup.native="restrictNumber('cc')"
                     placeholder="请输入成本 单位：元/小时" clearable></el-input>
                    <span style="margin-left:25px;">生效日期</span>
                    <el-date-picker v-model="insertForm.costApplyDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <el-cascader v-model="insertForm.departmentId" placeholder="请选择部门" style="width: 100%"
                    :options="option" :props="{ checkStrictly: false,expandTrigger: 'hover' }" :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">
                            <span style="float: left">普通员工</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">具有填报日报，参与项目协作基础功能</span>
                        </el-option>
                        <el-option label="系统管理员" :value="2" :disabled="user.role != 1">
                            <span style="float: left">普通员工</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">具有填报日报，参与项目协作基础功能</span>
                        </el-option>
                        <el-option label="公司高层" :value="3"></el-option>
                        <el-option label="人事管理员" :value="4"></el-option>
                        <el-option label="项目管理员" :value="5"></el-option> -->
                        <el-option v-for="item in roleDescArray" :label="item.label" :disabled="item.value==2&&user.role != 1" :value="item.value" :key="item.name">
                            <span style="float: left">{{item.label}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.desc}}</span>
                        </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="550px" >
            <el-form ref="form1" :model="insertForm" :rules="rules" label-width="80px">
                <el-form-item label="薪酬方式" prop="salaryType">
                    <el-radio-group v-model="insertForm.salaryType" @change="onSalaryTypeChange">
                    <el-radio  :label="0" >固定月成本</el-radio>
                    <el-radio  :label="1">计时工资</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="月成本" prop="monthCost" v-if="insertForm.salaryType == 0">
                    <el-input v-model="insertForm.monthCost" id="monthCost" @input="oninput" @keyup.native="restrictNumber('monthCost')" placeholder="请输入月成本,单位:元" clearable></el-input>
                    <span style="color:orange;font-size:12px;">按照每个月工作{{timeType.monthDays}}天，每天{{timeType.allday}}小时预估时薪</span>
                    <el-link :underline="false" style="color:blue;font-size:12px;margin-left:7px;" href="#/timetype">修改工作时长</el-link>
                </el-form-item>
                <el-form-item label="时薪" prop="cost">
                    <el-input v-model="insertForm.cost" id="cost" :disabled="insertForm.salaryType == 0" @keyup.native="restrictNumber('cost')" style="width:120px;"
                     placeholder="请输入成本 单位：元/小时" clearable></el-input>
                    <span style="margin-left:25px;">生效日期</span>
                    <el-date-picker v-model="insertForm.costApplyDate"  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <el-cascader v-model="insertForm.departmentId" 
                    placeholder="请选择部门" 
                    style="width: 100%"
                    :options="option" 
                    :props="{ checkStrictly: false,expandTrigger: 'hover' }" :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>

        <el-dialog title="人员历史成本" :visible.sync="userSalaryListDialog" width="550px" >
            <el-table :data="userSalaryList" highlight-current-row v-loading="listLoading" height="300px" style="width: 100%;">
                <el-table-column prop="userName" label="姓名" ></el-table-column>
                <el-table-column prop="indate" label="更新时间" width="150px">
                </el-table-column>
                <el-table-column prop="salaryType" label="薪酬方式" >
                    <template slot-scope="scope" >
                        {{scope.row.salaryType==0?"固定月薪":"计时工资"}}
                    </template>
                </el-table-column>
                <el-table-column prop="monthCost" label="月薪" >
                    <template slot-scope="scope" >
                        {{scope.row.monthCost}}元
                    </template>
                </el-table-column>
                <el-table-column prop="cost" label="时薪" >
                    <template slot-scope="scope" >
                        {{scope.row.cost}}元
                    </template>
                </el-table-column>
                
            </el-table>
        </el-dialog>
        <!--导出人员 -->
        <el-dialog title="导出人员列表" :visible.sync="exportDialogVisible" width="550px" >
            <el-form  label-width="100px">
                <el-form-item label="导出" >
                    <el-radio-group v-model="containInvalid" >
                    <el-radio  :label="1" >全部人员</el-radio>
                    <el-radio  :label="0" >仅活跃人员</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportUsers">导出</el-button>
            </span>
        </el-dialog>
        <!-- 转让超级管理员权限 -->
        <el-dialog title="权限转让" :visible.sync="transferDialog" width="550px" >
            <el-form  label-width="200px">
                <el-form-item label="转让超级管理员角色至" >
                    <el-select v-model="toUserId" style="width:300px" filterable clearable>
                        <el-option v-for="item in allActiveUsers" :key="item.id" :value="item.id" :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="转让后自己的角色" >
                    <el-select v-model="myRoleId" style="width:300px">
                        <el-option v-for="item in roleDescArray" :label="item.label" :value="item.value" :key="item.name">
                            <span style="float: left">{{item.label}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.desc}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" @click="transferDialog = false">取消</el-button>
                <el-button type="primary" @click="showConfirmDialog">确定</el-button>
            </span>
        </el-dialog>

        <!--停用时选择日期 -->
        <el-dialog title="离职停用员工" :visible.sync="deactiveDialog" width="550px" >
            <el-form  label-width="200px">
                <el-form-item label="员工离职日期" >
                    <el-date-picker type="date" v-model="deactiveDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" @click="deactiveDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmDeactive">确定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                deactiveUser:null,
                deactiveDate:null,
                deactiveDialog:false,
                toUserId:null,
                myRoleId: 2,
                allActiveUsers:[],
                transferDialog: false,
                containInvalid:1,
                exportDialogVisible: false,
                roleArray:["普通员工","超级管理员", "系统管理员", "公司高层","人事管理员", "项目管理员","公司领导"],
                roleDescArray:[{label:"普通员工",value:0, desc:"填报日报，参与项目协作"},
                {label:"系统管理员",value:2, desc:"具有除了创建系统管理员之外的全部功能"},
                {label:"公司高层",value:3, desc:"查阅项目信息，人员工时情况"},
                {label:"人事管理员",value:4, desc:"财务核算成本，费用报销审核，负责组织架构管理"},
                {label:"项目管理员",value:5, desc:"创建和管理项目"},
                {label:"公司领导",value:6, desc:"财务核算成本，查阅项目、人员工时和成本情况"},
                ],
                userSalaryList:[],
                userSalaryListDialog: false,
                value:{},
                user: JSON.parse(sessionStorage.getItem("user")),
                users:[],
                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,
                    monthCost:null,
                    cost: null,
                    departmentId: null,
                    salaryType:0,
                    costApplyDate: '2021-04-09'
                },
                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,
                    managerId: null,
                },
                depRules: {
                    name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
                },
                timeType:{},
                keyword: ''
            };
        },
        methods: {
            confirmDeactive() {
                this.http.post('/user/deactiveUser', {
                        id: this.deactiveUser.id,
                        inactiveDate: this.deactiveDate
                    },
                    res => {
                        if (res.code == "ok") {
                            this.deactiveDialog = false;
                            this.$message({
                                message: '停用成功',
                                type: "success"
                            });
                            // this.getUsers();
                            this.getUser()
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            showDeactiveDialog(item) {
                this.deactiveDialog = true;
                this.deactiveUser = item;
            },
            restrictNumber(targetId) {
                let inpu = document.getElementById(targetId);
                inpu.value = inpu.value.replace(/[^\d.]/g, "");  //仅保留数字和"."
                inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
                inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
                inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
                if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
                    inpu.value = parseFloat(inpu.value);
                }
            },
            showConfirmDialog() {
                if (this.toUserId == null || this.toUserId == '') {
                    this.$message({
                            message: '请选择要转让的人员',
                            type: "error"
                        });
                    return;
                }
                this.$confirm("您将失去超级管理员角色，需要重新登录。确定要转让吗？", "提示", {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/user/changeSysManager', {
                        toUserId: this.toUserId,
                        myRoleId: this.myRoleId
                    },
                    res => {
                        if (res.code == "ok") {
                            sessionStorage.removeItem("user");
                            this.$router.push("/login");
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                    
                    
                });
            },
            transferRole() {
                this.transferDialog = true;
                this.http.post(this.port.manage.list, {
                    departmentId: -1,
                    pageIndex: 1,
                    pageSize: 99999,
                    keyword: this.keyword
                },
                res => {
                    if (res.code == "ok") {
                        this.allActiveUsers = res.data.records.filter(u=>u.isActive == 1 && u.id != this.user.id);
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            showExportDialog() {
                this.exportDialogVisible = true;
            },
            exportUsers() {
                this.http.post('/user/exportUsers', {
                    containInvalid: this.containInvalid
                },
                res => {
                    if (res.code == "ok") {
                        this.exportDialogVisible = false;
                        var aTag = document.createElement('a');
                        aTag.download = "全部员工列表.xls";
                        aTag.href = res.data;
                        aTag.click();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            showSalaryList(item) {
                this.userSalaryListDialog = true;
                this.userSalaryList = [];
                this.http.post('/user/getUserSalaryList', {
                    id: item.id
                },
                res => {
                    if (res.code == "ok") {
                        this.userSalaryList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            getUsers() {
                this.http.post(this.port.manage.list, {
                    departmentId: -1,
                    pageIndex: 1,
                    pageSize: 99999,
                    keyword: this.keyword
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            onSalaryTypeChange(value) {
                if (value == 1) {
                    this.insertForm.monthCost = null;
                }
            },
            //选中部门
            choseDept(value) {
                console.log(value);
            },
            //月成本输入变化
            oninput(e) {
                this.insertForm.cost = (this.insertForm.monthCost/this.timeType.monthDays/this.timeType.allday).toFixed(2);
            },
            // 获取本公司的工作时间设置
            getCompanyTimeSetting() {
                this.http.post('/time-type/getCompanyTimeSetting',{ 
                        companyId: this.user.companyId 
                    },
                    res => {
                        if (res.code == "ok") {
                            this.timeType = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },

            // 批量导入人员
            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,
                    keyword: this.keyword
                },
                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"
                    });
                });
            },

            resetPwd(user) {
                this.$confirm( "确定要为" + user.name + "重置密码吗?", "重置密码", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.http.post('/user/resetPwd', { userId: user.id },
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: "密码已重置为000000，请通知员工及时修改",
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                })
                .catch(() => {});
            },

            // 新增、编辑人员
            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,
                        monthCost:list.monthCost,
                        cost: list.cost,
                        departmentId: array.reverse(),
                        salaryType: list.salaryType,
                        costApplyDate: list.costApplyDate,
                        
                    };
                    this.title = "编辑人员"
                } else {
                    this.insertForm = {
                        id: null,
                        name: null,
                        phone: null,
                        role: null,
                        monthCost:null,
                        cost: null,
                        departmentId: null,
                        salaryType:0,
                        costApplyDate: util.formatDate.format(new Date(), 'yyyy-MM-dd'),
                    };
                    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,
                            monthCost: this.insertForm.monthCost,
                            cost: this.insertForm.cost,
                            salaryType: this.insertForm.salaryType,
                        };
                        if (this.insertForm.id != null) {
                            form.id = this.insertForm.id;
                        }
                        if (this.insertForm.costApplyDate != null) {
                            form.costApplyDate = this.insertForm.costApplyDate;
                        }
                        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"
                    });
                });
            },

            // 删除用户
            setActive(item, isActive) {
                var txt = isActive==1?"启用":"停用";
                this.$confirm( "确定要"+txt +" " + item.name + " 吗?", "账号"+txt, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post('/user/setActive', { id: item.id, isActive: isActive},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: txt+"成功",
                                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: list1.id,
                    name: list1.name,
                    phone: list1.phone,
                    role: list1.role,
                    monthCost:list1.monthCost,
                    cost: list1.cost,
                    departmentId: array1.reverse(),
                    salaryType: list1.salaryType
                };
                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,
                            monthCost: this.insertForm.monthCost,
                            cost: this.insertForm.cost
                        };
                        if (this.insertForm.departmentId != null) {
                            form.departmentId = this.insertForm.departmentId[this.insertForm.departmentId.length-1];
                        }
                        if (this.insertForm.costApplyDate != null) {
                            form.costApplyDate = this.insertForm.costApplyDate;
                        }
                        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.page = 1;
                    this.getUser();
                }
            },

            // 新增、修改部门
            createDepartment(i) {
                if(i == -2) {//创建子部门
                    this.depForm = {
                        id: null,
                        name: null,
                        parentId: null,
                        managerId: null,
                    }
                    if(this.depData.id != -1 && this.depData.id != 0) {
                        this.depForm.parentId = this.depData.id;
                    }
                    this.depTitle = "新增子部门";
                } else if(i == -1) {//创建一级部门
                    this.depForm = {
                        id: null,
                        name: null,
                        parentId: null,
                        managerId: null,
                    }
                    this.depTitle = "新增部门";
                } else {
                    this.depForm = {
                        id: this.depData.id,
                        name: this.depData.label,
                        parentId: this.depData.parentId,
                        managerId: this.depData.managerId,
                    }
                    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
                        }
                        if (this.depForm.managerId != null) {
                            form.managerId = this.depForm.managerId
                        }
                        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;
                                if (this.depForm.id !=null) {
                                    this.depData.label = form.name;
                                    this.depData.managerId = form.managerId;
                                }

                                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(() => {});
            },

            // 关键搜索
            searchList() {
                console.log(this.keyword)
                this.listLoading = true;
                this.http.post( this.port.manage.list, {
                    departmentId: this.depData.id,
                    pageIndex: this.page,
                    pageSize: this.size,
                    keyword: this.keyword
                },
                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"
                    });
                });
            }
        },

        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.deactiveDate = util.formatDate.format(new Date(), 'yyyy-MM-dd');
            this.getDepartment();
            this.getUser();
            this.getCompanyTimeSetting();
            this.getUsers();
        }
    };
</script>

<style lang="scss" scoped>
    .left {
        
        border-right: 1px solid #f2f2f2;
        overflow: hidden;
        .department {
            background:#f2f2f2;
            line-height: 60px;
            color:#666;
            padding:0 10px;
            height:60px;
            font-size: 15px;
            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;
            
        }
    }
    .el-divider--horizontal {
        margin: 0px;
        background:#f3f3f3;
    }
    //全局的作用范围
    .el-tree-node__content {
        height:36px;
    }
</style>