erp_fans/src/components/PDF/SalaryConfirmationPDF.vue

<template>
  <div>
    <div id="pdfDom" ref="pdfDom" style="padding: 20px 20px 0; text-align: center;font-size:12px;color:#333333" v-loading="loading">
      <table border="1" style="width: 100%" class="table">
        <tr>
          <td :colspan="salaryStructureData.length+3" class="title">薪资确认单</td>
        </tr>
        <tr>
          <td colspan="2">所属主体</td>
          <td colspan="2">{{pdfData.companyName}}</td>
          <td colspan="1">部门</td>
          <td colspan="2">{{pdfData.deptName}}</td>
          <td colspan="1">入职日期</td>
          <td colspan="2">{{pdfData.entryDate}}</td>
        </tr>
        <tr>
          <td colspan="2">员工姓名</td>
          <td colspan="2">{{pdfData.nickName}}</td>
          <td colspan="1">岗位</td>
          <td colspan="2">{{pdfData.post}}</td>
          <td colspan="1">生效日期</td>
          <td colspan="2">{{pdfData.effectiveDate}}</td>
        </tr>
        <tr>
          <td colspan="2">学历</td>
          <td colspan="2">{{pdfData.education}}</td>
          <td colspan="1">试用期限</td>
          <td colspan="2">{{pdfData.probationPeriod}}</td>
          <td colspan="1">转正日期</td>
          <td colspan="2">{{pdfData.fullTimeDate}}</td>
        </tr>
        <tr>
          <td colspan="2">
            上班时长
          </td>
          <td :colspan="salaryStructureData.length+3-2" style="text-align:left">
            月休{{pdfData.monthRest}}天，{{pdfData.dailyHours}}小时/天（上午{{pdfData.morningBeginTime}}至{{pdfData.morningEndTime}}
            ；下午{{pdfData.afternoonBeginTime}}至{{pdfData.afternoonEndTime}}
            ）</td>
        </tr>
        <tr>
          <td rowspan="5" style="width:5%">
            薪资
          </td>
          <td :colspan="salaryStructureData.length+2">
            考勤结算 or 业绩/记件结算
          </td>
        </tr>
        <tr>
          <td rowspan="2" style="width:5%">考勤结算</td>
          <td v-for="col in salaryStructureData" :key="col.value" :style="`width:${parseFloat(80/salaryStructureData.length).toFixed(2)}%`">
            {{col.label}}
          </td>
          <td style="width:10%">合计</td>
        </tr>
        <tr>
          <td v-for="col in salaryStructureData" :key="col.value" :style="`width:${parseFloat(80/salaryStructureData.length).toFixed(2)}%`">
            <el-input-number onmousewheel="return false;" v-model="pdfData.salaryData[col.value+'-10']" placeholder=" " style="width: 100%"
                             :precision="2" :controls="false" :min="0" @change="changeAmount('10')" />
          </td>
          <td>{{pdfData.amount}}</td>
        </tr>
        <tr>
          <td rowspan="2">业绩/记件结算</td>
          <td v-for="col in salaryStructureData" :key="col.value">
            {{col.label}}
          </td>
          <td>合计</td>
        </tr>
        <tr>
          <td v-for="col in salaryStructureData" :key="col.value">
            <el-input-number onmousewheel="return false;" v-model="pdfData.salaryData[col.value+'-20']" placeholder=" " style="width: 100%"
                             :precision="2" :controls="false" :min="0" @change="changeAmount('20')" />
          </td>
          <td>{{pdfData.perfAmount}}</td>
        </tr>

        <tr>
          <td colspan="2">
            薪资说明
          </td>
          <td :colspan="salaryStructureData.length+3-2" style="text-align:left">{{pdfData.salaryRemark}}</td>
        </tr>
        <tr>
          <td colspan="2">
            员工签字
          </td>
          <td colspan="3"></td>
          <td colspan="1">
            主管签字
          </td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td colspan="2">
            副总审批
          </td>
          <td colspan="3"></td>
          <td colspan="1">
            总经理审批
          </td>
          <td colspan="4"></td>
        </tr>
      </table>
    </div>
    <div style="text-align: center;margin-top:20px">
      <el-button type="primary" v-print="printObj" size="default" v-debounce>打印</el-button>
      <el-button type="primary" @click="clickDownload()" size="default" v-debounce>下载PDF</el-button>
      <el-button type="primary" @click="exportExcel()" size="default" v-debounce>导出Excel</el-button>
      <el-button type="primary" @click="saveData()" size="default" v-debounce>保存</el-button>

    </div>
  </div>
