fix：薪资调整

张涛

2024-08-30 082b572b91abd0d5ae8e409714553130448aa6d1

fix：薪资调整

 package-lock.json

@@ -16,6 +16,7 @@
        "faker": "^5.5.3",
        "js-cookie": "^3.0.5",
        "lodash": "^4.17.21",
        "moment": "^2.30.1",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
@@ -7890,6 +7891,14 @@
      "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
      "dev": true
    },
    "node_modules/moment": {
      "version": "2.30.1",
      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
      "engines": {
        "node": "*"
      }
    },
    "node_modules/mrmime": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz",

 src/api/employeeSalary/payroll.js

@@ -1,9 +1,17 @@
import request from "@/common/untils/request.js"
// 薪资核算列表
export function getPayrollSalaryPlanListApi(params) {
export function getPayrollConstituteListApi(params) {
    return request({
        url: "/api-jl/v1/salary/getPayrollSalaryPlanList",
        url: "/api-jl/v1/salary/getPayrollConstituteList",
        method: "get",
        params
    })
}
// 修改薪资
export function savePayrollConstituteApi(data) {
    return request({
        url: "/api-jl/v1/salary/savePayrollConstitute",
        method: "post",
        data
    })
}

 src/common/untils/request.js

@@ -20,8 +20,8 @@
      /(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/,
      "$1",
    );
    // 暂无登录，写死token
    // token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiI3NjFlM2NmNi05ZjRmLTQyMGQtYjc0ZC01NzNlZDc2NzA5MjAiLCJVc2VybmFtZSI6ImFkbWluIiwiTmlja05hbWUiOiIiLCJQYXJlbnRJZCI6ImFkbWluIiwiVXNlclR5cGUiOjIsIlJvbGVJZHMiOlsxXSwiT3JnSUQiOjEsIk1vZGlmaWVkUHdkIjp0cnVlLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxNzEyNzI4MzI5LCJpc3MiOiJxbVBsdXMiLCJuYmYiOjE3MTIxMjI1Mjl9.KBJRT2PkRPG4UJD2hsO-fU_bylHMJ78xrWidq8xYMnw'
    // TAG: 暂无登录，写死token
    // token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiJ1ODk4NjY4MjY3NTI1MTExODA4IiwiVXNlcm5hbWUiOiJ0ZXN0MTIzIiwiTmlja05hbWUiOiJURVNUIiwiUGFyZW50SWQiOiJ0ZXN0MTIzIiwiVXNlclR5cGUiOjIsIlJvbGVJZHMiOls5LDIxXSwiT3JnSUQiOjksIk1vZGlmaWVkUHdkIjp0cnVlLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxNzI1NTAzMTUzLCJpc3MiOiJxbVBsdXMiLCJuYmYiOjE3MjQ4OTczNTN9.VmzFMs0VzDy-ENmH0uymVYAV8QJDB8sedaZe5XFj-8s'
    if (token) {
      config.headers.Authorization = "Bearer " + token;
    }

 src/components/makepager/TableCommonView.vue

@@ -1,55 +1,25 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view" v-loading="loading">
    <el-table
      ref="table"
      border
      :data="tableList.tableInfomation"
      tooltip-effect="dark"
      :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight"
      style="width: 100%"
      :lazy="tableList.lazy"
      :show-summary="showSummary.show"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      :class="tableList.headerHeight?'table-height-47px':''"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', height:tableList.headerHeight?tableList.headerHeight:'37px',color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
      size="mini"
      @row-click="tableRowClick"
      :row-class-name="tableRowClassName"
    >
    <el-table ref="table" border :data="tableList.tableInfomation" tooltip-effect="dark" :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight" style="width: 100%" :lazy="tableList.lazy" :show-summary="showSummary.show"
      :summary-method="getSummaries" :span-method="arraySpanMethod"
      :class="tableList.headerHeight ? 'table-height-47px' : ''" @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', height: tableList.headerHeight ? tableList.headerHeight : '37px', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
      size="mini" @row-click="tableRowClick" :row-class-name="tableRowClassName">
      <el-table-column v-if="selectBox" type="selection" width="40" :selectable="selectable"> </el-table-column>
      <el-table-column
        v-if="tableList.selectIndex"
        type="index"
        label="序号"
        width="50"
        :fixed="tableList.isFixed"
      ></el-table-column>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.min"
        show-overflow-tooltip
        :sortable="item.sortable"
        :fixed="item.fixed"
        v-if="item.isShowColumn"
      >
      
      <template slot="header">
      <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"
        :fixed="tableList.isFixed"></el-table-column>
      <el-table-column v-for="(item, i) in tableColumn" :key="i" :prop="item.prop" :label="item.label"
        :width="item.width" :min-width="item.min" show-overflow-tooltip :sortable="item.sortable" :fixed="item.fixed"
        v-if="item.isShowColumn">

        <template slot="header">
          {{ item.label }}
          <div v-if="item.weekDay">{{item.weekDay}}</div>
          <div v-if="item.weekDay">{{ item.weekDay }}</div>
          <span v-if="item.iconRight">
            <i
              :class="item.iconRight"
              style="font-size: 16px; margin-left: 5px; cursor: pointer"
              @click="handleShow(item)"
            ></i>
            <i :class="item.iconRight" style="font-size: 16px; margin-left: 5px; cursor: pointer"
              @click="handleShow(item)"></i>
          </span>
        </template>
        <template slot-scope="scope">
@@ -64,51 +34,27 @@
            scope.row[item.prop]
          }}</span>
          <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
          <span
            v-else-if="item.isSalesLeadClick && scope.row[item.prop]"
            class="sel-name"
            @click="selSalesLeadClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isClientClick && scope.row[item.prop]"
            class="sel-name"
            @click="selClientClick(scope.row)"
            >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
          >
          <span
            v-else-if="item.isContactClick && scope.row[item.prop]"
            class="sel-name"
            @click="selContactsClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isMasterClick && scope.row[item.prop]"
            class="sel-name"
            @click="selMasterClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isServiceOrder && scope.row[item.prop]"
            class="sel-name"
            @click="selServiceOrderClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isCommonClick && scope.row[item.prop]"
            class="sel-name"
            @click="selCommonClick(scope.row,item.prop,item)"
            >
          <span v-else-if="item.isSalesLeadClick && scope.row[item.prop]" class="sel-name"
            @click="selSalesLeadClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isClientClick && scope.row[item.prop]" class="sel-name"
            @click="selClientClick(scope.row)">{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
          <span v-else-if="item.isContactClick && scope.row[item.prop]" class="sel-name"
            @click="selContactsClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isMasterClick && scope.row[item.prop]" class="sel-name"
            @click="selMasterClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isServiceOrder && scope.row[item.prop]" class="sel-name"
            @click="selServiceOrderClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isCommonClick && scope.row[item.prop]" class="sel-name"
            @click="selCommonClick(scope.row, item.prop, item)">
            <div v-if="item.isCallMethod">
              <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">
              
              <span v-if="item.isIcon" v-html="item.getCallMethod(scope.row[item.prop], scope.row)"></span>
              <span v-else>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span> 

                <span v-if="item.isIcon" v-html="item.getCallMethod(scope.row[item.prop], scope.row)"></span>
                <span v-else>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
              </span>
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span> 
            </span
          >
            <span v-else>{{ scope.row[item.prop] }}</span>
          </span>
          <div v-else-if="item.isProductName" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
@@ -156,37 +102,16 @@
            }}</span>
          </div>
          <div v-else-if="item.isEditTd">
              <template
                  v-if="scope.row[item.prop+'editType']=='inputFloat'"
                >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder="请输入"
                  :min="0"
                  :precision="2"
                  :controls="false"
                  size="mini"
                  style="width: calc(100% - 80px); margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row, scope)
                    }
                  "
                ></el-input-number>
                <el-button
                  type="text"
                  @click="saveEditShow(item.prop, scope.row, scope)"
                  >保存</el-button
                >
              </template>
              <span v-else>
                  {{ scope.row[item.prop] }}
                <i
                  class="el-icon-edit"
                  style="font-size: 16px; margin-left: 5px; cursor: pointer"
                  @click="handleEditShow(scope.row,scope,item)"
                ></i>
              </span>
            <template v-if="scope.row[item.prop + 'editType'] == 'inputFloat'">
              <el-input-number v-model="scope.row[item.prop]" placeholder="请输入" :min="0" :precision="2"
                :controls="false" size="mini" style="width: calc(100% - 80px); margin-right: 5px"></el-input-number>
              <el-button type="text" @click="saveEditShow(item.prop, scope.row, scope)">保存</el-button>
            </template>
            <span v-else>
              {{ scope.row[item.prop] }}
              <i class="el-icon-edit" style="font-size: 16px; margin-left: 5px; cursor: pointer"
                @click="handleEditShow(scope.row, scope, item)"></i>
            </span>
          </div>
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
@@ -201,7 +126,7 @@
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
      <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList">
        <el-checkbox v-for="item in tableList.allcol"  :label="item" :key="item">{{ item }} </el-checkbox>
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
@@ -261,6 +186,7 @@
  data() {
    return {
      iscolopen: false,
      tableColumn: [],
      showcol: []
    }
  },
