| | |
| | | <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" |
| | | > |
| | | <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" |
| | | <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" /> |
| | | @change="changeWorkTypeCode" clearable> |
| | | <el-option v-for="workTypeCode in workTypeCodeList" :label="workTypeCode.label" |
| | | :value="workTypeCode.value" :key="workTypeCode.value" /> |
| | | </el-select> |
| | | </div> |
| | | </template> |
| | |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | v-loading="loading" |
| | | :table-list="tableList" |
| | | @selTableCol="selTableCol" |
| | | > |
| | | <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList" |
| | | @selTableCol="selTableCol" @inputContent="tableInputHandle"> |
| | | </TableCommonView> |
| | | </div> |
| | | <div class="btn-pager"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getPayrollSalaryPlanListApi } from "@/api/employeeSalary/payroll.js" |
| | | import { getPayrollConstituteListApi, savePayrollConstituteApi } from "@/api/employeeSalary/payroll.js" |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" |
| | | import NewDate from "@/api/date"; |
| | | const { getPreviousMonth } = NewDate; |
| | |
| | | } |
| | | }, |
| | | 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'}, |
| | |
| | | this.getData() |
| | | }, |
| | | setTable() { |
| | | this.initTable(); |
| | | this.tableList = { |
| | | selectIndex: true, |
| | | isFixed:true, |
| | |
| | | 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 getPayrollSalaryPlanListApi({ |
| | | const { code, data, total } = await getPayrollConstituteListApi({ |
| | | ...this.object, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize, |
| | | keyword:this.keyword |
| | | }); |
| | | if(code===200){ |
| | | this.tableList.tableInfomation=data; |
| | | 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; |
| | |
| | | .silkRegister-form { |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .filter { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 12px 20px 0 20px; |
| | | |
| | | &-card { |
| | | height: 80px; |
| | | display: flex; |
| | |
| | | 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; |
| | | } |