ezhizao_yzbh_vue/src/views/business/production/salary/view.vue

<template>
  <el-dialog title="工资信息" v-model="visible" :width="width" 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 :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>
                <!-- <el-button size="small" @click="printSalary">打印</el-button>
              <el-button size="small" @click="exportSalary">导出</el-button> -->
              </div>
              <div class="details-body">
                <div>
                  <el-table ref="sourceTable" :data="form.details" size="small" max-height="260px" border show-summary
                    :summary-method="getSummaries" highlight-current-row header-row-class-name="list-header-row"
                    row-class-name="list-row" @selection-change="handleCheckChange" @current-change="handleCurrentChange">
                    <el-table-column type="index" label="序号" width="50" 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="150" align="center">
                      <template #default="scope">
                        <div>
                          {{ scope.row.idCode }}
                        </div>
                        <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 6px;
                        ">*</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="应发工资" width="70" header-align="center" align="right" prop="planSalary">
                      <template #default="scope">
                        <div>
                          {{ rowNum(scope.row.planSalary) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="实发工资" width="70" header-align="center" align="right" prop="actuallySalary">
                      <template #default="scope">
                        <div>
                          {{ rowNum(scope.row.actuallySalary) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="奖金及其他" width="95" header-align="center" align="right" prop="bonusAmount">
                      <template #default="scope">
                        <div>
                          {{ rowNum(scope.row.bonusAmount) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="社保申报" prop="socialSecurityStatus" align="center">
                      <template #default="scope">
                        {{ scope.row.socialSecurityStatus == 1 ? '已申报' : '未申报' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="社保" align="center">
                      <el-table-column label="养老保险" width="70" header-align="center" align="right"
                        prop="endowmentInsurance">
                        <template #default="scope">
                          <div>
                            {{ rowNum(scope.row.endowmentInsurance) }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="医疗保险" width="70" header-align="center" align="right"
                        prop="medicalInsurance">
                        <template #default="scope">
                          <div>
                            {{ rowNum(scope.row.medicalInsurance) }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="失业险" width="70" header-align="center" align="right"
                        prop="unemploymentBenefit">
                        <template #default="scope">
                          <div>
                            {{ rowNum(scope.row.unemploymentBenefit) }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="大病险" width="70" header-align="center" align="right"
                        prop="seriousIllnessInsurance">
                        <template #default="scope">
                          <div>
                            {{ rowNum(scope.row.seriousIllnessInsurance) }}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="公积金申报" prop="housingFundStatus" align="center">
                      <template #default="scope">
                        {{ scope.row.housingFundStatus == 1 ? '已申报' : '未申报' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="公积金" width="80" header-align="center" align="right" prop="housingFund">
                      <template #default="scope">
                        <div>
                          {{ rowNum(scope.row.housingFund) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="个税" header-align="center" align="right" :prop="form.status === 3 && form.hasIndividualIncomeTax
                      ? 'individualIncomeTaxConfirm'
                      : 'currentIndividualIncomeTax'
                      ">
                      <template #default="scope">
                        <div>
                          {{
                            rowNum(
                              form.status === 3 && form.hasIndividualIncomeTax
                                ? scope.row.individualIncomeTaxConfirm
                                : scope.row.currentIndividualIncomeTax
                            )
                          }}
                        </div>
                      </template></el-table-column>
                    <el-table-column label="其他扣款" width="70" header-align="center" align="right" prop="otherCut">
                      <template #default="scope">
                        <div>
                          {{ rowNum(scope.row.otherCut) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" width="100" 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="备注">
                <span>
                  {{ form.content }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合计工资">
                {{ rowNum(form.amount) }}
              </el-form-item>
            </el-col>
            <el-col v-if="showVerify()" :span="24">
              <el-divider />
            </el-col>
            <el-col v-if="showVerify()" :span="24">
              <el-form-item label="是否有个税">
                <el-select v-model.trim="form.hasIndividualIncomeTax" placeholder="请选择" size="small" style="width: 100%"
                  @change="changeIndividual">
                  <el-option v-for="item in confirmChoices" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="showVerify() && form.hasIndividualIncomeTax === 1" :span="24" class="details-container">
              <div class="details-head">
                <div class="title">
                  <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
                </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="list-row"
                    @selection-change="handleCheckChange" @current-change="handleCurrentChange">
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column label="员工姓名" width="120" 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="实际个税" align="center" width="120" prop="individualIncomeTaxConfirm">
                      <template #default="scope">
                        <div>
                          <el-input-number v-model="scope.row.individualIncomeTaxConfirm" size="small" placeholder="个税"
                            :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <br />
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审核备注">
                <el-input v-if="form.status === 2" v-model.trim="form.verifyContent" maxlength="200" show-word-limit
                  type="textarea" rows="2" />
                <span v-else> {{ form.verifyContent }}</span>
              </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" icon="check" size="small" style="float: right; margin-left: 12px"
          @click="handleVerify(3)">
          审核通过</el-button>
        <el-button v-if="blackButton() && 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" />
    </div>
  </el-dialog>
</template>
<script setup>
import {
  getDetail,
  verifyDetail,
  turnBackDetail,
  exportSalaryEmployee,
  exportSalaryPdf,
} from "@/api/business/production/salary";
import feedbackDialog from "../feedbackDialog.vue";
import { rowNum, numberToCurrencyNo } from "@/utils/index";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const width = ref(1420);
const selections = ref([]);
const currentSource = ref(null);
const loading = ref(false)

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;
  form.value = detail;
  loadData();
}

function loadData() {
  loading.value = true
  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() {
  exportSalaryPdf(form.value.id);
}

//导出工资列表
function exportSalary() {
  exportSalaryEmployee(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("business:salary:verify") || permissions.includes(all_permission));
}
function blackButton() {

  return (
    permissions.includes("business:salary:back") || permissions.includes(all_permission)
  );
}

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||index === 6) {
      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 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) {
  loading.value = true
  verifyDetail(data).then((res) => {
    reset();
    getList.value();
    close();
  }).finally(() => {
    loading.value = false
  });
}

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;
}

function returnStatus(status) {
  proxy.$modal
    .confirm("确认退回么？")
    .then((_) => {
      loading.value = true
      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();
      }).finally(() => {
        loading.value = false
      });
    })
    .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();
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.button-class {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>