<template>
<div class="ContainerBox">

 <section class="ContainerBoxList" v-if="StaffBoxFlag">
    <!-- 备注区域 -->
    <section class="remarkBox">
        <div class="remarkInfo">
            <i class="el-icon-warning-outline el-icon-flag"></i>
            <span class="tipsFlag">
            <span>1. 若您是{{$SuperviseStr.depart}}管理员，则只能查看到可管理的{{$SuperviseStr.employee}}信息，点击数据看板的标签卡可以快速筛选。</span>
            <span>2. 若需要对{{$SuperviseStr.employee}}进行离职处理，请访问离职管理页面进行操作。</span>
            <span>{{institutionalCodeFlag?'3. 背景筛查状态显示【关注】仅表示该人员有提醒记录，具体详情请至【智能预警】查看处理。':''}}</span>
            <span>{{institutionalCodeFlag?'4. 北京超龄保安员：按照人社部规定；陕西 超龄保安员:男超过63岁，女超过58岁，可通过筛选项【职业类型】、【开始年龄】进行查询。':''}}</span>
            <span>{{institutionalCodeFlag?'5. 超期未持证保安员：入职日期超过14天未取证保安员，可通过筛选项【职业类型】、【持证状态】、【入职日期】进行查询。':''}}</span>
            </span>
        </div>
    </section>

    <!-- 按钮区域 -->
    <section class="buttonBox">
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <div>
                <el-button type="primary" @click="addUser">添加{{$SuperviseStr.employee}}</el-button>
                <el-button @click="importEmployee">导入{{$SuperviseStr.employee}}</el-button>
                <el-button @click='exportEmployee'>导出{{$SuperviseStr.employee}}</el-button>
                <el-button @click="addUserIn" v-if="$SuperviseStr.isnotSuperviseButton&&!isNoSecurityUser&&!institutionalCode.startsWith('04')&&!institutionalCode.startsWith('07')&&!institutionalCode.endsWith('07')&&!institutionalCode.endsWith('08')&&!institutionalCode.endsWith('09')">邀请入职</el-button>
                <el-button @click="addUserDuty" v-if="$SuperviseStr.isnotSuperviseButton&&homeTemplateBoradType!='rtpayTemplate'&&!isNoSecurityUser&&!institutionalCode.startsWith('04')&&!institutionalCode.startsWith('07')&&!institutionalCode.endsWith('07')&&!institutionalCode.endsWith('08')&&!institutionalCode.endsWith('09')&&!institutionalCode.startsWith('02')">邀请驻勤</el-button>
                <!-- <el-button @click='changeOccupationType' v-if="homeTemplateBoradType!='rtpayTemplate'">变更职业类型</el-button> -->
                 <el-button
                    v-if="$SuperviseStr.employee==='员工' && isShow &&!isNoSecurityUser" 
                    type="primary" 
                    @click="downloadTemplate('保安员资格审查表.doc')"
                    icon="el-icon-download">
                    下载资格审查表
                </el-button>
                <el-button
                    v-if="$SuperviseStr.employee==='员工' && isShow &&!isNoSecurityUser" 
                    type="primary" 
                    @click="downloadTemplate('保安员考试报名登记表.doc')"
                    icon="el-icon-download"
                    style="margin-left: 15px">
                    下载考试报名表
                </el-button>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="rightBox">
                <el-input  v-model="params.keyword" placeholder="输入姓名/账号/手机号/证件号码" clearable style="width:45%" @input="keywordInput()" v-show="!HighSearchFlag"/>
                <el-button type="primary" @click="search" v-if="!HighSearchFlag">查询</el-button>
                <el-button @click="switchHigh">高级<i class="el-icon-arrow-down" v-if="!HighSearchFlag"></i><i class="el-icon-arrow-up" v-if="HighSearchFlag"></i></el-button>
                <el-button @click="HighDataFlag=!HighDataFlag;DataBoard()" v-if="DataBoardshowObj&&!isNoSecurityUser&&!institutionalCode.startsWith('04')">数据看板<i class="el-icon-arrow-down" v-if="!HighDataFlag"></i><i class="el-icon-arrow-up" v-if="HighDataFlag"></i></el-button>
                </div>
            </el-col>
        </el-row>
    </section>

    <!-- 高级搜索区域 -->
    <section class="HighSearchBox" v-show="HighSearchFlag">
        <el-row v-if="isNoSecurityUser">
            <el-form :inline="true" :model="params" ref="ruleForm"  label-width="130px" label-position="right">
                <el-form-item label="关键词：" prop="keyword">
                    <el-input v-model="params.keyword" placeholder="姓名/账号/手机号/证件号码" clearable  @input="inputkeywork" style="width: 100%;"></el-input>
                </el-form-item>         
                
                <el-form-item label="证件类型：" prop="credentialTypes">
                    <el-select v-model="params.credentialTypes" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecredentialTypes">
                        <el-option
                        v-for="item in credentialTypesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="证件核验状态：" prop="checkedStatuses">
                    <el-select v-model="params.checkedStatuses" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecheckedStatuses">
                        <el-option
                        v-for="item in checkedStatusesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item :label="departlabel" prop="departIds">
                    <selectTree
                    ref="selectTree"
                    @getValue="checkChange"                   
                    :curValue="defaulData"
                    :data="tableData"     
                    :obj="{                  
                        id: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    checkStrictly 
                    clearable	
                    filterable	
                    multiple		
                    collapseTags	
                    ></selectTree>
                </el-form-item>       
                
                <el-form-item label="岗位：" prop="position">
                    <el-select v-model="params.position"  placeholder="请选择" style="width: 100%;" clearable >
                        <el-option
                        v-for="(item,index) in positionArrOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>                              
                
                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="params.sex"  placeholder="请选择" style="width: 100%;" clearable @change="changesex">
                        <el-option
                        v-for="(item,index) in sexArrOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始年龄："  prop="beginAge">
                    <el-input-number v-model="params.beginAge" :controls='false'  :min="1" :max="100"  placeholder="开始年龄" @change="changebeginAge" style="width:175px"></el-input-number>                                    
                </el-form-item>

                <el-form-item label="结束年龄："  prop="endAge">                   
                    <el-input-number v-model="params.endAge" :controls='false'  :min="1" :max="100" placeholder="结束年龄" @change="changeendAge" style="width:175px"></el-input-number>
                </el-form-item>

                <el-form-item :label="`${$SuperviseStr.entry}时间：`" prop="startEndDate">
                    <el-date-picker
                        v-model="params.startEndDate"
                        @change="changestartEndDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format='yyyy-MM-dd'
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="highSearchButton">查询</el-button>
                    <el-button @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row v-else-if="institutionalCode.startsWith('04')||institutionalCode.startsWith('07')">
            <el-form :inline="true" :model="params" ref="ruleForm"  label-width="130px" label-position="right">
                <el-form-item label="关键词：" prop="keyword">
                    <el-input v-model="params.keyword" placeholder="姓名/账号/手机号/证件号码" clearable  @input="inputkeywork" style="width: 100%;"></el-input>
                </el-form-item>         
                
                <el-form-item label="证件类型：" prop="credentialTypes">
                    <el-select v-model="params.credentialTypes" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecredentialTypes">
                        <el-option
                        v-for="item in credentialTypesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="证件核验状态：" prop="checkedStatuses">
                    <el-select v-model="params.checkedStatuses" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecheckedStatuses">
                        <el-option
                        v-for="item in checkedStatusesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item :label="departlabel" prop="departIds">
                    <selectTree
                    ref="selectTree"
                    @getValue="checkChange"                   
                    :curValue="defaulData"
                    :data="tableData"     
                    :obj="{                  
                        id: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    checkStrictly 
                    clearable	
                    filterable	
                    multiple		
                    collapseTags	
                    ></selectTree>
                </el-form-item>             
                
                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="params.sex"  placeholder="请选择" style="width: 100%;" clearable @change="changesex">
                        <el-option
                        v-for="(item,index) in sexArrOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始年龄："  prop="beginAge">
                    <el-input-number v-model="params.beginAge" :controls='false'  :min="1" :max="100"  placeholder="开始年龄" @change="changebeginAge" style="width:175px"></el-input-number>                                    
                </el-form-item>

                <el-form-item label="结束年龄："  prop="endAge">                   
                    <el-input-number v-model="params.endAge" :controls='false'  :min="1" :max="100" placeholder="结束年龄" @change="changeendAge" style="width:175px"></el-input-number>
                </el-form-item>

                <el-form-item :label="`${$SuperviseStr.entry}时间：`" prop="startEndDate">
                    <el-date-picker
                        v-model="params.startEndDate"
                        @change="changestartEndDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format='yyyy-MM-dd'
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="highSearchButton">查询</el-button>
                    <el-button @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row v-else-if="institutionalCode.endsWith('07')||institutionalCode.endsWith('08')||institutionalCode.endsWith('09')">
            <el-form :inline="true" :model="params" ref="ruleForm"  label-width="130px" label-position="right">
                <el-form-item label="关键词：" prop="keyword">
                    <el-input v-model="params.keyword" placeholder="姓名/账号/手机号/证件号码" clearable  @input="inputkeywork" style="width: 100%;"></el-input>
                </el-form-item>
                
                <el-form-item :label="departlabel" prop="departIds">
                    <selectTree
                    ref="selectTree"
                    @getValue="checkChange"                   
                    :curValue="defaulData"
                    :data="tableData"     
                    :obj="{                  
                        id: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    checkStrictly 
                    clearable	
                    filterable	
                    multiple		
                    collapseTags	
                    ></selectTree>
                </el-form-item>    
                <el-form-item>
                    <el-button type="primary" @click="highSearchButton">查询</el-button>
                    <el-button @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row v-else>
            <el-form :inline="true" :model="params" ref="ruleForm"  label-width="130px" label-position="right">
                <el-form-item label="关键词：" prop="keyword">
                    <el-input v-model="params.keyword" placeholder="姓名/账号/手机号/证件号码" clearable  @input="inputkeywork" style="width: 100%;"></el-input>
                </el-form-item>
                <el-form-item label="证件类型：" prop="credentialTypes">
                    <el-select v-model="params.credentialTypes" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecredentialTypes">
                        <el-option
                        v-for="item in credentialTypesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职业类型：" prop="occupationTypes">
                    <el-select v-model="params.occupationTypes" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changeoccupationTypes">
                         <el-option v-for="(item,index) in occupationTypeArr" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                <el-form-item label="实名认证状态：" prop="authenticatedStatuses" v-show="listshowObj.authenticatedStatuses && !institutionalCode.startsWith('02')">
                    <el-select v-model="params.authenticatedStatuses" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changeauthenticatedStatuses">
                        <el-option
                        v-for="item in authenticatedStatusesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件核验状态：" prop="checkedStatuses" v-show="listshowObj.checkedStatuses">
                    <el-select v-model="params.checkedStatuses" multiple collapse-tags placeholder="请选择" style="width:100%" @change="changecheckedStatuses">
                        <el-option
                        v-for="item in checkedStatusesoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="持资格证：" prop="cerStatus" v-show="listshowObj.cerStatus&&!institutionalCode.startsWith('02')">
                    <el-select v-model="params.cerStatus"  collapse-tags placeholder="请选择" style="width:100%" clearable @change="changecerStatus">
                         <el-option v-for="(item,index) in cerStatusArr" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                <el-form-item label="签订合同：" prop="contractStatus" v-show="listshowObj.contractStatus&&!institutionalCode.startsWith('02')"> 
                    <el-select v-model="params.contractStatus"  collapse-tags placeholder="请选择" style="width:100%" clearable @change="changecontractStatus">
                         <el-option v-for="(item,index) in contractStatusArr" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                <el-form-item :label="`${$SuperviseStr.entry}日期：`" prop="hiredDate">
                    <el-date-picker
                        @input="changeHiredDate"
                        v-model="params.hiredDate"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        style="width:175px"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="departlabel" prop="departIds">
                    <selectTree
                    ref="selectTree"
                    @getValue="checkChange"                   
                    :curValue="defaulData"
                    :data="tableData"     
                    :obj="{                  
                        id: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    checkStrictly 
                    clearable	
                    filterable	
                    multiple		
                    collapseTags	
                    ></selectTree>
                </el-form-item>             
                <el-form-item label="保安职业技能等级：" prop="level" v-show="listshowObj.level&&!institutionalCode.startsWith('02')">
                    <el-select v-model="params.level" multiple collapse-tags placeholder="请选择" style="width: 100%;" @change="changelevel">
                        <el-option
                        v-for="(item,index) in levelArr"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="params.sex"  placeholder="请选择" style="width: 100%;" clearable @change="changesex">
                        <el-option
                        v-for="(item,index) in sexArrOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始年龄："  prop="beginAge">
                    <el-input-number v-model="params.beginAge" :controls='false'  :min="1" :max="100"  placeholder="开始年龄" @change="changebeginAge" style="width:175px"></el-input-number>                                    
                </el-form-item>

                <el-form-item label="结束年龄："  prop="endAge">                   
                    <el-input-number v-model="params.endAge" :controls='false'  :min="1" :max="100" placeholder="结束年龄" @change="changeendAge" style="width:175px"></el-input-number>
                </el-form-item>

                <el-form-item label="背景筛查状态：" prop="backgroundScreeningStatus" v-if="instShow">
                    <el-select v-model="params.backgroundScreeningStatus" multiple collapse-tags placeholder="请选择" style="width:100%">
                        <el-option
                        v-for="item in backgroundScreeningStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="是否投保：" prop="insure" v-if="!institutionalCode.startsWith('02')">
                    <el-select v-model="params.insure"  placeholder="请选择" style="width: 100%;" @change="changeinsure" clearable>
                        <el-option
                        v-for="(item,index) in insureArrOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label="`${$SuperviseStr.entry}时间：`" prop="startEndDate">
                    <el-date-picker
                        v-model="params.startEndDate"
                        @change="changestartEndDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format='yyyy-MM-dd'
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="highSearchButton">查询</el-button>
                    <el-button @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </section>

    <!-- 维度统计区域 -->
    <section class="DataTBox" v-if="HighDataFlag">
        <div class="tj">
           <span class="countstj" :class="index==0?'active':''"  @click="DataTjclick(0,'occupationTypes',[])"><em>在职员工总数</em><strong>{{tjObj.total}}</strong></span>
           <span :class="index==1?'active':''" @click="DataTjclick(1,'checkedStatuses',[0])"><em>未提交</em><strong>{{tjObj.unCheckedCount}}</strong></span>
           <span :class="index==2?'active':''" @click="DataTjclick(2,'checkedStatuses',[2])"><em>已提交</em><strong>{{tjObj.commitCount}}</strong></span>
           <span :class="index==3?'active':''" @click="DataTjclick(3,'checkedStatuses',[1])"><em>已核验</em><strong>{{tjObj.checkedCount}}</strong></span>
           <span :class="index==4?'active':''" @click="DataTjclick(4,'contractStatus','0')"><em>未签合同</em><strong>{{tjObj.unContractCount}}</strong></span>
           <span :class="index==5?'active':''" @click="DataTjclick(5,'contractStatus','1')"><em>已签合同</em><strong>{{tjObj.contractCount}}</strong></span>
        </div>
        <div class="tj" v-if='instShow'>
           <span class="countstj" :class="index==10?'active':''"  @click="DataTjclick(10,'occupationTypes',['SecurityGuard'])"><em>保安员总数</em><strong>{{tjObj.secTotal}}</strong></span>
           <span :class="index==11?'active':''" @click="DataTjclick(11,'checkedStatuses',[0],'occupationTypes')"><em>未提交</em><strong>{{tjObj.secUnCheckedCount}}</strong></span>
           <span :class="index==12?'active':''" @click="DataTjclick(12,'checkedStatuses',[1],'occupationTypes')"><em>已核验</em><strong>{{tjObj.secCheckedCount}}</strong></span>
           <span :class="index==13?'active':''" @click="DataTjclick(13,'authenticatedStatuses',['Authenticating'],'occupationTypes')"  v-show="DataBoardshowObj.Authenticating"><em>实名认证中</em><strong>{{tjObj.secUnAuthCount}}</strong></span>
           <span :class="index==14?'active':''" @click="DataTjclick(14,'authenticatedStatuses',['Passed'],'occupationTypes')" v-show="DataBoardshowObj.Passed"><em>已实名认证</em><strong>{{tjObj.secAuthCount}}</strong></span>
           <span :class="index==15?'active':''" @click="DataTjclick(15,'authenticatedStatuses',['Failed'],'occupationTypes')" v-show="DataBoardshowObj.Failed"><em>实名认证失败</em><strong>{{tjObj.secAuthFailCount}}</strong></span>
           <span :class="index==16?'active':''" @click="DataTjclick(16,'contractStatus','0','occupationTypes')"><em>未签合同</em><strong>{{tjObj.secUnContractCount}}</strong></span>
           <span :class="index==17?'active':''" @click="DataTjclick(17,'contractStatus','1','occupationTypes')"><em>已签合同</em><strong>{{tjObj.secContractCount}}</strong></span>
        </div>
    </section>

    <!-- 选中表格内容展示区域 -->    

    <!-- 内容区域 -->
    <section class="contentBox">
        <el-table :data="tableDataEmployee" ref="districtTable"  max-height="500" default-expand-all  row-key="id"  @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange">
            <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" :width="item.width" v-if="item.show" :fixed='item.label=="姓名"'>
                <template slot-scope="scope">                    
                    <span>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                min-width="180">
                <template slot="header" slot-scope="scope">
                   <span class="columnHeader">
                       <strong>操作</strong>
                   <i class="el-icon-setting" @click="columnSetPop"></i>
                   </span>
                </template>
                <template slot-scope="scope">                   
                    <el-button @click="editStaff(scope.row)" type="text" size="small" class="primaryColor">编辑</el-button>
                    <el-button @click="resetPWDStaff(scope.row)" type="text" size="small" class="primaryColor" v-if="domainAdmin||permissionsStr.indexOf('ResetPwd')>-1">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页页签 -->
        <pages
        :total='params.total'
        :currentPage.sync='params.pageIndex'
        :pageSize='params.pageSize'
        @handleCurrentChangeSub="handleCurrentChange"
        @handleSizeChangeSub="handleSizeChange"
    ></pages>
    </section>
    
    <!-- 添加员工弹窗 -->
    <UserEmployeeDialog :deptDataList="tableData" :showdialog.sync="showdialog"  @refurlist="refurlist" ref="popChildren"></UserEmployeeDialog>
    <!-- 导入员工弹窗 -->
    <ImportEmployeeDialog :showdialogImport.sync="showdialogImport"  @refurlist="refurlist" ref="ImportpopChildren"></ImportEmployeeDialog>
    <!-- 导出员工弹窗 -->
    <ExportEmployeeDialog :showdialogExport.sync="showdialogExport"  @refurlist="refurlist" ref="ExportpopChildren"></ExportEmployeeDialog>
    <!-- 邀请入职弹窗 -->
    <UserEmployeeInviteInDialog :deptDataList="tableData" :showdialogIn.sync="showdialogIn"  @refurlist="refurlist" ref="popChildren"></UserEmployeeInviteInDialog>
    <!-- 邀请驻勤弹窗 -->
    <UserEmployeeDutyDialog :deptDataList="tableData" :showdialogDuty.sync="showdialogDuty"  @refurlist="refurlist" ref="DutyChildren"></UserEmployeeDutyDialog>
    <!-- 变更职业类型弹窗 -->
    <UserEmployeechangeOccupationTypeDialog :showdialogOccType.sync="showdialogOccType"  @refurlist="refurlist" ref="OccTypeChildren"></UserEmployeechangeOccupationTypeDialog>
 </section>

 <section class="ContainerBoxDetail" v-if="!StaffBoxFlag">
    <!-- <StaffBoxDetail  :staffinfo="staffinfo"></StaffBoxDetail> -->
    <StaffBoxDetail  :staffinfo="staffinfo" @refurlistBack="refurlistBack"></StaffBoxDetail>
 </section>
 <ColumnSet :showdialogColumnSet.sync="showdialogColumnSet"   :typeFlag='typeFlag' @refurlist="refurlist"  ref="columnRef"></ColumnSet>
