EmploymentSite/vue/src/components/basic/excel/importExcel/importExcel.vue

<template>
  <a-button type="primary" @click="importShow" :functioncode="functioncode">{{ options.title }}</a-button>

  <a-modal v-model:visible="visible" :title="options.title" @ok="handleOk" :ok-text="'确认导入'"
           :ok-button-props="okButtonProps" :z-index="998">
    <ImportExcel :date-format="'YYYY-MM-DD'" @select="selectFile" @success="addData" ref="importExcelRef"></ImportExcel>
    <div style="text-align: right;cursor: pointer;margin-top:10px;" v-if="options.template" @click="downTemp">
      {{ downTempLoad ? "正在下载..." : "下载模板" }}
    </div>
  </a-modal>

  <a-modal v-model:visible="errorVisible" :title="'错误列表'" @ok="importError" :ok-text="'导出错误信息'"
           :z-index="999" :width="errorModalWidth">
    <a-table :columns="errorColumns" :data-source="errorDataList" :scroll="{ x:'100%', y: 500 }"
             bordered>
    </a-table>
  </a-modal>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
import ImportExcel from '../src/ImportExcel.vue';
import type {PropType} from "vue";
import type {ButtonProps} from "ant-design-vue";
import type {ImportProps} from "@/components/basic/excel/importExcel/ImportProps";
import {downloadTempFile, exportExcel, exportExcelByPost} from "@/utils/downloadFile";
import {post} from "@/api/common";
import type {TableColumnsType} from "ant-design-vue";

export default defineComponent({
  name: 'b-import-excel',
  components: {ImportExcel},
  props: {
    options: {type: Object as PropType<ImportProps>, default: null},
    functioncode:{type: String,default:''}
  },
  emits: ["success"],
  setup(props,{emit}) {
    const visible = ref<boolean>(false);
    const errorVisible = ref<boolean>(false);
    const okButtonProps = ref<ButtonProps>({disabled: true});
    const excelData = ref([]);
    const importExcelRef = ref();
    const downTempLoad = ref(false);
    const errorDataList = ref([]);
    const errorColumns = ref<TableColumnsType>([]);
    const errorModalWidth = ref(0);

    const importShow = function () {
      visible.value = true;
      okButtonProps.value.disabled = true;
      excelData.value = [];
      importExcelRef.value?.clearData();
      errorDataList.value = [];
      errorColumns.value = [];

      setErrorColumns();
    }

    const setErrorColumns = () => {
      errorModalWidth.value = 500;

      errorColumns.value.push({
        title: "序号", dataIndex: "index", key: "index", width: 80, align: "center", fixed: 'left',
        customRender: item => `${item.index + 1}`
      });
      props.options?.columns.forEach(c => {
        errorModalWidth.value += c.width;
        errorColumns.value.push({
          title: c.cnName,
          dataIndex: c.enName,
          key: c.enName,
          width: c.width,
          align: "center",
          ellipsis: true
        });
      });
      errorColumns.value.push({
        title: "错误信息",
        dataIndex: "errorMessage",
        key: "errorMessage",
        width: 300,
        align: "center",
        fixed: 'right'
      });

      errorModalWidth.value = errorModalWidth.value > 1500 ? 1500 : errorModalWidth.value;
    }

    const handleOk = () => {
      post(props.options.url, excelData.value, "导入").then(() => {
        visible.value = false;
        emit("success");
      }, (error) => {
        errorVisible.value = true;
        errorDataList.value = error.data;
        okButtonProps.value.disabled = true;
        excelData.value = [];
        importExcelRef.value?.clearData();
      });

    };

    const selectFile = () => {
      okButtonProps.value.disabled = true;
      excelData.value = [];
    };

    const addData = (result: any) => {
      okButtonProps.value.disabled = false;
      console.log(result);
      if (result) {
        result.forEach(sheet => {
          sheet.results.forEach(item => {
            const row = {};
            props.options?.columns.forEach(column => {
              row[column.enName] = item[column.cnName] || "";
            });

            excelData.value.push(row as never);
          });
        });

        console.log(excelData.value);
      }
    }

    const downTemp = () => {
      if (!downTempLoad.value) {
        if (props.options?.template?.url) {
          downTempLoad.value = true;

          exportExcel(props.options?.template?.url, props.options?.template?.params, props.options?.template?.tempFileName).then(() => {
            downTempLoad.value = false;
          }, () => {
            downTempLoad.value = false;
          });
        } else {
          downloadTempFile(props.options?.template?.tempFileName).then(() => {
            downTempLoad.value = false;
          }, () => {
            downTempLoad.value = false;
          });
        }
      }
    };

    const importError = () => {
      const exportColumns = props.options?.columns;
      exportColumns?.push({
        enName: "errorMessage",
        cnName: "错误信息",
        width: 100
      })

      exportExcelByPost("common/exportErrorExcel", {
        columnList: exportColumns, dataList: errorDataList.value
      }, "错误信息导出").then(() => {
      }, () => {
      });
    }

    return {
      visible,
      okButtonProps,
      importShow,
      handleOk,
      selectFile,
      addData,
      importExcelRef,
      downTemp,
      downTempLoad,
      errorVisible,
      errorDataList,
      importError,
      errorColumns,
      errorModalWidth
    };
  },
})
</script>