<template>
  <div class="ContainerBox">
    <!-- 备注区域 -->
    <section class="remarkBox">
      <div class="remarkInfo">
        <i class="el-icon-warning-outline el-icon-flag"></i>
        <span>
          1.
          您可以对在职人员进行{{$SuperviseStr.operation}}操作，办理{{$SuperviseStr.operate}}后，人员将从本组织中解除关联并生成{{$SuperviseStr.operate}}记录。<br />
          2. 根据{{$SuperviseStr.operate}}记录可在线导出{{$SuperviseStr.operate}}证明。
        </span>
      </div>
    </section>

    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div>
            <el-button type="primary" @click="addUserLeave">{{$SuperviseStr.operation==='移除' ? '用户移除' : '办理离职' }}</el-button>
            <el-button @click="importEmployee">导入{{$SuperviseStr.operation}}</el-button>
            <el-button @click="exportExcel" v-if="$SuperviseStr.operation==='离职'">导出离职记录</el-button>
          </div>
        </el-col>
        <el-col :span="18">
          <el-row :gutter="20" v-if="institutionalCode=='0601'">
            <el-col :span="4">
               <selectTree
                ref="selectTree"
                @getValue="checkChange"                   
                :curValue="defaulData"
                :data="tableData"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                multiple		
                collapseTags	
                :placeholder='departlabel'
                ></selectTree>
            </el-col>
             <el-col :span="5">
              <el-input
                v-model="params.keyword"
                placeholder="姓名/账号/手机号/证件号码"
                clearable
                style="width: 100%"
              />     
            </el-col> 
            <el-col :span="10">
              <el-date-picker
                style="width:100%"
                v-model="params.startEndDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                format='yyyy-MM-dd'
                range-separator="至"
                :start-placeholder="`${$SuperviseStr.operation}开始日期`"
                :end-placeholder="`${$SuperviseStr.operation}结束日期`">
              </el-date-picker>
            </el-col>
           
            <el-col :span="2">      
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else-if="(institutionalCode&&institutionalCode.startsWith('04'))||(institutionalCode&&institutionalCode.startsWith('07'))">
            <el-col :span="4">
               <selectTree
                ref="selectTree"
                @getValue="checkChange"                   
                :curValue="defaulData"
                :data="tableData"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                multiple		
                collapseTags	
                :placeholder='departlabel'
                ></selectTree>
            </el-col>
             <el-col :span="5">
              <el-input
                v-model="params.keyword"
                placeholder="姓名/账号/手机号/证件号码"
                clearable
                style="width: 100%"
              />     
            </el-col> 
            <el-col :span="10">
              <el-date-picker
                style="width:100%"
                v-model="params.startEndDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                format='yyyy-MM-dd'
                range-separator="至"
                :start-placeholder="`${$SuperviseStr.operation}开始日期`"
                :end-placeholder="`${$SuperviseStr.operation}结束日期`">
              </el-date-picker>
            </el-col>
           
            <el-col :span="2">      
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else-if="(institutionalCode&&institutionalCode.endsWith('07'))||(institutionalCode&&institutionalCode.endsWith('08'))||(institutionalCode&&institutionalCode.endsWith('09'))">
            <el-col :span="4">
               <selectTree
                ref="selectTree"
                @getValue="checkChange"                   
                :curValue="defaulData"
                :data="tableData"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                multiple		
                collapseTags	
                :placeholder='departlabel'
                ></selectTree>
            </el-col>
             <el-col :span="5">
              <el-input
                v-model="params.keyword"
                placeholder="姓名/账号/手机号/证件号码"
                clearable
                style="width: 100%"
              />     
            </el-col> 
            <el-col :span="10">
              <el-date-picker
                style="width:100%"
                v-model="params.startEndDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                format='yyyy-MM-dd'
                range-separator="至"
                :start-placeholder="`${$SuperviseStr.operation}开始日期`"
                :end-placeholder="`${$SuperviseStr.operation}结束日期`">
              </el-date-picker>
            </el-col>
           
            <el-col :span="2">      
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col :span="4">
               <selectTree
                ref="selectTree"
                @getValue="checkChange"                   
                :curValue="defaulData"
                :data="tableData"     
                :obj="{                  
                    id: 'id',
                    label: 'name',
                    children: 'children',
                }"
                checkStrictly 
                clearable	
                filterable	
                multiple		
                collapseTags	
                :placeholder='departlabel'
                ></selectTree>
            </el-col>

            <el-col :span="3">              
              <el-select v-model="params.insure"  placeholder="选择投保" clearable>
                  <el-option
                  v-for="(item,index) in insureArrOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>             
            </el-col>            
             <el-col :span="5">
              <el-input
                v-model="params.keyword"
                placeholder="姓名/账号/手机号/证件号码"
                clearable
                style="width: 100%"
              />     
            </el-col> 
            <el-col :span="10">
              <el-date-picker
                style="width:100%"
                v-model="params.startEndDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                format='yyyy-MM-dd'
                range-separator="至"
                :start-placeholder="`${$SuperviseStr.operation}开始日期`"
                :end-placeholder="`${$SuperviseStr.operation}结束日期`">
              </el-date-picker>
            </el-col>
           
            <el-col :span="2">      
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </section>

    <!-- 高级搜索区域 -->

    <!-- 选中表格内容展示区域 -->
    <!-- <section class="TableSelectBox">
       <span><i class="el-icon-warning-outline el-icon-flag"></i><span v-for="(item,index) in multipleSelection" :key="index">{{item.name}}<b v-if="index!=multipleSelection.length-1">,</b></span></span>
    </section> -->

    <!-- 内容区域 -->
    <section class="contentBox">
      <el-table
        :data="tableDataEmployee"
        ref="districtTable"
        max-height="460"
        default-expand-all
        row-key="id"
        @selection-change="handleSelectionChange"
        @select-all="handleSelectionAllChange"
      >
        <!-- <el-table-column  type="selection"   width="55">
            </el-table-column>-->
        <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 v-if="item.prop == 'employeeRecords'">
                <el-button
                @click="EmpRecordViews(scope.row)"
                type="text"
                size="small"
                class="primaryColor"
                >查看</el-button>             
            </span>

            

            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button
              @click="BackEmp(scope.row)"
              type="text"
              size="small"
              class="primaryColor"
              >复职</el-button
            >
            <el-button v-if="$SuperviseStr.operation!=='移除'" type="text" size="small" class="primaryColor" @click="exportExcelWord(scope.row)">导出离职证明</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>

    <!-- 办理离职弹窗 -->
    <UserEmployeeLeaveDialog
      :showdialog.sync="showdialog"
      @refurlist="refurlist"
      ref="popChildren"
    ></UserEmployeeLeaveDialog>
    <!-- 办理离职弹窗 -->
    <UserEmployeeBackDialog
      :showdialogBack.sync="showdialogBack"
      @refurlist="refurlist"
      ref="popChildrenBack"
    ></UserEmployeeBackDialog>
    <!-- 导入离职弹窗 -->
    <ImportEmployeeDialog
      :showdialogImport.sync="showdialogImport"
      @refurlist="refurlist"
      ref="ImportpopChildren"
    ></ImportEmployeeDialog>

    <!-- 办理离职弹窗 -->
    <EmpRecordViewsDialog
      :showEmpRecorddialog.sync="showEmpRecorddialog"
      @refurlist="refurlist"
      ref="popChildrenEmpRecord"
    ></EmpRecordViewsDialog>
  </div>
