<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" />
|
</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"
|
>
|
</TableCommonView>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { getPayrollSalaryPlanListApi } 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.setTable();
|
this.initData();
|
},
|
computed: {
|
},
|
methods: {
|
initTable(){
|
this.showcol=[ '工种','姓名','生产工资','满勤',
|
'超时工资','加班工资','交通补贴',
|
'带徒补贴','岗位补贴','社保补贴' ,'工龄补贴',
|
'不达保底','质量奖','奖罚1','奖罚2/清凉补贴',
|
'日常检查/奖罚3','停机补贴','应发工资','备注'
|
];
|
this.tableColumn=[
|
{ label: "工种", prop: "workTypeName",default:true,fixed:true},
|
{ label: "姓名", prop: "workerName",default:true,fixed:true},
|
{ label: "应发工资", prop: "amount",default:true,fixed:true},
|
{ label: "生产工资", prop: "productionAmount" ,default:true},
|
{ label: "超时工资", prop: "timeoutAmount",default:true},
|
{ label: "加班工资", prop: "overtimeAmount",default:true},
|
{ label: "交通补贴", prop: "trafficAmount" ,default:true},
|
{ label: "带徒补贴", prop: "masterApprenticeAmount",default:true },
|
{ label: "岗位补贴", prop: "positionAmount",default:true},
|
{ label: "社保补贴", prop: "socialSecurityAmount",default:true},
|
{ label: "工龄补贴", prop: "seniorityAmount",default:true },
|
{ label: "不达保底", prop: "baseSalaryAmount",default:true},
|
{ label: "质量奖", prop: "qualityStandardsAmount" ,default:true},
|
{ label: "奖罚1", prop: "substandardQualityAmount",default:true},
|
{ label: "奖罚2/清凉补贴", prop: "heatAmount",default:true},
|
{ label: "日常检查/奖罚3", prop: "dailyInspectionAmount",default:true},
|
{ label: "停机补贴", prop: "downtimeAmount",default:true},
|
{ label: "备注", prop: "remark",default:true},
|
]
|
},
|
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.initTable();
|
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 getData() {
|
this.loading = true
|
const {code,data,total}=await getPayrollSalaryPlanListApi({
|
...this.object,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize,
|
keyword:this.keyword
|
});
|
if(code===200){
|
this.tableList.tableInfomation=data;
|
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>
|