@@ -272,28 +198,23 @@
      },
      immediate: true
    },
    "tableList.tableColumn": {
      handler(newVal) {
        this.tableColumn = newVal
      },
      immediate: true
    },
  },
  methods: {
    // 表格编辑
    handleEditShow(row,scope,item){
      scope.row[item.prop+'editType']=='inputFloat'
      this.$set(this.tableList.tableInfomation[scope.$index],item.prop+'editType','inputFloat')
    handleEditShow(row, scope, item) {
      console.log('item', item)
      scope.row[item.prop + 'editType'] == 'inputFloat'
      this.$set(this.tableList.tableInfomation[scope.$index], item.prop + 'editType', 'inputFloat')
      this.$forceUpdate()
    },
    commonInputChange(val, prop, row, scope) {
      // if (row.editType=='inputFloat') {
      //   let value = scope.row[prop]
      //   let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      //   if (!reg2.test(value) || value == 0) {
      //     this.$message.error("需要填写大于0的2位小数！")
      //     return true
      //   }
      //   this.$forceUpdate()
      // }
      this.$emit("inputContent", val, prop, row, scope)
    },
    saveEditShow( prop, row, scope){
      if (row.editType=='inputFloat') {
    saveEditShow(prop, row, scope) {
      if (row.editType == 'inputFloat') {
        let value = scope.row[prop]
        let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if (!reg2.test(value) || value == 0) {
@@ -302,6 +223,7 @@
        }
        this.$forceUpdate()
      }
      this.$set(this.tableList.tableInfomation[scope.$index], prop + 'editType', '')
      this.$emit("inputContent", prop, row, scope)
    },
    onMaskClick() {
@@ -474,8 +396,8 @@
      this.$emit("selServiceOrderClick", row)
    },
    // 公共（销售机会、报价单、销售总单、销售子单。。。）
    selCommonClick(row,prop,item) {
      this.$emit("selCommonClick", row,prop,item)
    selCommonClick(row, prop, item) {
      this.$emit("selCommonClick", row, prop, item)
    },
    // 行点击
    tableRowClick(row, column, event) {
@@ -511,6 +433,7 @@
.table-view {
  position: relative;
  height: 100%;

  .blue {
    width: 70px;
    text-align: center;
@@ -518,34 +441,42 @@
    background-color: $color-primary;
    border-radius: 4px;
  }

  .sel-name {
    color: $color-primary;
    cursor: pointer;
  }

  .product-view {
    // background: #cc7d7d;
    margin-left: -10px;
    margin-right: -11px;

    li {
      height: 22px;
      line-height: 22px;

      .name-view {
        padding-left: 10px;
        border-bottom: 1px solid #ebeef5;
      }

      .no-bottom {
        border-bottom: 0;
      }
    }

    li:last-child .name-view {
      border-bottom: none;
    }

    .no-product {
      height: 22px;
      line-height: 22px;
    }
  }
}

::v-deep {
  .el-table__footer-wrapper {
    tbody td.el-table__cell {
@@ -553,20 +484,25 @@
      font-weight: bold;
    }
  }
  .el-table__fixed{
    height:calc(100% - 8px)!important;

  .el-table__fixed {
    height: calc(100% - 8px) !important;
  }
  .el-table__fixed-body-wrapper{
    top:37px!important;

  .el-table__fixed-body-wrapper {
    top: 37px !important;
  }
  .table-height-47px .el-table__fixed-body-wrapper{
    top:47px!important;

  .table-height-47px .el-table__fixed-body-wrapper {
    top: 47px !important;
  }
  .el-table__body-wrapper{
    height:calc(100% - 38px)!important;

  .el-table__body-wrapper {
    height: calc(100% - 38px) !important;
  }
  .table-height-47px .el-table__body-wrapper{
    height:calc(100% - 48px)!important;

  .table-height-47px .el-table__body-wrapper {
    height: calc(100% - 48px) !important;
  }
}

@@ -575,12 +511,14 @@
  line-height: 17px;
  font-family: PingFangSC;
  color: rgba(0, 0, 0, 0.9);

  .el-button--text {
    width: auto;
    height: auto;
    font-family: PingFangSC-Medium, sans-serif;
  }
}

::v-deep .el-table .el-table__cell {
  padding: 6px 0 !important;
  height: 35px;
@@ -618,6 +556,7 @@
  top: 0;
  right: -6px;
  z-index: 11;

  .label {
    position: absolute;
    top: 6px;
@@ -627,6 +566,7 @@
    color: #000;
    transform: rotate(-90deg);
  }

  .checkbox-group {
    width: 160px;
    height: 300px;

 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>

 vue.config.js

@@ -4,8 +4,8 @@
function resolve(dir) {
  return path.join(__dirname, dir)
}
const ipNum=47;
//const serverPath=`http://192.168.0.${ipNum}:8008`;
// TAG: 测试代码需要删除
// const serverPath = `http://192.168.1.174:8008`;
const serverPath="http://silk.fai365.com";
// 设置不参与构建的库
const externals = {};
@@ -16,14 +16,14 @@
  devServer: {
    proxy: {
      "/api-jl": {
        // target: "http://192.168.20.118:8889", // http://192.168.20.119:8002 http://fai365.com:30150/
        // target: "http://192.168.20.120:8008", 
        // target: "http://192.168.20.120:8004",
        target: serverPath, // http://192.168.20.119:8004 http://fai365.com:30150/
        ws: true,
        changeOrigin: true
      }
    }
    },
    client: {
      overlay: false,
    },
  },
  transpileDependencies: [
    // 兼容IE11浏览器(兼容npm包和cnpm包)