</template>

<script setup>
import $ from "jquery";
const { proxy } = getCurrentInstance();
const pdfData = ref({});
const props = defineProps({
  rowData: Object,
});
const salaryStructureData = ref([]);
const getData = () => {
  proxy
    .post("/salaryStructure/page", {
      pageNum: 1,
      pageSize: 999,
    })
    .then((res) => {
      salaryStructureData.value = res.rows
        .map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        })
        .reverse();
    });
};
getData();

const loading = ref(false);
const getPdfData = (query) => {
  loading.value = true;
  proxy.post("/userSalaryManage/detail", query).then((res) => {
    res.salaryData = {};
    if (res.userSalaryDetailList && res.userSalaryDetailList.length > 0) {
      for (let i = 0; i < res.userSalaryDetailList.length; i++) {
        const row = res.userSalaryDetailList[i];
        res.salaryData[row.salaryStructureId + "-" + row.type] = row.money;
      }
    }
    console.log(res.salaryData);
    pdfData.value = res;
    loading.value = false;
  });
};

watch(
  () => props.rowData,
  (val) => {
    if (props.rowData.id) {
      getPdfData({ userId: props.rowData.id });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const printObj = ref({
  id: "pdfDom",
  popTitle: "",
  extraCss:
    "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});

const clickDownload = () => {
  proxy.getPdf("薪资确认单PDF文件");
};

const pdfDom = ref(null);
const exportExcel = () => {
  // pdfDom.value.exportExcel();
  // isShowImg.value = false;
  loading.value = true;
  setTimeout(() => {
    $("#pdfDom").table2excel({
      exclude: ".noExl",
      sheetName: `${pdfData.value.nickName} 薪资确认单`,
      filename: `${pdfData.value.nickName} 薪资确认单`,
      exclude_img: false,
      exclude_links: false,
      exclude_inputs: true,
    });
    // isShowImg.value = true;
    loading.value = false;
  }, 500);
};

const saveData = () => {
  let userSalaryDetailList = [];
  for (const key in pdfData.value.salaryData) {
    let arr = key.split("-");
    userSalaryDetailList.push({
      salaryStructureId: arr[0],
      type: arr[1],
      money: pdfData.value.salaryData[key],
    });
  }
  pdfData.value.userSalaryDetailList = userSalaryDetailList;
  proxy.post("/userSalaryManage/edit", pdfData.value).then((res) => {
    getPdfData({ userId: props.rowData.id });
    proxy.msgTip("操作成功", 1);
    proxy.$emit("getList");
  });
};

const changeAmount = (type) => {
  let userSalaryDetailList = [];
  for (const key in pdfData.value.salaryData) {
    let arr = key.split("-");
    userSalaryDetailList.push({
      salaryStructureId: arr[0],
      type: arr[1],
      money: pdfData.value.salaryData[key],
    });
  }
  pdfData.value.userSalaryDetailList = userSalaryDetailList;
  let amount = pdfData.value.userSalaryDetailList
    .filter((x) => x.type == "10")
    .reduce(
      (total, x) => Number(parseFloat((total += Number(x.money))).toFixed(2)),
      0
    );
  pdfData.value.amount = amount;
  let perfAmount = pdfData.value.userSalaryDetailList
    .filter((x) => x.type == "20")
    .reduce(
      (total, x) => Number(parseFloat((total += Number(x.money))).toFixed(2)),
      0
    );
  pdfData.value.perfAmount = perfAmount;
};
</script>

<style lang="scss" scoped>
.table {
  .title {
    font-size: 26px;
    // font-weight: 700;
  }
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  td {
    text-align: center;
    padding: 6px;
    font-size: 12px;
    // padding: 5px 10px;
  }
  .align-right {
    text-align: right;
  }
}
:deep(.el-input__wrapper) {
  box-shadow: none;
}
</style>