<template>
|
<div class="silkRegister-form">
|
<div class="filter">
|
<div class="filter-card">
|
<CommonSearch :show-add="false" :show-download="false" :amount-view="false" :show-action-btn="false"
|
placeholder="请输入关键词" @searchClick="onFilterSearch">
|
<template slot="leftButton">
|
<div class="margin_right_20px" style="width:200px;">
|
<el-date-picker v-model="object.cycle" style="width:100%" @change="changeDate"
|
:clearable="false" type="month" placeholder="选择日期" :picker-options="pickerOptions"
|
value-format="yyyy-MM">
|
</el-date-picker>
|
</div>
|
<div>
|
<el-select placeholder="请选择工种" v-model="object.workTypeCode" filterable
|
@change="changeWorkTypeCode" clearable>
|
<el-option v-for="workTypeCode in workTypeCodeList" :label="workTypeCode.label"
|
:value="workTypeCode.value" :key="workTypeCode.value" />
|
</el-select>
|
</div>
|
</template>
|
</CommonSearch>
|
</div>
|
</div>
|
|
<div class="body">
|
<div class="body-card">
|
<div class="list-view">
|
<TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList"
|
@selTableCol="selTableCol" @inputContent="tableInputHandle">
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { getPayrollConstituteListApi, savePayrollConstituteApi } from "@/api/employeeSalary/payroll.js"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import NewDate from "@/api/date";
|
const { getPreviousMonth } = NewDate;
|
export default {
|
name: "attendanceStatistics",
|
props: {
|
},
|
mixins: [pageMixin],
|
components: {},
|
data() {
|
return {
|
tableList: {},
|
loading: false,
|
searchOptions: [],
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > new Date().getTime() - 86400000;
|
},
|
},
|
object: {
|
cycle: getPreviousMonth(),
|
workTypeCode: ''
|
},
|
workTypeCodeList: [],
|
keyword: "",
|
tableColumn: [],
|
showCol: [],
|
|
}
|
},
|
created() {
|
this.initData();
|
},
|
methods: {
|
initData() {
|
this.workTypeCodeList = [
|
{ label: '挡车工', value: 'weavers' },
|
{ label: '车头工', value: 'car_head' },
|
{ label: '保全工', value: 'maintenance' },
|
{ label: '煮茧工', value: 'boiled' },
|
{ label: '舀茧工', value: 'scoop' },
|
{ label: '送茧工', value: 'transport' },
|
{ label: '清洁工', value: 'cleaner' },
|
{ label: '感知器清洗工', value: 'machine_cleaner' },
|
{ label: '全能机动', value: 'all-powerful' },
|
{ label: '班长', value: 'monitor' }
|
];
|
this.getData();
|
},
|
changeWorkTypeCode() {
|
this.pagerOptions.currPage = 1;
|
this.getData()
|
},
|
setTable() {
|
this.tableList = {
|
selectIndex: true,
|
isFixed: true,
|
tableInfomation: [],
|
allcol: [],
|
showcol: this.showcol,
|
headerHeight: '47px',
|
tableColumn: this.setColumnVisible(this.showcol)
|
}
|
this.tableList.allcol = this.tableList.tableColumn.filter(item => !item.fixed).map((ele) => ele.label)
|
this.searchOptions = [];
|
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
|
const label = this.tableList.tableColumn[i].label
|
const value = this.tableList.tableColumn[i].prop
|
this.searchOptions.push({ value: value, label: label })
|
}
|
},
|
setColumnVisible(showCol) {
|
return this.tableColumn.map((ele) => {
|
return {
|
...ele,
|
isShowColumn: showCol.includes(ele.label)
|
}
|
})
|
},
|
selTableCol(val) {
|
this.showcol = val;
|
this.tableList.tableColumn = this.setColumnVisible(val);
|
},
|
async tableInputHandle(prop, row) {
|
const data = {
|
amount: row[prop],
|
cycle: this.object.cycle,
|
salaryPlanId: parseInt(prop),
|
workerId: row.workerId,
|
}
|
const { code } = await savePayrollConstituteApi(data)
|
if (code == 200) {
|
this.$message.success("薪资保存成功");
|
} else {
|
this.$message.error("薪资保存失败");
|
}
|
this.getData()
|
},
|
|
// 请求数据
|
async getData() {
|
this.loading = true
|
const { code, data, total } = await getPayrollConstituteListApi({
|
...this.object,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyword: this.keyword
|
});
|
if (code === 200) {
|
const tableData = []
|
// 处理表头
|
const dynamicColumn = data[0].list.map(item => {
|
return {
|
label: item.salaryPlan.name,
|
prop: item.salaryPlan.ID.toString(),
|
isEditTd: true,
|
default: true,
|
}
|
})
|
|
// 处理数据
|
data.forEach(item => {
|
const dataObj = {}
|
dataObj.workTypeName = item.worker.workType
|
dataObj.workerName = item.worker.name
|
dataObj.workerId = item.worker.id
|
dataObj.amount = item.amount
|
dataObj.remark = item.remark
|
if (item.list.length > 0) {
|
item.list.forEach(subItem => {
|
dataObj[subItem.salaryPlan.ID.toString()] = subItem.amount
|
})
|
}
|
tableData.push(dataObj)
|
})
|
// 处理数据
|
|
const col = dynamicColumn.map(item => item.label)
|
|
this.showcol = ['工种', '姓名', '应发工资', ...col, '备注'];
|
this.tableColumn = [
|
{ label: "工种", prop: "workTypeName", default: true, fixed: true },
|
{ label: "姓名", prop: "workerName", default: true, fixed: true },
|
{ label: "应发工资", prop: "amount", default: true, fixed: true },
|
...dynamicColumn,
|
{ label: "备注", prop: "remark", default: true },
|
]
|
this.setTable();
|
|
this.tableList.tableInfomation = tableData;
|
this.pagerOptions.totalCount = total;
|
}
|
this.loading = false;
|
},
|
changeDate() {
|
this.pagerOptions.currPage = 1
|
this.getData()
|
},
|
// 搜索
|
onFilterSearch(searchText) {
|
this.keyword = searchText ?? ""
|
this.pagerOptions.currPage = 1
|
this.getData()
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.silkRegister-form {
|
height: 100%;
|
overflow: hidden;
|
|
.filter {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 12px 20px 0 20px;
|
|
&-card {
|
height: 80px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 10px 20px;
|
flex: 1;
|
border-radius: 12px;
|
background-color: #fff;
|
}
|
}
|
|
.body {
|
box-sizing: border-box;
|
padding: 10px 20px;
|
border-radius: 12px;
|
height: calc(100% - 92px);
|
|
.body-card {
|
background-color: #fff;
|
border-radius: 12px;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.list-view {
|
height: calc(100% - 100px);
|
overflow: hidden;
|
}
|
|
.btn-pager {
|
display: flex;
|
margin-top: 10px;
|
|
.page {
|
margin-left: auto;
|
}
|
}
|
}
|
}
|
</style>
|
