ezhizao_yzbh_vue/src/views/business/service/loop/socialSecurityView.vue

<template>
  <el-dialog
    title="社保信息"
    v-model="visible"
    :width="width"
    append-to-body
    draggable
    @close="close"
    class="dialog-form"
    :close-on-click-modal = "false"
  >
    <!-- 功能按钮 -->
    <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="服务状态">
              <el-select
                v-model="form.status"
                :disabled="form.status === 3"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in selectStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-divider content-position="left">社保人员信息</el-divider>
          <el-col :span="24" class="details-container">
            <!--操作按钮 开始-->
            <div class="details-head"></div>
            <div class="details-body">
              <div>
                <el-table
                  ref="sourceTable"
                  :data="form.socialSecurityConfirm.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>
                        {{ scope.row.employeeName }}
                      </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>
                        {{ scope.row.phone }}
                      </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
                        class="show-image"
                        style="display: flex; justify-content: center"
                      >
                        <img
                          class="img"
                          :src="baseUrl + '/' + scope.row.idCardImage"
                          alt=""
                          @click="handleImageView(scope.row.idCardImage)"
                        />
                      </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
                        class="show-image"
                        style="display: flex; justify-content: center"
                      >
                        <img
                          class="img"
                          :src="baseUrl + '/' + scope.row.idCardImageBack"
                          alt=""
                          @click="handleImageView(scope.row.idCardImageBack)"
                        />
                      </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>
                        {{ rowNum(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>
                        {{ rowNum(scope.row.medicalCardinalNumber) }}
                      </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>
                        {{ scope.row.remark }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
            <el-form-item label="备注">
              {{ form.socialSecurityConfirm.content }}
            </el-form-item>
          </el-col>
          <el-divider content-position="left">社保申报信息</el-divider>
          <el-col :span="12">
            <el-form-item label="单位养老金：">
              {{ rowNum(form.socialSecurityDeclare.unitPension) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位医疗险：">
              {{ rowNum(form.socialSecurityDeclare.unitMedical) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位工伤险：">
              {{ rowNum(form.socialSecurityDeclare.unitInjury) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位失业金：">
              {{ rowNum(form.socialSecurityDeclare.unitUnemployment) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位生育险：">
              {{ rowNum(form.socialSecurityDeclare.unitProcreate) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位大病险：">
              {{ rowNum(form.socialSecurityDeclare.unitSeriousIllness) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位采暖费：">
              {{ rowNum(form.socialSecurityDeclare.unitHeatingFee) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人养老金：">
              {{ rowNum(form.socialSecurityDeclare.individualPension) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人医疗险：">
              {{ rowNum(form.socialSecurityDeclare.individualMedical) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人失业金：">
              {{ rowNum(form.socialSecurityDeclare.individualUnemployment) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人大病险：">
              {{ rowNum(form.socialSecurityDeclare.individualSeriousIllness) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合计：">
              {{ rowNum(form.socialSecurityDeclare.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.socialSecurityDeclare.content" type="textarea" rows="2" /> -->
              {{ form.socialSecurityDeclare.content }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="凭证" required>
              <el-table
                ref="dbTable"
                :data="form.socialSecurityDeclare.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>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" style="float: right" icon="close" @click="close"
        >取消</el-button
      >
    </div>
    <el-image-viewer
      v-if="showViewer"
      :url-list="currentFileList"
      @close="closeImages"
      :initial-index="showIndex"
    />
    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
    <print-dialog ref="printDialog" :parent="this" /> -->
  </el-dialog>
</template>
<script setup>
import {
  getDetail,
  saveDetail,
  updateDetail,
} from "@/api/business/crm/serviceWorkOrder";
import { rowNum, numberToCurrencyNo } from "@/utils/index";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const width = ref(1000);
const selections = ref([]);
const currentSource = ref(null);
const showViewer = ref(false);
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const selectStatus = ref([
  {
    label: "未开始",
    value: 0,
    color: "#fff",
  },
  {
    label: "进行中",
    value: 1,
    color: "#FFB836",
  },
  {
    label: "已完成",
    value: 3,
    color: "#2FCB81",
  },
]);
const { getList } = toRefs(props);
const total = ref(0);

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

const emptyForm = {
  socialSecurityConfirm: {},
  socialSecurityDeclare: {},
};

const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
function open(detail) {
  visible.value = true;
  form.value = { ...emptyForm, ...detail };
  loadData();
}

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

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

function reset() {
  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 handleSave() {
  proxy.$modal
    .confirm("确认保存么？")
    .then(() => {
      const saveValue = proxy.deepClone(form.value);
      saveDetail(saveValue).then((res) => {
        proxy.$modal.msgSuccess("保存成功");
        reset();
        close();
        getList.value();
      });
    })
    .catch((err) => {
      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;
}

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

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

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.originalFilename;
      file.url = res.url;
      file.originalFileName = res.originalFilename;
      file.fileUrl = res.fileName;
      form.value.socialSecurityDeclare.evidenceFiles.push(file);
    }
  });
}

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

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

function computeTotal() {
  let totalSalay = 0;
  form.value.socialSecurityConfirm.details.forEach((l) => {
    totalSalay += l.actuallySalary == null ? 0 : l.actuallySalary;
  });
  form.value.socialSecurityConfirm.amount = totalSalay.toFixed(2);
}

function uploadIdImage(param, row, field) {
  const formData = new FormData();
  formData.append("file", param.file);
  uploadFile(formData).then((res) => {
    if (res.code === 200) {
      const file = {};
      file.fileName = res.originalFilename;
      file.url = res.url;
      file.originalFileName = res.originalFilename;
      file.fileUrl = res.fileName;
      row[field] = file.fileUrl;
    }
  });
}

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;
  cursor: pointer;
}

::v-deep(.el-upload) {
  display: flex;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  outline: 0;
}

.required::after {
  content: "*";
  color: red;
}
</style>
<style>
.el-table .delete-row {
  background-color: rgb(251, 159, 173);
}

.el-table .add-row {
  background-color: rgb(184, 234, 147);
}
</style>