fix：薪资调整

张涛

2024-08-30 082b572b91abd0d5ae8e409714553130448aa6d1

 src/views/employeeSalary/payroll/index.vue

@@ -2,29 +2,20 @@
    <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"
                                            value-format="yyyy-MM">
                            <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>
@@ -35,16 +26,12 @@
        <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">
                  <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
                <div class="btn-pager">
                    <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
                </div>
            </div>
        </div>
@@ -53,194 +40,225 @@
</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;
                    },
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: [],
            },
            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 })
            }
        },
        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)
        setColumnVisible(showCol) {
            return this.tableColumn.map((ele) => {
                return {
                    ...ele,
                    isShowColumn: showCol.includes(ele.label)
                }
                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) => {
            })
        },
        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 {
                        ...ele,
                        isShowColumn:showCol.includes(ele.label)
                        label: item.salaryPlan.name,
                        prop: item.salaryPlan.ID.toString(),
                        isEditTd: true,
                        default: true,
                    }
                })
            },
            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()

                // 处理数据
                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 {
.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;
            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;
            flex: 1;
            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;
                }
            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>