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;{{ $t('lable.department') }}</span>
                <div v-on:click="createDepartment(-1)" v-if="user.userNameNeedTranslate != '1'">
                    <i class="fa fa-plus-circle"></i>
                    {{ $t('create') }} 
                  </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"> -->
                <el-tree :data="data" :props="defaultProps" :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;">
                          <span v-if="user.userNameNeedTranslate == '1'">
                            <ww-open-data type='departmentName' :openid='node.label'></ww-open-data>
                          </span>
                          <span v-else>
                            {{ node.label }}
                          </span>

                          <!-- <span v-if="user.userNameNeedTranslate == '1'">
                              <span v-if="node.data.children">
                                  <ww-open-data type='departmentName' :openid='node.label'></ww-open-data>
                              </span>
                              <span v-else>
                                  <ww-open-data type='userName' :openid='node.label'></ww-open-data>
                              </span>
                          </span>
                          <span v-if="user.userNameNeedTranslate != '1'">
                              {{ node.label }}
                          </span> -->
                        </span>

                        <!-- <span v-if="node.label != '全部人员'" class="node none"> -->
                        <span v-if="node.label != $t('lable.allStaff') && node.label != $t('lable.unassigned')" class="node none poAub">
                            <el-button type="text" size="mini" @click="createDepartment(-2)" v-if="user.userNameNeedTranslate != '1'">
                                <i class="el-icon-circle-plus-outline"></i> <!-- 新增 -->
                            </el-button>
                            <el-button type="text" size="mini" @click="deleteDep(null)" v-if="user.userNameNeedTranslate != '1'">
                                <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>{{ $t('lable.allStaff') }}
                        </div>
                        <div v-else-if="depData.id == 0" class="nowTime" style="cursor:unset">
                            <i class="fa fa-home"></i>{{ $t('lable.unassigned') }}
                        </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 : ''}} -->
                            <span v-if="translation == '1' && user.userNameNeedTranslate == '1'">{{depData != null ?depData.label:""}}</span>
                            <span v-if="translation == '2' && user.userNameNeedTranslate == '1'"><ww-open-data type='departmentName' :openid='depData.label'></ww-open-data></span>
                            <span v-if="translation == '3' && user.userNameNeedTranslate == '1'"><ww-open-data type='userName' :openid='depData.label'></ww-open-data></span>
                            <span v-if="user.userNameNeedTranslate != '1'">{{depData != null ?depData.label:""}}</span>
                            <!-- {{translation}} -->
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div style="color:#999;font-size:13px;">{{ $t('gong') }}<span :style="total>user.company.staffCountMax?'color:red;':''">{{total}}</span>{{ $t('other.people') }}
                        <span v-if="depData == null || depData.id == -1">({{ $t('shangxian') }}{{user.company.staffCountMax}}{{$t('other.people')}})</span>
                        <!-- <el-link style="font-size:13px;margin-left:10px" type="primary" :underline="false"  @click="recordMsgDialog = true" v-if="recordMsg.result == 0">同步日志</el-link> -->
                        </div>
                        
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="permissions.structureCustomConfig">
                        <el-link type="primary" :underline="false" @click="customConfigShow">{{ $t('customConfiguration') }}</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="permissions.structureExport">
                        <el-link type="primary" :underline="false" @click="showExportDialog">{{ $t('exportpersonnel') }}</el-link>
                    </el-form-item>
                    <el-form-item style="float:right;" v-if="user.timeType.syncDingding == 0 && permissions.structureAdd && user.userNameNeedTranslate != '1'">
                        <el-link type="primary" :underline="false" @click="openInsertDialog(null)">{{ $t('addpersonnel') }}</el-link>
                    </el-form-item>
                    <!--导入薪资-->
                    <el-form-item style="float:right;" v-if="permissions.structurePersonnel">
                        <el-link type="primary" :underline="false" @click="importUserSalary(null)">{{ $t('importSalary') }}</el-link>
                    </el-form-item>
                    
                    <el-form-item style="float:right;" v-if="user.timeType.syncDingding == 0 && permissions.structureImport && user.userNameNeedTranslate != '1'">
                        <el-link type="primary" :underline="false" @click="importUserC">{{ $t('bulkimport') }}</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">{{ $t('associateenterprisemicroidentity') }}</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" v-if="user.userNameNeedTranslate != '1'" :underline="false" @click="syncWithCorpWx">{{ $t('synchronizetheenterprisemicrodirectory') }}</el-link>
                        <el-link type="primary" v-if="user.userNameNeedTranslate == '1'" :underline="false" @click="newSyncWithCorpWx">{{ $t('synchronizetheenterprisemicrodirectory') }}</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">{{ $t('synchronizetheaddressbook') }}</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">{{ $t('jiao-se') }}</span>
                        <el-select v-model="roleId" :placeholder="$t('defaultText.pleaseChoose')" @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">{{ $t('state.states') }}</span>
                        <el-select v-model="status" :placeholder="$t('defaultText.pleaseChoose')" @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="$t('nameoftheperson')" 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()">{{ $t('directstaff') }}</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="$t('lable.name')" >
                  <template slot-scope="scope">
                    <div>
                      <div v-if="user.userNameNeedTranslate == 1">
                        <ww-open-data type='userName' :openid='scope.row.name'></ww-open-data>
                      </div>
                      <div v-else>{{scope.row.name}}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="jobNumber" :label="$t('Worknumber')" ></el-table-column>
                <el-table-column prop="phone" :label="$t('shou-ji')" width="120"></el-table-column>
                <el-table-column prop="departmentName" :label="$t('lable.department')" width="220">
                  <template slot-scope="scope">
                    <div>
                      <div v-if="user.userNameNeedTranslate == 1">
                        <ww-open-data type='departmentName' :openid='scope.row.departmentName'></ww-open-data>
                      </div>
                      <div v-else>{{scope.row.departmentName}}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('jiao-se')" width="100">
                    <template slot-scope="scope">{{scope.row.roleName}}</template>
                </el-table-column>
                <el-table-column prop="monthCost" :label="$t('monthcost')"  v-if="permissions.structurePersonnel">
                    <template slot-scope="scope">{{user.timeType.isSecretSalary==0?(scope.row.monthCost==null?0:scope.row.monthCost):'*'}} {{ $t('yuan') }}</template>
                </el-table-column>
                <el-table-column prop="cost" :label="$t('hourlywage')"  v-if="permissions.structurePersonnel" width="120">
                    <template slot-scope="scope">{{user.timeType.isSecretSalary==0?(scope.row.cost==null?0:scope.row.cost):'*'}} {{ $t('yuan') }}
                        <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="$t('state.states')" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.isActive==0 ? $t('ting-yong')+'(' + scope.row.inactiveDate + ')' : $t('zai-zhi')}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('creationtime')" width="150" prop="createTime">
                </el-table-column>
                <el-table-column :label="$t('operation')" width="300" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="default" v-if="scope.row.roleName == $t('role.superAdministrator') && user.id == scope.row.id" @click="transferRole(scope.row)">{{ $t('transfer') }}</el-button>
                        <el-button size="mini" type="default" v-if="scope.row.roleName != $t('role.superAdministrator') && user.userNameNeedTranslate != 1" @click="resetPwd(scope.row)">{{ $t('reset') }}</el-button>
                        <!-- <el-button size="mini" type="primary" v-if="scope.row.roleName != $t('role.superAdministrator')" @click="openInsertDialog(scope.row)">{{ $t('bian-ji') }}</el-button> -->
                        <el-button size="mini" type="primary" @click="openInsertDialog(scope.row, scope.row.roleName)">{{ $t('bian-ji') }}</el-button>
                        <!-- <el-button size="mini" type="primary" v-if="scope.row.roleName == $t('role.superAdministrator')" @click="openInsertDialog1(scope.row)">{{ $t('bian-ji') }}</el-button> -->
                        <!-- <el-button size="mini" type="danger"  v-if="scope.row.roleName != $t('role.superAdministrator')" @click="deleteUser(scope.row)">删除</el-button> -->
                        <el-button size="mini" type="default" v-if="scope.row.roleName != $t('role.superAdministrator') && scope.row.isActive==1" @click="showDeactiveDialog(scope.row)">{{ $t('ting-yong') }}</el-button>
                        <el-button size="mini" type="success" v-if="scope.row.roleName != $t('role.superAdministrator') && scope.row.isActive==0" @click="setActive(scope.row, 1)">{{ $t('enable') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <!-- 123 -->
                <el-button size="small" @click="handleSelectionZzjgbtn1">{{ $t('btn.cancel') }}</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">{{ $t('modifyingDepartments') }}</el-button>
                <el-button size="small" type="primary" @click="handJue">{{ $t('modifyingRoles') }}</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="$t('changes')" :visible.sync="handleSelectionZzjgshow" v-if="handleSelectionZzjgshow" width="30%">
            <el-form model="" label-width="20%">
                <el-form-item :label="$t('setupdepartment')">
                    <!-- <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" v-if="user.userNameNeedTranslate != 1" :placeholder="$t('qing-xuan-ze-bu-men')" style="width: 100%;"
                    :options="option" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>

                    <vueCascader :size="'small'" :widthStr="'200'" :clearable="true" :subject="option" :radios="false" :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer"> 
                <el-button @click="handleSelectionZzjgshow = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="handleSelectionZzjgbtn2">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>

        <!-- 批量修改角色弹出框 -->
        <el-dialog :title="$t('changes')" :visible.sync="handljues" v-if="handljues" width="30%">
            <el-form model="" label-width="20%">
                <el-form-item :label="$t('settherole')">
                    <el-select v-model="xiuRoleId" :placeholder="$t('defaultText.pleaseChoose')" 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">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="handTrue">{{ $t('btn.determine') }}</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="$t('departmentname')" prop="name">
                    <el-input v-model="depForm.name" :placeholder="$t('peaseenterthe')" clearable style="width: 100%" v-if="user.userNameNeedTranslate != '1'"></el-input>
                    <div v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='departmentName' :openid='depForm.name'></ww-open-data></div>
                </el-form-item>

                <!-- 主要负责人 -->
                <el-form-item :label="$t('Principalpersoninharge')" prop="managerId">
                    <el-select v-model="depForm.managerId" filterable v-if="user.userNameNeedTranslate != '1'" clearable  :placeholder="$t('defaultText.pleaseChoose')" style="width: 100%">
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
                          <span style="float: left">{{ item.name }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
                        </el-option>
                    </el-select>
                    <selectCat :size="'medium'" :widthStr="'360'" v-if="user.userNameNeedTranslate == '1'" :subject="users" :subjectId="depForm.managerId" :distinction="'3'" @selectCal="selectCal"></selectCat>
                </el-form-item>

                <!-- 其他负责人 --> 
                <el-form-item :label="$t('responsiblepersons')" prop="managerId">
                    <el-select v-model="depForm.otherManagerIds" filterable v-if="user.userNameNeedTranslate != '1'" clearable multiple style="width: 100%" :placeholder="$t('defaultText.pleaseChoose')" >
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
                          <span style="float: left">{{ item.name }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
                        </el-option>
                    </el-select>
                    <selectCat :size="'medium'" :widthStr="'360'" v-if="user.userNameNeedTranslate == '1'" :subject="users" :subjectId="depForm.otherManagerIds" :distinction="'4'" @selectCal="selectCal"></selectCat>
                </el-form-item>
                <!-- 直属领导 -->
                <el-form-item :label="$t('leadership')" prop="reportAuditUserid" v-if="user.timeType.needDeptAudit && user.userNameNeedTranslate != '1'">
                    <el-select v-model="depForm.reportAuditUserid" filterable  clearable  :placeholder="$t('defaultText.pleaseChoose')" style="width: 100%">
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <selectCat :size="'medium'" :widthStr="'360'" v-if="user.userNameNeedTranslate == '1'" :subject="users" :subjectId="depForm.reportAuditUserid" :distinction="'5'" @selectCal="selectCal"></selectCat>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="departmentVisible = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="submitDepartment" >{{ $t('btn.submit') }}</el-button>
            </span>
        </el-dialog>

        <!-- 新增/编辑人员的Dialog -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="580px" :top="'7.5vh'">
            <div style="height: 62vh;overflow: auto;">
              <el-form ref="form12" :model="insertForm" :rules="rules" label-width="80px">
                  <el-form-item :label="$t('lable.name')" prop="name" v-if="user.userNameNeedTranslate != '1'">
                      <el-input v-model="insertForm.name" :placeholder="$t('peaseenterthe')" clearable :disabled="user.userNameNeedTranslate == '1'"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('lable.name')" prop="name"  v-if="user.userNameNeedTranslate == '1'">
                      <div><ww-open-data type='userName' :openid='insertForm.name'></ww-open-data></div>
                  </el-form-item>
                  <el-form-item :label="$t('phone')" prop="phone">
                      <el-input v-model="insertForm.phone" :placeholder="$t('peaseenterthe')" clearable></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('Worknumber')" prop="jobNumber">
                      <el-input v-model="insertForm.jobNumber" :placeholder="$t('peaseenterthe')" clearable></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('payway')" prop="salaryType" v-if="permissions.structurePersonnel&&user.timeType.isSecretSalary==0">
                      <el-radio-group v-model="insertForm.salaryType" @change="onSalaryTypeChange">
                      <el-radio  :label="0" >{{ $t('fixedmonthlycost') }}</el-radio>
                      <el-radio  :label="1">{{ $t('hourlywages') }}</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item :label="$t('monthcost')" prop="monthCost" v-if="insertForm.salaryType == 0 && permissions.structurePersonnel&&user.timeType.isSecretSalary==0">
                      <el-input v-model="insertForm.monthCost" id="mc" @input="oninput" :placeholder="$t('yuechengben')" clearable @keyup.native="restrictNumber('mc')"></el-input>
                      <span style="color:orange;font-size:12px;">{{ $t('yuegongzuoo') }}{{timeType.monthDays}}{{ $t('time.day') }}，{{$t('meitian')}}{{timeType.allday}}{{ $t('xiaoshi') }}</span>
                      <el-link :underline="false" style="color:blue;font-size:12px;margin-left:7px;" href="#/timetype">{{ $t('modifyworkinghours') }}</el-link>
                  </el-form-item>
                  <el-form-item :label="$t('hourlywage')" 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="restrictNumber4('cc')"
                      :placeholder="$t('yuechengbenxiaoshi')" clearable></el-input>
                      <span style="margin-left:25px;">{{ $t('effectivedate') }}</span>
                      <el-date-picker v-model="insertForm.costApplyDate" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                  <el-form-item :label="$t('lable.department')" 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="$t('qing-xuan-ze-bu-men')" style="width: 100%"
                      :options="option" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false"  clearable v-if="user.userNameNeedTranslate != 1"></el-cascader>

                      <vueCascader :size="'medium'" :widthStr="'430'" :clearable="true" :subject="option" :subjectId="insertForm.departmentId" :radios="true" :distinction="'2'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>

                  </el-form-item>
                  <!-- <el-form-item :label="$t('immediatesuperior')">
                      <el-select v-model="insertForm.superiorId" :placeholder="$t('defaultText.pleaseChoose')" 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="$t('jiao-se')" prop="roleId" v-if="roleNameFlg != $t('role.superAdministrator')">
                      <el-select v-model="insertForm.roleId" :placeholder="$t('defaultText.pleaseChoose')" 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="$t('defaultText.pleaseChoose')" 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="$t('peaseenterthe')" clearable></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('entrytime')" prop="phone">
                      <el-date-picker v-model="insertForm.inductionDate" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                  <el-form-item :label="$t('postrank')" prop="phone">
                      <el-input v-model="insertForm.position" :placeholder="$t('joblevel')" clearable></el-input>
                  </el-form-item>

                  <div class="zhaunye"><p>{{ $t('professionalcertificate') }}</p><p><el-link type="primary" @click="addCertificateList()">{{ $t('addprofessionalcertificate') }}</el-link><el-link v-if="permissions.structureCertificate" type="primary" @click="managementDiolog = true" style="margin-left: 20px">{{ $t('professionalCertificate inManagement') }}</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="$t('defaultText.pleaseChoose')" 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>{{ $t('certificate') }}</span><el-date-picker size="mini" v-model="item.certDate" type="date" value-format="yyyy-MM-dd" :placeholder="$t('certificatedate')" 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>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteUser(insertForm)" style="float:left;">{{ $t('btn.delete') }}</el-button>
                <el-button @click="dialogVisible=false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="submitInsert('insertForm')" :loading="submitLoading">{{ $t('btn.submit') }}</el-button>
            </span>
        </el-dialog>
        <!-- 编辑超级管理员的Dialog -->
        <el-dialog :title="$t('editorialstaff')" :visible.sync="dialogVisible1" width="550px" >
            <el-form ref="form1" :model="insertForm" :rules="rules" label-width="80px">
                <el-form-item :label="$t('lable.name')" prop="name">
                    <el-input v-model="insertForm.name" :placeholder="$t('peaseenterthe')" clearable :disabled="user.userNameNeedTranslate == '1'"></el-input>
                </el-form-item>
                <el-form-item :label="$t('phone')" prop="phone">
                    <el-input v-model="insertForm.phone" :placeholder="$t('peaseenterthe')" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('Worknumber')" prop="jobNumber">
                    <el-input v-model="insertForm.jobNumber" :placeholder="$t('peaseenterthe')" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('payway')" prop="salaryType" v-if="permissions.structurePersonnel">
                    <el-radio-group v-model="insertForm.salaryType" @change="onSalaryTypeChange">
                    <el-radio  :label="0" >{{ $t('fixedmonthlycost') }}</el-radio>
                    <el-radio  :label="1">{{ $t('hourlywages') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('monthcost')" prop="monthCost" v-if="insertForm.salaryType == 0 && permissions.structurePersonnel" >
                    <el-input v-model="insertForm.monthCost" id="monthCost" @input="oninput" @keyup.native="restrictNumber('monthCost')" :placeholder="$t('yuechengben')" clearable></el-input>
                    <span style="color:orange;font-size:12px;">{{ $t('yuegongzuoo') }}{{timeType.monthDays}}{{ $t('time.day') }}，{{$t('meitian')}}{{timeType.allday}}{{ $t('xiaoshi') }}</span>
                    <el-link :underline="false" style="color:blue;font-size:12px;margin-left:7px;" href="#/timetype">{{ $t('modifyworkinghours') }}</el-link>
                </el-form-item>
                <el-form-item :label="$t('hourlywage')" prop="cost" v-if="permissions.structurePersonnel">
                    <el-input v-model="insertForm.cost" id="cost" :disabled="insertForm.salaryType == 0" @keyup.native="restrictNumber4('cost')" style="width:120px;"
                     :placeholder="$t('yuechengbenxiaoshi')" clearable></el-input>
                    <span style="margin-left:25px;">{{ $t('effectivedate') }}</span>
                    <el-date-picker v-model="insertForm.costApplyDate"  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('lable.department')" prop="departmentId">
                    <el-cascader v-model="insertForm.departmentId" 
                    :placeholder="$t('qing-xuan-ze-bu-men')" 
                    style="width: 100%"
                    :options="option" 
                    :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" 
                    clearable></el-cascader>
                </el-form-item>
                <!-- <el-form-item :label="$t('immediatesuperior')">
                    <el-select v-model="insertForm.superiorId" :placeholder="$t('defaultText.pleaseChoose')" 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">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="submitInsert1" :loading="submitLoading">{{ $t('btn.submit') }}</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="$t('historicalpersonnelcost')" :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="$t('lable.name')" >
                  <template slot-scope="scope">
                    <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='scope.row.userName'></ww-open-data></span>
                    <span v-else>{{scope.row.userName}}</span>
                  </template>
                  
                </el-table-column>
                <el-table-column prop="indate" :label="$t('updatetime')" width="150px">
                </el-table-column>
                <el-table-column prop="salaryType" :label="$t('payway')" >
                    <template slot-scope="scope" >
                        {{scope.row.salaryType==0?$t('monthlysalary'):$t('hourlywages')}}
                    </template>
                </el-table-column>
                <el-table-column prop="monthCost" :label="$t('monthlysalarys')" >
                    <template slot-scope="scope" >
                        {{scope.row.monthCost}} {{ $t('yuan') }}
                    </template>
                </el-table-column>
                <el-table-column prop="cost" :label="$t('hourlywage')" >
                    <template slot-scope="scope" >
                        {{scope.row.cost}} {{ $t('yuan') }}
                    </template>
                </el-table-column>
                
            </el-table>
        </el-dialog>
        <!--导出人员 -->
        <el-dialog :title="$t('exportingpeople')" :visible.sync="exportDialogVisible" width="550px" >
            <el-form  label-width="100px">
                <el-form-item :label="$t('export.export')" >
                    <el-radio-group v-model="containInvalid" >
                    <el-radio  :label="1" >{{ $t('lable.allStaff') }}</el-radio>
                    <el-radio  :label="0" >{{ $t('serviceonly') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportUsers">{{ $t('export.export') }}</el-button>
            </span>
        </el-dialog>
        <!-- 转让超级管理员权限 -->
        <el-dialog :title="$t('permissiontotransfer')" :visible.sync="transferDialog" width="550px" >
            <el-form  label-width="200px">
                <el-form-item :label="$t('administratorroleto')" >
                    <el-select v-model="toUserId" style="width:300px" filterable clearable v-if="user.userNameNeedTranslate != '1'">
                        <el-option v-for="item in allActiveUsers" :key="item.id" :value="item.id" :label="item.name">
                        </el-option>
                    </el-select>
                    <selectCat :size="'medium'" :widthStr="'300'" v-if="user.userNameNeedTranslate == '1'" :subject="allActiveUsers" :subjectId="toUserId" :distinction="'12'" @selectCal="selectCal"></selectCat>
                </el-form-item>
                <el-form-item :label="$t('transferoftheirrole')" >
                    <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">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="showConfirmDialog">{{ $t('btn.determine') }}</el-button>
            </span>
        </el-dialog>

        <!--停用时选择日期 -->
        <el-dialog :title="$t('terminationstaff')" :visible.sync="deactiveDialog" width="550px" >
            <el-form  label-width="200px">
                <el-form-item :label="$t('employeedeparture')" >
                    <el-date-picker type="date" v-model="deactiveDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="$t('defaultText.pleaseChoose')" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" @click="deactiveDialog = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="confirmDeactive">{{ $t('btn.determine') }}</el-button>
            </span>
        </el-dialog>
        <!-- 管理专业证书 -->
        <el-dialog :title="$t('professionalCertificate inManagement')" :visible.sync="managementDiolog" width="500px" :before-close="handleClose">
            <div>
                <el-table :data="managementTableData" style="width: 100%" height="400">
                    <el-table-column prop="name" :label="$t('names')" width="280"></el-table-column>
                    <el-table-column :label="$t('operation')" width="180">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="primary" size="small" @click="editorManagementForm(scope.row)">{{ $t('bian-ji') }}</el-button>
                                <el-button type="danger" size="small" @click="deteManagementForm(scope.row)">{{ $t('btn.delete') }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="managementDiolog = false">{{ $t('Shutdown') }}</el-button>
                <el-button type="primary" @click="addManagementDiologs()">{{ $t('add') }}</el-button>
            </span>
        </el-dialog>
        <!-- 新增项目管理专业 -->
        <el-dialog :title="$t('addededitedmanagement')" :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="$t('professionalCertificateName')" prop="name">
                        <el-input v-model="managementForm.name" :placeholder="$t('peaseenterthe')"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addManagementDiolog = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="addManagementForm('managementForm')">{{ $t('btn.submit') }}</el-button>
            </span>
        </el-dialog>
        <!-- 自定义配置项 -->
        <el-dialog :title="$t('managecustomconfigurationitems')" 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="$t('enteranameforacustomconfigurationitem')" 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">{{ $t('dropdown') }}</el-radio>
                    <el-radio size="medium" :disabled="!item.name" v-model="item.type" :label="1">{{ $t('input') }}</el-radio>
                <span style="display:inline-block;">
                    <el-button v-if="cusItemTypes[index] == 0" type="primary" size="small" @click="getConfigItemBtn(item)">{{ $t('configurationoptions') }}</el-button>
                    <span v-if="!item.id && item.name && item.type == 0" style="color:#999;font-size:13px">{{ $t('canconfiguretheoptions') }}</span>
                </span>
                <el-button style="margin-left:20px" type="danger" size="small" v-if="item.id" @click="customConfigDelete(item,index)">{{ $t('btn.delete') }}</el-button>
            </p>
            
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="customConfigDialog = false" >{{ $t('Shutdown') }}</el-button>
                <!-- <el-button type="primary" @click="customConfigListAdd" :disabled="customConfigList.length >= 5">新增</el-button> -->
                <el-button type="primary" @click="customConfigListSave" :loading="saveBtnLoading">{{ $t('save') }}</el-button>
                
            </div>


            <!-- 为下拉时的选项配置 -->
            <el-dialog :title="$t('configurationoptions')" 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="$t('headerTop.serialNumber')">
                        <template slot-scope="scope" >
                            {{scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" :label="$t('names')" ></el-table-column>
                    <el-table-column :label="$t('operation')" width="150">
                        <template slot-scope="scope" >
                            <el-button size="small" type="primary" @click="configItemAorM(scope.row)">{{ $t('bian-ji') }}</el-button>
                            <el-button size="small" type="danger" @click="configItemDelete(scope.row)">{{ $t('btn.delete') }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="configItemDialog = false" >{{ $t('Shutdown') }}</el-button>
                    <el-button type="primary" @click="configItemAorM" >{{ $t('newConfigurationOptions') }}</el-button>
                </div>

                <el-dialog :title="$t('addededitedconfigurationoptions')" v-if="configItemAorMDialog" :visible.sync="configItemAorMDialog" :close-on-click-modal="false" customClass="customWidth" width="500px" append-to-body>
                    <span>{{ $t('names') }}</span>
                    <el-input size="medium" v-model="AorMitem.name" :placeholder="$t('enteranameforacustomconfigurationitem')" style="width:200px;margin-right:20px" maxlength="8"></el-input>

                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="configItemAorMDialog = false" >{{ $t('btn.cancel') }}</el-button>
                        <el-button type="primary" @click="configItemAorMSure" >{{ $t('btn.submit') }}</el-button>
                    </div>
                </el-dialog>
            </el-dialog>
        </el-dialog>

        <!-- 批量导入 -->
        <el-dialog :title="$t('batchimportofpersonnel')" v-if="importDialog" :visible.sync="importDialog" customClass="customWidth" width="500px">
            <p>1. {{ $t('other.download') }}
            <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/人员导入模板.xlsx" :download="$t('personnelimporttemplate')+'.xlsx'">{{$t('personnelimporttemplate')}}.xlsx</el-link>
            </p>
            <p>2. {{ $t('exceltemplateanduploadit') }}。</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">{{ $t('other.startImporting') }}</el-button>
            </el-upload>
            </p>
        </el-dialog>
        <!--薪资导入-->
        <el-dialog :title="$t('importSalary')" v-if="importUserSalaryDialog" :visible.sync="importUserSalaryDialog" customClass="customWidth" width="500px">
            <p>1. {{ $t('other.download') }}
            <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/薪资导入模板.xlsx" :download="$t('salaryTemplate')+'.xlsx'">{{$t('salaryTemplate')}}.xlsx</el-link>
            </p>
            <p>2. 
              {{ $t('Selectmonth') }}
              <el-date-picker v-model="ymonth" type="month" :placeholder="$t('Selectmonth')" format="yyyy-MM" value-format="yyyy-MM"></el-date-picker>
              <br/><span style="margin-left:10px;margin-top:8px;color:#999;">({{$t('Recalculatereportedcostsforthemonth')}})</span>
            </p>
            <p>3. {{ $t('exceltemplateanduploadit') }}。</p>
            <p style="display: flex;justify-content: center;padding-bottom:1em;">
                <el-upload ref="uploadSalaryRef"  action="#" :limit="1" :http-request="importSalaryData" :show-file-list="false">
                <el-button type="primary" :underline="false" :loading="importingSalaryData">{{ $t('other.startImporting') }}</el-button>
            </el-upload>
            </p>
        </el-dialog>
        <el-dialog :title="$t('synchronizetheenterprisewechataddressbook')" v-if="showSyncCWDialog" :visible.sync="showSyncCWDialog" customClass="customWidth" width="500px">
            <p>{{ $t('oneWeix') }} 
                <el-popover placement="top" width="1200" trigger="hover">
                    <div class="imgFlex">
                        <div><img src="../../assets/image/Step1.jpg" style="width: 380px"/> <p><b>{{ $t('firststep') }}</b></p> </div>
                        <div class="imgBor"> <p></p> <img src="../../assets/image/Step2.jpg" style="width: 380px"/> <p><b>{{ $t('secondstep') }}</b></p></div>
                        <div><img src="../../assets/image/Step3.jpg" style="width: 380px"/> <p><b>{{ $t('thirdstep') }}</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">
            {{ $t('twoWei') }} 
            </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">{{ $t('startsynchronization') }}</el-button>
            </p>
        </el-dialog>
        <el-dialog :title="$t('correlationresults')" v-if="syncMembByCardTimeResultGialog" :visible.sync="syncMembByCardTimeResultGialog" customClass="customWidth" width="500px">
            <p style="padding-bottom:30px;">
            {{syncMembByCardTimeMsg}}
            </p>
        </el-dialog>
        <el-dialog title="同步日志" v-if="recordMsgDialog" :visible.sync="recordMsgDialog" customClass="customWidth" width="500px">
            <el-row style="height:70px;line-height:40px;padding-top:30px;padding-left:20px">
              <el-col :span="6">操作时间</el-col>
              <el-col :span="18">{{recordIndate(recordMsg.indate)}}</el-col>
            </el-row>
            <el-row style="height:70px;line-height:40px;padding-bottom:30px;padding-left:20px">
              <el-col :span="6">错误信息</el-col>
              <el-col :span="18">{{recordMsg.msg}}</el-col>
            </el-row>
        </el-dialog>
    </div>
  </div>
</template>

<script>
// 左右滑動
import dragMixin from "@/common/js/tensile.js";
import util from "../../common/js/util";
 // 引入自定义级联组件
import vueCascader from "@/components/cascader.vue"
// 自定义select组件
import selectCat from "@/components/select.vue"

let that
export default {
  name: "Home",
  components: {
    vueCascader,
    selectCat
  },
  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 {
      recordMsgDialog: false,
      recordMsg: {indate: [],msg:''},
      roleNameFlg: '',
      syncHistoryReport: true,
      ymonth: null,
      importingSalaryData: false,
      translation: '1', // 1、文字, 2、部门, 3、人员
      fullscreenLoading: false,
      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: [
        this.$t('role.ordinaryEmployees'),
        this.$t('role.superAdministrator'),
        this.$t('role.systemAdministrator'),
        this.$t('role.companyTop'),
        this.$t('role.financialAdministrator'),
        this.$t('role.projectManager'),
        this.$t('role.companyLeadership'),
      ],
      roleDescArray: [
        { label: this.$t('role.ordinaryEmployees'), value: 0, desc: this.$t('eportandarticipate') },
        {
          label: this.$t('role.systemAdministrator'),
          value: 2,
          desc: this.$t('systemadministrators'),
        },
        // {label:"公司高层",value:3, desc:"查阅项目信息，人员工时情况"},
        {
          label: this.$t('role.financialAdministrator'),
          value: 4,
          desc: this.$t('financial'),
        },
        { label: this.$t('role.projectManager'), value: 5, desc: this.$t('createandmanageprojects') },
        {
          label: this.$t('role.companyLeadership'),
          value: 6,
          desc: this.$t('viewdailyreports'),
        },
      ],
      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: this.$t('lable.allStaff'),
        },
        {
          id: 0,
          label: this.$t('lable.unassigned'),
        },
      ],
      option: [],
      depData: {
        id: -1,
        label: this.$t('lable.allStaff'),
      },
      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: this.$t('defaultText.PleaseEnterYourName'), trigger: "blur" }],
        // phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        // role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        roleId: [{ required: true, message: this.$t('pleaseselectroles'), trigger: "blur" }],
        cost: [{ required: true, message: this.$t('pleaseinputcost'), trigger: "blur" }],
        monthCost: [
          { required: true, message: this.$t('monthlycost'), trigger: "blur" },
        ],
      },
      managementFormRou: {
        name: [{ required: true, message: this.$t('pleaseenterprofessionalcertificate'), trigger: "blur" }],
      },
      dialogVisible1: false,

      departmentVisible: false,
      depTitle: "",
      depForm: {
        id: null,
        name: null,
        parentId: null,
        managerId: null,
      },
      depRules: {
        name: [{ required: true, message: this.$t('pleaseenterthedepartmentname'), trigger: "blur" }],
      },
      timeType: {},
      keyword: "",
      rolesa: [
        {
          value: "",
          label: this.$t('all'),
        },
        {
          value: "6",
          label: this.$t('role.companyLeadership'),
        },
        {
          value: "2",
          label: this.$t('role.systemAdministrator'),
        },
        {
          value: "4",
          label: this.$t('role.financialAdministrator'),
        },
        {
          value: "5",
          label: this.$t('role.projectManager'),
        },
        {
          value: "0",
          label: this.$t('role.ordinaryEmployees'),
        },
      ],
      states: [
        {
          value: "",
          label: this.$t('all'),
        },
        {
          value: "1",
          label: this.$t('zai-zhi'),
        },
        {
          value: "0",
          label: this.$t('ting-yong'),
        },
      ],
      status: "1",
      role: "",
      jDarr: [],
      importUserSalaryDialog: false,
      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,
      nextCursor: ''
    };
  },
  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: {
    recordIndate(date){
            let datestr = ''
            datestr += date[0]
            datestr += '-'
            datestr += date[1] < 10 ? '0' + date[1] : date[1]
            datestr += '-'
            datestr += date[2] < 10 ? '0' + date[2] : date[2]
            datestr += '\u3000'
            datestr += date[3] < 10 ? '0' + date[3] : date[3]
            datestr += ':'
            datestr += date[4] < 10 ? '0' + date[4] : date[4]
            datestr += ':'
            datestr += date[5] < 10 ? '0' + date[5] : date[5]
            return datestr
    },
    getRecordMsg(){
      this.http.post('/company/getSyncInfo',{
      },res => {
        if(res.code == 'ok'){
          if(res.data){
            this.recordMsg = res.data
            if(this.recordMsg.result == 0){
              this.recordMsgDialog = true
            }
          }
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    syncMembByCardTime() {
      this.syncMembByCardTimeResultGialog = true;
      this.syncMembByCardTimeMsg = this.$t('synchronizingtheassociation');
        this.http.post("/wxcorp/syncMembByCardTime",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          if (res.code == "ok") {
            this.syncMembByCardTimeMsg = res.data;
            this.getUser();
            //人员同步成功，再去同步获取本月的人员
            this.getCurMonthDayData();
          } else {
            this.syncMembByCardTimeMsg = res.msg;
          }
        },
        (err) => {
          this.syncMembByCardTimeMsg = err;
        }
      );
    },
    getCurMonthDayData() {
        this.http.post("/wxcorp/getCurMonthDayData",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          if (res.code == "ok") {
          } else {
          }
        },
        (err) => {
        }
      );
    },
    saveContactSecret() {
      if (!this.contactSecret) {
        this.$message({
          message: this.$t('booksecret'),
          type: "error",
        });
        return;
      }
      this.http.post(
        "/wx-corp-info/saveContactSecret",
        {
          corpid: this.corpid,
          contactSecret: this.contactSecret,
        },
        (res) => {
          if (res.code == "ok") {
            this.$message({
              message: this.$t('savesuccess'),
              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: this.$t('synchronoussuccesss'),
              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",
          });
        }
      );
    },
    // 从企业微信同步通讯录 (待测试)
    newSyncWithCorpWx() {
      const loading = this.$loading({
          lock: true,
          text: '同步中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.http.post(
        "/wxcorp/getCorpMembsFromPlatform",
        {
          companyId: this.user.companyId,
        },
        (res) => {
          loading.close();
          if (res.code == "ok") {
            this.$message({
              message: '同步成功',
              type: "success",
            });
            this.getDepartment();
            this.getUser();
            this.getUsers();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          loading.close();
          this.tableLoading = false;
          this.$message({
            message: err,
            type: "error",
          });
        }
      );
    },
    // 从钉钉同步通讯录
    syncWithCorpDingding() {
      this.$confirm(
        this.$t('areyousuretosynchronize '),
        this.$t('other.prompts'),
        {
          confirmButtonText: this.$t('btn.determine'),
          cancelButtonText: this.$t('btn.cancel'),
          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: this.$t('operationcancelled'),
            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: this.$t('savesuccess'),
              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: this.$t('message.successfullyDeleted'),
                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: this.$t('namecannotbeempty'),
          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: this.$t('message.submittedSuccessfully'),
              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: this.$t('message.successfullyDeleted'),
              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(this.$t('qing-xuan-ze-bu-men'));
        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: this.$t('message.modifyTheSuccess'),
              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(this.$t('pleaseselectpersonnel'));
        return;
      }
      this.handleSelectionZzjgshow = true;
    },
    handJue() {
      if (this.handleSelectionZzjgDate.length == 0) {
        this.$message(this.$t('pleaseselectpersonnel'));
        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: this.$t('operationissuccessful'),
              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(this.$t('deletthisemployee'), this.$t('other.prompts'), {
        //type: 'warning'
      }).then(() => {
        this.http.post(
          "/user/deleteUser",
          {
            userId: targetUser.id,
          },
          (res) => {
            if (res.code == "ok") {
              this.$message({
                message: this.$t('message.successfullyDeleted'),
                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: this.$t('stopsuccess'),
              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);
      }
    },
    restrictNumber4(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\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: this.$t('wanttotransfer'),
          type: "error",
        });
        return;
      }
      if (!this.myRoleId) {
        this.$message({
          message: this.$t('pleaseselectaftertransfer'),
          type: "error",
        });
        return;
      }
      this.$confirm(
        this.$t('superadministratorrole'),
        this.$t('other.prompts'),
        {
          //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 = this.$t('listofallemployees') + ".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,
        '/user/getSimpleActiveUserList',
        {},
        (res) => {
          if (res.code == "ok") {
            // this.users = res.data.records;
            this.users = res.data;
          } 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(4);
    },
    // 获取本公司的工作时间设置
    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;
    },
    importUserSalary() {
      this.importUserSalaryDialog = true;
    },
    // 批量导入人员
    importUser(item) {
      //首先判断文件类型
      let str = item.file.name.split(".");
      let format = str[str.length - 1];
      if (format != "xls" && format != "xlsx") {
        this.$message({
          message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
          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: this.$t('other.importSuccess'),
                type: "success",
              });
              //重新读取列表
              this.getUser();
              this.importDialog = false;
            } 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",
            });
          }
        );
      }
    },
    //导入人员薪资
    importSalaryData(item) {
      //首先判断文件类型
      let str = item.file.name.split(".");
      let format = str[str.length - 1];

      if (format != "xls" && format != "xlsx") {
        this.$message({
          message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
          type: "error",
        });
      } else {
        let formData = new FormData();
        formData.append("file", item.file);
        formData.append("ymonth", this.ymonth);
        this.importingSalaryData = true;
        this.http.uploadFile(
          "/user/importMonthCost",
          formData,
          (res) => {
            this.importingSalaryData = false;
            this.$refs.uploadSalaryRef.clearFiles();
            this.listLoading = false;
            if (res.code == "ok") {
              this.$message({
                message: this.$t('other.importSuccess'),
                type: "success",
              });
              //重新读取列表
              this.getUser();
              this.importUserSalaryDialog = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          },
          (error) => {
            this.importingSalaryData = false;
            this.$refs.uploadSalaryRef.clearFiles();
            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",
          cursor: this.nextCursor, // 游标
        },
        (res) => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.list = res.data.records;
            this.total = res.data.total;
            this.nextCursor = res.data.nextCursor
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        },
        (error) => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error",
          });
        }
      );
    },

    resetPwd(user) {
      this.$confirm(this.$t('wanttoor') + user.name + this.$t('resetyourpassword'), this.$t('saresetyourpassword'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: "warning",
      })
        .then(() => {
          this.http.post(
            "/user/resetPwd",
            { userId: user.id },
            (res) => {
              if (res.code == "ok") {
                this.$message({
                  message: this.$t('linglingling'),
                  type: "success",
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            },
            (error) => {
              this.listLoading = false;
              this.$message({
                message: error,
                type: "error",
              });
            }
          );
        })
        .catch(() => {});
    },

    // 新增、编辑人员
    openInsertDialog(row, roleNameFlg) {
      this.roleNameFlg = roleNameFlg
      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,
                jobNumber: res.data.jobNumber
              };
              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 = this.$t('editorialstaff');
      } 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,
          jobNumber:null,
        };
        this.title = this.$t('addorialstaff');
        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: this.$t('repeat'),
              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: this.$t('certificateisincomplete'),
              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,
            jobNumber: this.insertForm.jobNumber,
          };

          // 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 ? this.$t('xiu-gai') : this.$t('create') + this.$t('other.successful'),
                    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: this.$t('switchingroles'),
              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.$t('enable') : this.$t('ting-yong');
      this.$confirm(this.$t('sureyouwantto') + txt + " " + item.name + this.$t('ma'), this.$t('zhang-hao') + txt, {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        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 + this.$t('other.successful'),
                  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,
              jobNumber: res.data.jobNumber,
            };
          } 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,
            jobNumber: this.insertForm.jobNumber,
          };
          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: this.$t('message.modifyTheSuccess'),
                  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: this.$t('lable.allStaff'),
            });
            list.push({
              id: 0,
              label: this.$t('lable.unassigned'),
            });
            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) {
      this.theValues(data)
      console.log(data)
      if (this.depData == null || data.id != this.depData.id) {
        this.depData = data;
        this.page = 1;
        this.getUser();
      }
    },

    theValues(obj) {
        if(obj.id != '-1') {
          this.translation = '2'
        } else {
          this.translation = '1'
        }
    },
    // 新增、修改部门
    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 = this.$t('subdepartment');
        } else if (i == -1) {
          //创建一级部门
          that.depForm = {
            id: null,
            name: null,
            parentId: null,
            managerId: null,
          };
          that.depTitle = this.$t('addsubdepartment');
        } 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) {
            if(Array.isArray(that.depData.otherManagerIds)) {
              this.$set(that.depForm, 'otherManagerIds', that.depData.otherManagerIds)
            } else {
              this.$set(that.depForm, 'otherManagerIds', that.depData.otherManagerIds.split(','))
            }
          } 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 = this.$t('editorialdepartment');
        }
        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 && this.user.timeType.needDeptAudit) {
            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 ? this.$t('newsuccess') : this.$t('message.modifyTheSuccess'),
                  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(this.$t('deletethedepartment') + that.depData.label + this.$t('ma'), this.$t('deletethedepartmentdsa'), {
            confirmButtonText: this.$t('btn.determine'),
            cancelButtonText: this.$t('btn.cancel'),
            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: this.$t('message.successfullyDeleted'),
                    type: "success",
                  });
                  that.depData = {
                    id: -1,
                    label: this.$t('lable.allStaff'),
                  };
                  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)
      console.log(this.nextCursor, '游标')
      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,
          roleId: this.roleId,
          cursor: this.nextCursor,
          onlyDirect: this.onlyDirect ? "1" : "0"
        },
        (res) => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.list = res.data.records;
            this.total = res.data.total;
            this.nextCursor = res.data.nextCursor
          } 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 != this.$t('role.systemAdministrator')) {
                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: this.$t('operationissuccessful'),
                  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(
        this.$t('operationmaycausedatalossAreyousuredeletethedata'),
        this.$t('deletionofprofessionalcertificate'),
        {
          confirmButtonText: this.$t('btn.determine'),
          cancelButtonText: this.$t('btn.cancel'),
          type: "warning",
        }
      )
        .then(() => {
          this.http.post(
            "/company-cert/delete",
            {
              id: item.id,
            },
            (res) => {
              if (res.code == "ok") {
                this.$message({
                  message: this.$t('operationissuccessful'),
                  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: this.$t('thedeletionhasbeencancelled'),
          });
        });
    },
    // 点击添加更多帧数
    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);
    },
    getStaffCountMax() {
      this.http.post(
            "/company/getStaffCountMax",
            {companyId:this.user.companyId},
            (res) => {
              if (res.code == "ok") {
                this.user.company.staffCountMax = res.data;
              } 
            },
            (error) => {
              this.$message({
                message: error,
                type: "error",
              });
            }
          );
    },
    // // 获取企业微信的参数
    // agentConfig() {
    //    var curUrl = location.href.split("#")[0];
    //    this.http.post("/wxcorp/getCorpWXConfig", {url: curUrl, token: this.user.id}, (res) => {
    //       if (res.code == "ok") {
    //         wx.config({ 
    //           beta: true,
    //           debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //           appId: res.data.appid, // 必填，公众号的唯一标识 
    //           timestamp: res.data.timestamp, // 必填，生成签名的时间戳 
    //           nonceStr: res.data.noncestr, // 必填，生成签名的随机串 
    //           signature: res.data.sign, // 必填，签名，见附录1 
    //           jsApiList: ['chooseImage','previewImage','uploadImage','downloadImage','previewFile','getLocation','agentConfig'] 
    //         });
    //           var that = this;
    //           wx.ready(function(){
    //               // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    //                   that.http.post("/wxcorp/getCorpWXAgentConfig", {url: curUrl, token: that.user.id}, (res) => {
    //                       if (res.code == "ok") {
    //                       console.log()
    //                         wx.agentConfig({
    //                             corpid: res.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
    //                             agentid: res.data.agentid, // 必填，企业微信的应用id （e.g. 1000247）
    //                             timestamp: res.data.timestamp, // 必填，生成签名的时间戳
    //                             nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
    //                             signature: res.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
    //                             jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
    //                             success: function (result) {
    //                                 console.log(result, '请求微信成功')
    //                                 console.log(window, 'window')
    //                                 //  wx.agentConfig成功回调后，WWOpenData 才会注入到 window 对象上面
    //                                 window.WWOpenData.bind(document.querySelector('ww-open-data'))
    //                             },
    //                             fail: function (res) {
    //                                 console.log('查看错误信息', res)
    //                                 if (res.errMsg.indexOf('function not exist') > -1) {
    //                                     alert('版本过低请升级')
    //                                 }
    //                             },
    //                         })
    //                       }
    //                   }, (error) => {
    //                       console.log('查看错误信息' + res)
    //                       if (error.errMsg.indexOf('function not exist') > -1) {
    //                           alert('版本过低请升级')
    //                       }
    //                   })
    //           });
    //       }
    //    }, (error) => {
    //       console.log(error, '哦耶')
    //    })
    // },

    // 自定义组件事件
    vueCasader(obj) {
        if(obj.distinction == '1') {
          let arr = []
          arr.push(obj.id)
          this.handleSelectionZzjgwillchange = arr
        } else if(obj.distinction == '2') {
          let arr = []
          arr.push(obj.id)
          this.insertForm.departmentId = arr
        } 
    } ,
    // 自定义组件事件
    selectCal(obj) {
      if(obj.distinction == '4') {
        this.depForm.otherManagerIds = obj.id
      } else if(obj.distinction == '3') {
        this.depForm.managerId = obj.id
      } else if(obj.distinction == '5'){
        this.depForm.reportAuditUserid = obj.id
      } else if(obj.distinction == '12'){
        this.toUserId = obj.id
      }
    }
  },
  mounted() {
    this.deactiveDate = util.formatDate.format(new Date(), "yyyy-MM-dd");
    this.ymonth = util.formatDate.format(new Date(), "yyyy-MM");
    this.getDepartment();
    this.getUser();
    this.getCompanyTimeSetting();
    this.getUsers();
    this.acquireRole();
    this.getProfessional();
    this.getStaffCountMax();
    if(this.user.dingdingUserid != null || this.user.corpwxUserid != null){
      this.getRecordMsg()
    }
    // 获取企业微信的参数
    // if(this.user.companyId == '1081' || this.user.companyId == '7') {
    //   this.agentConfig()
    // }
  },
};
</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>