sepax-products-web/src/views/component/imports.vue

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="数据导入" width="740px">
      <div class="title">模板下载</div>
      <el-button
        style="margin-top: 10px"
        size="small"
        type="primary"
        @click="exportExcel(new Date().getTime().toString())"
        >模板下载</el-button
      >
      <div style="color: red; margin-top: 10px">
        导入的时候请勿修改模版的标题名称
      </div>

      <el-upload
        style="margin-top: 10px"
        drag
        :action="action"
        :data="{
          table_name: tableName,
        }"
        :headers="{
          Authorization: `Bearer ${getToken()}`,
        }"
        :on-success="uploadSuccess"
        :on-error="uploadFail"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
      </el-upload>

      <div class="title" style="margin-top: 10px;">数据预览</div>
      <Table :data="tableList" :columns="table" style="margin-top: 10px;"></Table>
      <div style="font-size: 12px;zoom: 0.8;">总共数据：{{ tableList.length }}条</div>
      <el-button type="primary" size="small" style="margin-top: 10px;" @click="imports">确认导入</el-button>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import { getToken } from "@/utils/auth";
import { imports } from "@/api/system/baseForm";
export default {
  props: {
    formInfo: {
      type: Array,
      default: () => [],
    },
    tableName: String,
  },
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/api/admin/base-form/excel-show`,
      dialogVisible: false,
      headers: [],

      tableList: [],
      table: [],
    };
  },
  methods: {
    getToken,
    show() {
      this.dialogVisible = true;
    },
    hidden() {
      this.dialogVisible = false;
    },

    //上传
    uploadFail(err) {
      console.log(err);
      this.$message({
        message: "上传失败",
        type: "error",
      });
    },
    uploadSuccess(response) {
      this.tableList = response;
      this.$message({
        message: `上传成功`,
        type: "success",
      });
    },

    exportExcel(sheetName) {
      const data = [this.headers.map((header) => header.title)];
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, sheetName);
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        `${sheetName}.xlsx`
      );
    },

    imports() {
      imports({
        table_name: this.tableName,
        data: this.tableList
      }).then(res => {
        console.log(res)
        this.$message({
          type: 'success',
          message: `成功导入${res.total}条`
        })
      })
      this.hidden();
      this.$emit('refresh')
    }
  },
  computed: {},
  watch: {
    formInfo(newVal) {
      if (newVal && newVal instanceof Array) {
        this.table = this.headers = newVal.map((i) => {
          return {
            key: i.field,
            title: i.name,
          };
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 15px;
  font-weight: 600;

  padding: 8px 4px;
  position: relative;

  &::before {
    content: '';
    width: 4px;
    background: $primaryColor;

    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -8px;
  }
}
</style>