</div>
</template>
<script>
import {StaffDepartmentListApi,employeeTableListApi,SearchEmplyeeApi,highSearchEmplyeeApi,employeeTableBoardListApi,resetPWDStaffApi} from "@/api/staffApi.js"
import UserEmployeeDialog from './components/UserEmployeeDialog.vue'
import ImportEmployeeDialog from './components/ImportEmployeeDialog.vue'
import ExportEmployeeDialog from './components/ExportEmployeeDialog.vue'
import UserEmployeeInviteInDialog from './components/UserEmployeeInviteInDialog.vue'
import UserEmployeeDutyDialog from './components/UserEmployeeDutyDialog.vue'
import UserEmployeechangeOccupationTypeDialog from './components/UserEmployeechangeOccupationTypeDialog.vue'
import selectTree from "@/components/SelectTree";
import StaffBoxDetail from './StaffBoxDetail'//员工档案
import ColumnSet from "@/components/ColumnSet";//列配置

export default {
    inject:['permissions'],
    computed:{
      permissionsStr(){
          return this.permissions()
      },
      isShow(){
          return process.env.VUE_APP_ISJINCHENG === 'true'
      },
      isNoSecurityUser() {
        return this.institutionalCode && !(this.institutionalCode.startsWith('01') || this.institutionalCode.startsWith('02') || this.institutionalCode.startsWith('06'))
      }
    },
    data(){
        return{
          tableData:[],
          tableDataEmployee:[],
          multipleSelection:[],//全选列表
          tableColumn:[

              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},
              {prop:"backgroundScreeningStatus",label:"背景筛查",width:"100",show:true},             
              {prop:"checkedStatus",label:"证件核验状态",width:"120",show:true}, 
              {prop:"lastCheckedStatusTime",label:"核验日期",width:"100",show:true},             
              {prop:"authenticatedStatus",label:"实名认证状态",width:"120",show:true},
              {prop:"authenticatedResult",label:"认证失败原因",width:"120",show:true},
              {prop:"hiredDateText",label: `${$SuperviseStr.entry}日期`,width:"100",show:true},
              {prop:"contractStatus",label:"是否签订合同",width:"120",show:true},
              {prop:"cerStatus",label:"是否持有保安资格证",width:"120",show:true},
              {prop:"cerNo",label:"保安资格证号",width:"120",show:true},
              {prop:"insure",label:"是否投保",width:"120",show:true},

              {prop:"gradeCerStatus",label:"是否有等级证",width:"120",show:true},

              {prop:"gradeCerNo",label:"等级证编号",width:"120",show:true},
              {prop:"gradeLevel",label:"等级证等级",width:"120",show:true},

              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
        

              {prop:"superiorName",label:"上级",width:"100",show:false},
              {prop:"position",label:"职位",width:"100",show:false},
              {prop:"positiveDate",label:"转正日期",width:"100",show:false},
              {prop:"sex",label:"性别",width:"100",show:false},
              {prop:"birthdate",label:"出生日期",width:"100",show:false},
              {prop:"age",label:"年龄",width:"100",show:false},
              {prop:"nation",label:"民族",width:"100",show:false},
              {prop:"education",label:"文化程度",width:"100",show:false},
              {prop:"politicsStatus",label:"政治面貌",width:"120",show:false},
              {prop:"householdType",label:"户籍类型",width:"100",show:false},
              {prop:"stature",label:"身高（CM）",width:"120",show:false},
              {prop:"nativePlace",label:"籍贯",width:"180",show:false},
              {prop:"militaryStatus",label:"兵役情况",width:"100",show:false},
              {prop:"maritalStatus",label:"婚姻状况",width:"100",show:false},
              {prop:"validDateTo",label:"身份证有效期",width:"180",show:false},
              {prop:"address",label:"身份证住址",width:"180",show:false},

              {prop:"personStatus",label:"员工状态",width:"100",show:false},
              {prop:"probation",label:"试用期",width:"100",show:false},
              {prop:"planPositiveDate",label:"原定转正日期",width:"180",show:false},
              {prop:"emergencyContact",label:"紧急联系人姓名",width:"180",show:false},
              {prop:"emergencyPhone",label:"紧急联系人电话",width:"180",show:false},
              {prop:"licenseLevel",label:"驾照等级",width:"100",show:false},
              {prop:"placeOfNow",label:"现住地址",width:"180",show:false},
              
              {prop:"domainAdmin",label:"是否为组织管理员",width:"180",show:false},
              {prop:"departAdmin",label:"是否为部门管理员",width:"180",show:false},
              {prop:"manageDeparts",label:"可管理部门",width:"180",show:false},

              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ],
          params:{//搜索条件
            pageIndex:1,
            pageSize:10,
            keyword:'',             
            total:0,
          },          
          showdialogColumnSet:false,//列配置默认隐藏
          showdialog:false,   
          showdialogIn:false,
          showdialogDuty:false,
          disabled:true,//默认禁用
          isAllSelect:false,//是否全选
          displayOrderShow:false,
          showdialogImport:false,//导入员工
          showdialogOccType:false,
          credentialTypesoptions:[//证件类型
              {value:"IdCard",label:"居民身份证/户口簿"},
              {value:"IdCardOfXiangGang",label:"香港特区护照/身份证明"},
              {value:"IdCardOfAoMen",label:"澳门特区护照/身份证明"},
              {value:"IdCardOfTaiwan",label:"台湾居民来往大陆通行证"},
              {value:"Passport",label:"外国护照"},
              {value:"Arms",label:"退伍军人证"},
              {value:"PoliceNo",label:"警号"},
          ],
          credentialTypesoptions_Inst:[//证件类型
              {value:"IdCard",label:"居民身份证/户口簿"},
              {value:"IdCardOfXiangGang",label:"香港特区护照/身份证明"},
              {value:"IdCardOfAoMen",label:"澳门特区护照/身份证明"},
              {value:"IdCardOfTaiwan",label:"台湾居民来往大陆通行证"},
              {value:"Passport",label:"外国护照"},              
          ],
          occupationTypesoptions:[//职业类型
              {value:"Normal",label:"一般职员"},
              {value:"SecurityGuard",label:"保安员"},
              {value:"Police",label:"警官"}
          ],
          authenticatedStatusesoptions:[//实名状态
              {value:"UnAuthenticated",label:"未认证"},
              {value:"Authenticating",label:"认证中"},
              {value:"Failed",label:"认证失败"},
              {value:"Passed",label:"已认证"}
          ],
          checkedStatusesoptions:[//证件核验状态
              {value:0,label:"未提交"},
              {value:2,label:"已提交"},
              {value:1,label:"已核验"},
          ],
          cerStatusArr:[//持资格证
              {value:"1",label:"是"},
              {value:"0",label:"否"},
          ],
          contractStatusArr:[//签订合同
              {value:"1",label:"是"},
              {value:"0",label:"否"},
          ],
          levelArr:[//保安等级--保安职业技能等级
            {value:5,label:"初级保安员"},
            {value:4,label:"中级保安员"},
            {value:3,label:"高级保安员"},
            {value:2,label:"保安师"},
            {value:1,label:"高级保安师"},
          ],
          sexArrOptions:[//保安等级--保安职业技能等级
              {value:'Male',label:"男"},
              {value:'Female',label:"女"}
          ],
          insureArrOptions:[
             {value:'True',label:"已投保"},
             {value:'False',label:"未投保"}
          ],
          positionArrOptions:[
             {value:'社会力量',label:"社会力量"},
             {value:'民警',label:"民警"}
          ],
          backgroundScreeningStatusOptions:[//背景筛查状态
          {value:0,label:"未背筛"},
          {value:1,label:"正常"},
          {value:2,label:"关注"},
          ],
          defaulData:[],
          HighSearchFlag:false,//默认不显示高级搜索
          StaffBoxFlag:true,
          occupationTypeArr:[],
          getTreeDepartlist:[],
          showdialogExport:false,
          departlabel:`所在${$SuperviseStr.depart}：`,
          homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
          showFlag:false,
          tjObj:{},
          HighDataFlag:false,
          institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型
          instShow:true,
          index:'',
          typeFlag:'Employee',
          domainAdmin:localStorage.getItem('domainAdmin')=='true'?true:false,
          listshowObj:{//列查询条件不同环境显示隐藏
              authenticatedStatuses:false,//实名状态
              checkedStatuses:false,//证件核验状态
              cerStatus:false,//持资格证
              contractStatus:false,//签订合同
              level:false,//保安等级--保安职业技能等级
          },
          DataBoardshowObj:{
             Authenticating:false,
             Passed:false,
             Failed:false,
          },
          institutionalCodeFlag:false,//根据机构类型判断字段显示隐藏
        }       
    },
    components:{
        ColumnSet,
        selectTree, //注册组件
        UserEmployeeDialog,  
        ImportEmployeeDialog,
        ExportEmployeeDialog,
        UserEmployeeInviteInDialog,
        StaffBoxDetail,
        UserEmployeeDutyDialog,
        UserEmployeechangeOccupationTypeDialog
    },

    mounted(){
        console.log(this.permissionsStr.indexOf('ResetPwd'))
     this.tableDatalist()//查询部门列表

     if(this.homeTemplateBoradType=='rtpayTemplate'){//rt环境
         this.listshowObj={
            authenticatedStatuses:false,//实名状态
            checkedStatuses:true,//证件核验状态
            cerStatus:true,//持资格证
            contractStatus:true,//签订合同
            level:true,//保安等级--保安职业技能等级
         }

         this.DataBoardshowObj={//数据看板标签显示隐藏
             Authenticating:false,
             Passed:false,
             Failed:false,
         }

         this.tableColumn=[

              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"telephone",label:"账号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},              
              {prop:"checkedStatus",label:"证件核验",width:"100",show:true},              
              {prop:"authenticatedStatus",label:"实名认证状态",width:"120",show:true},
              {prop:"authenticatedResult",label:"认证失败原因",width:"120",show:true},
              {prop:"hiredDateText",label:`${$SuperviseStr.entry}日期`,width:"1800",show:true},
              {prop:"contractStatus",label:"是否签订合同",width:"120",show:true},
              {prop:"cerStatus",label:"是否持有保安资格证",width:"120",show:true},
              {prop:"cerNo",label:"保安资格证号",width:"120",show:true},
              {prop:"insure",label:"是否投保",width:"120",show:true},
              {prop:"gradeCerStatus",label:"是否有等级证",width:"120",show:true},

              {prop:"gradeCerNo",label:"等级证编号",width:"120",show:true},
              {prop:"gradeLevel",label:"等级证等级",width:"120",show:true},

              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
        

              {prop:"superiorName",label:"上级",width:"100",show:false},
              {prop:"position",label:"职位",width:"100",show:false},
              {prop:"positiveDate",label:"转正日期",width:"100",show:false},
              {prop:"sex",label:"性别",width:"100",show:false},
              {prop:"birthdate",label:"出生日期",width:"100",show:false},
              {prop:"age",label:"年龄",width:"100",show:false},
              {prop:"nation",label:"民族",width:"100",show:false},
              {prop:"education",label:"文化程度",width:"100",show:false},
              {prop:"politicsStatus",label:"政治面貌",width:"120",show:false},
              {prop:"householdType",label:"户籍类型",width:"100",show:false},
              {prop:"stature",label:"身高（CM）",width:"120",show:false},
              {prop:"nativePlace",label:"籍贯",width:"180",show:false},
              {prop:"militaryStatus",label:"兵役情况",width:"100",show:false},
              {prop:"maritalStatus",label:"婚姻状况",width:"100",show:false},
              {prop:"validDateTo",label:"身份证有效期",width:"180",show:false},
              {prop:"address",label:"身份证住址",width:"180",show:false},

              {prop:"personStatus",label:"员工状态",width:"100",show:false},
              {prop:"probation",label:"试用期",width:"100",show:false},
              {prop:"planPositiveDate",label:"原定转正日期",width:"180",show:false},
              {prop:"emergencyContact",label:"紧急联系人姓名",width:"180",show:false},
              {prop:"emergencyPhone",label:"紧急联系人电话",width:"180",show:false},
              {prop:"licenseLevel",label:"驾照等级",width:"100",show:false},
              {prop:"placeOfNow",label:"现住地址",width:"180",show:false},

              {prop:"domainAdmin",label:"是否为组织管理员",width:"180",show:false},
              {prop:"departAdmin",label:"是否为部门管理员",width:"180",show:false},
              {prop:"manageDeparts",label:"可管理部门",width:"180",show:false},

              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
         let tableColumnArr=localStorage.getItem('tableColumnArr')&&JSON.parse(localStorage.getItem('tableColumnArr'))||[]
         if(tableColumnArr.length){
             tableColumnArr.forEach(item=>{                   
                   if(item.type=='Employee'){
                       console.log(item)  
                       if(item.tableColumn[0].version==4){
                           this.tableColumn=item.tableColumn                         
                       }else{                     
                          this.tableColumn=this.tableColumn
                       }                      
                   }
             })
         }
          this.employeeTableBoardList()//数据看板数据总量
     }
     else if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
         this.listshowObj={
            authenticatedStatuses:false,//实名状态
            checkedStatuses:false,//证件核验状态
            cerStatus:false,//持资格证
            contractStatus:false,//签订合同
            level:false,//保安等级--保安职业技能等级           
         }        
         this.DataBoardshowObj=null
         this.tableColumn=[           

              {prop:"name",label:"姓名",width:"100",show:true,version:5},
               {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},    
            //   {prop:"backgroundScreeningStatus",label:"背景筛查",width:"100",show:true},
          
             
            //   {prop:"checkedStatus",label:"证件核验",width:"180",show:true},              
              {prop:"authenticatedStatus",label:"实名认证状态",width:"120",show:true},
              {prop:"authenticatedResult",label:"认证失败原因",width:"120",show:true},
              {prop:"hiredDateText",label:`${$SuperviseStr.entry}日期`,width:"100",show:true},
            //   {prop:"contractStatus",label:"是否签订合同",width:"180",show:true},
            //   {prop:"cerStatus",label:"是否持有保安资格证",width:"180",show:true},
            //   {prop:"cerNo",label:"保安资格证号",width:"180",show:true},
              {prop:"insure",label:"是否投保",width:"120",show:true},
            //   {prop:"gradeCerStatus",label:"是否有等级证",width:"180",show:true},
              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},

              {prop:"superiorName",label:"上级",width:"100",show:false},
              {prop:"position",label:"职位",width:"100",show:false},
              {prop:"positiveDate",label:"转正日期",width:"100",show:false},
              {prop:"sex",label:"性别",width:"100",show:false},
              {prop:"birthdate",label:"出生日期",width:"100",show:false},
              {prop:"age",label:"年龄",width:"100",show:false},
              {prop:"nation",label:"民族",width:"100",show:false},
              {prop:"education",label:"文化程度",width:"100",show:false},
              {prop:"politicsStatus",label:"政治面貌",width:"120",show:false},
              {prop:"householdType",label:"户籍类型",width:"100",show:false},
              {prop:"stature",label:"身高（CM）",width:"120",show:false},
              {prop:"nativePlace",label:"籍贯",width:"180",show:false},
              {prop:"militaryStatus",label:"兵役情况",width:"100",show:false},
              {prop:"maritalStatus",label:"婚姻状况",width:"100",show:false},
            //   {prop:"validDateTo",label:"身份证有效期",width:"180",show:false},
            //   {prop:"address",label:"身份证住址",width:"180",show:false},
              {prop:"domainAdmin",label:"是否为组织管理员",width:"180",show:false},
              {prop:"departAdmin",label:"是否为部门管理员",width:"180",show:false},
              {prop:"manageDeparts",label:"可管理部门",width:"180",show:false},

              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]

         let tableColumnArr=localStorage.getItem('tableColumnArr')&&JSON.parse(localStorage.getItem('tableColumnArr'))||[]
         if(tableColumnArr.length){
             tableColumnArr.forEach(item=>{                   
                   if(item.type=='Employee'){
                       console.log(item)  
                       if(item.tableColumn[0].version==4){
                           this.tableColumn=item.tableColumn                         
                       }else{                     
                          this.tableColumn=this.tableColumn
                       }                      
                   }
             })
         }
     }else if(this.isNoSecurityUser){//群防群治--社区警务力量 保安
        this.tableColumn=[  
              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"position",label:"岗位",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},               
              {prop:"checkedStatus",label:"证件核验",width:"180",show:true},    
              {prop:"lastCheckedStatusTime",label:"核验日期",width:"100",show:true},             
              {prop:"hiredDateText",label:"入职日期",width:"100",show:true},
              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
     }else if(this.institutionalCode&&this.institutionalCode.startsWith('04')){//内保--保卫管理员
        this.tableColumn=[  
              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"position",label:"岗位",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},               
              {prop:"checkedStatus",label:"证件核验",width:"180",show:true},    
              {prop:"lastCheckedStatusTime",label:"核验日期",width:"100",show:true},             
              {prop:"hiredDateText",label:"入职日期",width:"100",show:true},
              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
     }else if(this.institutionalCode&&this.institutionalCode.startsWith('07')){//行业主管
        this.tableColumn=[  
              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"position",label:"岗位",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},               
              {prop:"checkedStatus",label:"证件核验",width:"180",show:true},    
              {prop:"lastCheckedStatusTime",label:"核验日期",width:"100",show:true},             
              {prop:"hiredDateText",label:"入职日期",width:"100",show:true},
              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
              {prop:"operatorName",label:"操作人",wsWidth:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
     }else if((this.institutionalCode&&this.institutionalCode.endsWith('07'))||(this.institutionalCode&&this.institutionalCode.endsWith('08'))||(this.institutionalCode&&this.institutionalCode.endsWith('09'))){//人口监管组织
        this.tableColumn=[  
              {prop:"name",label:"姓名",width:"100",show:true,version:5},
              {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
              {prop:"occupationType",label:"职业类型",width:"100",show:true},
              {prop:"telephone",label:"手机号",width:"140",show:true},   
              {prop:"credentialType",label:"证件类型",width:"180",show:true,},
              {prop:"credentialNumber",label:"证件号码",width:"180",show:true},  
              {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
              {prop:"operatorName",label:"操作人",width:"100",show:true},
              {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
     }else if((this.institutionalCode&&this.institutionalCode.startsWith('02'))){//大活行业
        this.tableColumn=[  
            {prop:"name",label:"姓名",width:"100",show:true,version:5},
            {prop:"departName",label:`所在${$SuperviseStr.depart}`,width:"250",show:true},
            {prop:"occupationType",label:"职业类型",width:"100",show:true},
            {prop:"telephone",label:"手机号",width:"140",show:true},   
            {prop:"credentialType",label:"证件类型",width:"180",show:true,},
            {prop:"credentialNumber",label:"证件号码",width:"180",show:true},
            {prop:"checkedStatus",label:"证件核验状态",width:"120",show:true}, 
            {prop:"lastCheckedStatusTime",label:"核验日期",width:"100",show:true},             
            {prop:"hiredDateText",label:"入职日期",width:"100",show:true},
            {prop:"createdTime",label:"录入系统时间",width:"120",show:true},
            {prop:"operatorName",label:"操作人",width:"100",show:true},
            {prop:"operatorTime",label:"操作时间",width:"180",show:true},
          ]
     }
     else{
         this.listshowObj={
            authenticatedStatuses:true,//实名状态
            checkedStatuses:true,//证件核验状态
            cerStatus:true,//持资格证
            contractStatus:true,//签订合同
            level:true,//保安等级--保安职业技能等级
         }
         this.DataBoardshowObj={//数据看板标签显示隐藏
             Authenticating:true,
             Passed:true,
             Failed:true,
         }
         let tableColumnArr=localStorage.getItem('tableColumnArr')&&JSON.parse(localStorage.getItem('tableColumnArr'))||[]
         if(tableColumnArr.length){
             tableColumnArr.forEach(item=>{                   
                   if(item.type=='Employee'){
                       console.log(item)  
                       if(item.tableColumn[0].version==4){
                           this.tableColumn=item.tableColumn                         
                       }else{                     
                          this.tableColumn=this.tableColumn
                       }                      
                   }
             })
         }

         this.employeeTableBoardList()//数据看板数据总量
     }

     if(this.homeTemplateBoradType=='rtpayTemplate'){
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'}]
     }else if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
        this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'},{label:'警官',value:'Police'}]
     }
     else{
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'}]
     }
      this.employeeTableList()//列表表格
      

      switch(this.institutionalCode){
          case '0102'://保安服务公司
          this.instShow=true
          this.institutionalCodeFlag=true//根据机构类型判断-背景筛查字段
          this.credentialTypesoptions=this.credentialTypesoptions_Inst
          break;         
          case '0103'://保安培训单位,保安培训机构
          this.instShow=true
          this.institutionalCodeFlag=true//根据机构类型判断-背景筛查字段
          this.credentialTypesoptions=this.credentialTypesoptions_Inst
          break;
          case '0104'://自行招用保安员单位
          this.instShow=true
          this.institutionalCodeFlag=true//根据机构类型判断-背景筛查字段
          this.credentialTypesoptions=this.credentialTypesoptions_Inst
          break; 
          default:
          this.instShow=false
      }
      if(this.institutionalCodeFlag==false){//不是机构类型删除字段
        this.tableColumn.forEach((item,index)=>{
            if(item.prop=='backgroundScreeningStatus'){//背景筛查
                this.tableColumn.splice(index,1)
            }
            if(item.prop=='lastCheckedStatusTime'){//核验日期
                this.tableColumn.splice(index,1)
            }
        })
      }
    },
    watch:{
      multipleSelection(){
          if(this.multipleSelection.length){
              this.disabled=false
          }else{
              this.disabled=true
          }
      }
    },
    methods:{
        downloadTemplate(filename) {
            try {
                const filePath = process.env.VUE_APP_BASE_URL + `static/signon/staff/static/template/${filename}`;
                console.log('filePath',filePath)
                // 添加时间戳避免缓存
                // const filePath = `/static/template/${filename}?v=${new Date().getTime()}`;
                const link = document.createElement('a');
                link.href = filePath;
                link.download = filename;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.$message.success(`${filename}下载开始`);
            } catch (error) {
                this.$message.error(`下载${filename}失败`);
                console.error('下载失败:', error);
            }
        },
        DataTjclick(inx,item,value,type){
          this.index=inx
          this.params={}
          this.$set(this.params,'pageIndex',1)
          this.$set(this.params,'pageSize',10)
          this.$set(this.params,'keyword','')
          this.$set(this.params,'total',0)
         
         this.$set(this.params,item,value)
         if(type){
           this.$set(this.params,type,['SecurityGuard'])  
         }
          
          this.highSearch()
        },
        changecredentialTypes(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changeoccupationTypes(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changeauthenticatedStatuses(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changecheckedStatuses(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changecerStatus(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changecontractStatus(){
           this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changeHiredDate(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changelevel(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changesex(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changebeginAge(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changeendAge(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changestartEndDate(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        changeinsure(){
            this.$nextTick(()=>{
               this.$forceUpdate()
           })
        },
        DataBoard(){           
           this.index=-1
           this.params={}
           this.$set(this.params,'pageIndex',1)
           this.$set(this.params,'pageSize',10)
           this.$set(this.params,'keyword','')
           this.$set(this.params,'total',0)
           this.employeeTableBoardList()//数据看板数据总量
           this.highSearch()
        },
        selectClickT(val){
            console.log(val)
            this.getTreeDepartlist=val
        },
        columnSetPop(){
          this.showdialogColumnSet=true
          this.$refs.columnRef.getTableRow(this.tableColumn, 0);
        },
        addUser(){//添加员工弹窗
          this.showdialog=true          
        }, 
        addUserIn(){//邀请入职弹窗
          this.showdialogIn=true          
        },
        addUserDuty(){//邀请驻勤弹窗
          this.showdialogDuty=true     
          this.$refs.DutyChildren.getTableRow({}, 0);        
        },
        switchHigh(){//切换高级搜索
           this.$nextTick(()=>{
             this.$set(this.params,"departIds",[])
           })
           this.HighSearchFlag=!this.HighSearchFlag
        }, 
        search(){//查询
         this.params={//搜索条件
            pageIndex:1,
            pageSize:10,
            keyword:this.params.keyword,             
          }, 
          this.index=-1
          let obj2={domainId:this.$route.query.domainId}
          SearchEmplyeeApi(this.params,obj2).then(response=>{
               if(response.data.data){
                   this.tableDataEmployee=response.data.data
                   this.params.total=response.data.total
               }
          })
        },      
        highSearchButton(){//高级查询
          this.index=-1
          this.$set(this.params,'pageIndex',1)
          this.highSearch()
        },
        highSearch(){//高级查询
          let obj2={domainId:this.$route.query.domainId}
          console.log(this.params)
          this.$set(this.params,'startDate',this.params.startEndDate&&this.params.startEndDate[0]||'')
          this.$set(this.params,'endDate',this.params.startEndDate&&this.params.startEndDate[1]||'')
          
          highSearchEmplyeeApi(this.params,obj2).then(response=>{
               if(response.data.data){
                   this.tableDataEmployee=response.data.data
                   this.params.total=response.data.total
               }
          })
        },
        resetSearchForm(){//重置
           console.log(this.params)
           this.defaulData=[]                   
           this.$nextTick(()=>{
              this.$refs.ruleForm&&this.$refs.ruleForm.resetFields(); //重置输入框提示 
              this.params={//重置搜索条件
                pageIndex:1,
                pageSize:10,
                keyword:'',             
                total:0,
              },  
              this.$set(this.params,"departIds",[])
              this.highSearch()
           })
        },
        tableDatalist(){//部门列表-表格列表
            let obj={domainId:this.$route.query.domainId}//获取url域domainId
            StaffDepartmentListApi(obj,true).then(response=>{
               if(response.data){
                 this.tableData=response.data
                 this.sortTableData(this.tableData)
               }
            })
        },
        sortTableData(arr){//递归排序
            if(arr.length){
                arr.forEach(item=>{
                    item.displayOrderNumber=item.displayOrder
                    if(item.children.length){
                        this.sortTableData(item.children)
                    }                    
                })
            }
            console.log(this.tableData)
        },
        employeeTableList(){//列表表格-查询结果
           let obj2={domainId:this.$route.query.domainId}
           employeeTableListApi(this.params,obj2).then(response=>{
                   this.tableDataEmployee=response.data.data
                   this.params.total=response.data.total
           })
        },
        employeeTableBoardList(){//数据看板数据总量-查询结果
           let obj2={domainId:this.$route.query.domainId}
           employeeTableBoardListApi(this.params,obj2).then(response=>{
               console.log(response)
               this.tjObj=response.data
            
           })
        },
        checkChange(key, data) {//selectTree组件-复选框选中的数据
            console.log(key)
            console.log(data)
            this.$set(this.params,"departIds",key)
            this.defaulData=this.params.departIds
            console.log(this.defaulData)
        },
        handleCurrentChange(val){//分页切换页码
            console.log(val)
            this.params.pageIndex=val
            this.employeeTableList()
        },
        handleSizeChange(val){//切换每页条数
           console.log(val)
            this.params.pageIndex=1 //重置第一页
            this.params.pageSize=val
            this.employeeTableList()
        },
        handleSelectionChange(val) {//选中全选
          console.log(val)
          this.multipleSelection = val;
        },      
        handleSelectionAllChange(selection,first){//全选
            if (!first) {
                this.isAllSelect = !this.isAllSelect;
            }
            selection.map(el => {
                if (el.children) {
                    el.children.map(j => {
                        this.toggleSelection(j, this.isAllSelect);
                    });
                    if (el.children.length > 0) {
                        this.handleSelectionAllChange(el.children, true);
                    }
                }
            });
        }, 
        toggleSelection(row, select) {//全选选中与取消选中           
            if (select) {
                this.$refs.districtTable.toggleRowSelection(row, select);//全选选中
            } else {
                this.$refs.districtTable.clearSelection();//取消选中
            }
        },
        addDept(){//新增             
          this.showdialog = true;
          this.$refs.popChildren.getTableRow({}, 0);          
        },
        editStaff(row){//编辑
          this.StaffBoxFlag = false; 
          this.staffinfo=row         
        },
        resetPWDStaff(row){
            //删除选中表格数据
            let obj2={domainId:this.$route.query.domainId}//获取url域domainId            
            if (Object.keys(row) != "") {
                this.$confirm("此操作将所选员工的密码重置为Abcd@加证件号码后六位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                    resetPWDStaffApi(row,obj2).then((res) => {
                        console.log(res)
                        if(res.status==200){
                            this.$message({type:'success',message:'重置成功'})
                        }else{
                            this.$message({type:'success',message:'重置失败'})
                        }
                    //   this.tableDatalist()//表格列表
                    });
                })
                .catch(() => {
                    // this.radio = ""; //清空选中
                });
            }
        },
        delDept(row){//删除
            //删除选中表格数据
            let ids=[row.id]
            let obj2={domainId:this.$route.query.domainId}//获取url域domainId            
            if (Object.keys(row) != "") {
                this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                    delDepartmentsApi(ids,obj2).then(() => {
                      this.tableDatalist()//表格列表
                    });
                })
                .catch(() => {
                    // this.radio = ""; //清空选中
                });
            }
        },
        patchDel(){//批量删除           
            let obj2={domainId:this.$route.query.domainId}//获取url域domainId            
            if (this.multipleSelection.length) {
                this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                     let ids=[]
                    this.multipleSelection.forEach(item=>{
                        ids.push(item.id)
                    })
                    delDepartmentsApi(ids,obj2).then(() => {
                      this.tableDatalist()//表格列表
                    });
                })
                .catch(() => {
                    // this.radio = ""; //清空选中
                });
            }
        },
        importEmployee(){
           this.showdialogImport = true;
        },
        exportEmployee(){
           this.showdialogExport = true;
           this.$refs.ExportpopChildren.getTableRow(this.params, 0); //根据搜索条件导出
        },
        moveDept(){
           this.showdialogMove = true;
           this.$refs.MovepopChildren.getTableRow(this.multipleSelection, 0);      
        },
        ImDept(){
           this.showdialogIm = true;
           this.$refs.ImpopChildren.getTableRow(this.multipleSelection, 0);      
        },    
        close(row){//关闭排序
           this.tableDatalist()//表格列表
        },
        totalMemberClick(row){//点击部门成员数弹窗
           this.showdialogUser = true;
           this.$refs.UserpopChildren.getTableRow(row, 0);     
        },
        refurlist(){//弹窗后刷新列表
           this.params={}
           this.search()//表格列表
           this.resetSearchForm()//重置
           this.employeeTableBoardList()//数据看板数据总量
           this.index=-1
           if(localStorage.getItem('tableColumnArr')){
                let tableColumnArr=localStorage.getItem('tableColumnArr')&&JSON.parse(localStorage.getItem('tableColumnArr'))||[]
                if(tableColumnArr.length){
                    tableColumnArr.forEach(item=>{
                    if(this.typeFlag==item.type){
                        this.$nextTick(()=>{
                          this.tableColumn=item.tableColumn
                        })
                     }
                   })
                }
           }
        },
        refurlistBack(){//弹窗后刷新列表-保留所在页数位置
           console.log(this.params)
           this.highSearch()//表格列表
           this.employeeTableBoardList()//数据看板数据总量           
        },
        inputkeywork(){
            this.$forceUpdate()
        },
        keywordInput(){
            this.$forceUpdate()
        },
        changeOccupationType(){//变更职业类型
            this.showdialogOccType=true
        }
    }
}
</script>
<style lang="scss">
.ContainerBox{
    .remarkBox{
        .remarkInfo{
            background: #fafafa;              
            color: #666666;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            line-height: 30px;
            padding: 10px;
            display: flex;
            .el-icon-flag{margin-top:9px;color: #ffc108;margin-right:10px;}
            .tipsFlag{display: flex;flex-direction: column;}
        } 
    }
    .rightBox{
        display: flex;justify-content: flex-end;
        .el-input{margin-right:10px;}
    }
    .HighSearchBox{
        margin-top:15px;
    }
    .primaryColor{color: #108ee9;}
    .dangerColor{color: red;}
    .bluelink{color: #409eff;}       
    .TableSelectBox{
        display: flex;
        background: #e6f3fc;
        color: #666666;
        border: 1px solid #d4f0fc;
        border-radius:4px;
        margin-top:10px;
        margin-bottom:10px;
        padding: 5px 0;
        span{
            line-height: 20px;
            i{margin-left:5px;margin-right:5px;color:#2e8ad7}
        }
    }
} 

.displayOrderInput{
    display: flex; 
    align-items: center;
    // .el-input{width: 80%;}
    i{
        margin-left:10px;cursor: pointer;
        display: flex;
        align-items: center;
    }
}

.DataTBox{
  display: flex;
  flex-direction: column;
  .tj{
    display: flex;
    margin-bottom: 10px;
    span{
      flex:1;
      display: flex;
      flex-direction: column;
      border: 1px solid #DCDFE6;
      color: #606266;
      cursor: pointer;
      padding: 10px;
      &.active{
          color: #fff;
          background: #2e8ad7;
      }
      &:hover{
          color: #fff;
          background: #2e8ad7;
      }
      &.countstj{margin-right:10px;}      
    }
  }
}
</style>