evo-Financial-vue/src/views/system/staff/index.vue
2025-06-16 16:47:42 +08:00

1343 lines
49 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" 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-button
type="primary"
plain
icon="el-icon-download"
size="mini"
@click="handleClearAll"
v-hasPermi="['system:staff:exportDetail']"
>清除补助</el-button>
</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-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="uploadAccumulationFund"
v-hasPermi="['system:staff:importFund']"
>上传五险一金</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="importSalesCommissions"
v-hasPermi="['system:staff:importSalesCommissions']"
>上传销售提成</el-button>
</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" 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="regularDate" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.regularDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="全额工资日期" align="center" prop="wagesRatioDate" width="108">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.wagesRatioDate, '{y}-{m}-{d}') }}</span>
</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"
@click="handleDetail(scope.row)"
v-hasPermi="['system:staff:detail']"
>查看详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@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"
@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>
</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="timeClock">
<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="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
</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="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="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-form-item label="其他补助" prop="otherSubsidies">
<el-input v-model="infoForm.otherSubsidies" placeholder="其他补助" >
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="固定补助" prop="fixedAllowance">
<el-input v-model="infoForm.fixedAllowance" placeholder="固定补助" >
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="其他扣款" prop="deductions">
<el-input v-model="infoForm.deductions" 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="childrenEducation">
<el-input v-model="infoForm.childrenEducation" 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" 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" 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" 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" 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" 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 } 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 "@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'],
components: { Treeselect },
data() {
return {
url: process.env.VUE_APP_BASE_URL,
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 员工管理表格数据
staffList: [],
//部门列表
deptOptions: [],
//补贴列表
subsidyOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openInfo: false,
infoTitle: "员工详情信息",
//员工离职
openWorker: false,
//全额,离职,转正显示标识
disPlayFlag: "0",
// 员工信息导入
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" },
],
timeClock: [
{ required: true, message: "打卡机不能为空", trigger: "blur" }
],
}
};
},
created() {
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;
});
},
/** 查询员工管理列表 */
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,
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) {
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 = "离职对话框";
});
},
//员工全额工资对话框
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>