tire-platform-ui/src/views/salaryManagement/primarySchool/detailsPage.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button
          type="danger"
          style="border: none;background: none;color: red"
          icon="el-icon-arrow-left"
          @click="backToList"
          >返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button
          type="primary"
          size="small"
          v-if="detailData.status == 1"
          class="el-button--small-yh "
          :disabled="form.status > 0"
          @click.stop="openEdit"
          >编辑
        </el-button>
        <el-dropdown style="margin-right: 8px;margin-left: 8px;">
          <el-button type="primary" size="small">
            审核处理<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :disabled="form.status > 0"
              @click.native="pleaseCheck"
              >请核数据</el-dropdown-item
            >
            <el-dropdown-item disabled>审核进度</el-dropdown-item>
            <el-dropdown-item disabled>撤销请核</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          class="el-button--small-yh"
          type="primary"
          :disabled="loadingBtn || detailData.status == 1"
          size="small"
          @click="editCustomer"
          >保存数据
        </el-button>
      </div>
    </div>
    <div class="customer-main">
      <containerTitle title="基础资料"></containerTitle>
      <basic-container>
        <avue-form
          class="trading-form"
          ref="form"
          v-model="form"
          :option="option"
        />
      </basic-container>
      <containerTitle title="基础明细"></containerTitle>
      <basic-container>
        <avue-crud
          ref="crud"
          v-model="crudForm"
          :option="optionList"
          :data="dataList"
          :page.sync="page"
          :search.sync="search"
          :table-loading="loading"
          @current-change="currentChange"
          @size-change="sizeChange"
          @search-change="searchChange"
          @saveColumn="saveColumn"
          @refresh-change="refreshChange"
          @row-save="rowSave"
          @row-update="rowUpdate"
          :cell-style="cellStyle"
          :header-cell-class-name="headerCellClassName"
        >
          <template slot="menuLeft">
            <el-button
              type="primary"
              @click.stop="$refs.crud.rowAdd()"
              size="small"
              :disabled="detailData.status == 1"
              >新增</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="importExcel()"
              :disabled="detailData.status == 1"
              >导入
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click.stop="openExport()"
              :disabled="detailData.status == 1"
              >导出
            </el-button>
          </template>
          <template slot="basicsSalaryLabel">
            <el-tag>基础工资:</el-tag>
          </template>
          <template slot="workloadSalaryLabel">
            <el-tag>工作量工资:</el-tag>
          </template>
          <template slot="awardSalaryLabel">
            <el-tag>奖励工资:</el-tag>
          </template>
          <template slot="dutyAllowancesLabel">
            <el-tag>职务津贴:</el-tag>
          </template>
          <template slot="classTeacherSubsidyLabel">
            <el-tag>班主任津贴:</el-tag>
          </template>
          <template slot="subsidyLabel">
            <el-tag>补贴项:</el-tag>
          </template>
          <template slot="deductionsLabel">
            <el-tag>扣除项:</el-tag>
          </template>
          <template slot="salaryLabel">
            <el-tag>应发工资:</el-tag>
          </template>
          <template slot="fsalaryLabel">
            <el-tag>实发工资:</el-tag>
          </template>
          <template
            slot="schoolAgeSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.schoolAgeSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template
            slot="capitalIncreaseForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.capitalIncrease"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="educationSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.educationSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="rankSalaryForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.rankSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="salaryBaseForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.salaryBase"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="salaryBaseForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.salaryBase"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="performanceAwardForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.performanceAward"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="momthWorkloadSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.momthWorkloadSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="vacationOvertimePayForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.vacationOvertimePay"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template slot="winningPrizeForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.winningPrize"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="leadingCadreSubsidyForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.leadingCadreSubsidy"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="yearDownPerformanceForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.yearDownPerformance"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="prepareLessonsForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.prepareLessons"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="leadingCadreSubsidyForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.leadingCadreSubsidy"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template
            slot="teachingResearchForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.teachingResearch"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="classesForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.classes"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="classTeacherFeeForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.classTeacherFee"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="reserveReplacementForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.reserveReplacement"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="safetyFeesForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.safetyFees"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="classMinisterForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.classMinister"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template slot="winningPrizeForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.winningPrize"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="newPostTrainForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.newPostTrain"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="vacationOvertimePayForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.vacationOvertimePay"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="cadreAllowanceReservationForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.cadreAllowanceReservation"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="yearDownPerformanceForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.yearDownPerformance"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="yearUpPerformanceForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.yearUpPerformance"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="overtimeAtWeekendForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.overtimeAtWeekend"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="maternityLeaveSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.maternityLeaveSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template slot="wxForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.wx"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="dormitoryManagementFeeForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.dormitoryManagementFee"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="learningPowerForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.learningPower"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="telephoneBillForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.telephoneBill"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="inspectorFinesForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.inspectorFines"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="attendanceForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.attendance"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="childbirthAllowanceForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.childbirthAllowance"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="androidItForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.androidIt"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="basicsSalaryForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.basicsSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template
            slot="customWorkloadSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.customWorkloadSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="workloadSalaryForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.workloadSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="dailyAssessmentSalaryForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.dailyAssessmentSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="awardSalaryForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.awardSalary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="dutyAllowancesForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.dutyAllowances"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="classTeacherSubsidyForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.classTeacherSubsidy"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="subsidyForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.subsidy"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="deductionsForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.deductions"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="insurancePersonageForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.insurancePersonage"
              @change="salaryAdd(crudForm)"
            />
          </template>

          <template
            slot="reservedFundsPersonageForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.reservedFundsPersonage"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="salaryForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.salary"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot="personageTaxesForm" slot-scope="{ column, disabled }">
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.personageTaxes"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="insurancePersonageForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.insurancePersonage"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template
            slot="reservedFundsPersonageForm"
            slot-scope="{ column, disabled }"
          >
            <el-input
              :disabled="disabled"
              :placeholder="'请输入 ' + column.label"
              v-model="crudForm.reservedFundsPersonage"
              @change="salaryAdd(crudForm)"
            />
          </template>
          <template slot-scope="{ row, index }" slot="menu">
            <el-button
              type="text"
              size="small"
              @click.stop="$refs.crud.rowEdit(row, index)"
              :disabled="detailData.status == 1"
            >
              {{ row.$cellEdit ? "保存" : "编辑" }}
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.stop="rowDel(row, index)"
              :disabled="detailData.status == 1"
            >
              删除
            </el-button>
          </template>
        </avue-crud>
        <el-dialog
          title="导入教职工资料"
          append-to-body
          :visible.sync="excelBox"
          width="555px"
          v-dialog-drag
        >
          <avue-form
            :option="excelOption"
            v-model="excelForm"
            table-loading="excelLoading"
            :upload-after="uploadAfter"
          >
            <template slot="excelTemplate">
              <el-button type="primary" @click="derivation">
                点击下载<i class="el-icon-download el-icon--right"></i>
              </el-button>
            </template>
          </avue-form>
          <p style="text-align: center;color: #DC0505">
            温馨提示 第一次导入时请先下载模板
          </p>
        </el-dialog>
      </basic-container>
      <containerTitle title="导入附件记录"></containerTitle>
      <basic-container>
        <avue-crud
          :data="annexData"
          :option="annexOption"
          :page.sync="annexPage"
          :table-loading="annexLoading"
          @current-change="currentannexChange"
          @size-change="sizeannexChange"
          @saveColumn="saveannexColumn"
          @refresh-change="refreshannexChange"
          :cell-style="cellStyle"
        >
          <template slot-scope="{ row, index }" slot="menu">
            <el-button
              type="text"
              size="small"
              @click.stop="rowDownload(row, index)"
            >
              下载
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/util/auth";
import {
  detail,
  submit,
  delItem,
  itemAnnex,
  itemDetail,
  pleaseCheck
} from "@/api/salaryManagement/primarySchool";
import { numCal } from "@/util/calculate";
import { optionList } from "./js/optionList";
export default {
  name: "detailsPage",
  data() {
    return {
      annexLoading: false,
      crudForm: {},
      excelBox: false,
      loading: false,
      xcelLoading: false,
      loadingBtn: false,
      excelForm: {
        type: "1"
      },
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "导入类型",
            prop: "type",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=import_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 12
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24
          },
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data"
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-school/salaryitem/import",
            disabled: false
          }
        ]
      },
      form: {},
      dataList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [
          10,
          20,
          30,
          40,
          50,
          100,
          150,
          200,
          250,
          300,
          350,
          400,
          450,
          500
        ]
      },
      drawer: false,
      tableHeight: 0,
      option: {
        menuBtn: false,
        labelWidth: 40,
        column: [
          {
            label: "年",
            prop: "annual",
            type: "year",
            valueFormat: "yyyy",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 6,
            change: ({ value }) => {
              if (value) {
                this.optionList.column.forEach(e => {
                  if (e.prop == "yearUpPerformance") {
                    e.label = value + "年上学期绩效";
                  }
                  if (e.prop == "yearDownPerformance") {
                    e.label = value + "年下学期绩效";
                  }
                });
              }
            }
          },
          {
            label: "月",
            prop: "moon",
            type: "select",
            filterable: true,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=month",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 6,
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            change: ({ value }) => {
              if (value) {
                this.optionList.column.forEach(e => {
                  if (e.prop == "monthHour") {
                    e.label = value + "月份课时";
                  }
                  if (e.prop == "momthWorkloadSalary") {
                    e.label = value + "月工作量工资";
                  }
                  if (e.prop == "monthViceClassFee") {
                    e.label = value + "月副班费（预留补发）";
                  }
                });
              }
            }
          },
          {
            label: "人数",
            prop: "personNumber",
            span: 6,
            disabled: true
          },
          {
            label: "状态",
            prop: "status",
            type: "select",
            span: 6,
            props: {
              label: "name",
              value: "code"
            },
            dicData: [
              {
                name: "录入",
                code: 0
              },
              {
                name: "申请审批",
                code: 1
              },
              {
                name: "审批中",
                code: 2
              },
              {
                name: "审批通过",
                code: 3
              }
            ],
            disabled: true
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            span: 24,
            minRows: 2
          }
        ]
      },
      optionList: optionList,
      exportUrl: "/api/blade-school/salaryitem/export/template",
      annexData: [],
      annexOption: {
        align: "center",
        menuAlign: "center",
        addBtn: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        stripe: true,
        menuWidth: 100,
        column: [
          {
            label: "文件类型",
            prop: "fileType",
            overHidden: true
          },
          {
            label: "文件名",
            prop: "cname",
            overHidden: true
          },
          {
            label: "创建时间",
            prop: "createTime",
            overHidden: true
          },
          {
            label: "创建人",
            prop: "createName",
            overHidden: true
          },
          {
            label: "备注",
            prop: "remarks",
            overHidden: true
          }
        ]
      },
      annexPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [
          10,
          20,
          30,
          40,
          50,
          100,
          150,
          200,
          250,
          300,
          350,
          400,
          450,
          500
        ]
      }
    };
  },
  props: {
    detailData: {
      type: Object
    }
  },
  created() {
    if (this.detailData.id) {
      this.getDetail(this.detailData.id);
    }
    if (this.detailData.status == 1) {
      this.option.disabled = true;
    }
    this.optionList.height = window.innerHeight - 500;
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (
        column.property == "salaryBase" ||
        column.property == "workloadSalary" ||
        column.property == "dailyAssessmentSalary" ||
        column.property == "awardSalary" ||
        column.property == "dutyAllowances" ||
        column.property == "classTeacherSubsidy" ||
        column.property == "subsidy" ||
        column.property == "deductions" ||
        column.property == "insuranceUnit" ||
        column.property == "insurancePersonage" ||
        column.property == "reservedFundsUnit" ||
        column.property == "reservedFundsPersonage" ||
        column.property == "salary" ||
        column.property == "personageTaxes" ||
        column.property == "fsalary"
      ) {
        return "headerCellClass";
      }
    },
    getDetail(id) {
      detail(id).then(res => {
        this.form = res.data.data;
        this.getItemDetail();
        this.getitemAnnex();
      });
    },
    getItemDetail() {
      const data = {
        pid: this.form.id,
        ...this.search
      };
      this.loading = true;
      itemDetail(this.page.currentPage, this.page.pageSize, data)
        .then(res => {
          this.dataList = res.data.data.records;
          this.page.total = res.data.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getitemAnnex() {
      const data = {
        pid: this.form.id
      };
      this.annexLoading = true;
      itemAnnex(this.annexPage.currentPage, this.annexPage.pageSize, data)
        .then(res => {
          this.annexData = res.data.data.records;
          this.annexPage.total = res.data.data.total;
        })
        .finally(() => {
          this.annexLoading = false;
        });
    },
    rowSave(row, done, loading) {
      if (!row.cname) {
        loading();
        return this.$message.error("请完善姓名");
      }
      if (!row.idNumber) {
        loading();
        return this.$message.error("请完善身份证号");
      }
      const arr = [];
      arr.push(row);
      submit({ ...this.form, salaryItemList: arr })
        .then(res => {
          this.$message.success("保存成功");
          this.form = res.data.data;
          this.getItemDetail();
          done();
        })
        .finally(() => {
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      if (!row.cname) {
        loading();
        return this.$message.error("请完善姓名");
      }
      if (!row.idNumber) {
        loading();
        return this.$message.error("请完善身份证号");
      }
      const arr = [];
      arr.push(row);
      submit({ ...this.form, salaryItemList: arr })
        .then(res => {
          this.$message.success("修改成功");
          this.form = res.data.data;
          this.getItemDetail();
          done();
        })
        .finally(() => {
          loading();
        });
    },
    rowCell(row, index) {
      if (row.$cellEdit == true) {
        if (!row.cname) {
          return this.$message.error("请完善姓名");
        }
        if (!row.idNumber) {
          return this.$message.error("请完善身份证号");
        }
        // if (!row.rankStandard) {
        //   return this.$message.error("请完善职级标准");
        // }
        const arr = [];
        arr.push(row);
        this.loading = true;
        submit({ ...this.form, salaryItemList: arr })
          .then(res => {
            this.$message.success("保存成功");
            this.form = res.data.data;
          })
          .finally(() => {
            this.loading = false;
          });
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          delItem(row.id).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getItemDetail();
          });
        } else {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.dataList.splice(index, 1);
        }
      });
    },
    rowDownload(row) {
      window.open(`${row.url}?${this.website.tokenHeader}=${getToken()}`);
    },
    searchChange(params, done) {
      this.getItemDetail();
      done();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getItemDetail();
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getItemDetail();
    },
    refreshChange() {
      this.getItemDetail();
    },
    currentannexChange(val) {
      this.annexPage.currentPage = val;
      this.getitemAnnex();
    },
    sizeannexChange(val) {
      this.annexPage.currentPage = 1;
      this.annexPage.pageSize = val;
      this.getitemAnnex();
    },
    refreshannexChange() {
      this.getitemAnnex();
    },
    uploadAfter(res, done, loading, column) {
      this.excelBox = false;
      // this.$message.success("导入成功！");
      this.getItemDetail();
      this.getitemAnnex();
      done();
    },
    //修改提交触发
    editCustomer() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          for (let i = 0; i < this.dataList.length; i++) {
            if (!this.dataList[i].cname) {
              return this.$message.error(
                "请完善第" + Number(1 + i) + "行的姓名"
              );
            }
            if (!this.dataList[i].idNumber) {
              return this.$message.error(
                "请完善第" + Number(1 + i) + "行的身份证号"
              );
            }
            if (!this.dataList[i].rankStandard) {
              return this.$message.error(
                "请完善第" + Number(1 + i) + "行的职级标准"
              );
            }
          }
          this.loadingBtn = true;
          submit({ ...this.form, salaryItemList: this.dataList })
            .then(res => {
              this.$message.success("保存成功");
              this.form = res.data.data;
              this.getItemDetail();
            })
            .finally(() => {
              this.loadingBtn = false;
            });
        } else {
          return false;
        }
      });
    },
    derivation() {
      if (!this.excelForm.type) {
        return this.$message.error("请选择导入类型");
      }
      if (!this.exportUrl) {
        return this.$message.error("暂无模板文件");
      }
      window.open(
        `${this.exportUrl}?${this.website.tokenHeader}=${getToken()}`
      );
    },
    openExport() {
      if (!this.form.id) {
        return this.$message.error("请先保存数据");
      }
      window.open(
        `/api/blade-school/salaryitem/export/teacher?${
          this.website.tokenHeader
        }=${getToken()}&pid=${this.form.id}`
      );
    },
    importExcel() {
      if (!this.form.id) {
        return this.$message.error("请先保存数据");
      }
      this.excelOption.column.forEach(e => {
        if (e.prop == "excelFile") {
          e.data = {
            id: this.form.id
          };
        }
      });
      this.excelBox = true;
    },
    //导出全部
    exportAll() {
      let opt = {
        title: "工资条",
        column: this.optionList.column,
        data: this.dataList
      };
      this.$Export.excel({
        title: opt.title,
        columns: opt.column,
        data: opt.data
      });
    },
    salaryAdd(row) {
      // 1. 基础工资 = +M153(校龄工资)+N153(增资)+O153(学历工资)+Q153(职级工资)+L153(履约奖)+R153(工资基数)
      row.basicsSalary =
        numCal(row.schoolAgeSalary) +
        numCal(row.capitalIncrease) +
        numCal(row.educationSalary) +
        numCal(row.rankSalary) +
        numCal(row.salaryBase) +
        numCal(row.performanceAward);
      // 2. 工作量工资 = V51(工作量工资)+Y51(暑假pad课课时费)
      row.workloadSalary =
        numCal(row.momthWorkloadSalary) +
        numCal(row.vacationOvertimePay) +
        numCal(row.customWorkloadSalary);
      // 3. 奖励工资 = AD46(突出贡献奖) 无 +AE46(教学成绩优胜奖)+AF46(教学成绩进步奖) 无 +AG46(荣誉奖) 无 +AH46(领导干部奖励奖)+AI46(下学期教学成绩奖) 下学期绩效 +AJ46(中考奖励) 无
      row.awardSalary =
        numCal(row.winningPrize) +
        numCal(row.leadingCadreSubsidy) +
        numCal(row.yearDownPerformance);
      // 4. 职务津贴 = AM46(备课组长)+AL46(领导干部补贴)+AN46(教研组长)
      row.dutyAllowances =
        numCal(row.prepareLessons) +
        numCal(row.leadingCadreSubsidy) +
        numCal(row.teachingResearch);
      // 5. 班主任津贴 = AQ47(班额)+AP47(班主任费)
      row.classTeacherSubsidy =
        numCal(row.classes) + numCal(row.classTeacherFee);
      // 6. 补贴项 = =BE49(预留补发)+BD49(餐车、周五测温、周五安全岗（预留补发）)+BC49(9月副班费（预留补发）)+BB49(级部长（预留发放）)+BA49(期中期末考试学科优胜奖（预留发放）)+AZ49(新岗岗前培训)+AY49(假期加班费)+AX49(干部补贴预留)+AW49(2020年下学期绩效)+AV49(2020年上学期绩效)+AU49(周末加班（提取）)+AT49(产假工资)+AS49(微信)
      row.subsidy =
        numCal(row.reserveReplacement) +
        numCal(row.safetyFees) +
        numCal(row.monthViceClassFee) +
        numCal(row.classMinister) +
        numCal(row.winningPrize) +
        numCal(row.newPostTrain) +
        numCal(row.vacationOvertimePay) +
        numCal(row.cadreAllowanceReservation) +
        numCal(row.yearDownPerformance) +
        numCal(row.yearUpPerformance) +
        numCal(row.overtimeAtWeekend) +
        numCal(row.maternityLeaveSalary) +
        numCal(row.wx);
      // 7. 扣除项 = =BL47(宿舍管理费)+BK47(学习强国)+BJ47(电话费)+BI47(督查罚款)+BH47(出勤)+BM47(生育津贴)+BN47(五险一金个人)
      row.deductions =
        numCal(row.dormitoryManagementFee) +
        numCal(row.learningPower) +
        numCal(row.telephoneBill) +
        numCal(row.inspectorFines) +
        numCal(row.attendance) +
        numCal(row.childbirthAllowance) +
        numCal(row.androidIt);
      // 8. 应发工资 = S153(基础工资)+Z153(工作量工资)+AB153(日常考核工资)+AK153(奖励工资)+AO153(职务津贴)+AR153(班主任津贴)+BG153(补贴项)-BO153(扣除项)+BQ153(保险个人)+BS153(公积金个人)
      row.salary =
        numCal(row.basicsSalary) +
        numCal(row.workloadSalary) +
        numCal(row.dailyAssessmentSalary) +
        numCal(row.awardSalary) +
        numCal(row.dutyAllowances) +
        numCal(row.classTeacherSubsidy) +
        numCal(row.subsidy) -
        numCal(row.deductions) +
        numCal(row.insurancePersonage) +
        numCal(row.reservedFundsPersonage);
      // 9. 实发工资 = BT153(应发工资) - BU153(个税)-BQ153(保险个人)-BS153(公积金个人)
      row.fsalary =
        numCal(row.salary) -
        numCal(row.personageTaxes) -
        numCal(row.insurancePersonage) -
        numCal(row.reservedFundsPersonage);
    },
    //导出工资条
    exportSalary() {
      let data = [];
      for (let item in this.optionList.column) {
        switch (this.optionList.column[item].prop) {
          case "salaryBase":
            data.push(this.optionList.column[item]);
            break;
          case "workloadSalary":
            data.push(this.optionList.column[item]);
            break;
          case "dailyAssessmentSalary":
            data.push(this.optionList.column[item]);
            break;
          case "awardSalary":
            data.push(this.optionList.column[item]);
            break;
          case "dutyAllowances":
            data.push(this.optionList.column[item]);
            break;
          case "classTeacherSubsidy":
            data.push(this.optionList.column[item]);
            break;
          case "subsidy":
            data.push(this.optionList.column[item]);
            break;
          case "deductions":
            data.push(this.optionList.column[item]);
            break;
          case "insuranceUnit":
            data.push(this.optionList.column[item]);
            break;
          case "insurancePersonage":
            data.push(this.optionList.column[item]);
            break;
          case "reservedFundsUnit":
            data.push(this.optionList.column[item]);
            break;
          case "reservedFundsPersonage":
            data.push(this.optionList.column[item]);
            break;
          case "salary":
            data.push(this.optionList.column[item]);
            break;
          case "personageTaxes":
            data.push(this.optionList.column[item]);
            break;
          case "fsalary":
            data.push(this.optionList.column[item]);
            break;
        }
      }
      let opt = {
        title: "工资条",
        column: data,
        data: this.dataList
      };
      this.$Export.excel({
        title: opt.title,
        columns: opt.column,
        data: opt.data
      });
    },
    openEdit() {
      const data = {
        moduleName: "xxb",
        tableName: "primary_school",
        billId: this.form.id,
        no: localStorage.getItem("browserID"),
        billNo: this.form.annual + "-" + this.form.moon
      };
      this.inDetailsKey(this.$route.name, {
        moduleName: "xxb",
        tableName: "primary_school",
        billId: this.form.id,
        billNo: this.form.annual + "-" + this.form.moon
      });
      this.checkLock(data).then(res => {
        if (res.data.code == 200) {
          this.onLock(data);
          this.detailData.status = 2;
          this.option = this.$options.data().option;
        }
      });
    },
    // 请核
    pleaseCheck() {
      this.$confirm("您确定提交此次申请吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const data = {
          id: this.form.id,
          checkType: "xsgz",
          url: "/salaryManagement/primarySchool/index",
          pageStatus: "this.$store.getters.domSaleStatus",
          pageLabel: "小学部",
          checkFlag: 2
        };
        pleaseCheck(data).then(res => {
          this.$message.success("请核成功");
          this.detailData.status = 1;
          this.option.disabled = true;
          this.getDetail(this.form.id);
        });
      });
    },
    //返回列表
    backToList() {
      if (this.form.id) {
        this.unLock({
          moduleName: "xxb",
          tableName: "primary_school",
          billId: this.form.id,
          billNo: this.form.annual + "-" + this.form.moon
        });
      }
      this.$emit("goBack");
      this.leaveDetailsKey(this.$route.name);
    }
  },
  watch: {
    "excelForm.type": function(val) {
      if (val) {
        switch (val) {
          case "1":
            this.exportUrl = "/api/blade-school/salaryitem/export/template";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "2":
            this.exportUrl = "/api/blade-school/salaryitem/export/employ";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/employ";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "3":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/workloadExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/workloadExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "4":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/postAllowance";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/postAllowance";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "5":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/teacherSubsidy";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/teacherSubsidy";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "6":
            this.exportUrl = "/api/blade-school/salaryitem/export/position";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/position";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "7":
            this.exportUrl = "/api/blade-school/salaryitem/export/zhaPingExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/zhaPingExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "9":
            this.exportUrl = "/api/blade-school/salaryitem/export/overtime";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/overtime";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "10":
            this.exportUrl = "/api/blade-school/salaryitem/export/weChat";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/weChat";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "11":
            this.exportUrl = "/api/blade-school/salaryitem/export/power";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/power";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "12":
            this.exportUrl = "/api/blade-school/salaryitem/export/phoneFine";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/phoneFine";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "13":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/sanitationFee";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/sanitationFee";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "14":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/insuranceExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/insuranceExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "15":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/reservedFunds";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/reservedFunds";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "16":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/personalInsurance";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/personalInsurance";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "17":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/attendanceExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/attendanceExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "19":
            this.exportUrl = "/api/blade-school/salaryitem/export/payTaxes";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/payTaxes";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "20":
            this.exportUrl = "/api/blade-school/salaryitem/export/awardExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/awardExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "21":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/performanceExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/performanceExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "22":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/vacationExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/vacationExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "23":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/postTrainExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/postTrainExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "24":
            this.exportUrl = "/api/blade-school/salaryitem/export/leadExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/leadExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "25":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/teamLeaderExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/teamLeaderExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "26":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/prepareLessonsExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/prepareLessonsExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "27":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/eomNumberExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/eomNumberExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          case "28":
            this.exportUrl =
              "/api/blade-school/salaryitem/export/teachingExcel";
            this.findObject(this.excelOption.column, "excelFile").action =
              "/api/blade-school/salaryitem/import/teachingExcel";
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = false;
            break;
          default:
            this.findObject(
              this.excelOption.column,
              "excelFile"
            ).disabled = true;
            this.exportUrl = "";
        }
      } else {
        this.findObject(this.excelOption.column, "excelFile").disabled = true;
      }
    }
  }
};
</script>

<style>
.headerCellClass {
  color: #fff !important;
  background: #a4cf57 !important;
}
</style>
<style lang="scss" scoped>
.trading-form ::v-deep .el-form-item {
  margin-bottom: 4px !important;
}
::v-deep .el-form-item__error {
  display: none !important;
}
</style>