<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
      <el-form-item label="姓名：" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="归属部门：" prop="deptId">
        <treeselect v-model="queryParams.deptId" :options="deptOptions" style="width: 240px" :show-count="true" :autoSelectAncestors="true" placeholder="请选择归属部门" />
        
      </el-form-item>
      <el-form-item label="住宿标识：" prop="zsFlag">
        <el-select v-model="queryParams.zsFlag" placeholder="请选择住宿标识" clearable>
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item label="加班费：" prop="isOvertimePay">
        <el-select v-model="queryParams.isOvertimePay" placeholder="请选择加班费" clearable>
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期：" prop="employmentDate">
        <el-date-picker clearable
                        v-model="queryParams.employmentDate"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="请选择入职日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="在职状态：" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择在职状态" clearable>
          <el-option
            v-for="dict in dict.type.sys_worker_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="履历：" prop="experience">
        <el-input
          v-model="queryParams.experience"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="所属公司：" prop="companyName">
        <el-select v-model="queryParams.companyName" placeholder="请选择所属公司" clearable>
          <el-option
            v-for="dict in dict.type.sys_company"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:staff:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-tooltip :disabled="allowAdjustment" content="当前月考勤计算还未开始或已经结束" placement="top" effect="light">
          <el-button
            type="primary"
            plain
            :disabled="!allowAdjustment"
            icon="el-icon-circle-close"
            size="mini"
            @click="handleClearAll"
            v-hasPermi="['system:staff:cleanSubsidy']"
          >清除补助</el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:staff:export']"
        >导出信息</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportDetail"
          v-hasPermi="['system:staff:exportDetail']"
        >导出详情</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:staff:import']"
        >导入信息</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-tooltip :disabled="allowAdjustment" content="当前月考勤计算还未开始或已经结束" placement="top" effect="light">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            :disabled="!allowAdjustment"
            @click="uploadAccumulationFund"
            v-hasPermi="['system:staff:importFund']"
          >上传五险一金</el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="1.5">
        <el-tooltip :disabled="allowAdjustment" content="当前月考勤计算还未开始或已经结束" placement="top" effect="light">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            :disabled="!allowAdjustment"
            @click="importSalesCommissions"
            v-hasPermi="['system:staff:importSalesCommissions']"
          >上传销售提成</el-button>
        </el-tooltip>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="staffList" >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" fixed="left" width="90" prop="name" />

      <el-table-column label="所属公司" align="center" fixed="left" prop="companyName" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_company" :value="scope.row.companyName"/>
        </template>
      </el-table-column>

      <el-table-column label="部门" align="center" fixed="left"  width="90"  prop="deptName" />
      <el-table-column label="员工编码" align="center"  width="90"  prop="code" />
      <el-table-column label="员工岗位" align="center" prop="jobCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.job_info" :value="scope.row.jobCode"/>
        </template>
      </el-table-column>
      <!-- <el-table-column label="编号" align="center" prop="code" /> -->
      <el-table-column label="身份证号" align="center" prop="idCard" width="180"/>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="电话" align="center" prop="phone" width="110"/>
      <el-table-column label="员工照片" align="center" prop="imageUrl" width="110">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"></el-image>
            </template>
          </el-table-column>
      <el-table-column label="住址" align="center" show-overflow-tooltip prop="address" />
      <el-table-column label="毕业学校" align="center" show-overflow-tooltip prop="school" />
      <el-table-column label="专业" align="center" prop="major" />
      <el-table-column label="学历" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_level" :value="scope.row.level"/>
        </template>
      </el-table-column>
      <el-table-column label="开户行" align="center" show-overflow-tooltip prop="bank" />
      <el-table-column label="银行卡号" align="center" show-overflow-tooltip prop="bankNumber" width="90"/>

      <el-table-column label="入职日期" align="center" prop="employmentDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.employmentDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试用期限" align="center" prop="workerTerm">
        <template slot-scope="scope">
          <span>{{ scope.row.workerTerm }}月</span>
        </template>
      </el-table-column>
      <el-table-column label="在职状态" align="center" prop="status" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_worker_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="离职日期" align="center" prop="quitDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.quitDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同-起止时间" align="center" prop="contractStart" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.contractStart, '{y}-{m}-{d}') }}至{{ parseTime(scope.row.contractEnd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工龄" align="center" prop="seniority" >
        <template slot-scope="scope">
          <span>{{ scope.row.seniority }}年</span>
        </template>
      </el-table-column>
      <el-table-column label="社保" align="center" prop="socialType" />
      <el-table-column label="加班费" align="center" prop="isOvertimePay" />
      <el-table-column label="住宿标识" align="center" prop="zsFlag" />
      <!-- <el-table-column label="保密合同" align="center" prop="secrecy" /> -->
      <el-table-column label="工伤" align="center" prop="injury" />
      <el-table-column label="雇主险" align="center" prop="insurance" />
      <!-- <el-table-column label="履历" align="center" prop="experience" /> -->
      <el-table-column label="介绍人" align="center" prop="introducer" />
      <el-table-column label="打卡" align="center" prop="clockIn" />
      <!-- <el-table-column label="备注" align="center" prop="remarks" /> -->
      <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            v-if="scope.row.status!=-1"
            @click="handleDetail(scope.row)"
            v-hasPermi="['system:staff:detail']"
          >查看详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status!=-1"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:staff:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==0"
            icon="el-icon-edit"
            @click="handleChange(scope.row)"
            v-hasPermi="['system:staff:change']"
          >转正</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status!=-1"
            @click="handleDelay(scope.row)"
            v-hasPermi="['system:staff:delay']"
          >工资延期</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status!=-1"
            icon="el-icon-edit"
            @click="handleJobStatus(scope.row)"
            v-hasPermi="['system:staff:jobStatus']"
          >离职</el-button>
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status==-1"
            icon="el-icon-edit"
            @click="reEmployment(scope.row)"
            v-hasPermi="['system:staff:reEmployment']"
          >重新入职</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改员工对话框 -->
    <el-dialog v-dialog-drag :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="128px">
        <el-row>
          <el-container>
            <el-container>
              <el-aside style="width: 50%; background-color: white; padding: 0px; margin-bottom: 0px;">
                <el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="姓名：" prop="name">
                          <el-input v-model="form.name" placeholder="请输入姓名" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="身份证号：" prop="idCard">
                        <el-input v-model="form.idCard" placeholder="请输入身份证号" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="电话：" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入电话" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-row>
              </el-aside>
              <el-container>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="头像：" align="center" prop="imageUrl">
                      <el-upload
                        class="avatar-uploader"
                        :action="url +'/common/upload/avatar'"
                        auto-upload
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-container>
            </el-container>
          </el-container>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="住址：" prop="address">
            <el-input v-model="form.address" placeholder="请输入住址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="打卡位置：" prop="timeClockList">
            <el-select v-model="form.timeClockList" multiple placeholder="选择打卡机" style="width: 100%;">
              <el-option
                v-for="dict in dict.type.time_clock"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

            <!-- <el-select v-model="form.timeClock" placeholder="选择打卡机" clearable >
              <el-option
                v-for="dict in dict.type.time_clock"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
          <el-form-item label="毕业学校：" prop="school">
            <el-input v-model="form.school" placeholder="请输入毕业学校" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业：" prop="major">
            <el-input v-model="form.major" placeholder="请输入专业" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学历：" prop="level">
            <el-select v-model="form.level" placeholder="请选择学历">
              <el-option
                v-for="dict in dict.type.sys_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="介绍人：" prop="introducer">
            <el-input v-model="form.introducer" placeholder="请输入介绍人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开户行：" prop="bank">
            <el-input v-model="form.bank" placeholder="请输入开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号：" prop="bankNumber">
            <el-input v-model="form.bankNumber" placeholder="请输入银行卡号" />
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="所属公司：" prop="companyName">
            <el-select v-model="form.companyName" placeholder="请选择公司">
              <el-option
                v-for="dict in dict.type.sys_company"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <!-- <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" /> -->
              <el-cascader
                v-model="form.deptId"
                :options="deptOpt"
                value="id"
                >
                <!--@change="handleChange"-->
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位：" prop="jobCode">
              <el-select v-model="form.jobCode" filterable placeholder="请选择岗位">
                <el-option
                  v-for="dict in dict.type.job_info"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否负责人：" prop="isLeader">
              <el-select v-model="form.isLeader" placeholder="请选择是不是负责人" clearable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入职日期：" prop="employmentDate">
              <el-date-picker clearable style="width: 200px;"
                v-model="form.employmentDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择入职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试用期限：" prop="workerTerm">
              <el-input v-model="form.workerTerm" placeholder="请输入试用期限" >
                <template slot="append">月</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同-起：" prop="contractStart">
              <el-date-picker clearable style="width: 200px;"
                              v-model="form.contractStart"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择合同-起">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同-止：" prop="contractEnd">
              <el-date-picker clearable style="width: 200px;"
                              v-model="form.contractEnd"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择合同-止">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否打卡：" prop="clockIn">
              <el-select v-model="form.clockIn" placeholder="请选择打卡" clearable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否住宿：" prop="zsFlag">
              <el-select v-model="form.zsFlag" placeholder="请选择住宿标识" clearable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单工伤：" prop="injury">
              <el-select v-model="form.injury" placeholder="请选择工伤" clearable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="雇主险：" prop="insurance">
              <el-select v-model="form.insurance" placeholder="请选择雇主险" clearable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="社保：" prop="socialType">
              <el-select v-model="form.socialType" placeholder="请选择社保" clearable>
                <el-option label="正常缴纳" value="正常缴纳" />
                <el-option label="新农合" value="新农合" />
                <el-option label="长期不缴纳" value="长期不缴纳" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保补助：" prop="socialSubsidy">
              <el-select v-model="form.socialSubsidy" placeholder="请选择是否新农合" clearable>
                <el-option label="享有" value="是" />
                <el-option label="不享有" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
          <el-form-item label="享有补贴：">
            <el-select v-model="form.subsidyList" multiple placeholder="请选择福利补贴" style="width: 100%;">
              <el-option
                v-for="subsidy in subsidyOptions"
                :key="subsidy.value"
                :label="subsidy.label"
                :value="subsidy.value"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          
          <el-col :span="12">
            <el-form-item label="备注：" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 员工导入对话框 -->
    <el-dialog :title="upload.title" v-dialog-drag :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <el-link type="primary" :underline="false" style="font-size:20px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          <h3 style="color: red;">仅允许导入xls、xlsx格式文件。</h3>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 员工离职或全额工资计算对话框 -->
    <el-dialog :title="title" v-dialog-drag :visible.sync="openWorker" width="400px" append-to-body>
      <el-form ref="forms" :model="form" :rules="rules" label-width="98px">
        <el-form-item label="转正日期：" prop="regularDate" v-if="disPlayFlag == '1'">
          <el-date-picker clearable
                          v-model="form.regularDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职日期：" prop="quitDate" v-if="disPlayFlag == '0'">
          <el-date-picker clearable
                          v-model="form.quitDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="全额工资日期：" prop="wagesRatioDate" v-if="disPlayFlag == '2'">
          <el-date-picker clearable
                          v-model="form.wagesRatioDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDateForm">确 定</el-button>
        <el-button @click="openWorker = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 上传五险一金 -->
    <el-dialog :title="uploadFund.title" v-dialog-drag :visible.sync="uploadFund.open" width="400px" append-to-body>
      <el-upload
        ref="uploadFund"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploadFund.headers"
        :action="uploadFund.url"
        :disabled="uploadFund.isUploading"
        :on-progress="handleFundUpload"
        :on-success="handleFundSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFundForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 上传销售提成 -->
    <el-dialog :title="uploadSale.title" v-dialog-drag :visible.sync="uploadSale.open" width="400px" append-to-body>
      <el-upload
        ref="uploadFund"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploadSale.headers"
        :action="uploadSale.url"
        :disabled="uploadSale.isUploading"
        :on-progress="handleFundUpload"
        :on-success="handleFundSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
<!--          <el-link type="primary" :underline="false" style="font-size:20px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>-->
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFundForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  <!-- 员工详情 -->
    <el-dialog v-dialog-drag :title="infoTitle" :visible.sync="openInfo" width="80%" append-to-body :close-on-click-modal="false">
      <el-form ref="infoForm" :model="infoForm" :rules="infoRules" label-width="98px">
        <el-divider content-position="left">基本详情</el-divider>
        <el-row>
          <el-col :span="4">
            <el-form-item label="基本工资" prop="basicSalary">
              <el-input v-model="infoForm.basicSalary" placeholder="基本工资" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="岗位工资" prop="jobsSalary">
              <el-input v-model="infoForm.jobsSalary" placeholder="岗位工资" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="日薪" prop="dailyWage">
              <el-input v-model="infoForm.dailyWage" placeholder="日薪" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-tooltip  placement="top" effect="light">
              <el-form-item label="其他补助" prop="otherSubsidies">
                <el-input v-model="infoForm.otherSubsidies" :disabled="!allowAdjustment" placeholder="其他补助" >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-tooltip>
            
          </el-col>
          <el-col :span="4">
            <el-tooltip  placement="top" effect="light">
              <el-form-item label="固定补助" prop="fixedAllowance">
                <el-input v-model="infoForm.fixedAllowance" :disabled="!allowAdjustment" placeholder="固定补助" >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="4">
            <el-tooltip  placement="top" effect="light">
              <el-form-item label="其他扣款" prop="deductions">
                <el-input v-model="infoForm.deductions" :disabled="!allowAdjustment" placeholder="其他扣款" >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-divider content-position="left">个税抵扣详情</el-divider>
        <el-row>
          <el-col :span="4">
            <el-form-item label="子女教育" prop="childrenEducation">
              <el-input v-model="infoForm.childrenEducation" :disabled="!allowAdjustment" placeholder="子女教育" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="继续教育" prop="adultEducation">
              <el-input v-model="infoForm.adultEducation" :disabled="!allowAdjustment" placeholder="继续教育" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="住房贷款" prop="housingLoans">
              <el-input v-model="infoForm.housingLoans" :disabled="!allowAdjustment" placeholder="住房贷款">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="住房租金" prop="housingRents">
              <el-input v-model="infoForm.housingRents" :disabled="!allowAdjustment" placeholder="住房租金" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="赡养老人" prop="supportTheOld">
              <el-input v-model="infoForm.supportTheOld" :disabled="!allowAdjustment" placeholder="赡养老人" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="大病医疗" prop="treatmentForSeriousDisease">
              <el-input v-model="infoForm.treatmentForSeriousDisease" :disabled="!allowAdjustment" placeholder="大病医疗" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row><el-divider content-position="left">社保详情</el-divider>
        <el-row>
          <el-col :span="4">
            <el-form-item label="生育险" prop="maternityInsurance">
              <el-input v-model="infoForm.maternityInsurance" disabled placeholder="生育险" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="医疗险" prop="medicalInsurance">
              <el-input v-model="infoForm.medicalInsurance" disabled placeholder="医疗险" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="养老险" prop="endowmentInsurance">
              <el-input v-model="infoForm.endowmentInsurance" disabled placeholder="养老险">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="失业险" prop="unemploymentInsurance">
              <el-input v-model="infoForm.unemploymentInsurance" disabled placeholder="失业险" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="工伤险" prop="employmentInjuryInsurance">
              <el-input v-model="infoForm.employmentInjuryInsurance" disabled placeholder="工伤险" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="公积金" prop="accumulationFund">
              <el-input v-model="infoForm.accumulationFund" disabled placeholder="公积金" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">补助详情</el-divider>
        <el-row>
          <el-col :span="4" v-for="(val,key) in infoForm.extendeds" :key="key">
            <el-form-item :label="key">
              <el-input :value="val" disabled >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <el-divider content-position="left">销售信息</el-divider>
        <el-row>

            <el-form-item label="销售提成" prop="salesCommission">
              <el-input v-model="infoForm.salesCommission" placeholder="销售提成" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>

        </el-row>

        <el-divider content-position="left">其他详情</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="本年累计已发工资">
              <el-input v-model="infoForm.totalWages" disabled  >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="本年累计专项附加扣除">
              <el-input v-model="infoForm.specialDeduction" disabled  >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="本年累计已缴个税" >
              <el-input v-model="infoForm.aggregatePersonalIncomeTax" disabled >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="infoForm.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInfoForm">确 定</el-button>
        <el-button @click="cancelInfo">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 137px;
    line-height: 137px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 137px;
    display: block;
  }
</style>


<script>
import { listStaff, getStaff, delStaff, addStaff, updateStaff, clearAllStaff,reEmployment } from '@/api/system/staff'
import {  getDetailByUser,updateDetail } from "@/api/system/staffDetail";
import { listAllDepts } from '@/api/system/dept';
import { listAllOptions } from '@/api/personnelMatters/subsidyInformation';
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import {  getAllowAdjustment } from "@/api/system/allowAdjustment";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Staff",
  dicts: ['sys_user_sex', 'sys_level','sys_yes_no','sys_worker_status','sys_contract','sys_company','time_clock','job_info'],
  components: { Treeselect },
  data() {
    return {
      url: process.env.VUE_APP_BASE_URL,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工管理表格数据
      staffList: [],
      //部门列表
      deptOptions: [],
      deptOpt:[],
      //补贴列表
      subsidyOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openInfo: false,
      infoTitle: "员工详情信息",
      //员工离职
      openWorker: false,
      //全额,离职，转正显示标识
      disPlayFlag: "0",
      //是否允许调整
      allowAdjustment: true,
      // 员工信息导入
      upload: {
        // 是否显示弹出层（员工导入）
        open: false,
        // 弹出层标题（员工导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "system/staff/importData"
      },
      // 导入五险一金
      uploadFund: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "system/staff/uploadAccumulationFund"
      },
      // 导入五险一金
      uploadSale: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "system/staff/importSalesCommissions"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        experience: null,
        zsFlag: null,
        employmentDate: null,
        deptId: null,
        status: null,
        companyName: null,
      },
      // 表单参数
      form: {},
      //详情form表单
      infoForm:{},
      infoRules: {

      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 25 之间', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: "部门不能为空", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        contractType: [
          { required: true, message: "合同期限不能为空", trigger: "blur" },
        ],
        socialType: [
          { required: true, message: "社保不能为空", trigger: "blur" },
        ],
        zsFlag: [
          { required: true, message: "住宿标识不能为空", trigger: "blur" },
        ],
        level: [
          { required: true, message: "学历不能为空", trigger: "blur" },
        ],
        wagesRatioDate: [
          { required: true, message: "全额工资日期不能为空", trigger: "blur" },
        ],
        employmentDate: [
          { required: true, message: "入职日期不能为空", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        isOvertimePay: [
          { required: true, message: "是否有加班费不能为空", trigger: "blur" },
        ],
        isLeader: [
          { required: true, message: "是否领导不能为空", trigger: "blur" },
        ],
        clockIn: [
          { required: true, message: "是否打卡不能为空", trigger: "blur" },
        ],
        socialSubsidy: [
          { required: true, message: "是否享有社保补助不能为空", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "所属公司不能为空", trigger: "blur" },
        ],
        imageUrl:[
          { required: true, message: "请上传员工头像", trigger: "blur" },
        ],
        timeClockList: [
          { required: true, message: "打卡机不能为空", trigger: "blur" }
        ],
        jobCode: [
          { required: true, message: "请选择员工岗位信息", trigger: "blur" }
        ],
        contractStart: [
          { required: true, message: "请选择合同开始时间", trigger: "blur" }
        ],
        contractEnd: [
          { required: true, message: "请选择合同结束时间", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getAllowAdjustment();
    this.getList();
    this.getDeptList();
    this.getSubsidyList();
  },
  methods: {
      //上传头像
      handleAvatarSuccess(res, file) {
        this.form.imageUrl = res.url;
        this.form.fileId = res.fileId;
      },
      //上传前检查头像格式
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt5M;
      },
    /**获取补贴 */
    getSubsidyList(){
      listAllOptions().then(response => {
        this.subsidyOptions = response.data;
      });

    },

    /** 获取部门 */
    getDeptList(){
      listAllDepts().then(response => {
        this.deptOptions = response;
        this.deptOpt = JSON.parse(JSON.stringify(this.deptOptions).replaceAll('id','value'))
      });
    },

    getAllowAdjustment(){
      getAllowAdjustment().then(response => {
        this.allowAdjustment = response.data;
      });
    },
    /** 查询员工管理列表 */
    getList() {
      this.loading = true;
      listStaff(this.queryParams).then(response => {
        this.staffList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openWorker = false;
      this.openSalery = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: null,
        code: null,
        idCard: null,
        deptId: null,
        sex: null,
        age: null,
        phone: null,
        address: null,
        level: null,
        islevel: null,
        major: null,
        regularDate: null,
        school: null,
        wagesRatioDate: null,
        clockIn: null,
        bankNumber: null,
        bank: null,
        employmentDate: null,
        workerTerm: null,
        quitDate: null,
        contractStart: null,
        contractEnd: null,
        seniority: null,
        isOvertimePay: null,
        zsFlag: null,
        secrecy: null,
        injury: null,
        insurance: null,
        isLeader: null,
        introducer: null,
        status: null,
        socialSubsidy: null,
        companyName: null,
        imageUrl:null,
        fileId:null,
        timeClock:null,
        timeClockList:null,
        subsidyList:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加员工管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getStaff(row.userId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改员工管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.deptId = this.form.deptId[this.form.deptId.length -1]
          if (this.form.userId != null) {
            updateStaff(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.openWorker = false;
              this.getList();
            });
          } else {
            addStaff(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.openWorker = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除员工名称为"' + row.name + '"的数据项？').then(function() {
        return delStaff(row.userId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出员工 */
    handleExport() {
      this.download('system/staff/export', {
        ...this.queryParams
      }, `员工信息_${new Date().getTime()}.xlsx`)
    },
    //导出员工详情
    handleExportDetail(){
      this.download('system/staff/exportDetail', {
        ...this.queryParams
      }, `员工详情_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "员工导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/staff/importTemplate', {
      }, `staff_template_${new Date().getTime()}.xlsx`)
      this.upload.open = false;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //离职设置
    handleJobStatus(row){
      this.reset();
      this.disPlayFlag = "0";
      getStaff(row.userId).then(response => {
        this.form = response.data;
        this.openWorker = true;
        this.title = "离职对话框";
      });
    },
    reEmployment(row){
      reEmployment(row.userId).then(response => {
        if(response.code==200){
          this.$modal.msgSuccess("重新入职成功");
           this.getList();
        }else{
          this.$modal.msgError(response.data.msg);
        }
      });
    },
    //员工全额工资对话框
    handleDelay(row){
      this.reset();
      this.disPlayFlag = "2";
      getStaff(row.userId).then(response => {
        this.form = response.data;
        this.openWorker = true;
        this.title = "全额工资对话框";
      });
    },
    //员工转正对话框
    handleChange(row){
      this.reset();
      this.disPlayFlag = "1";
      getStaff(row.userId).then(response => {
        this.form = response.data;
        this.openWorker = true;
        this.title = "转正对话框";
      });
    },
    /** 离职，全额工资,转正提交按钮 */
    submitDateForm() {
      this.$refs["forms"].validate(valid => {
        if (valid) {
          updateStaff(this.form).then(response => {
            this.open = false;
            this.$modal.msgSuccess("修改成功");
            this.openWorker = false;
            this.getList();
          });
        }
      });
    },
    //销售提成上传
    importSalesCommissions(){
      this.uploadSale.title = "销售提成上传";
      this.uploadSale.open = true;
    },
    //公积金导入
    uploadAccumulationFund(){
      this.uploadFund.title = "五险一金导入";
      this.uploadFund.open = true;
    },
    // 文件上传中处理
    handleFundUpload(event, file, fileList) {
      this.uploadFund.isUploading = true;
    },
    // 文件上传成功处理
    handleFundSuccess(response, file, fileList) {
      this.uploadFund.open = false;
      this.uploadFund.isUploading = false;
      this.$refs.uploadFund.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFundForm() {
      this.$refs.uploadFund.submit();
    },
    handleClearAll(){
      clearAllStaff().then(response => {
        this.$modal.msgSuccess("清理成功");
        this.getList();
      });
    },


    //查看详情
    handleDetail(row){
      getDetailByUser(row.userId).then(response => {
        this.infoForm = response.data;
        this.openInfo = true;
      });
    },
    //关闭详情
    cancelInfo(){
      this.openInfo = false;
      this.resetInfo();
    },
    resetInfo(){
      this.infoForm={};
    },

     /** 提交按钮 */
     submitInfoForm() {
      this.$refs["infoForm"].validate(valid => {
        if (valid) {
          updateDetail(this.infoForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openInfo = false;
          });
        }
      });
    },





  }
};
</script>
