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

<template>
  <div class="home">
    <div class="grand flex">
      <div class="left-laowang" style="flex: 0 0 180px;overflow: hidden;">
        <el-col :span="24" 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> -->
                <el-tree :data="data" :props="defaultProps" node-key="id" :expand-on-click-node="false" accordion @node-click="handleNodeClick" :default-expanded-keys="jDarr" @node-expand="jieDian" @node-collapse="shutDown" @current-change="chufa">
                    <span class="custom-tree-node" style="position: relative;box-sizing: border-box;width: 10%;" slot-scope="{ node }" @mouseleave= mouseleave(data,$event) @mouseover= mouseover(data,$event)>

                        <span style="padding-right: 50px;box-sizing: border-box;overflow:hidden;text-overflow:ellipsis;line-height: 36px; display: inline-block;">{{ node.label }}</span>

                        <!-- <span v-if="node.label != '全部人员'" class="node none"> -->
                        <span v-if="node.label != '全部人员'" class="node none poAub">
                            <el-button type="text" size="mini" @click="createDepartment(-2)" >
                                <i class="el-icon-circle-plus-outline"></i> <!-- 新增 -->
                            </el-button>
                            <el-button type="text" size="mini" @click="deleteDep(null)">
                                <i class="el-icon-delete"></i> <!-- 删除 -->
                            </el-button>
                        </span>
                    </span> 
                </el-tree>
            </div>
        </el-col>
      </div>
      <div class="line line-second" style="display:flex;justify-content: center;align-items: center;">
        <div style="line-height: 5px;text-align: center;color: rgb(151 151 151);">
         -
         -
         -
        </div>
      </div>
      <div style="width: 200px; flex: 1; background: green" class="box-second-father">
        <el-col :span="24" 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;" v-if="permissions.structureCustomConfig">
                        <el-link type="primary" :underline="false" @click="customConfigShow">自定义配置</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="permissions.structureExport">
                        <el-link type="primary" :underline="false" @click="showExportDialog">导出人员</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="user.dingdingUserid == null && permissions.structureAdd">
                        <el-link type="primary" :underline="false" @click="openInsertDialog(null)">添加人员</el-link>
                    </el-form-item>
                    
                    <el-form-item style="float:right;" v-if="user.dingdingUserid == null && permissions.structureImport">
                        <el-link type="primary" :underline="false" @click="importUserC">批量导入</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="user.corpwxUserid != null && permissions.structureImport && user.companyId==469">
                        <el-link type="primary" :underline="false" @click="syncMembByCardTime">关联企微身份</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="user.corpwxUserid != null && permissions.structureImport && user.companyId!=469">
                        <el-link type="primary" :underline="false" @click="syncWithCorpWx">同步企微通讯录</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="user.dingdingUserid != null && permissions.structureImport">
                        <el-link type="primary" :underline="false" @click="syncWithCorpDingding">同步钉钉通讯录</el-link>
                    </el-form-item>

                    <!-- <el-form-item style="float:right;" v-if="user.dingdingUserid == null && permissions.structureImport">
                        <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;">
                        <span style="color: #666666">角色</span>
                        <el-select v-model="roleId" placeholder="请选择" @change="getUser()" style="width: 120px" clearable size="small">
                            <!-- <el-option
                            v-for="item in rolesa"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option> -->
                            <el-option v-for="item in acquireRoleList" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <span style="color: #666666">状态</span>
                        <el-select v-model="status" placeholder="请选择" @change="getUser()" style="width: 120px" size="small">
                            <el-option
                            v-for="item in states"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="float:right;">
                        <div style="width: 200px;display: inline-block;margin-top: 4px">
                            <el-input v-model="keyword" class="input-with-select" placeholder="请输入人员名字" clearable="true" size="small">
                                <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </el-form-item>
                     <el-form-item style="float:right;" v-if="depData != null && depData.id != '-1'">
                        <el-checkbox v-model="onlyDirect" @change="getUser()">直属员工</el-checkbox>
                    </el-form-item>
                     
                </el-form>
            </el-col>

            <!--列表-->
            <el-table ref="handleSelectTable" :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;" @selection-change="handleSelectionZzjg">
                <el-table-column type="selection" width="50"></el-table-column>
                <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="姓名" ></el-table-column>
                <el-table-column prop="phone" label="手机" width="120"></el-table-column>
                <el-table-column prop="departmentName" label="部门" ></el-table-column>
                <el-table-column label="角色" width="100">
                    <template slot-scope="scope">{{scope.row.roleName}}</template>
                </el-table-column>
                <el-table-column prop="monthCost" label="月成本"  v-if="permissions.structurePersonnel">
                    <template slot-scope="scope">{{user.timeType.isSecretSalary==0?(scope.row.monthCost==null?0:scope.row.monthCost):'*'}} 元</template>
                </el-table-column>
                <el-table-column prop="cost" label="时薪"  v-if="permissions.structurePersonnel">
                    <template slot-scope="scope">{{user.timeType.isSecretSalary==0?(scope.row.cost==null?0:scope.row.cost):'*'}} 元
                        <el-link v-if="user.timeType.isSecretSalary==0" @click.native="showSalaryList(scope.row)"><i class="iconfont firerock-iconrecord"></i></el-link>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="160">
                    <template slot-scope="scope">
                        <span>{{scope.row.isActive==0 ? '停用(' + scope.row.inactiveDate + ')' : '活跃'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="default" v-if="scope.row.roleName == '超级管理员' && user.id == scope.row.id" @click="transferRole(scope.row)">转让</el-button>
                        <el-button size="mini" type="default" v-if="scope.row.roleName != '超级管理员'" @click="resetPwd(scope.row)">重置</el-button>
                        <el-button size="mini" type="primary" v-if="scope.row.roleName != '超级管理员'" @click="openInsertDialog(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" v-if="scope.row.roleName == '超级管理员'" @click="openInsertDialog1(scope.row)">编辑</el-button>
                        <!-- <el-button size="mini" type="danger"  v-if="scope.row.roleName != '超级管理员'" @click="deleteUser(scope.row)">删除</el-button> -->
                        <el-button size="mini" type="default" v-if="scope.row.roleName != '超级管理员' && scope.row.isActive==1" @click="showDeactiveDialog(scope.row)">停用</el-button>
                        <el-button size="mini" type="success" v-if="scope.row.roleName != '超级管理员' && scope.row.isActive==0" @click="setActive(scope.row, 1)">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <!-- 123 -->
                <el-button size="small" @click="handleSelectionZzjgbtn1">取消</el-button>
                <!-- <el-cascader v-model="handleSelectionZzjgwillchange" size="small" placeholder="请选择部门" style="width: 13%;margin-left: 1%;margin-right: 1%;font-size:12px"
                    :options="option" :props="{ checkStrictly: false,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
                <el-button size="small" type="primary" @click="handleSelectionZzjgbtn2">修改</el-button> -->
                    
                <el-button size="small" type="primary" @click="handleSelectionZzjgbtn3">批量修改部门</el-button>
                <el-button size="small" type="primary" @click="handJue">批量修改角色</el-button>
               
                
                
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[20 , 50 , 80 , 100]"
                    :page-size="size"
                    :current-page="page"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    style="float:right;"
                ></el-pagination>
            </el-col>
        </el-col>
      </div>

      <!-- 批量修改弹出框 -->
        <el-dialog title="批量修改" :visible.sync="handleSelectionZzjgshow" v-if="handleSelectionZzjgshow" width="30%">
            <el-form model="" label-width="20%">
                <el-form-item label="设置部门">
                    <!-- <el-cascader v-model="handleSelectionZzjgwillchange" placeholder="请选择部门" style="width: 60%;"
                    :options="option" :props="{ checkStrictly: false,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader> -->
                    <el-cascader v-model="handleSelectionZzjgwillchange" placeholder="请选择部门" style="width: 100%;"
                    :options="option" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleSelectionZzjgshow = false">取消</el-button>
                <el-button type="primary" @click="handleSelectionZzjgbtn2">确定</el-button>
            </div>
        </el-dialog>

        <!-- 批量修改角色弹出框 -->
        <el-dialog title="批量修改" :visible.sync="handljues" v-if="handljues" width="30%">
            <el-form model="" label-width="20%">
                <el-form-item label="设置角色">
                    <el-select v-model="xiuRoleId" placeholder="请选择" style="width: 100%">
                        <el-option v-for="(item, index) in acquireRoleLists" :key="index" :label="item.rolename" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handljues = false">取消</el-button>
                <el-button type="primary" @click="handTrue">确定</el-button>
            </div>
        </el-dialog>

        <!-- 新增部门 -->
        <el-dialog :title="depTitle" :visible.sync="departmentVisible" width="500px" >
            <el-form ref="depForm" :model="depForm" :rules="depRules" label-width="100px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="depForm.name" placeholder="请输入部门名称" clearable style="width: 100%"></el-input>
                </el-form-item>

                <!-- 主要负责人 -->
                <el-form-item label="主要负责人" prop="managerId">
                    <el-select v-model="depForm.managerId" filterable  clearable  placeholder="请选择主要负责人" style="width: 100%">
                        <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-item label="其他负责人" prop="managerId">
                    <el-select v-model="depForm.otherManagerIds" filterable  clearable multiple style="width: 100%" 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-item label="直属领导" prop="reportAuditUserid">
                    <el-select v-model="depForm.reportAuditUserid" filterable  clearable  placeholder="请选择直属领导" style="width: 100%">
                        <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="form12" :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" v-if="permissions.structurePersonnel&&user.timeType.isSecretSalary==0">
                    <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 && permissions.structurePersonnel&&user.timeType.isSecretSalary==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" v-if="permissions.structurePersonnel&&user.timeType.isSecretSalary==0">
                    <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-cascader v-model="insertForm.departmentId" placeholder="请选择部门" style="width: 100%"
                    :options="option" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false"  clearable></el-cascader>
                </el-form-item>
                <el-form-item label="直属上级">
                    <el-select v-model="insertForm.superiorId" placeholder="请选择" style="width: 100%" filterable clearable>
                        <el-option v-for="item in users" :label="item.name" :value="item.id" :key="item.id" :disabled="item.id == insertForm.id">
                            <span style="float: left">{{item.name}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.departmentName}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="insertForm.roleId" placeholder="请选择角色" style="width: 100%">
                        <el-option v-for="item in acquireRoleList" :label="item.rolename" :value="item.id" :key="item.name">
                            <span style="float: left">{{item.rolename}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.roleDescribe}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.name" v-for="item,index in userCustomConfig" :key="item.id">
                    <el-select v-if="item.type == 0" v-model="insertForm[suoying[index]]" placeholder="请选择" clearable style="width: 100%">
                        <el-option v-for="option in item.itemList" :label="option.name" :value="option.name" :key="option.id">
                        </el-option>
                    </el-select>
                    <el-input v-else v-model="insertForm[suoying[index]]" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="phone">
                    <el-date-picker v-model="insertForm.inductionDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="岗位职级" prop="phone">
                    <el-input v-model="insertForm.position" placeholder="请输入岗位职级别" clearable></el-input>
                </el-form-item>

                <div class="zhaunye"><p>专业证书</p><p><el-link type="primary" @click="addCertificateList()">添加更多证书</el-link><el-link v-if="permissions.structureCertificate" type="primary" @click="managementDiolog = true" style="margin-left: 20px">管理专业证书</el-link></p></div>
                <div class="certificateList">
                    <div class="moreList">
                        <div class="moreLiList" v-for="(item,index) in insertForm.certJson" :key="index">
                            <div style="margin-right: 10px;width: 160px;">
                                <el-select v-model="item.certId" placeholder="请选择专业证书" size="mini" @change="changeManagement(index)">
                                    <el-option v-for="item in managementTableData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                </el-select>
                            </div>
                            <div><span>证书日期</span><el-date-picker size="mini" v-model="item.certDate" type="date" value-format="yyyy-MM-dd" placeholder="选择证书日期" style="width: 180px"></el-date-picker></div>
                            <div style="color: red;margin-left: 15px;cursor:pointer;" @click="deteFrames(index)"><i class="el-icon-delete"></i></div>
                        </div>
                    </div>
                </div>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteUser(insertForm)" style="float:left;">删除</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="submitInsert('insertForm')" :loading="submitLoading">提交</el-button>
            </span>
        </el-dialog>
        <!-- 编辑超级管理员的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="name">
                    <el-input v-model="insertForm.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>

                <el-form-item label="薪酬方式" prop="salaryType" v-if="permissions.structurePersonnel">
                    <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 && permissions.structurePersonnel" >
                    <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" v-if="permissions.structurePersonnel">
                    <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: true,expandTrigger: 'hover' }" :show-all-levels="false" 
                    clearable></el-cascader>
                </el-form-item>
                <el-form-item label="直属上级">
                    <el-select v-model="insertForm.superiorId" placeholder="请选择" style="width: 100%" filterable clearable>
                        <el-option v-for="item in users" :label="item.name" :value="item.id" :key="item.id" :disabled="item.id == insertForm.id">
                            <span style="float: left">{{item.name}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.departmentName}}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1=false">取消</el-button>
                <el-button type="primary" @click="submitInsert1" :loading="submitLoading">提交</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 acquireRoleList" :label="item.rolename" :value="item.id" :key="item.name">
                            <span style="float: left">{{item.rolename}}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.roleDescribe}}</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>
        <!-- 管理专业证书 -->
        <el-dialog title="管理专业证书" :visible.sync="managementDiolog" width="500px" :before-close="handleClose">
            <div>
                <el-table :data="managementTableData" style="width: 100%" height="400">
                    <el-table-column prop="name" label="名称" width="280"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="primary" size="small" @click="editorManagementForm(scope.row)">编辑</el-button>
                                <el-button type="danger" size="small" @click="deteManagementForm(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="managementDiolog = false">关 闭</el-button>
                <el-button type="primary" @click="addManagementDiologs()">新 增</el-button>
            </span>
        </el-dialog>
        <!-- 新增项目管理专业 -->
        <el-dialog title="新增/编辑管理专业证书" :visible.sync="addManagementDiolog" width="500px" :before-close="handleClose">
            <div>
                <el-form :model="managementForm" :rules="managementFormRou" ref="managementForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="专业证书名称" prop="name">
                        <el-input v-model="managementForm.name" placeholder="请输入专业证书名称"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addManagementDiolog = false">取 消</el-button>
                <el-button type="primary" @click="addManagementForm('managementForm')">提 交</el-button>
            </span>
        </el-dialog>
        <!-- 自定义配置项 -->
        <el-dialog title="自定义配置项管理" show-header="false" v-if="customConfigDialog" :visible.sync="customConfigDialog" :close-on-click-modal="false" customClass="customWidth" width="650px" top="20px">
            <div style="margin-left:30px;">
            <p v-for="item,index in customConfigList" :key="index">
                <el-input size="medium" v-model="item.name" placeholder="请输入自定义配置项名称" style="width:200px;margin-right:20px" maxlength="8"></el-input>
                    <el-radio size="medium" :disabled="!item.name" v-model="item.type" :label="0" style="margin-right:10px;margin-left:10px">下拉</el-radio>
                    <el-radio size="medium" :disabled="!item.name" v-model="item.type" :label="1">输入</el-radio>
                <span style="display:inline-block;">
                    <el-button v-if="cusItemTypes[index] == 0" type="primary" size="small" @click="getConfigItemBtn(item)">配置选项</el-button>
                    <span v-if="!item.id && item.name && item.type == 0" style="color:#999;font-size:13px">保存后可配置选项</span>
                </span>
                <el-button style="margin-left:20px" type="danger" size="small" v-if="item.id" @click="customConfigDelete(item,index)">删除</el-button>
            </p>
            
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="customConfigDialog = false" >关闭</el-button>
                <!-- <el-button type="primary" @click="customConfigListAdd" :disabled="customConfigList.length >= 5">新增</el-button> -->
                <el-button type="primary" @click="customConfigListSave" :loading="saveBtnLoading">保存</el-button>
                
            </div>


            <!-- 为下拉时的选项配置 -->
            <el-dialog title="配置选项" v-if="configItemDialog" :visible.sync="configItemDialog" :close-on-click-modal="false" customClass="customWidth" width="500px" append-to-body>
                <el-table :data="configItemList" height="400px" style="width:100%" key="configItemTable">
                    <el-table-column prop="id" width="60" label="序号">
                        <template slot-scope="scope" >
                            {{scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" ></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope" >
                            <el-button size="small" type="primary" @click="configItemAorM(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="configItemDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="configItemDialog = false" >关闭</el-button>
                    <el-button type="primary" @click="configItemAorM" >新增配置选项</el-button>
                </div>

                <el-dialog title="新增/编辑配置选项" v-if="configItemAorMDialog" :visible.sync="configItemAorMDialog" :close-on-click-modal="false" customClass="customWidth" width="500px" append-to-body>
                    <span>名称</span>
                    <el-input size="medium" v-model="AorMitem.name" placeholder="请输入自定义配置项名称" style="width:200px;margin-right:20px" maxlength="8"></el-input>

                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="configItemAorMDialog = false" >取消</el-button>
                        <el-button type="primary" @click="configItemAorMSure" >提交</el-button>
                    </div>
                </el-dialog>
            </el-dialog>
        </el-dialog>


        <!-- 批量导入 -->
        <el-dialog title="人员批量导入" v-if="importDialog" :visible.sync="importDialog" customClass="customWidth" width="500px">
            <p>1. 下载
            <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/人员导入模板.xlsx" download="人员导入模板.xlsx">人员导入模板.xlsx</el-link>
            </p>
            <p>2. 填写excel模板,并上传。</p>
            <p style="display: flex;justify-content: center;padding-bottom:1em;">
                <el-upload ref="upload"  action="#" :limit="1" :http-request="importUser" :show-file-list="false">
                <el-button type="primary" :underline="false" :loading="importingData">开始导入</el-button>
            </el-upload>
            </p>
        </el-dialog>
        <el-dialog title="同步企业微信通讯录" v-if="showSyncCWDialog" :visible.sync="showSyncCWDialog" customClass="customWidth" width="500px">
            <p>1. 填写企业微信通讯录Secret 
                <el-popover placement="top" width="1200" trigger="hover">
                    <div class="imgFlex">
                        <div><img src="../../assets/image/Step1.jpg" style="width: 380px"/> <p><b>第一步:进入管理后台</b></p> </div>
                        <div class="imgBor"> <p></p> <img src="../../assets/image/Step2.jpg" style="width: 380px"/> <p><b>第二步:进入通讯录同步</b></p></div>
                        <div><img src="../../assets/image/Step3.jpg" style="width: 380px"/> <p><b>第三步:查看Secret</b></p></div>
                    </div>
                    <i class="el-icon-question" slot="reference" />
                </el-popover>
            </p>
            <p>
            <el-input v-model="contactSecret" style="width:380px;" :disabled="!editSecret"/><el-button @click="editSecret?saveContactSecret():editSecret=true;" >{{editSecret?'保存':'修改'}}</el-button>
            </p>
            <p v-if="contactServer == null">
            2. 联系客户配置同步服务器

            </p>
            <p v-if="contactServer == null" style="text-align:center;">
            <img
                style="width: 120px; height: 120px"
                src="../../assets/image/code.jpg" />
            </p>
            <p style="display: flex;justify-content: center;padding-bottom:1em;">
                <el-button type="primary" :underline="false" :loading="importingData" :disabled="!canSync" @click="startCorpWxImport">开始同步</el-button>
            </p>
        </el-dialog>
        <el-dialog title="关联结果" v-if="syncMembByCardTimeResultGialog" :visible.sync="syncMembByCardTimeResultGialog" customClass="customWidth" width="500px">
            <p style="padding-bottom:30px;">
            {{syncMembByCardTimeMsg}}
            </p>
        </el-dialog>
    </div>
  </div>
</template>

<script>
// 左右滑動
import dragMixin from "@/common/js/tensile.js";
import util from "../../common/js/util";
let that
export default {
  name: "Home",
  components: {},
  mixins: [dragMixin],
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 195;
    const that = this;
    window.onresize = function temp() {
        that.tableHeight = window.innerHeight - 195;
    };
    this.initDrag([
      {
        type: "LR",
        domClass: {
          // 中间分割线的名字
          resize: "line-line",
          // 左侧盒子的名字
          left: "box-left",
          // 右侧盒子的名字
          right: "box-right",
          // 父级的名字
          box: "box-father",
        },
        otherInfo: {
          // 限制左边栏最低宽度
          leftWidth: 120,
        },
      },
      {
        type: "LR",
        domClass: {
          // 中间分割线的名字
          resize: "line-second",
          // 左侧盒子的名字
          left: "left-laowang",
          // 右侧盒子的名字
          right: "box-second-father",
          // 父级的名字
          box: "grand",
        },
        otherInfo: {
          // 限制左边栏最低宽度
          leftWidth: 120,
        },
      },
    ]);
  },
  data() {
    return {
      syncMembByCardTimeResultGialog:false,
      syncMembByCardTimeMsg:null,
      editSecret: false,
      canSync: false,
      corpid: null,
      contactSecret: null,
      contactServer: null,
      showSyncCWDialog: false,
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      handleSelectionZzjgshow: false,
      handljues: false,
      submitLoading: false,
      deactiveUser: null,
      deactiveDate: null,
      deactiveDialog: false,
      toUserId: null,
      myRoleId: null,
      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,
        roleId: null,
        monthCost: null,
        cost: null,
        departmentId: null,
        salaryType: 0,
        costApplyDate: util.formatDate.format(new Date(), "yyyy-MM-dd"),
        inductionDate: util.formatDate.format(new Date(), "yyyy-MM-dd"),
        position: "",
        certJson: [],
        plateMap: {},
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        // role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        roleId: [{ required: true, message: "请选择角色", trigger: "blur" }],
        cost: [{ required: true, message: "请输入成本", trigger: "blur" }],
        monthCost: [
          { required: true, message: "请输入月成本", trigger: "blur" },
        ],
      },
      managementFormRou: {
        name: [{ 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: "",
      rolesa: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "6",
          label: "公司领导",
        },
        {
          value: "2",
          label: "系统管理员",
        },
        {
          value: "4",
          label: "财务管理员",
        },
        {
          value: "5",
          label: "项目管理员",
        },
        {
          value: "0",
          label: "普通员工",
        },
      ],
      states: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "活跃",
        },
        {
          value: "0",
          label: "停用",
        },
      ],
      status: "",
      role: "",
      jDarr: [],
      handleSelectionZzjgDate: [],
      handleSelectionZzjgwillchange: null,
      acquireRoleList: [], // 角色列表
      acquireRoleLists: [], // 没有超级管理员
      roleId: "",
      xiuRoleId: "",
      managementDiolog: false,
      addManagementDiolog: false,
      managementForm: {
        name: "",
      },
      managementTableData: [],
      certificate: "",
      addUserId: "",
      userCustomConfig: [],

      customConfigDialog: false,
      importDialog: false,
      importingData: false,
      customConfigList: [],
      cusItemTypes: [],
      configItemList: [],
      configItemId: null,
      configItemDialog: false,

      configItemAorMDialog: false,
      AorMitem: {
        name: null,
        userCustomId: null,
        id: null,
      },
      tableLoading: false,

      suoying: ["plate1", "plate2", "plate3", "plate4", "plate5"],
      insertFormPlates: [],
      saveBtnLoading: false,
      onlyDirect: false,
    };
  },
  filters: {
    acquireRoleName(value) {
      for (var i in that.acquireRoleList) {
        if (that.acquireRoleList[i].id == value) {
          return that.acquireRoleList[i].rolename;
        }
      }
    },
  },
  beforeCreate: function () {
    that = this;
  },
  methods: {
    syncMembByCardTime() {
      this.syncMembByCardTimeResultGialog = true;
      this.syncMembByCardTimeMsg = '正在同步关联，请稍等...';
        this.http.post("/wxcorp/syncMembByCardTime",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          if (res.code == "ok") {
            this.syncMembByCardTimeMsg = res.data;
            this.getUser();
          } else {
            this.syncMembByCardTimeMsg = res.msg;
          }
        },
        (err) => {
          this.syncMembByCardTimeMsg = err;
        }
      );
    },
    saveContactSecret() {
      if (!this.contactSecret) {
        this.$message({
          message: "请输入通讯录secret",
          type: "error",
        });
        return;
      }
      this.http.post(
        "/wx-corp-info/saveContactSecret",
        {
          corpid: this.corpid,
          contactSecret: this.contactSecret,
        },
        (res) => {
          if (res.code == "ok") {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.canSync = true;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.tableLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    startCorpWxImport() {
      this.importingData = true;
      this.http.post(
        "/wxcorp/getCorpMembs",
        {
          corpId: this.corpid,
        },
        (res) => {
          this.importingData = false;
          if (res.code == "ok") {
            this.showSyncCWDialog = false;
            this.$message({
              message: "同步完成",
              type: "success",
            });
            this.getDepartment();
            this.getUser();
            this.getUsers();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.tableLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    //从企业微信同步通讯录
    syncWithCorpWx() {
      this.showSyncCWDialog = true;
      this.editSecret = false;
      this.http.post(
        "/wx-corp-info/get",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          if (res.code == "ok") {
            this.contactSecret = res.data.contactSecret;
            this.contactServer = res.data.contactServer;
            if (this.contactSecret && this.contactServer) {
              this.canSync = true;
            } else {
              this.editSecret = true;
            }
            this.corpid = res.data.corpid;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.tableLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    // 从钉钉同步通讯录
    syncWithCorpDingding() {
      this.$confirm(
        "确认从钉钉同步通讯录吗？（可能需要一定的加载时间，请耐心等待）",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.listLoading = true;
          this.http.post(
            "/company/syncCorpMembs",
            {},
            (res) => {
              this.listLoading = false;
              if (res.code == "ok") {
                this.$message({
                  message: res.data,
                  type: "success",
                });
                this.getDepartment();
                this.getUser();
                this.getUsers();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            },
            (err) => {
              this.listLoading = false;
              this.$message({
                message: err,
                type: "error",
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            message: "已取消操作",
            type: "info",
          });
        });
    },
    test() {
      this.getCustomConfigList();
    },
    // 自定义配置项
    customConfigShow() {
      this.getCustomConfigList();
      this.customConfigDialog = true;
    },
    getConfigItemBtn(item) {
      this.configItemDialog = true;
      this.AorMitem.userCustomId = item.id;
      this.getConfigItem();
    },
    getConfigItem() {
      // 获取配置下拉数据
      this.http.post(
        "/sub-user-custom/list",
        {
          userCustomId: this.AorMitem.userCustomId,
        },
        (res) => {
          if (res.code == "ok") {
            this.configItemList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.tableLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    getCustomConfigList() {
      // 获取自定义配置
      this.http.post(
        "/user-custom/list",
        {},
        (res) => {
          if (res.code == "ok") {
            let lists = JSON.parse(JSON.stringify(res.data));
            this.userCustomConfig = JSON.parse(JSON.stringify(res.data));
            // let lists = res.data
            // this.customConfigList = res.data
            this.customConfigList = [
              { name: "", id: null, type: 1, companyId: null },
              { name: "", id: null, type: 1, companyId: null },
              { name: "", id: null, type: 1, companyId: null },
              { name: "", id: null, type: 1, companyId: null },
              { name: "", id: null, type: 1, companyId: null },
            ];
            for (let i in lists) {
              this.$set(this.customConfigList[i], "name", lists[i].name);
              this.$set(this.customConfigList[i], "id", lists[i].id);
              this.$set(this.customConfigList[i], "type", lists[i].type);
              this.$set(
                this.customConfigList[i],
                "companyId",
                lists[i].companyId
              );
            }
            // console.log('customConfigList',this.customConfigList);
            this.cusItemTypes = [];
            for (let j in this.customConfigList) {
              if (
                this.customConfigList[j].type == null ||
                this.customConfigList[j].type == 0
              ) {
                this.customConfigList[j].type = 0;
                this.cusItemTypes[j] = 0;
              } else {
                this.cusItemTypes[j] = 1;
              }
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    customConfigListSave() {
      // 保存/修改自定义配置
      // let jsonStr = ''
      // for(let i in this.customConfigList){
      //     if(this.customConfigList[i].name){
      //         jsonStr += JSON.stringify(this.customConfigList[i]) + ','
      //     }
      // }
      // jsonStr = jsonStr.substring(0,jsonStr.length - 1)
      // let jsonStr = []
      this.saveBtnLoading = true;
      let parameter = this.customConfigList.filter(
        (item) => item.name.trim() != ""
      );

      this.http.post(
        "/user-custom/addOrMod",
        {
          json: JSON.stringify(parameter),
        },
        (res) => {
          if (res.code == "ok") {
            this.getCustomConfigList();
            this.saveBtnLoading = false;
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.saveBtnLoading = false;
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.saveBtnLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    customConfigDelete(item, index) {
      if (item.id) {
        this.http.post(
          "/user-custom/delete",
          {
            id: item.id,
          },
          (res) => {
            if (res.code == "ok") {
              this.getCustomConfigList();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          },
          (err) => {
            this.$message({
              message: err,
              type: "error",
            });
          }
        );
      } else {
        this.customConfigList.splice(index, 1);
      }
    },

    configItemAorM(item) {
      this.configItemAorMDialog = true;
      if (item) {
        this.AorMitem.name = item.name;
        this.AorMitem.id = item.id;
      } else {
        this.AorMitem.name = null;
        this.AorMitem.id = null;
      }
    },
    configItemAorMSure() {
      // 新增/修改配置下拉选项
      if (!this.AorMitem.name) {
        this.$message({
          message: "名称不能为空",
          type: "error",
        });
        return;
      }
      this.http.post(
        "/sub-user-custom/addOrMod",
        this.AorMitem,
        (res) => {
          if (res.code == "ok") {
            this.configItemAorMDialog = false;
            this.getConfigItem();
            this.$message({
              message: "提交成功",
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    configItemDelete(item) {
      // 删除配置下拉选项
      this.http.post(
        "/sub-user-custom/delete",
        {
          id: item.id,
        },
        (res) => {
          if (res.code == "ok") {
            this.getConfigItem();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },

    // 获取添加人员时的自定义配置信息
    getUserCustomConfig(e) {
      this.http.post(
        "/user-custom/list",
        {},
        (res) => {
          if (res.code == "ok") {
            this.userCustomConfig = JSON.parse(JSON.stringify(res.data));
            for (let i in this.userCustomConfig) {
              if (this.userCustomConfig[i].type == 0) {
                this.http.post(
                  "/sub-user-custom/list",
                  {
                    userCustomId: this.userCustomConfig[i].id,
                  },
                  (res) => {
                    if (res.code == "ok") {
                      // this.userCustomConfig[i].itemList = res.data
                      this.$set(this.userCustomConfig[i], "itemList", res.data);
                    } else {
                      this.$message({
                        message: res.msg,
                        type: "error",
                      });
                    }
                  },
                  (err) => {
                    this.$message({
                      message: err,
                      type: "error",
                    });
                  }
                );
              }
            }
            this.$nextTick(() => {
              // let opt = this.users[0].plateMap[this.userCustomConfig[0].name]
              // console.log('userCustomConfig',this.userCustomConfig);
              // console.log('insertForm',this.insertForm);
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    // customConfigListAdd(){
    //     this.customConfigList.push({
    //         name: '',
    //         type: 1
    //     })
    // },
    // 批量修改部门
    handleSelectionZzjg(e) {
      // if (e.length == 0) {
      //     this.handleSelectionZzjgshow = false
      // }else{
      //     this.handleSelectionZzjgshow = true
      // }
      this.handleSelectionZzjgDate = e;
    },
    handleSelectionZzjgbtn1() {
      this.handleSelectionZzjgshow = false;
      this.$refs.handleSelectTable.clearSelection();
      this.handleSelectionZzjgwillchange = null;
    },
    handleSelectionZzjgbtn2() {
      if (this.handleSelectionZzjgwillchange == null) {
        this.$message("请选择部门");
        return;
      }
      //接口调用样例代码如下
      var ids = [];
      for (
        let index = 0;
        index < this.handleSelectionZzjgDate.length;
        index++
      ) {
        ids.push(this.handleSelectionZzjgDate[index].id);
      }
      var changeId =
        this.handleSelectionZzjgwillchange[
          this.handleSelectionZzjgwillchange.length - 1
        ];
      this.http.post(
        "/user/batchUpdateDept",
        {
          userIds: JSON.stringify(ids),
          deptId: changeId,
        },
        (res) => {
          if (res.code == "ok") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getUser();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "error",
          });
        }
      );

      // for (let index = 0; index < this.handleSelectionZzjgDate.length; index++) {
      //     this.handleSelectionZzjgDate[index].departmentId = this.handleSelectionZzjgwillchange[this.handleSelectionZzjgwillchange.length - 1]
      //     if (this.handleSelectionZzjgDate[index].role == 1) {
      //         this.submitInsert1(this.handleSelectionZzjgDate[index],1)
      //     }else{
      //         this.submitInsert(this.handleSelectionZzjgDate[index],1)
      //     }
      // }
      // this.handleSelectionZzjgwillchange = null
      this.handleSelectionZzjgshow = false;
    },
    handleSelectionZzjgbtn3() {
      if (this.handleSelectionZzjgDate.length == 0) {
        this.$message("请选择人员");
        return;
      }
      this.handleSelectionZzjgshow = true;
    },
    handJue() {
      if (this.handleSelectionZzjgDate.length == 0) {
        this.$message("请选择人员");
        return;
      }
      for (var i in this.acquireRoleList) {
        if (this.acquireRoleList[i].isDefault == 1) {
          this.xiuRoleId = this.acquireRoleList[i].id;
        }
      }
      this.handljues = true;
      // console.log('触发了')
    },
    handTrue() {
      var arr = [];
      for (var i in this.handleSelectionZzjgDate) {
        arr.push(this.handleSelectionZzjgDate[i].id);
      }
      this.http.post(
        "/user/batchUpdateRole",
        {
          userIds: JSON.stringify(arr),
          roleId: this.xiuRoleId,
        },
        (res) => {
          if (res.code == "ok") {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.handljues = false;
            this.getUser();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "error",
          });
        }
      );
    },

    deleteUser(targetUser) {
      this.$confirm("确定要删除该员工吗?", "提示", {
        //type: 'warning'
      }).then(() => {
        this.http.post(
          "/user/deleteUser",
          {
            userId: targetUser.id,
          },
          (res) => {
            if (res.code == "ok") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.getUser();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
              this.dialogVisible = false;
            }
          },
          (error) => {
            this.$message({
              message: error,
              type: "error",
            });
            this.dialogVisible = false;
          }
        );
      });
    },
    chufa(data, b, c, e) {
      if (this.depData == null || data.id != this.depData.id) {
        // this.depData = data.id
        this.depData = data;
        this.page = 1;
        this.getUser();
      }
    },
    jieDian(a, b, c) {
      var ids = a.id;
      var arrs = this.jDarr;
      arrs.push(ids);
      this.jDarr = arrs;
    },
    shutDown(a, b, c) {
      var ids = a.id;
      var arrs = [];
      for (var i in this.jDarr) {
        if (this.jDarr[i] != ids) {
          arrs.push(this.jDarr[i]);
        }
      }
      this.jDarr = arrs;
    },
    mouseleave(data, $event) {
      $event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
        "class",
        "node none poAub"
      );
    },
    mouseover(data, $event) {
      $event.currentTarget.lastChild.setAttribute("class", "node block poAub");
    },
    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;
      }
      if (!this.myRoleId) {
        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,
          pageSize: -1,
        },
        (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,
          pageSize: -1,
          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",
          });
        }
      );
    },

    importUserC() {
      this.importDialog = true;
    },
    // 批量导入人员
    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);
        this.importingData = true;
        this.http.uploadFile(
          this.port.manage.import,
          formData,
          (res) => {
            this.importingData = false;
            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.importingData = false;
            this.$refs.upload.clearFiles();
            this.listLoading = false;
            this.$message({
              message: error,
              type: "error",
            });
          }
        );
      }
    },

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

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

    //获取所有员工的列表
    getUser(e) {
      if (e != 1) {
        this.page = 1;
      }
      // console.log(12345)
      this.listLoading = true;
      this.http.post(
        this.port.manage.list,
        {
          departmentId: this.depData.id,
          pageIndex: this.page,
          pageSize: this.size,
          keyword: this.keyword,
          status: this.status,
          // role: this.role
          roleId: this.roleId,
          onlyDirect: this.onlyDirect ? "1" : "0",
        },
        (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(row) {
      if (row != null) {
        var list = JSON.parse(JSON.stringify(row)),
          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]));
        }
        // console.log(list, '数据')
        // this.insertForm = {
        //     id: list.id,
        //     name: list.name,
        //     phone: list.phone,
        //     // role: list.role,
        //     roleId: list.roleId,
        //     monthCost:list.monthCost,
        //     cost: list.cost,
        //     departmentId: array.reverse(),
        //     salaryType: list.salaryType,
        //     costApplyDate: list.costApplyDate,
        //     position: list.position
        // };
        this.addUserId = list.id;
        this.http.post(
          "/user/getUserInfo",
          {
            userId: list.id,
          },
          (res) => {
            if (res.code == "ok") {
              this.insertForm = {
                id: res.data.id,
                name: res.data.name,
                phone: res.data.phone,
                roleId: res.data.roleId,
                monthCost: res.data.monthCost,
                cost: res.data.cost,
                departmentId: array.reverse(),
                salaryType: res.data.salaryType,
                costApplyDate: res.data.costApplyDate,
                // inductionDate: res.data.inductionDate,
                position: res.data.position,
                certJson: res.data.certList,
                plateMap: {},
                superiorId: res.data.superiorId,
                plate1: res.data.plate1,
                plate2: res.data.plate2,
                plate3: res.data.plate3,
                plate4: res.data.plate4,
                plate5: res.data.plate5,
              };
              this.$set(this.insertForm, 'inductionDate', res.data.inductionDate)
              this.getUserCustomConfig(1);
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          },
          (error) => {
            this.listLoading = false;
            this.$message({
              message: error,
              type: "error",
            });
          }
        );
        this.title = "编辑人员";
      } else {
        this.addUserId = "";
        this.insertForm = {
          id: null,
          name: null,
          phone: null,
          // role: null,
          roleId: null,
          monthCost: null,
          cost: null,
          departmentId: null,
          salaryType: 0,
          costApplyDate: util.formatDate.format(new Date(), "yyyy-MM-dd"),
          inductionDate: util.formatDate.format(new Date(), "yyyy-MM-dd"),
          position: "",
          certJson: [],
          plateMap: {},
          plate1: null,
          plate2: null,
          plate3: null,
          plate4: null,
          plate5: null,
        };
        this.title = "新增人员";
        this.getUserCustomConfig();
        // this.insertForm.plateMap['定义测试文本'] = '测试文本'
        // console.log('insertForm',this.insertForm);
      }
      this.dialogVisible = true;
      console.log(this.insertForm);
    },

    submitInsert() {
      var form = {};
      var ssR = this.upRepeat(this.insertForm.certJson);
      var trs = true;
      this.$refs.form12.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          if (ssR) {
            this.$message({
              message: "重复证书",
              type: "error",
            });
            this.submitLoading = false;
            return false;
          }
          for (var s in this.insertForm.certJson) {
            if (
              !this.insertForm.certJson[s].certDate ||
              !this.insertForm.certJson[s].certId
            ) {
              trs = false;
            }
          }
          if (!trs) {
            this.$message({
              message: "证书未填写完整",
              type: "error",
            });
            this.submitLoading = false;
            return false;
          }
          form = {
            name: this.insertForm.name,
            phone: this.insertForm.phone,
            // role: this.insertForm.role,
            roleId: this.insertForm.roleId,
            monthCost: this.insertForm.monthCost,
            cost: this.insertForm.cost,
            salaryType: this.insertForm.salaryType,
            position: this.insertForm.position,
            certJson: JSON.stringify(this.insertForm.certJson),
            // certJson: this.insertForm.certJson
            inductionDate: this.insertForm.inductionDate,
            plate1: this.insertForm.plate1,
            plate2: this.insertForm.plate2,
            plate3: this.insertForm.plate3,
            plate4: this.insertForm.plate4,
            plate5: this.insertForm.plate5,
          };

          // for(let i=0;i<5;i++) {
          //     if(this.insertFormPlates[i]){
          //         form[this.suoying[i]] = this.insertFormPlates[i]
          //     }
          // }

          // console.log(form, 'form')

          if (this.insertForm.id != null) {
            form.id = this.insertForm.id;
          }
          if (this.insertForm.superiorId) {
            form.superiorId = this.insertForm.superiorId;
          }
          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
              ];
          }

          if (!ssR && trs) {
            this.http.post(
              this.port.manage.insert,
              form,
              (res) => {
                this.submitLoading = false;
                if (res.code == "ok") {
                  this.$message({
                    message:
                      this.insertForm.id != null ? "修改" : "创建" + "成功",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getUser();
                  this.getUsers();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              },
              (error) => {
                this.listLoading = false;
                this.$message({
                  message: error,
                  type: "error",
                });
              }
            );
          }
        }
      });
      // console.log(form, '提交的数据')
      // return
      // console.log(ssR, trs)
    },

    // 切换角色
    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(row) {
      var list1 = JSON.parse(JSON.stringify(row)),
        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.http.post(
        "/user/getUserInfo",
        {
          userId: list1.id,
        },
        (res) => {
          if (res.code == "ok") {
            this.insertForm = {
              id: res.data.id,
              name: res.data.name,
              phone: res.data.phone,
              roleId: res.data.roleId,
              monthCost: res.data.monthCost,
              cost: res.data.cost,
              departmentId: array1.reverse(),
              salaryType: res.data.salaryType,
              costApplyDate: res.data.costApplyDate,
              inductionDate: res.data.inductionDate,
              position: res.data.position,
              certJson: res.data.certList,
              plateMap: {},
              superiorId: res.data.superiorId,
            };
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error",
          });
        }
      );
      // console.log(list1)
      // this.insertForm = {
      //     id: list1.id,
      //     name: list1.name,
      //     phone: list1.phone,
      //     roleId: list1.roleId,
      //     monthCost:list1.monthCost,
      //     cost: list1.cost,
      //     departmentId: array1.reverse(),
      //     salaryType: list1.salaryType,
      //     name: list1.name,
      //     position: list1.position,
      //     certJson: list1.certJson
      // };
      this.dialogVisible1 = true;
    },

    submitInsert1() {
      var form = {};
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          form = {
            id: this.insertForm.id,
            name: this.insertForm.name,
            phone: this.insertForm.phone,
            roleId: this.insertForm.roleId,
            monthCost: this.insertForm.monthCost,
            cost: this.insertForm.cost,
            position: this.insertForm.position,
            certJson: this.insertForm.certJson,
            inductionDate: this.insertForm.inductionDate,
          };
          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;
          }
          if (this.insertForm.superiorId) {
            form.superiorId = this.insertForm.superiorId;
          }

          this.http.post(
            this.port.manage.insert,
            form,
            (res) => {
              this.submitLoading = false;
              if (res.code == "ok") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.dialogVisible1 = false;
                //重新读取列表
                this.getUser();
                this.getUsers();
              } 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;
            console.log(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) {
      console.log(i, '看看')
      setTimeout(() => {
        var that = this;
        if (i == -2) {
          //创建子部门
          that.depForm = {
            id: null,
            name: null,
            parentId: null,
            managerId: null,
          };
          if (that.depData.id != -1 && that.depData.id != 0) {
            that.depForm.parentId = that.depData.id;
          }
          that.depTitle = "新增子部门";
        } else if (i == -1) {
          //创建一级部门
          that.depForm = {
            id: null,
            name: null,
            parentId: null,
            managerId: null,
          };
          that.depTitle = "新增部门";
        } else {
          console.log(that.depData, '看看值')
          if (that.depData.managerId == "null") {
            that.depData.managerId = "";
          }
          if (that.depData.reportAuditUserid == "null") {
            that.depData.reportAuditUserid = "";
          }
          that.depForm = {
            id: that.depData.id,
            name: that.depData.label,
            parentId: that.depData.parentId,
            managerId: that.depData.managerId,
            reportAuditUserid: that.depData.reportAuditUserid,
          }
          if(that.depData.otherManagerIds) {
            this.$set(that.depForm, 'otherManagerIds', that.depData.otherManagerIds)
          } else {
            this.$set(that.depForm, 'otherManagerIds', [])

          }
          // console.log('点击编辑的时候', that.depData)
          // if(that.depData.reportAuditUserid != null && that.depData.reportAuditUserid != "null" && that.depData.reportAuditUserid.length > 0) {
          //     that.depForm.reportAuditUserid = that.depData.reportAuditUserid
          // }
          that.depTitle = "编辑部门";
        }
        that.departmentVisible = true;
      });
      // 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 {
      //     if(this.depData.managerId == "null") {
      //         this.depData.managerId = ''
      //     }
      //     if(this.depData.reportAuditUserid == "null") {
      //         this.depData.reportAuditUserid = ''
      //     }
      //     this.depForm = {
      //         id: this.depData.id,
      //         name: this.depData.label,
      //         parentId: this.depData.parentId,
      //         managerId: this.depData.managerId,
      //         reportAuditUserid: this.depData.reportAuditUserid
      //     }
      //     // if(this.depData.reportAuditUserid != null && this.depData.reportAuditUserid != "null" && this.depData.reportAuditUserid.length > 0) {
      //     //     this.depForm.reportAuditUserid = this.depData.reportAuditUserid
      //     // }
      //     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) {
            form.managerId = this.depForm.managerId;
          }
          // console.log(this.depForm)
          if (this.depForm.reportAuditUserid) {
            form.reportAuditUserid = this.depForm.reportAuditUserid;
          }
          // 其他负责人
          if(this.depForm.otherManagerIds) {
            form.otherManagerIds = this.depForm.otherManagerIds.toString();
          }
          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.depData.otherManagerIds = form.otherManagerIds;
                }

                this.getDepartment();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            },
            (error) => {
              this.listLoading = false;
              this.$message({
                message: error,
                type: "error",
              });
            }
          );
        }
      });
    },

    // 删除部门
    deleteDep() {
      var that = this;
      setTimeout(() => {
        that
          .$confirm("确定要删除部门" + that.depData.label + "吗?", "删除部门", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            that.listLoading = true;
            that.http.post(
              that.port.manage.del,
              { id: that.depData.id },
              (res) => {
                that.listLoading = false;
                if (res.code == "ok") {
                  that.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  that.depData = {
                    id: -1,
                    label: "全部人员",
                  };
                  that.getDepartment();
                  that.getUser();
                } else {
                  that.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              },
              (error) => {
                that.listLoading = false;
                that.$message({
                  message: error,
                  type: "error",
                });
              }
            );
          })
          .catch(() => {});
      }, 100);
      // 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",
          });
        }
      );
    },
    // 获取角色
    acquireRole() {
      // this.http.post('/permission/getFrontRoleList', {
      this.http.post(
        "/permission/getFrontRoleList",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          if (res.code == "ok") {
            // console.log(res.data, '获取角色')
            this.acquireRoleList = res.data;
            var arr = [];
            for (var i in res.data) {
              if (res.data[i].rolename != "系统管理员") {
                arr.push(res.data[i]);
              }
            }
            this.acquireRoleLists = arr;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "error",
          });
        }
      );
    },
    // 获取专业分类
    getProfessional() {
      this.http.post(
        "/company-cert/list",
        {},
        (res) => {
          if (res.code == "ok") {
            this.managementTableData = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.$message({
            message: error,
            type: "error",
          });
        }
      );
    },
    addManagementDiologs() {
      this.managementForm = { name: "" };
      this.addManagementDiolog = true;
    },
    // 新增/编辑人员专业费雷
    addManagementForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.http.post(
            "/company-cert/addOrMod",
            this.managementForm,
            (res) => {
              if (res.code == "ok") {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.getProfessional();
                this.addManagementDiolog = false;
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            },
            (error) => {
              this.$message({
                message: error,
                type: "error",
              });
            }
          );
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 编辑
    editorManagementForm(item) {
      this.managementForm = item;
      this.addManagementDiolog = true;
    },
    // 删除专业
    deteManagementForm(item) {
      this.$confirm(
        "该操作可能造成已有数据丢失，确定要删除吗?",
        "删除专业证书",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.http.post(
            "/company-cert/delete",
            {
              id: item.id,
            },
            (res) => {
              if (res.code == "ok") {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.getProfessional();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            },
            (error) => {
              this.$message({
                message: error,
                type: "error",
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击添加更多帧数
    addCertificateList() {
      var obj = {};
      obj.certId = "";
      obj.certName = "";
      obj.certDate = "";
      obj.id = "";
      obj.userId = this.addUserId;
      this.insertForm.certJson.push(obj);
    },
    // 选择专业帧数
    changeManagement(is) {
      var id = this.insertForm.certJson[is].certId;
      for (var i in this.managementTableData) {
        if (this.managementTableData[i].id == id) {
          this.insertForm.certJson[is].certName =
            this.managementTableData[i].name;
        }
      }
    },
    // 查重复
    upRepeat(arr) {
      var obj = {};
      for (var i in arr) {
        if (obj[arr[i].certName]) {
          return true;
        }
        obj[arr[i].certName] = true;
      }
      return false;
    },
    // 删除帧数
    deteFrames(i) {
      this.insertForm.certJson.splice(i, 1);
    },
  },
  mounted() {
    this.deactiveDate = util.formatDate.format(new Date(), "yyyy-MM-dd");
    this.getDepartment();
    this.getUser();
    this.getCompanyTimeSetting();
    this.getUsers();
    this.acquireRole();
    this.getProfessional();
  },
};
</script>

<style scoped>
.line {
  width: 30px;
  /* height: 500px; */
  background: #f2f2f2;
  cursor: w-resize;
}
.box-father {
  border: 8px solid #000;
}
.line-second {
  width: 10px;
  /* background: red; */
}
.flex {
  display: flex;
  width: 100%;
}
.box-left {
  flex: 0 0 400px;
  /* height: 600px; */
  /* background: blue; */
}
.box-right {
  /* height: 600px; */
  /* background: green; */
  flex: 1;
}
.box-postion {
  width: 200px;
  /* height: 400px; */
  background: #ccc;
}

</style>
<style lang="scss" scoped>
.imgFlex {
    display: flex;
    align-items: center;
}
.imgFlex p {
    width: 100%;
    text-align: center;
}
.imgFlex div {
    padding: 10px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    height: 600px;
}
.imgBor {
    border-right: 1px solid #666;
    border-left: 1px solid #666;
}
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .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;
        }
    }
    .none {
        display: none;
    }
    .block {
        display: block;
    }
</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;
    }
    .zhaunye {
        display: flex;
        justify-content: space-between;
        padding: 0 5px 0 10px;
    }
    .certificateList {
        width: 98%;
        box-sizing: border-box;
        margin: 0 10px 0 10px;
        border: 1px solid rgb(194, 194, 194);
        min-height: 200px;
        max-height: 200px;
        overflow: auto;
        padding: 10px;
    }
    .moreAl {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .moreLiList {
        display: flex;
        margin-bottom: 10px;
    }
    .moreLiList div {
        line-height: 30px;
    }
    .moreLiList span {
        display: inline-block;
        margin-right: 15px;
    } 
    .poAub {
        position: absolute;
        right: 10px;
    }
</style>