ezhizao_yzbh_vue/src/views/business/housingFund/declare/view.vue

<template>
  <el-dialog title="公积金申报信息11" v-model="visible" :width="width" append-to-body draggable @close="close"
    :close-on-click-modal="false">
    <!-- <div slot="title" class="dialog-title-container">
      <span class="title-label"><i class="el-icon-document" /> 工资信息</span>
      <i class="el-icon-close" @click="close" />
    </div> -->
    <!-- 功能按钮 -->
    <div v-loading="loading">
      <div style="padding: 8px 24px 16px 24px">
        <el-form size="small" label-width="120px" 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-date-picker v-model="currentMonth" type="month" placeholder="请选择时间" format="YYYY-MM"
                  @change="changeMonthHandle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="窗口缴纳：" required class="edit-label">
                <template #label>
                  <div>窗口缴纳</div>
                </template>
                <div>{{ form.isPayOnWindow === 1 ? "是" : "否" }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公积金单位账号" required class="edit-label">
                <template #label>
                  <div>公积金单位账号</div>
                </template>
                <div>{{ form.housingFundUnitAccount }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公积金秘钥密码" required class="edit-label">
                <template #label>
                  <div>公积金秘钥密码</div>
                </template>
                <div>{{ form.housingFundPassword }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公积金划款密码" required class="edit-label">
                <template #label>
                  <div>公积金划款密码</div>
                </template>
                <div>{{ form.housingFundDeductionPassword }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
                <el-button type="primary"  @click="exportExcel">导出明细表</el-button>
              </div>
            </el-col>
            <el-table :data="housingFundPersonList" border style="width: 100%" show-summary
              :summary-method="getSummaries">
              <el-table-column label="序号" align="center" type="index" />
              <el-table-column prop="employeeName" label="人员" />
              <el-table-column prop="cardinalNumber" label="基数" />
              <el-table-column prop="ratio" label="比例">
                <template #default="scope">
                  {{scope.row.ratio/100}}
                </template>
              </el-table-column>
              <el-table-column label="公司" prop="companyAmount">
              </el-table-column>
              <el-table-column label="个人" prop="oneSelfAmount">
              </el-table-column>
              <el-table-column label="缴费金额" prop="totalAmount">
              </el-table-column>
            </el-table>

            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位缴纳：">
                <el-input-number v-model="form.unitAmount" size="small" v-if="form.status !==3" placeholder="单位缴纳"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitAmount) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人缴纳：">
                <el-input-number v-model="form.individualAmount" v-if="form.status !==3" size="small" placeholder="个人缴纳"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.individualAmount) }}</div>
              </el-form-item>
            </el-col>
           
            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model.trim="form.content" v-if="form.status !==3" type="textarea" rows="2" />
                <div v-else>{{form.content}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="凭证" required>
                <img  style="height: 148px; width: 148px" :src="`${baseUrl}/${form.evidenceFile}`"
                class="avatar" @click="openEvidience()" />
                <!-- <el-upload action="#" :http-request="upload" :with-credentials="true" :show-file-list="false" multiple>
                  <el-button size="small" type="primary" icon="Upload" v-if="form.status !==3">点击上传</el-button>
                </el-upload>
                <el-table style="margin-top: 15px;" ref="dbTable" :data="form.evidenceFiles" size="small" border
                  header-row-class-name="list-header-row" row-class-name="list-row">
                  <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-column label="操作" width="80" prop="fileType" align="center">
                    <template #default="scope">
                      <el-button size="small" link type="danger" @click="handleDel(scope.row, scope.$index)"
                        v-if="form.status !==3">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-btns-container" style="height: 40px">
        <el-button size="small" icon="close" v-if="form.status !== 3" style="float: right; margin-left: 12px; margin-right: 12px"
          @click="close">取消</el-button>
        <el-button type="primary" style="float: right" size="small" v-if="form.status !== 3" icon="Finished" @click="handleSave">
          保存</el-button>
          <el-button v-hasPermi="['business:housingFundDeclare:verify']" v-if="!stopUseBack" style="float: right;" icon="back" size="small"
          type="warning" :disabled="
      form == null || form.status !== 3
    " @click="turnBack(form)">退回</el-button>
      </div>
    </div>
    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
    <print-dialog ref="printDialog" :parent="this" /> -->
  </el-dialog>
</template>
<script setup>
  import {
    getDetail,
    saveDetail, turnBackDetail,exportDetail
  } from "@/api/business/production/housingFundDeclare";
  import { getMembers, getMembersNoDelete } from "@/api/business/production/housingFundDeclare";
  import { uploadFile } from "@/api/tool/file";
  import { ref } from "vue";
  import { rowNum } from "@/utils/index";
  const { proxy } = getCurrentInstance();
  const visible = ref(false);
  const width = ref(800);
  const selections = ref([]);
  const currentSource = ref(null);
  const editStatus = ref(false);
  const canSave = ref(false);
  const loading = ref(false);
  const stopUseBack = ref(false)
  const currentMonth = ref(
    // proxy.moment().format("YYYY-MM-01") 
  );
  const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
  const props = defineProps({
    getList: {
      type: Function,
      default: () => { },
    },
  });
  const housingFundPersonList = ref([])
  const { getList } = toRefs(props);
  const total = ref(0);

  const employeeEmptyData = {
    id: null,
    title: "",
    remark: "",
    employeeName: "",
    departmentName: "",
    idCardImage: "",
    idCardImageBack: "",
    idiograph: "",
    details: [],
    editStatus: true,
  };

  const form = ref({});

  const emptyForm = {
    details: [],
  };

  function open(detail) {
    visible.value = true;
     currentMonth.value = detail.year + "-" + detail.month + "-01"
    // currentMonth.value = proxy.moment().format("YYYY-MM-01")
    form.value = detail;
    loadData();
  }
  function openEvidience() {
    
    window.open(`${baseUrl.value}${form.value.evidenceFile}`);
  }
  function loadData() {
    loading.value = true
    form.value.year = proxy.moment(currentMonth.value).format("YYYY");
    form.value.month = proxy.moment(currentMonth.value).format("MM");
    const { year, month, socialSecurityDeclareId, companyId } = form.value
    const clearForm = { year, month, socialSecurityDeclareId, companyId }
    getDetail(clearForm).then((res) => {
      form.value = { ...proxy.deepClone(emptyForm), ...res.data };
      form.value.evidenceFile =  form.value.evidenceFiles[0].fileUrl;
      amountChangeHandler();
      let query = { "companyId": companyId, "year": form.value.year, "month": form.value.month }
      getMembersNoDelete(query)
        .then((res) => {
          housingFundPersonList.value = res.data
          
        })
        .catch((err) => {
          console.log(err);
        });
    }).finally(() => {
      loading.value = false
    });

  }
  const getSummaries = (param) => {

const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
  if (index === 0) {
    sums[index] = '合计';
    return;
  }
  if (index === 1 || index === 2 || index === 3) {
    return;
  }

  const values = data.map(item => Number(item[column.property]));
  // if (column.property === 'companyAmount') {
  //   if (form.value.unitAmount) {
  //     sums[index] = form.value.unitAmount
  //     return
  //   }
  // } else if (column.property === 'oneSelfAmount') {
  //   if (form.value.unitAmount) {
  //     sums[index] = form.value.individualAmount
  //     return
  //   }
  // }
  // else if (column.property === 'totalAmount') {
  //   if (form.value.unitAmount && form.value.individualAmount) {
  //     sums[index] = form.value.individualAmount + form.value.unitAmount
  //     return
  //   }
  // }

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

return sums
}
  function changeMonthHandle() {

    // isView.value = true
    const nowDate = ref(
      proxy.moment().format("YYYY-MM-01")
    );
    let nowyear = proxy.moment(nowDate.value).format("YYYY");
    let nowmonth = proxy.moment(nowDate.value).format("MM");
    const year = proxy.moment(currentMonth.value).format("YYYY");
    const month = proxy.moment(currentMonth.value).format("MM");
    if (nowyear + nowmonth == year + month) {
      // isView.value = false
      stopUseBack.value = false
    } else {
      stopUseBack.value = true
    }
    loadData()

  }
  function close() {
    visible.value = false;
    reset();
  }
  function turnBack(detail) {
    loading.value = true
    form.value.status = 1;

    form.value.year = proxy.moment(currentMonth.value).format("YYYY");
    form.value.month = proxy.moment(currentMonth.value).format("MM");
    turnBackDetail(form.value)
      .then((res) => {
        getList.value();
      })
      .catch((err) => {
        proxy.$modal.msgError(err.message);
      }).finally(() => {
        loading.value = false
        visible.value = false;
      });
  }
  function reset() {
    form.value = proxy.deepClone(emptyForm);
    canSave.value = false;
  }

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

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

  function handleSave() {
    if (form.value.isFirstSocialSecurity === 0) {
      if (!form.value.governmentAccountNo) {
        proxy.$modal.msgError("请输入政务网账号");
        return;
      }
      if (!form.value.governmentPassword) {
        proxy.$modal.msgError("请输入政务网密码");
        return;
      }
      if (!passwordCheck(form.value.governmentPassword)) {
        proxy.$modal.msgError("请输入正确的政务网密码");
        return;
      }
      if (!form.value.socialSecurityAccountNo) {
        proxy.$modal.msgError("请输入社保账号");
        return;
      }
      if (!form.value.socialSecurityPassword) {
        proxy.$modal.msgError("请输入社保密码");
        return;
      }
      if (!passwordCheck(form.value.socialSecurityPassword)) {
        proxy.$modal.msgError("请输入正确的社保密码");
        return;
      }
      if (!form.value.employeePassword) {
        proxy.$modal.msgError("请输入用工密码");
        return;
      }
      if (!passwordCheck(form.value.employeePassword)) {
        proxy.$modal.msgError("请输入正确的用工密码");
        return;
      }
    }
    if (
      form.value.evidenceFiles == null ||
      form.value.evidenceFiles.length === 0
    ) {
      proxy.$modal.msgError("请上传凭证");
      return;
    }
    // if (form.value.reportFiles == null || form.value.reportFiles.length === 0) {
    //   proxy.$modal.msgError("请上传报表");
    //   return;
    // }

    proxy.$modal
      .confirm("确认保存么？")
      .then(() => {
        const saveValue = proxy.deepClone(form.value);
        saveValue.status = 3;
        saveValue.year = proxy.moment(currentMonth.value).format("YYYY");
        saveValue.month = proxy.moment(currentMonth.value).format("MM");
        saveDetail(saveValue).then((res) => {
          proxy.$modal.msgSuccess("保存成功");
          reset();
          close();
          getList.value();
        });
      })
      .catch((err) => {
        proxy.$modal.msg("取消保存");
      });
  }

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

  function passwordCheck(value) {
    const pattern = /^[A-Za-z0-9~!@#$%^&*()_+-=]*$/;
    if (!pattern.test(value)) {
      return false;
    }
    return true;
  }

  function upload(param) {
    const formData = new FormData();
    formData.append("file", param.file);
    uploadFile(formData).then((res) => {
      if (res.code === 200) {
        const file = {};
        file.fileName = res.newFileName;
        file.url = res.url;
        file.originalFileName = res.originalFilename;
        file.fileUrl = res.fileName;
        form.value.evidenceFiles.push(file);
      }
    });
  }

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

  function changeEdit() {
    editStatus.value = !editStatus.value;
  }

  function amountChangeHandler() {
    let amount = 0;
    amount += form.value.unitAmount == null ? 0 : form.value.unitAmount;
    amount +=
      form.value.individualAmount == null ? 0 : form.value.individualAmount;
    form.value.amount = amount;
  }
  function exportExcel() {
    let data = {
      "companyId": form.value.companyId,
      "year": form.value.year,
      "month": form.value.month
    }
    exportDetail(data)
  }
  function handleDel(row, index) {
    proxy.$modal
      .confirm("确定删除吗？")
      .then((_) => {
        form.value.evidenceFiles.splice(index, 1);
      })
      .catch((_) => {
        proxy.$modal.msg("已取消删除");
      });
  }

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