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

<template>
  <el-dialog
    title="公积金申报信息"
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    @close="close"
  >
    <!-- <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 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-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">
            <el-divider />
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位缴纳：">
              <div>{{ rowNum(form.unitAmount) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人缴纳：">
              <div>{{ 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="备注">
              <div>{{ form.content }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="凭证" required>
              <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>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" icon="Close" style="float: right" @click="close">
        取消</el-button
      >
    </div>
    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
    <print-dialog ref="printDialog" :parent="this" /> -->
  </el-dialog>
</template>
<script setup>
import {
  getDetail,
  saveDetail,
} 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 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;
  form.value = detail;
  loadData();
}

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

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

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() {
  for (let i = 0; i < form.value.details.length; i++) {
    const l = form.value.details[i];
    // 数据校验
    if (l.employeeName == null || l.employeeName === "") {
      proxy.$modal.msgError(`第${i + 1}行姓名不能为空`);
      return;
    }
    if (l.phone == null || l.phone === "") {
      proxy.$modal.msgError(`第${i + 1}行电话不能为空`);
      return;
    }
    // 正则表达式匹配身份证号的格式
    const regExp = /1[3-9]\d{9}/;
    if (!regExp.test(l.phone)) {
      proxy.$modal.msgError(`第${i + 1}行请输入正确的电话号码！`);
      return;
    }
    if (!l.idCardImage) {
      proxy.$modal.msgError(`第${i + 1}行身份证正面照不能为空`);
      return;
    }
    if (!l.idCardImageBack) {
      proxy.$modal.msgError(`第${i + 1}行身份证反面照不能为空`);
      return;
    }
    if (!l.cardinalNumber) {
      proxy.$modal.msgError(`第${i + 1}行基数不能为空`);
      return;
    }
   // if (!l.medicalCardinalNumber) {
     // proxy.$modal.msgError(`第${i + 1}行医疗基数不能为空`);
//return;
//}
  }
  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;
    }
  }
  proxy.$modal
    .confirm("确认保存么？")
    .then(() => {
      const saveValue = proxy.deepClone(form.value);
      saveValue.status = 3;
      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 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>