ezhizao_yzbh_vue/src/views/business/housingFund/confirm/form.vue

<template>
  <el-dialog title="公积金人员信息" v-model="visible" width="80%" 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 style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="135px" 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 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>
                  窗口缴纳：<el-button v-if="form.isFirstHousingFund === 1" type="primary" link icon="Edit"
                    @click="changeEdit" />
                </div>
              </template>
              <el-checkbox v-if="form.isFirstHousingFund === 0 || editStatus" v-model="form.isPayOnWindow"
                :true-label="1" :false-label="0" @change="isPayOnWindowChange()">
                {{ "" }}</el-checkbox>
              <div v-else>{{ form.isPayOnWindow === 1 ? "是" : "否" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公积金单位账号：" required class="edit-label">
              <template #label>
                <div>
                  公积金单位账号：<el-button v-if="form.isFirstHousingFund === 1" type="primary" link icon="Edit"
                    @click="changeEdit" />
                </div>
              </template>
              <el-input v-if="form.isFirstHousingFund === 0 || editStatus" v-model="form.housingFundUnitAccount"
                placeholder="公积金单位账号" />
              <div v-else>{{ form.housingFundUnitAccount }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公积金秘钥密码：" :required="form.isPayOnWindow === 0" class="edit-label">
              <template #label>
                <div>
                  公积金秘钥密码：<el-button v-if="form.isFirstHousingFund === 1" type="primary" link icon="Edit"
                    @click="changeEdit" />
                </div>
              </template>
              <el-input v-if="form.isFirstHousingFund === 0 || editStatus" v-model="form.housingFundPassword"
                placeholder="公积金秘钥密码：" @blur="
                  (value) => passwordCheckHandler(value, 'housingFundPassword')
                " />
              <div v-else>{{ form.housingFundPassword }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公积金划款密码：" :required="form.isPayOnWindow === 0" class="edit-label">
              <template #label>
                <div>
                  公积金划款密码：<el-button v-if="form.isFirstHousingFund === 1" type="primary" link icon="Edit"
                    @click="changeEdit" />
                </div>
              </template>
              <el-input v-if="form.isFirstHousingFund === 0 || editStatus" v-model="form.housingFundDeductionPassword"
                placeholder="公积金划款密码：" @blur="
                  (value) =>
                    passwordCheckHandler(value, 'housingFundDeductionPassword')
                " />
              <div v-else>{{ form.housingFundDeductionPassword }}</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>
              <el-button type="primary" size="small" icon="plus" @click="handleEmployeeCreate" class="button-class"> 
                新增</el-button>
              <el-button v-if="selections.length > 0" type="danger" size="small" icon="delete" class="button-class"
                @click="handleEmployeeBatchDelete">删除
              </el-button>
            </div>
            <div class="details-body">
              <div>
                <el-table ref="sourceTable" :data="form.details" size="small" max-height="490px" border show-summary
                  :summary-method="getSummaries" highlight-current-row header-row-class-name="list-header-row"
                  row-class-name="list-row" class="salary-table" @selection-change="handleCheckChange"
                  @current-change="handleCurrentChange">
                  <el-table-column type="selection" width="50" align="center" />
                  <el-table-column type="index" label="序号" width="50" align="center" />
                  <el-table-column label="姓名" width="80" align="center">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.employeeName" size="small" placeholder="姓名" style="width: 100%" />
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话号" width="130" align="center">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.phone" size="small" placeholder="电话号码" style="width: 100%" />
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="身份证正面" width="120" align="center">
                    <template #default="scope">
                      <div>
                        <!-- <el-upload action="#" :http-request="
                            (params) => upload(params, scope.row, 'idCardImage')
                          " :with-credentials="true" :show-file-list="false">
                          <template v-if="scope.row.idCardImage === ''">
                            <div class="el-upload__text" style="color: blue">
                              点击上传
                            </div>
                          </template>
                          <img v-else class="img" :src="baseUrl + '/' + scope.row.idCardImage" alt="" />
                        </el-upload> -->
                        <div>
                          <div id="preview" v-on:paste="handlePaste($event,scope.row,'idCardImage')"
                            v-if="scope.row.idCardImage === ''">
                            <span>将图片粘贴至此</span>
                          </div>
                          <div class="image-container" v-else>
                            <el-image class="img" :src="baseUrl + scope.row.idCardImage" alt=""
                              preview-teleported="true" fit="contain" :preview-src-list="srcList"
                              @click="vbs(baseUrl + scope.row.idCardImage)" />
                            <!-- 删除按钮 -->
                            <el-icon  v-if="scope.row.idCardImage !== ''" @click="scope.row.idCardImage = ''"
                              class="delete-button">
                              <Delete />
                            </el-icon>
                          </div>
                        </div>

                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="身份证反面" width="120" align="center">
                    <template #default="scope">
                      <div>
                        <!-- <el-upload action="#" :http-request="
                            (params) =>
                              upload(params, scope.row, 'idCardImageBack')
                          " :with-credentials="true" :show-file-list="false">
                          <template v-if="scope.row.idCardImageBack === ''">
                            <div class="el-upload__text" style="color: blue">
                              点击上传
                            </div>
                          </template>
                          <img v-else class="img" :src="baseUrl + '/' + scope.row.idCardImageBack" alt="" />
                        </el-upload> -->
                        <div>
                          <div id="preview2" v-on:paste="handlePaste($event,scope.row,'idCardImageBack')"
                            v-if="scope.row.idCardImageBack === ''">
                            <span>将图片粘贴至此</span>
                          </div>

                          <div class="image-container" v-else>
                            <el-image class="img" :src="baseUrl + scope.row.idCardImageBack" alt=""
                              preview-teleported="true" fit="contain" :preview-src-list="srcListback"
                              @click="vbsBack(baseUrl + scope.row.idCardImageBack)" />
                            <!-- 删除按钮 -->
                            <el-icon  v-if="scope.row.idCardImageBack !== ''"
                              @click="scope.row.idCardImageBack = ''" class="delete-button">
                              <Delete />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="基数" width="100" align="center">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.cardinalNumber" size="small" placeholder="基数"
                          @blur="onblur(scope.row, 'cardinalNumber')" />
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="比例" width="100" align="center">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.ratio" size="small" @blur="onblur(scope.row, 'ratio')">
                          <template #suffix>
                            <i style="
                                font-style: normal;
                                margin-right: 0px;
                                display: inline-block;
                                line-height: 20px;
                              ">%</i>
                          </template>
                        </el-input>
                      </div>
                      <span style="
                          color: red;
                          position: absolute;
                          z-index: 10;
                          top: 4px;
                          right: 12px;
                        ">*</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="签名" width="100" header-align="center" required>
                  </el-table-column> -->
                  <el-table-column label="备注" header-align="center">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.remark" size="small" placeholder="备注" />
                      </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="公积金人员变更">
              <el-select v-model="form.isChanged" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in yesOrNo" :key="item.label" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model.trim="form.content" maxlength="200" show-word-limit type="textarea" rows="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" @click="close" icon="close"
        style="float: right; margin-left: 12px; margin-right: 12px">取消</el-button>
      <el-button type="primary" size="small" style="float: right" icon="Finished" @click="handleSave(2)">
        保存</el-button>

      <el-button type="warning" size="small" icon="Edit" style="float: right" @click="handleSave(1)">
        待确认</el-button>
    </div>
    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
    <print-dialog ref="printDialog" :parent="this" /> -->
  </el-dialog>
</template>
<script setup>
  import {
    getDetail,
    saveDetail,
    updateDetail,
    checkEmployees,
  } from "@/api/business/production/housingFundConfirm";
  import { uploadFile } from "@/api/tool/file";
  import { ref } from "vue";
  import zTool from '@/utils/zTool'
  import { yesOrNo } from "@/utils/default";
  const { proxy } = getCurrentInstance();
  const visible = ref(false);
  const width = ref(900);
  const selections = ref([]);
  const currentSource = ref(null);
  const editStatus = 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 tempFile = ref(null)
  const employeeEmptyData = {
    id: null,
    title: "",
    remark: "",
    employeeName: "",
    departmentName: "",
    idCardImage: "",
    idCardImageBack: "",
    idiograph: "",
    details: [],
    editStatus: true,
  };
  const srcList = ref([
    "https://elevator4s-oss.oss-cn-hangzhou.aliyuncs.com/2021/05/07/b632db6a837f46e0950670277fa9e5e5multipartFile.png"
  ]);
  const srcListback = ref([
    "https://elevator4s-oss.oss-cn-hangzhou.aliyuncs.com/2021/05/07/b632db6a837f46e0950670277fa9e5e5multipartFile.png"
  ]);
  const form = ref({});

  const emptyForm = {
    details: [],
  };

  function open(detail) {
    visible.value = true;
    form.value = detail;
    loadData();
  }
  function vbs(val) {
    srcList.value = []
    srcList.value.push(val)
  }
  function vbsBack(val) {
    srcListback.value = []
    srcListback.value.push(val)
  }
  function loadData() {
    getDetail(form.value).then((res) => {
      form.value = { ...proxy.deepClone(emptyForm), ...res.data };
      if (form.value.status === 2 || form.value.status === 3) {
        proxy.$modal.msgError("该信息已提交待审核");
        close();
      }
    });
  }

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

  function reset() {
    editStatus.value = false;
    form.value = proxy.deepClone(emptyForm);
  }

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

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

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

  function handleEmployeeCreate() {
    // 此处必须进行深拷贝，否则添加的明细，将都指向了一个对象
    const _newSource = JSON.parse(JSON.stringify(employeeEmptyData));
    form.value.details.push(_newSource);
    handleCurrentChange(_newSource);
  }

  function handleEmployeeBatchDelete() {
    proxy.$modal
      .confirm("确定删除?")
      .then(() => {
        form.value.details = form.value.details.filter(
          (item) => selections.value.indexOf(item) === -1
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消删除");
      });
  }

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

  async function handleSave(status) {
    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.ratio) {
        proxy.$modal.msgError(`第${i + 1}行比例不能为空`);
        return;
      }
    }
    if (form.value.isFirstHousingFund === 0 && form.value.isPayOnWindow === 0) {
      if (!form.value.housingFundUnitAccount) {
        proxy.$modal.msgError("请输入公积金单位账号");
        return;
      }
      if (!form.value.housingFundPassword) {
        proxy.$modal.msgError("请输入公积金秘钥密码");
        return;
      }
      if (!passwordCheck(form.value.housingFundPassword)) {
        proxy.$modal.msgError("请输入正确的公积金秘钥密码");
        return;
      }
      if (!form.value.housingFundDeductionPassword) {
        proxy.$modal.msgError("请输入公积金划款密码");
        return;
      }
      if (!passwordCheck(form.value.housingFundDeductionPassword)) {
        proxy.$modal.msgError("请输入正确的公积金密码");
        return;
      }
    }
    const res = await checkEmployees(form.value);
    if (!res.data) {
      proxy.$modal.confirm("该月公积金人员出现变更确定保存么？").then(() => {
        const saveValue = proxy.deepClone(form.value);
        saveValue.isChanged = 1;
        // saveValue.status = 2;
        saveValue.status = status;
        if (saveValue.id == null) {
          saveDetail(saveValue).then((res) => {
            proxy.$modal.msgSuccess("保存成功");
            reset();
            close();
            getList.value();
          });
        } else {
          updateDetail(saveValue).then((res) => {
            proxy.$modal.msgSuccess("保存成功");
            reset();
            close();
            getList.value();
          });
        }
      });
    } else {
      proxy.$modal
        .confirm("确认保存么？")
        .then(() => {
          const saveValue = proxy.deepClone(form.value);
          // saveValue.status = 2;
          saveValue.status = status;
          if (saveValue.id == null) {
            saveDetail(saveValue).then((res) => {
              proxy.$modal.msgSuccess("保存成功");
              reset();
              close();
              getList.value();
            });
          } else {
            updateDetail(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, row, field) {
    const formData = new FormData();
    formData.append("file", param.file);
    uploadFile(formData).then((res) => {
      if (res.code === 200) {
        const file = {};
        file.fileType =
          res.newFileName.split(".")[res.newFileName.split(".").length - 1];
        if (file.fileType !== "png" && file.fileType !== "jpg") {
          proxy.$modal.msgError("文件类型错误,只能上传png,jpg格式");
          return;
        }
        file.fileName = res.newFileName;
        file.url = res.url;
        file.originalFileName = res.originalFilename;
        file.fileUrl = res.fileName;
        row[field] = file.fileUrl;
      }
    });
  }

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

  function onblur(data, field) {
    const reg = /^-?[1-9]\d*\.\d*|0\.\d*[1-9]\d*|[0-9]*/;
    const match = data[field].match(reg);
    if (isNaN(Number(match[0]))) {
      data[field] = "";
      return;
    }
    data[field] = match[0].replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
    const previous = data[field];
    // // 可以再次通过失焦事件先去除开头的0 再取出末尾的0
    data[field] = data[field].replace(/^0+\./g, "0."); // 把小数0开头的多余0去掉
    data[field] = data[field].replace(/^[0]+/, ""); // 把整数0开头的多余0去掉
    data[field] = data[field].match(/\./) ? parseFloat(data[field]) : data[field]; // 去除小数末尾的0
    data[field] = data[field] === "" && previous !== "" ? "0" : data[field];
  }
  // 监听粘贴操作
  function handlePaste(event, row, field) {
    const items = (event.clipboardData || window.clipboardData).items;
    let file = null;
    if (!items || items.length === 0) {
      this.$message.error("当前浏览器不支持本地");
      return;
    }
    // 搜索剪切板items
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) {
        file = items[i].getAsFile();
        break;
      }
    }
    if (!file) {
      this.$message.error("粘贴内容非图片");
      return;
    }
    zTool.addWatermark(file,"仅供公积金申报使用").then(watermarkedFile => {
      tempFile.value = watermarkedFile
      uploadIdImage2(tempFile, row, field)
    })
    // tempFile.value = file;
    // uploadIdImage2(tempFile, row, field)
  }

  function uploadIdImage2(tempFile, row, field) {
    const formData = new FormData();
    formData.append("file", tempFile.value);
    uploadFile(formData).then((res) => {
      if (res.code === 200) {
        const file = {};
        file.fileType =
          res.newFileName.split(".")[res.newFileName.split(".").length - 1];
        if (file.fileType !== "png" && file.fileType !== "jpg") {
          proxy.$modal.msgError("文件类型错误,只能上传png,jpg格式");
          return;
        }
        file.fileName = res.newFileName;
        file.url = res.url;
        file.originalFileName = res.originalFilename;
        file.fileUrl = res.fileName;
        row[field] = file.fileUrl;
      }
    });
  }
  function isPayOnWindowChange() { }

  // 暴露给父组件的方法
  defineExpose({
    open,
  });
</script>
<style scoped>
 .image-container {
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 垂直居中 */
  }

  .delete-button {
    margin-left: 20px;
    cursor: pointer;
  }

  .img {
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
  }

  .button-class{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  ::v-deep(.el-upload) {
    display: flex;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    outline: 0;
  }

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