ezhizao_yzbh_vue/src/views/business/housingFund/fileListDialog.vue

<template>
  <el-dialog
    title="公积金申报信息"
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    :close-on-click-modal = "false"
    @close="close"
  >
    <!-- 功能按钮 -->
    <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" /> 文件信息
              </div>
            </div>
            <img  style="height: 148px; width: 148px" :src="`${baseUrl}/${form.evidenceFile}`"
            class="avatar" @click="openEvidience()" />
            <!-- <div class="details-body">
              <div>
                <el-table
                  ref="sourceTable"
                  :data="form.evidenceFiles"
                  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
                    label="文件名"
                    prop="originalFileName"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template #default="scope">
                      <el-button
                        size="small"
                        type="text"
                        @click="openFile(scope.row)"
                        >{{
                          scope.row.originalFileName == ""
                            ? "打开文件"
                            : scope.row.originalFileName
                        }}</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px"></div>
    <!-- <print-dialog ref="printDialog" /> -->
  </el-dialog>
</template>
<script setup>
import { getDetail } from "@/api/business/production/housingFundDeclare";
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 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;
  form.value = detail;
  loadData();
  console.log(form.value);
  
}

function loadData() {
  getDetail(form.value).then((res) => {
    form.value = { ...proxy.deepClone(emptyForm), ...res.data };
    form.value.evidenceFile =  form.value.evidenceFiles[0].fileUrl;
  });
}

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

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

function printSalary() {}
function exportSalary() {}

function showVerify() {
  if (
    form.value.id == null ||
    form.value.status === 0 ||
    form.value.status === 3
  ) {
    return false;
  } else if (verifiable()) {
    return true;
  } else {
    return false;
  }
}
function openFile(row) {
  window.open(`${baseUrl.value}${row.fileUrl}`);
}
function verifiable() {
  // console.log(permissions)
  // console.log(permissions)
  return (
    permissions.includes(all_permission) ||
    permissions.includes("business:salary: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 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 openEvidience() {
    
    window.open(`${baseUrl.value}${form.value.evidenceFile}`);
  }
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) => {
        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 handleImageView(fileUrl) {
  currentFileList.value = [`${baseUrl.value}${fileUrl}`];
  showViewer.value = true;
}

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

// 暴露给父组件的方法
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;
}

.required::after {
  content: "*";
  color: red;
}
</style>