ezhizao_yzbh_vue/src/views/business/socialSecurity/declare/form.vue

<template>
  <el-dialog title="社保申报信息" 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="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-date-picker v-model="currentMonth" type="month" placeholder="请选择时间" format="YYYY-MM"
                  @change="changeMonthHandle" />
              </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>
                <div>{{ 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>
                <div>{{ 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>
                <div>{{ 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>
                <div>{{ 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>
                <div>{{ form.employeePassword }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位养老金：">
                <el-input-number v-if="form.status !==3" v-model="form.unitPension" size="small" placeholder="单位养老金"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitPension) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位医疗险：">
                <el-input-number v-if="form.status !==3" v-model="form.unitMedical" size="small" placeholder="单位医疗险"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitMedical) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位工伤险：">
                <el-input-number v-if="form.status !==3" v-model="form.unitInjury" size="small" placeholder="单位工伤险"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitInjury) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位失业金：">
                <el-input-number v-if="form.status !==3" v-model="form.unitUnemployment" size="small"
                  placeholder="单位失业金" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitUnemployment) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位生育险：">
                <el-input-number v-if="form.status !==3" v-model="form.unitProcreate" size="small" placeholder="单位生育险"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitProcreate) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位大病险：">
                <el-input-number v-if="form.status !==3" v-model="form.unitSeriousIllness" size="small"
                  placeholder="单位大病险" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitSeriousIllness) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位采暖费：">
                <el-input-number v-if="form.status !==3" v-model="form.unitHeatingFee" size="small" placeholder="单位大病险"
                  :precision="2" :controls="false" style="width: 100%" @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.unitHeatingFee) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人养老金：">
                <el-input-number v-if="form.status !==3" v-model="form.individualPension" size="small"
                  placeholder="个人养老金" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.individualPension) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人医疗险：">
                <el-input-number v-if="form.status !==3" v-model="form.individualMedical" size="small"
                  placeholder="个人医疗险" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.individualMedical) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人失业金：">
                <el-input-number v-if="form.status !==3" v-model="form.individualUnemployment" size="small"
                  placeholder="个人失业金" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.individualUnemployment) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个人大病险：">
                <el-input-number v-if="form.status !==3" v-model="form.individualSeriousIllness" size="small"
                  placeholder="个人大病险" :precision="2" :controls="false" style="width: 100%"
                  @change="amountChangeHandler" />
                <div v-else>{{ rowNum(form.individualSeriousIllness) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合计：">
                <!-- <el-input-number
                v-model="form.amount"
                size="small"
                placeholder="合计"
                :precision="2"
                :controls="false"
                style="width: 100%"
              /> -->
                {{ rowNum(form.amount) }}
              </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" maxlength="200" show-word-limit
                  type="textarea" rows="2" />
                <div v-else>{{form.content}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="凭证" required>
                <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 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"
                /> -->
                  <el-table-column label="操作" width="80" prop="fileType" align="center">
                    <template #default="scope">
                      <el-button size="small" link type="danger" v-if=" form.status !== 3"
                        @click="handlerEportFilesDel(scope.row, scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="报表">
                <el-upload action="#" :http-request="uploadStatement" :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 ref="dbTable" :data="form.reportFiles" 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" v-if=" form.status !== 3"
                        @click="handleDel(scope.row, scope.$index)">删除</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" v-if="form.status !== 3" icon="close"
          style="float: right; margin-left: 12px; margin-right: 12px" @click="close">
          取消</el-button>
        <el-button type="primary" v-if="form.status !== 3" size="small" icon="Finished" style="float: right"
          @click="handleSave">
          保存</el-button>
        <el-button v-hasPermi="['business:socialSecurityDeclare:edit']" style="float: right;" v-if="!stopUseBack"
          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
  } from "@/api/business/production/socialSecurityDeclare";
  import { uploadFile } from "@/api/tool/file";
  import { rowNum } from "@/utils/index";
  import { ref } from "vue";
  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 { 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 = proxy.moment().format("YYYY-MM-01")
    form.value = detail;
    console.log(detail);
    loadData();
  }

  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 };
      // if (form.value.status === 2 || form.value.status === 3) {
      //   proxy.$modal.msgError("该信息已提交待审核");
      //   close();
      // }
      amountChangeHandler();
    }).finally(() => {
      loading.value = false;
    });
  }
  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 reset() {
    form.value = proxy.deepClone(emptyForm);
    canSave.value = false;
  }

  function handleCurrentChange(row) {
    currentSource.value = row;
  }
  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 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.fileType =
          res.newFileName.split(".")[res.newFileName.split(".").length - 1];
        file.originalFileName = res.originalFilename;
        file.fileUrl = res.fileName;
        form.value.evidenceFiles.push(file);
      }
    });
  }

  function uploadStatement(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.fileType =
          res.newFileName.split(".")[res.newFileName.split(".").length - 1];
        file.originalFileName = res.originalFilename;
        file.fileUrl = res.fileName;
        form.value.reportFiles.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.unitInjury == null ? 0 : form.value.unitInjury;
    amount += form.value.unitMedical == null ? 0 : form.value.unitMedical;
    amount += form.value.unitPension == null ? 0 : form.value.unitPension;
    amount += form.value.unitProcreate == null ? 0 : form.value.unitProcreate;
    amount +=
      form.value.unitSeriousIllness == null ? 0 : form.value.unitSeriousIllness;
    amount +=
      form.value.unitUnemployment == null ? 0 : form.value.unitUnemployment;
    amount +=
      form.value.individualMedical == null ? 0 : form.value.individualMedical;
    amount +=
      form.value.individualPension == null ? 0 : form.value.individualPension;
    amount +=
      form.value.individualSeriousIllness == null
        ? 0
        : form.value.individualSeriousIllness;
    amount +=
      form.value.individualUnemployment == null
        ? 0
        : form.value.individualUnemployment;
    amount += form.value.unitHeatingFee == null ? 0 : form.value.unitHeatingFee;
    form.value.amount = amount;
    canSave.value =
      form.value.unitInjury !== undefined &&
      form.value.unitMedical !== undefined &&
      form.value.unitPension !== undefined &&
      form.value.unitProcreate !== undefined &&
      form.value.unitSeriousIllness !== undefined &&
      form.value.unitUnemployment !== undefined &&
      form.value.individualMedical !== undefined &&
      form.value.individualPension !== undefined &&
      form.value.individualSeriousIllness !== undefined &&
      form.value.individualUnemployment !== undefined &&
      form.value.unitHeatingFee !== undefined;
  }

  function handlerEportFilesDel(row, index) {
    proxy.$modal
      .confirm("确定删除吗？")
      .then((_) => {
        form.value.evidenceFiles.splice(index, 1);
      })
      .catch((_) => {
        proxy.$modal.msg("已取消删除");
      });
  }

  function handleDel(row, index) {
    proxy.$modal
      .confirm("确定删除吗？")
      .then((_) => {
        form.value.reportFiles.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>