ezhizao_yzbh_vue/src/views/business/socialSecurity/confirm/view.vue

<template>
  <el-dialog title="社保人员信息" v-model="visible" width="80%" append-to-body draggable @close="close" :close-on-click-modal = "false">
    <div v-loading="loading"> 
    <!-- 功能按钮 -->
    <div style="padding: 8px 24px 16px 24px" >
      <el-form size="small" label-width="100px" v-model="form">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <div>{{ form.companyName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属月份">
              <div>{{ form.year }}-{{ form.month }}</div>
            </el-form-item>
          </el-col>
          <el-col v-if="form.status === 4" :span="12">
            <el-form-item label="驳回原因">
              <div>{{ form.feedbackContent }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政务网账号" required class="edit-label">
              <template #label>
                <div>政务网账号</div>
              </template>
              <el-input v-if="form.isFirstSocialSecurity === 0 || editStatus" v-model="form.governmentAccountNo"
                placeholder="请输入政务网账号" />
              <div v-else>{{ form.governmentAccountNo }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政务网密码" required class="edit-label">
              <template #label>
                <div>政务网密码</div>
              </template>
              <el-input v-if="form.isFirstSocialSecurity === 0 || editStatus" v-model="form.governmentPassword"
                placeholder="请输入政务网密码" @blur="
                  (value) => passwordCheckHandler(value, 'governmentPassword')
                " />
              <div v-else>{{ form.governmentPassword }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保账号" required class="edit-label">
              <template #label>
                <div>社保账号</div>
              </template>
              <el-input v-if="form.isFirstSocialSecurity === 0 || editStatus" v-model="form.socialSecurityAccountNo"
                placeholder="请输入社保账号" />
              <div v-else>{{ form.socialSecurityAccountNo }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保密码" required class="edit-label">
              <template #label>
                <div>社保密码</div>
              </template>
              <el-input v-if="form.isFirstSocialSecurity === 0 || editStatus" v-model="form.socialSecurityPassword"
                placeholder="请输入社保密码" @blur="
                  (value) =>
                    passwordCheckHandler(value, 'socialSecurityPassword')
                " />
              <div v-else>{{ form.socialSecurityPassword }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用工密码" required class="edit-label">
              <template #label>
                <div>用工密码</div>
              </template>
              <el-input v-if="form.isFirstSocialSecurity === 0 || editStatus" v-model="form.employeePassword"
                placeholder="请输入用工密码" @blur="
                  (value) => passwordCheckHandler(value, 'employeePassword')
                " />
              <div v-else>{{ form.employeePassword }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="details-container">
            <!--操作按钮 开始-->
            <div class="details-head">
              <div class="title">
                <i class="fa fa-th-list" aria-hidden="true" /> 人员信息

                <el-button class="button-class" size="small" @click="printSalary" icon="printer"
                  type="primary">打印</el-button>

                <el-button class="button-class" size="small" @click="exportSalary" icon="download"
                  type="info">导出</el-button>
              </div>
            </div>
            <div class="details-body">
              <div>
                <el-table ref="sourceTable" :data="form.details" size="small" max-height="260px" border
                  highlight-current-row header-row-class-name="list-header-row" :row-class-name="tableRowClassName"
                  @selection-change="handleCheckChange" @current-change="handleCurrentChange">
                  <!-- <el-table-column type="selection" width="40" align="center" /> -->
                  <el-table-column type="index" label="序号" width="55" align="center" />
                  <el-table-column label="姓名" width="80" align="center">
                    <template #default="scope">
                      <div>
                        {{ scope.row.employeeName }}
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话号" width="130" align="center">
                    <template #default="scope">
                      <div>
                        {{ scope.row.phone }}
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="身份证正面" width="120" align="center">
                    <template #default="scope">
                      <div class="show-image" style="display: flex; justify-content: center">
                        <img class="img" :src="baseUrl + '/' + scope.row.idCardImage" alt=""
                          @click="handleImageView(scope.row.idCardImage)" />
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="身份证反面" width="120" align="center">
                    <template #default="scope">
                      <div class="show-image" style="display: flex; justify-content: center">
                        <img class="img" :src="baseUrl + '/' + scope.row.idCardImageBack" alt=""
                          @click="handleImageView(scope.row.idCardImageBack)" />
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="采暖费" width="100" align="center">
                    <template #default="scope">
                      <div>
                        {{ rowNum(scope.row.heatingFee) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="基数" width="100" align="center">
                    <template #default="scope">
                      <div>
                        {{ rowNum(scope.row.cardinalNumber) }}
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="医疗基数" width="100" align="center">
                    <template #default="scope">
                      <div>
                        {{ rowNum(scope.row.medicalCardinalNumber) }}
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="签名" width="100" header-align="center" required>
                  </el-table-column> -->
                  <el-table-column label="备注" header-align="center">
                    <template #default="scope">
                      <div>
                        {{ scope.row.remark }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-divider />
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否变更">
              {{ form.isChanged === 1 ? "是" : "否" }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              {{ form.content }}
            </el-form-item>
          </el-col>
          <el-col v-if="showVerify()" :span="24">
            <el-divider />
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核备注">
              <el-input v-if="showVerify()" v-model.trim="form.verifyContent" maxlength="200" show-word-limit
                type="textarea" rows="2" />
              <div v-else>{{ form.verifyContent }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button v-if="showVerify()" type="danger" size="small" icon="back" style="float: right; margin-left: 12px"
        @click="handleVerify(4)">
        驳回</el-button>
      <el-button v-if="showVerify()" type="primary" size="small" icon="check" style="float: right; margin-left: 12px"
        @click="handleVerify(3)">审核通过</el-button>
      <el-button v-if="verifiable() && form.status === 3" type="warning" size="small" icon="back"
        style="float: right; margin-left: 12px" @click="returnStatus()">退回</el-button>
    </div>
    <feedback-dialog ref="feedbackDialogView" :verify="verify" />
    <el-image-viewer v-if="showViewer" :url-list="currentFileList" @close="closeImages" :initial-index="showIndex" />
    <!-- <print-dialog ref="printDialog" /> -->
   </div>
  </el-dialog>
</template>
<script setup>
  import {
    getDetail,
    verifyDetail,
    turnBackDetail,
    exportSocialSecurityEmployee,
    exportSocialSecurityPdf,
  } from "@/api/business/production/socialSecurityConfirm";
  import { rowNum } from "@/utils/index";
  import feedbackDialog from "../feedbackDialog.vue";
  import useUserStore from "@/store/modules/user";
  import { ref } from "vue";
  const { proxy } = getCurrentInstance();
  const visible = ref(false);
  const width = ref(800);
  const selections = ref([]);
  const currentSource = ref(null);
  const loading = ref(false);
  const showViewer = ref(false);
  const currentFileList = ref([]);
  const showIndex = ref(0);
  const editStatus = ref(false);

  const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);

  const permissions = useUserStore().permissions;
  const all_permission = "*:*:*";

  const feedbackDialogView = ref(null);

  const confirmChoices = ref([
    {
      label: "是",
      value: 1,
    },
    {
      label: "否",
      value: 0,
    },
  ]);

  const props = defineProps({
    getList: {
      type: Function,
      default: () => { },
    },
  });

  const { getList } = toRefs(props);
  const total = ref(0);

  const employeeEmptyData = {
    id: null,
    title: "",
    remark: "",
    employeeName: "",
    departmentName: "",
    idCode: "",
    salaryAmount: "",
    bonusAmount: "",
    allowanceAmount: "",
    subsidyAmount: "",
    absenceCut: "",
    planSalary: 0,
    actuallySalary: 0,
    endowmentInsurance: 0,
    medicalInsurance: 0,
    unemploymentBenefit: 0,
    seriousIllnessInsurance: 0,
    housingFund: 0,
    otherCut: 0,
    cumulativeIncome: 0,
    cumulativeSpecialCut: 0,
    cumulativeChildEduCut: 0,
    cumulativeHouseLoanInterestCut: 0,
    cumulativeHouseRentCut: 0,
    cumulativeSupportElderCut: 0,
    cumulativeContinuingEduCut: 0,
    cumulativeBabyCareCut: 0,
    sumSpecialCumulativeCut: 0,
    cumulativeOtherCut: 0,
    cumulativeIndividualIncomeTax: 0,
    cumulativeHasPaidIit: 0,
    currentIndividualIncomeTax: 0,
    idiograph: "",
    details: [],
    editStatus: true,
  };

  const form = ref({
    amount: null,
    details: [],
  });

  const emptyForm = {
    details: [],
  };

  function open(detail) {
    console.log(detail);
    visible.value = true;
    loading.value = true;
    form.value = detail;
    loadData();
  }

  function loadData() {
    getDetail(form.value).then((res) => {
      form.value = { ...proxy.deepClone(emptyForm), ...res.data };
      computeTotal();
    }).finally(() => loading.value = false);
  }

  function close() {
    visible.value = false;
    reset();
  }

  function reset() {
    form.value = proxy.deepClone(emptyForm);
    total.value = 0;
  }

  //人员信息打印
  function printSalary() {
    exportSocialSecurityPdf(form.value.id);
  }

  //人员信息导出
  function exportSalary() {
    exportSocialSecurityEmployee(form.value.id);
  }

  function showVerify() {
    if (
      form.value.id == null ||
      form.value.status === 0 ||
      form.value.status === 3 ||
      form.value.status === 4
    ) {
      return false;
    } else if (verifiable()) {
      return true;
    } else {
      return false;
    }
  }

  function verifiable() {
    return (
      permissions.includes(all_permission) ||
      permissions.includes("business:socialSecurityConfirm:verify")
    );
  }

  function handleCurrentChange(row) {
    currentSource.value = row;
  }

  function handleCheckChange(selection) {
    selections.value = selection.map((item) => item);
  }

  function getSummaries(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "合计";
        return;
      } else if (index === 1) {
        sums[index] = "";
        return;
      }
      const values = data.map((item) => Number(item[column.property]));

      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return (Number(prev) + Number(curr)).toFixed(2);
          } else {
            return Number(prev).toFixed(2);
          }
        }, 0);
      } else {
        sums[index] = "";
      }
    });
    return sums;
  }

  function handleImageView(fileUrl) {
    window.open(`${baseUrl.value}${fileUrl}`);
  }

  function handleVerify(status) {
    if (status === 4) {
      const saveValue = proxy.deepClone(form.value);
      saveValue.status = status;
      feedbackDialogView.value.open(saveValue);
    } else {
      proxy.$modal
        .confirm("确认审核么？")
        .then((_) => {
          const saveValue = proxy.deepClone(form.value);
          saveValue.status = status;
          verify(saveValue);
        })
        .catch((_) => {
          proxy.$modal.msg("已取消审核");
        });
    }
  }

  function verify(data) {
    verifyDetail(data).then((res) => {
      reset();
      getList.value();
      close();
    });
  }

  function rowChangeSum(row) {
    let actuallySalary = 0;
    actuallySalary += row.planSalary == null ? 0 : row.planSalary;
    actuallySalary += row.bonusAmount == null ? 0 : row.bonusAmount;
    actuallySalary -= row.endowmentInsurance == null ? 0 : row.endowmentInsurance;
    actuallySalary -= row.medicalInsurance == null ? 0 : row.medicalInsurance;
    actuallySalary -=
      row.unemploymentBenefit == null ? 0 : row.unemploymentBenefit;
    actuallySalary -=
      row.seriousIllnessInsurance == null ? 0 : row.seriousIllnessInsurance;
    actuallySalary -= row.housingFund == null ? 0 : row.housingFund;
    if (form.value.hasIndividualIncomeTax === 1) {
      actuallySalary -=
        row.individualIncomeTaxConfirm == null
          ? 0
          : row.individualIncomeTaxConfirm;
    } else {
      actuallySalary -=
        row.currentIndividualIncomeTax == null
          ? 0
          : row.currentIndividualIncomeTax;
    }
    actuallySalary -= row.otherCut == null ? 0 : row.otherCut;
    row.actuallySalary = actuallySalary;
    computeTotal();
  }

  function computeTotal() {
    let totalSalay = 0;
    form.value.details.forEach((l) => {
      totalSalay += l.actuallySalary == null ? 0 : l.actuallySalary;
    });
    form.value.amount = totalSalay.toFixed(2);
  }

  function returnStatus(status) {
    proxy.$modal
      .confirm("确认退回么？")
      .then((_) => {
        turnBackDetail(form.value).then((res) => {
          // if (res.data.successStatus = true) {
          //   reset()
          //   getList.value()
          //   close()
          // } else {
          //   proxy.$modal.msg(res.data.message)
          // }
          reset();
          getList.value();
          close();
        });
      })
      .catch((_) => {
        proxy.$modal.msg("已取消退回");
      });
  }

  function changeIndividual(arg) {
    // if (arg === 1) {
    form.value.details.forEach((row) => {
      let actuallySalary = 0;
      actuallySalary += row.planSalary == null ? 0 : row.planSalary;
      actuallySalary += row.bonusAmount == null ? 0 : row.bonusAmount;
      actuallySalary -=
        row.endowmentInsurance == null ? 0 : row.endowmentInsurance;
      actuallySalary -= row.medicalInsurance == null ? 0 : row.medicalInsurance;
      actuallySalary -=
        row.unemploymentBenefit == null ? 0 : row.unemploymentBenefit;
      actuallySalary -=
        row.seriousIllnessInsurance == null ? 0 : row.seriousIllnessInsurance;
      actuallySalary -= row.housingFund == null ? 0 : row.housingFund;
      if (arg === 1) {
        actuallySalary -=
          row.individualIncomeTaxConfirm == null
            ? 0
            : row.individualIncomeTaxConfirm;
      } else {
        actuallySalary -=
          row.currentIndividualIncomeTax == null
            ? 0
            : row.currentIndividualIncomeTax;
      }
      actuallySalary -= row.otherCut == null ? 0 : row.otherCut;
      row.actuallySalary = actuallySalary;
    });
    computeTotal();
  }

  function passwordCheckHandler(value, field) {
    // console.log(value)
    if (!passwordCheck(form.value[field])) {
      proxy.$modal.msgError("请输入正确密码");
    }
  }

  function closeImages() {
    showViewer.value = false;
  }

  function tableRowClassName({ row, index }) {
    if (row.changeStatus === 1) {
      return "list-row add-row";
    } else if (row.changeStatus === 2) {
      return "list-row delete-row";
    } else {
      return "list-row";
    }
  }

  // 暴露给父组件的方法
  defineExpose({
    open,
  });
</script>
<style scoped>
  .img {
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep(.el-upload) {
    display: flex;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    outline: 0;
  }

  .button-class {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .required::after {
    content: "*";
    color: red;
  }
</style>
<style>
  .el-table .delete-row {
    background-color: rgb(251, 159, 173);
  }

  .el-table .add-row {
    background-color: rgb(184, 234, 147);
  }
</style>