643 lines
19 KiB
Vue
643 lines
19 KiB
Vue
<template>
|
|
<div class="payoff">
|
|
<el-row type="flex" style="width: 100%; height: 100%">
|
|
<el-col class="left-col" :span="5">
|
|
<vue-scroll>
|
|
<div class="scroll">
|
|
<div class="list-wrapper">
|
|
<div
|
|
v-for="(item, index) in projectList"
|
|
:key="item.id"
|
|
:class="['list-item', { 'is-active': activeIndex == index }]"
|
|
@click="handleItemClick(index)"
|
|
>
|
|
<span class="title">{{ item.enterpriseName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</el-col>
|
|
<el-col class="right-col" :span="19">
|
|
<el-row style="width: 100%; height: 100%">
|
|
<el-col
|
|
class="top-col"
|
|
:span="4"
|
|
:class="styleType == 3 ? 'changeStyle' : ''"
|
|
>
|
|
<el-form
|
|
size="medium"
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
:inline="true"
|
|
label-width="120px"
|
|
>
|
|
<el-form-item label="工资发放状态" prop="payStatus">
|
|
<el-select
|
|
v-model="queryParams.payStatus"
|
|
placeholder="请选择工资发放状态"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in wageStatusOptions"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="班组" prop="teamId">
|
|
<el-select
|
|
v-model="queryParams.teamId"
|
|
placeholder="请选择班组"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in teamOptions"
|
|
:key="item.id"
|
|
:label="item.teamName"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="部门" prop="departmentId">
|
|
<el-select
|
|
v-model="queryParams.departmentId"
|
|
placeholder="请选择部门"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in departmentOptions"
|
|
:key="item.id"
|
|
:label="item.departmentName"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="workerName">
|
|
<el-input
|
|
v-model="queryParams.workerName"
|
|
placeholder="请输入姓名"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号" prop="idCard">
|
|
<el-input
|
|
v-model="queryParams.idCard"
|
|
placeholder="请输入身份证号"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="月份" prop="payMonth">
|
|
<el-date-picker
|
|
type="month"
|
|
v-model="queryParams.payMonth"
|
|
format="yyyy-MM"
|
|
value-format="yyyy-MM"
|
|
:style="{ width: '100%' }"
|
|
placeholder="请选择月份"
|
|
clearable
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="handleQuery">查询</el-button>
|
|
<el-button @click="handleExport">导出 PDF</el-button>
|
|
<el-button @click="handleExportExcel">导出 Excel</el-button>
|
|
<el-upload
|
|
style="display: inline-block; margin-left: 15px"
|
|
class="upload-demo"
|
|
name="excelFile"
|
|
:action="
|
|
$http.defaults.baseURL +
|
|
'xmgl/workerWagesPayment/uploadWagesPaymentExcel'
|
|
"
|
|
:on-success="handleUploadSuccess"
|
|
:on-error="handleUploadError"
|
|
:show-file-list="false"
|
|
:headers="headers"
|
|
:data="{ projectSn: projectSn }"
|
|
:limit="1"
|
|
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
|
|
:auto-upload="true"
|
|
>
|
|
<el-button>导入 Excel</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col
|
|
class="bottom-col"
|
|
:span="20"
|
|
:class="styleType == 3 ? 'bottomTwo' : ''"
|
|
>
|
|
<vue-scroll>
|
|
<div class="scroll" :class="styleType == 3 ? 'boxBottom' : ''">
|
|
<el-table v-loading="loading" :data="userList">
|
|
<el-table-column
|
|
label="月份"
|
|
align="center"
|
|
prop="payMonth"
|
|
/>
|
|
<el-table-column
|
|
label="姓名"
|
|
align="center"
|
|
prop="workerName"
|
|
/>
|
|
<el-table-column
|
|
label="身份证号"
|
|
align="center"
|
|
prop="idCard"
|
|
/>
|
|
<el-table-column
|
|
label="班组名称/部门名称"
|
|
align="center"
|
|
prop="teamId"
|
|
>
|
|
<template #default="{ row }">
|
|
<span>{{
|
|
row.personType == 1
|
|
? row.teamName
|
|
: row.personType == 2
|
|
? row.departmentName
|
|
: ''
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="应发工资"
|
|
align="center"
|
|
prop="payGross"
|
|
/>
|
|
<el-table-column
|
|
label="实发工资"
|
|
align="center"
|
|
prop="payNet"
|
|
/>
|
|
<el-table-column
|
|
label="工资发放状态"
|
|
align="center"
|
|
prop="payStatus"
|
|
>
|
|
<template #default="{ row }">
|
|
<span v-if="row.payStatus == '1'">已发放</span>
|
|
<span v-else>未发放</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
style="border: 0 !important"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(row)"
|
|
>编辑</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-row type="flex" justify="center">
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNo"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
layout="total, prev, pager, next, jumper"
|
|
/>
|
|
</el-row>
|
|
</div>
|
|
</vue-scroll>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<el-dialog :visible.sync="open" width="600px" append-to-body title="编辑">
|
|
<el-form
|
|
ref="editForm"
|
|
:model="editForm"
|
|
:rules="editFormRules"
|
|
size="medium"
|
|
label-width="120px"
|
|
>
|
|
<el-form-item label="姓名" prop="workerName">
|
|
<el-input
|
|
v-model="editForm.workerName"
|
|
placeholder="请输入姓名"
|
|
:disabled="true"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号" prop="idCard">
|
|
<el-input
|
|
v-model="editForm.idCard"
|
|
placeholder="请输入身份证号"
|
|
:disabled="true"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="月份" prop="payMonth">
|
|
<el-date-picker
|
|
type="month"
|
|
v-model="editForm.payMonth"
|
|
format="yyyy-MM"
|
|
value-format="yyyy-MM"
|
|
:style="{ width: '100%' }"
|
|
placeholder="请选择月份"
|
|
clearable
|
|
:disabled="true"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="班组名称" prop="teamId">
|
|
<el-input
|
|
v-model="editForm.teamId"
|
|
placeholder=""
|
|
:disabled="true"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="部门名称" prop="departmentId">
|
|
<el-select
|
|
:disabled="true"
|
|
v-model="editForm.departmentId"
|
|
placeholder=""
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in departmentOptions"
|
|
:key="item.id"
|
|
:label="item.departmentName"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="应发工资" prop="payGross">
|
|
<el-input
|
|
v-model="editForm.payGross"
|
|
placeholder="请输入应发工资"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="实发工资" prop="payNet">
|
|
<el-input
|
|
v-model="editForm.payNet"
|
|
placeholder="请输入实发工资"
|
|
clearable
|
|
:style="{ width: '100%' }"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer">
|
|
<el-button @click="cancel">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
enterpriseList,
|
|
teamList,
|
|
departmentList,
|
|
payrollRecord,
|
|
exportSalaryPdf,
|
|
exportSalaryExcel,
|
|
importWagesPaymentExcel,
|
|
updateWorkerWagesPayment
|
|
} from '@/assets/js/api/laborManagement/payoff'
|
|
|
|
import { nowDate } from '@/util'
|
|
|
|
import { wageStatusOptions } from './data'
|
|
|
|
export default {
|
|
data: () => ({
|
|
// 3 衢州版 2 星璇版 1 正常版本
|
|
styleType: '',
|
|
// 项目SN
|
|
projectSn: '',
|
|
// 弹窗标题
|
|
title: '',
|
|
// 控制弹窗的打开与关闭
|
|
open: false,
|
|
// 遮罩层
|
|
loading: false,
|
|
// 当前激活的项目
|
|
activeIndex: 0,
|
|
// 项目列表
|
|
projectList: [],
|
|
// 总条数
|
|
total: 1,
|
|
// 用户数据
|
|
userList: [],
|
|
// 工资发放状态选项
|
|
wageStatusOptions,
|
|
// 班组列表选项
|
|
teamOptions: [],
|
|
// 部门列表选项
|
|
departmentOptions: [],
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
projectSn: undefined, // 项目SN
|
|
enterpriseId: undefined, // 企业ID
|
|
|
|
teamId: undefined,
|
|
departmentId: undefined,
|
|
payStatus: undefined,
|
|
payMonth: undefined,
|
|
workerName: undefined,
|
|
idCard: undefined,
|
|
},
|
|
editForm: {},
|
|
editFormRules: {
|
|
workerName: [{
|
|
required: false,
|
|
message: '请输入姓名',
|
|
trigger: 'blur'
|
|
}],
|
|
idCard: [{
|
|
required: false,
|
|
message: '请输入身份证号',
|
|
trigger: 'blur'
|
|
}],
|
|
month: [{
|
|
required: false,
|
|
message: '请选择月份',
|
|
trigger: 'change'
|
|
}],
|
|
teamId: [{
|
|
required: false,
|
|
message: '请输入班组名称',
|
|
trigger: 'blur'
|
|
}],
|
|
departmentId: [{
|
|
required: false,
|
|
message: '请输入部门名称',
|
|
trigger: 'blur'
|
|
}],
|
|
payGross: [{
|
|
required: true,
|
|
message: '请输入应发工资',
|
|
trigger: 'blur'
|
|
}],
|
|
payNet: [{
|
|
required: true,
|
|
message: '请输入实发工资',
|
|
trigger: 'blur'
|
|
}],
|
|
},
|
|
}),
|
|
computed: {
|
|
headers() {
|
|
return { Authorization: this.$store.state.userInfo.token }
|
|
}
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.queryParams.payMonth = nowDate()
|
|
this.styleType = this.$store.state.userInfo.styleType
|
|
// 查询企业列表
|
|
this.getEnterpriseList()
|
|
},
|
|
methods: {
|
|
/** 查询企业列表 */
|
|
getEnterpriseList() {
|
|
const params = {
|
|
projectSn: this.projectSn,
|
|
enterpriseName: undefined,
|
|
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
|
enterpriseTypeId: undefined,
|
|
};
|
|
enterpriseList(params).then(res => {
|
|
console.log('查询企业列表: ', res);
|
|
this.projectList = res.result;
|
|
// 默认获取第一个部门的id
|
|
this.queryParams.enterpriseId = this.projectList[this.activeIndex].enterpriseId;
|
|
// 查询数据
|
|
this.getList()
|
|
// 查询班组列表
|
|
this.getTeamList()
|
|
// 查询部门列表
|
|
this.getDepartmentList()
|
|
})
|
|
},
|
|
/** 查询用户数据 */
|
|
getList() {
|
|
this.loading = true;
|
|
this.queryParams.projectSn = this.projectSn;
|
|
payrollRecord(this.queryParams).then(({ result }) => {
|
|
console.log('查询用户数据: ', result);
|
|
this.userList = result.records;
|
|
this.total = result.total;
|
|
this.loading = false;
|
|
})
|
|
},
|
|
/** 查询班组列表 */
|
|
getTeamList() {
|
|
const params = {
|
|
enterpriseId: this.queryParams.enterpriseId,
|
|
projectSn: this.projectSn,
|
|
}
|
|
teamList(params).then(res => {
|
|
console.log('查询班组列表: ', res);
|
|
this.teamOptions = res.result.list;
|
|
})
|
|
},
|
|
/** 查询部门列表 */
|
|
getDepartmentList() {
|
|
const params = {
|
|
enterpriseId: this.queryParams.enterpriseId,
|
|
projectSn: this.projectSn,
|
|
}
|
|
departmentList(params).then(res => {
|
|
console.log('查询部门列表: ', res);
|
|
this.departmentOptions = res.result.list;
|
|
})
|
|
},
|
|
/** 项目列表 点击操作 */
|
|
handleItemClick(index) {
|
|
if (this.activeIndex == index) return;
|
|
|
|
this.activeIndex = index;
|
|
this.queryParams.pageNo = 1;
|
|
this.queryParams.payMonth = nowDate()
|
|
this.queryParams.enterpriseId = this.projectList[index].enterpriseId;
|
|
this.getList();
|
|
this.getTeamList()
|
|
this.getDepartmentList()
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.editForm = {
|
|
workerName: undefined,
|
|
idCard: undefined,
|
|
payMonth: undefined,
|
|
teamId: undefined,
|
|
departmentId: undefined,
|
|
payGross: undefined,
|
|
payNet: undefined,
|
|
}
|
|
this.resetForm('editForm');
|
|
},
|
|
/** 查询 */
|
|
handleQuery() {
|
|
this.queryParams.pageNo = 1;
|
|
this.getList();
|
|
},
|
|
/** 导出 */
|
|
handleExport() {
|
|
let params = {
|
|
projectSn: this.projectSn,
|
|
teamId: this.queryParams.teamId,
|
|
departmentId: this.queryParams.departmentId,
|
|
payStatus:this.queryParams.payStatus
|
|
}
|
|
exportSalaryPdf(params)
|
|
},
|
|
/** 导出Excel */
|
|
handleExportExcel() {
|
|
let params = {
|
|
projectSn: this.projectSn,
|
|
teamId: this.queryParams.teamId,
|
|
departmentId: this.queryParams.departmentId,
|
|
payStatus:this.queryParams.payStatus
|
|
}
|
|
exportSalaryExcel(params)
|
|
},
|
|
handleUploadSuccess(res) {
|
|
if (res.code == 200) {
|
|
this.$message.success(res.message);
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
},
|
|
handleUploadError() {
|
|
this.$message.error("导入失败");
|
|
},
|
|
/** 编辑 || 更新 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
this.editForm = Object.assign(this.editForm, row);
|
|
console.log('this.editForm: ', this.editForm);
|
|
this.open = true;
|
|
},
|
|
/** 取消按钮 */
|
|
cancel() {
|
|
this.reset();
|
|
this.open = false;
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm: function () {
|
|
this.$refs['editForm'].validate(valid => {
|
|
if (!valid) return
|
|
const params = {
|
|
projectSn: this.projectSn,
|
|
enterpriseId: this.queryParams.enterpriseId,
|
|
personSn: this.editForm.personSn,
|
|
idCard: this.editForm.idCard,
|
|
workerName: this.editForm.workerName,
|
|
payMonth: this.editForm.payMonth,
|
|
teamId: this.editForm.teamId,
|
|
departmentId: this.editForm.departmentId,
|
|
payGross: this.editForm.payGross,
|
|
payNet: this.editForm.payNet,
|
|
}
|
|
updateWorkerWagesPayment(params).then(res => {
|
|
this.getList();
|
|
this.cancel()
|
|
})
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.payoff {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
.left-col {
|
|
padding-top: 20px;
|
|
margin-right: 20px;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
// 工程列表
|
|
.list-wrapper {
|
|
box-sizing: border-box;
|
|
|
|
height: 100%;
|
|
border-top: 2px solid #f3f5fd;
|
|
}
|
|
|
|
.list-item {
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 45px;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease-in;
|
|
background-color: #fff;
|
|
border-left: 3px solid transparent;
|
|
border-bottom: 2px solid #f3f5fd;
|
|
}
|
|
.list-item.is-active {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-left-color: #0e74d6;
|
|
background-color: #f3f6fd;
|
|
}
|
|
}
|
|
|
|
.right-col {
|
|
width: 100%;
|
|
height: 100%;
|
|
.top-col,
|
|
.bottom-col {
|
|
background: #fff;
|
|
}
|
|
.top-col {
|
|
padding: 30px 25px;
|
|
width: 100%;
|
|
height: 20%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.bottom-col {
|
|
width: 100%;
|
|
height: calc(80% - 20px);
|
|
}
|
|
}
|
|
}
|
|
/* 查询表单 按钮样式 */
|
|
.right-col ::v-deep .el-button {
|
|
border-color: #4e7cff;
|
|
}
|
|
|
|
.scroll {
|
|
overflow-y: auto;
|
|
}
|
|
.boxBottom {
|
|
margin-top: 30px;
|
|
}
|
|
</style> |