</template>
<script>
import {
  StaffDepartmentListApi,
  employeeTableListLeaveApi,
  exportLeaveExcelApi,
  exportLeaveExcelWordApi
} from "@/api/staffApi.js";
import UserEmployeeLeaveDialog from "./components/UserEmployeeLeaveDialog.vue";
import UserEmployeeBackDialog from "./components/UserEmployeeBackDialog.vue";
import ImportEmployeeDialog from "./components/ImportEmployeeDialog.vue";
import EmpRecordViewsDialog from "./components/EmpRecordViewsDialog.vue";
import selectTree from "@/components/SelectTree";
export default {
  data() {
    return {
      tableData: [],
      tableDataEmployee: [],
      multipleSelection: [], //全选列表
      tableColumn: [
        { prop: "name", label: "姓名", width: "180", show: true },
        { prop: "telephone", label: "手机号", width: "180", show: true },
        {
          prop: "departName",
          label: `所在${$SuperviseStr.depart}`,
          width: "180",
          show: true,
        },
        { prop: "credentialType", label: "证件类型", width: "180", show: true },
        {
          prop: "credentialNumber",
          label: "证件号码",
          width: "180",
          show: true,
        },
        { prop: "hiredDate", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
        { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
        { prop: "leaveNote", label: `${$SuperviseStr.operation}原因`, width: "180", show: true },
        { prop: "insure", label: "是否投保", width: "180", show: true },
        { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
        { prop: "operatorName", label: "操作人", width: "180", show: true },
        {
          prop: "operatedTimeText",
          label: "操作时间",
          width: "180",
          show: true,
        },
      ],
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        total: 0,
      },
      showdialog: false,
      showdialogBack: false,
      disabled: true, //默认禁用
      isAllSelect: false, //是否全选
      displayOrderShow: false,
      showdialogImport: false, //导入员工
      credentialTypesoptions: [
        //证件类型
        { value: "IdCard", label: "居民身份证/户口簿" },
        { value: "IdCardOfXiangGang", label: "香港特区护照/身份证明" },
        { value: "IdCardOfAoMen", label: "澳门特区护照/身份证明" },
        { value: "IdCardOfTaiwan", label: "台湾居民来往大陆通行证" },
        { value: "Passport", label: "外国护照" },
        { value: "Arms", label: "退伍军人证" },
        { value: "PoliceNo", label: "警号" },
      ],
      occupationTypeArr: [], //职业类型
      authenticatedStatusesoptions: [
        //实名状态
        { value: "UnAuthenticated", label: "未认证" },
        { value: "Authenticating", label: "认证中" },
        { value: "Failed", label: "认证失败" },
        { value: "Passed", label: "已认证" },
      ],
      insureArrOptions:[
          {value:'True',label:"已投保"},
          {value:'False',label:"未投保"}
      ],
      defaulData: [],
      HighSearchFlag: false, //默认不显示高级搜索
      homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
      departlabel:`选择${$SuperviseStr.depart}`,
      showEmpRecorddialog:false,
      institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型
    };
  },
  components: {
    selectTree, //注册组件
    UserEmployeeLeaveDialog,
    UserEmployeeBackDialog,
    ImportEmployeeDialog,
    EmpRecordViewsDialog
  },
  mounted() {
    if(this.homeTemplateBoradType=='rtpayTemplate'){//rt环境
            this.tableColumn=[
              { prop: "name", label: "姓名", width: "180", show: true },
              { prop: "telephone", label: "账号", width: "180", show: true },
              {
                prop: "departName",
                label: `所在${$SuperviseStr.depart}`,
                width: "180",
                show: true,
              },
              { prop: "credentialType", label: "证件类型", width: "180", show: true },
              {
                prop: "credentialNumber",
                label: "证件号码",
                width: "180",
                show: true,
              },
              { prop: "hiredDate", label: `${$SuperviseStr.entry}日期`, width: "180", show: true },
              { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
              { prop: "leaveNote", label: `${$SuperviseStr.operation}原因`, width: "180", show: true },
               { prop: "insure", label: "是否投保", width: "180", show: true },
              //  { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
              { prop: "operatorName", label: "操作人", width: "180", show: true },
              {
                prop: "operatedTimeText",
                label: "操作时间",
                width: "180",
                show: true,
              },
            ]
    }else if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
         this.tableColumn=[
            { prop: "name", label: "姓名", width: "180", show: true },
            { prop: "telephone", label: "手机号", width: "180", show: true },
            {
              prop: "departName",
              label: `所在${$SuperviseStr.depart}`,
              width: "180",
              show: true,
            },
            { prop: "credentialType", label: "证件类型", width: "180", show: true },
            {
              prop: "credentialNumber",
              label: "证件号码",
              width: "180",
              show: true,
            },
            { prop: "hiredDate", label: `${$SuperviseStr.entry}日期`, width: "180", show: true },
            { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
            { prop: "leaveNote", label: `${$SuperviseStr.operation}原因`, width: "180", show: true },
            { prop: "insure", label: "是否投保", width: "180", show: true },
            { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
            { prop: "operatorName", label: "操作人", width: "180", show: true },
            {
              prop: "operatedTimeText",
              label: "操作时间",
              width: "180",
              show: true,
            },
       ]
    }else if(this.institutionalCode=='0601'){
       this.tableColumn=[
       { prop: "name", label: "姓名", width: "180", show: true },
        { prop: "telephone", label: "手机号", width: "180", show: true },
        {
          prop: "departName",
          label: `所在${$SuperviseStr.depart}`,
          width: "180",
          show: true,
        },
        { prop: "credentialType", label: "证件类型", width: "180", show: true },
        {
          prop: "credentialNumber",
          label: "证件号码",
          width: "180",
          show: true,
        },
        { prop: "hiredDate", label: `${$SuperviseStr.entry}日期`, width: "180", show: true },
        { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
        { prop: "leaveNote", label: `${$SuperviseStr.operation}原因`, width: "180", show: true },
        { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
        { prop: "operatorName", label: "操作人", width: "180", show: true },
        {
          prop: "operatedTimeText",
          label: "操作时间",
          width: "180",
          show: true,
        },
       ]
    }else if(this.institutionalCode.startsWith('04')||this.institutionalCode.startsWith('07')){
       this.tableColumn=[
       { prop: "name", label: "姓名", width: "180", show: true },
        { prop: "telephone", label: "手机号", width: "180", show: true },
        {
          prop: "departName",
          label: `所在${$SuperviseStr.depart}`,
          width: "180",
          show: true,
        },
        { prop: "credentialType", label: "证件类型", width: "180", show: true },
        {
          prop: "credentialNumber",
          label: "证件号码",
          width: "180",
          show: true,
        },
        { prop: "hiredDate", label: `${$SuperviseStr.entry}日期`, width: "180", show: true },
        { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
        { prop: "leaveNote", label: "离职原因", width: "180", show: true },
        { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
        { prop: "operatorName", label: "操作人", width: "180", show: true },
        {
          prop: "operatedTimeText",
          label: "操作时间",
          width: "180",
          show: true,
        },
       ]
    }else if(this.institutionalCode.endsWith('07')||this.institutionalCode.endsWith('08')||this.institutionalCode.endsWith('09')){
       this.tableColumn=[
       { prop: "name", label: "姓名", width: "180", show: true },
        { prop: "telephone", label: "手机号", width: "180", show: true },
        {
          prop: "departName",
          label: `所在${$SuperviseStr.depart}`,
          width: "180",
          show: true,
        },
        { prop: "credentialType", label: "证件类型", width: "180", show: true },
        {
          prop: "credentialNumber",
          label: "证件号码",
          width: "180",
          show: true,
        },
        { prop: "hiredDate", label: `${$SuperviseStr.entry}日期`, width: "180", show: true },
        { prop: "leaveDateText", label: `${$SuperviseStr.operation}日期`, width: "180", show: true },
        { prop: "leaveNote", label: `${$SuperviseStr.operation}原因`, width: "180", show: true },
        { prop: "employeeRecords", label: "就职记录", width: "180", show: true },
        { prop: "operatorName", label: "操作人", width: "180", show: true },
        {
          prop: "operatedTimeText",
          label: "操作时间",
          width: "180",
          show: true,
        },
       ]
    }
    this.employeeTableLeaveList(); //列表表格
     this.tableDatalist()//查询部门列表
  },
  watch: {
    multipleSelection() {
      if (this.multipleSelection.length) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
  methods: {
    exportExcel() {
      //导出
      let obj2 = { domainId: this.$route.query.domainId };
      exportLeaveExcelApi(this.params, obj2).then((response) => {
        console.log(response);
        const content = response;
        const blob = new Blob([content]);
        const fileName = `导出.xls`;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    exportExcelWord(row) {
      //导出
      let obj2 = { domainId: this.$route.query.domainId };
      exportLeaveExcelWordApi(row, obj2).then((response) => {
        console.log(response);
        const content = response;
        const blob = new Blob([content]);
        const fileName = `离职证明.doc`;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    addUserLeave() {
      //添加员工弹窗
      this.showdialog = true;
      this.$refs.popChildren.getTableRow({}, 0);
    },
    search() {
      //查询
      this.params.pageIndex = 1; //重置第一页
      let obj2 = { domainId: this.$route.query.domainId };
      console.log("params",this.params.startEndDate)
      this.$set(this.params,'startDate',this.params.startEndDate&&this.params.startEndDate[0]||'')
      this.$set(this.params,'endDate',this.params.startEndDate&&this.params.startEndDate[1]||'')
      employeeTableListLeaveApi(this.params, obj2).then((response) => {
        if (response.data.data) {
          this.tableDataEmployee = response.data.data;
          this.params.total = response.data.total;
        }
      });
    },
    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);
    },
    employeeTableLeaveList() {
      //列表表格-查询结果
      let obj2 = { domainId: this.$route.query.domainId };
      employeeTableListLeaveApi(this.params, obj2).then((response) => {
        if (response.data.data) {
          this.tableDataEmployee = response.data.data;
          this.params.total = response.data.total;
        }
      });
    },
    checkChange(key, data) {
      //selectTree组件-复选框选中的数据
      console.log(key);
      console.log(data);
      this.$set(this.params, "departIds", key);
    },
    handleCurrentChange(val) {
      //分页切换页码
      console.log(val);
      this.params.pageIndex = val;
      this.employeeTableLeaveList();
    },
    handleSizeChange(val) {
      //切换每页条数
      console.log(val);
      this.params.pageSize = val;
      this.employeeTableLeaveList();
    },
    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);
    },
    BackEmp(row) {
      //编辑
      this.showdialogBack = true;
      this.$refs.popChildrenBack.getTableRow(row, 1);
    },
    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;
    },
    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.employeeTableLeaveList(); //表格列表
    },
    EmpRecordViews(row) {
      //就职记录查看
      this.showEmpRecorddialog = true;
      this.$refs.popChildrenEmpRecord.getTableRow(row, 1);
    },
  },
};
</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;
      }
    }
  }
  .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;
  }
}
</style>
