vue3 批量导入、下载、批量导出

批量导入（带信息反馈）：

<!-- 批量创建 批量导入 -->
<file @refresh="refresh"></file>

组件：

<template>
  <div class="export-wrap">
    <el-upload
      class="upload-demo"
      action="#"
      :before-upload="handleBefore"
      :http-request="httpRequest"
      accept="xlsx"
    >
      <el-button type="primary" size="small">
        <i class="iconfont icon-piliangchuangjian"></i>批量创建</el-button
      >
    </el-upload>
    <el-dialog title="批量导入" v-model="dialogVisible" width="30%">
      <div class="export-main" v-if="scssce">
        <div class="export-img">
          <img src="@/assets/downloadC.png" />
          <span class="green">上传成功</span>
          <div class="linegreen"></div>
        </div>
        <div class="export-text">{{ msg }}</div>
      </div>
      <div class="export-main" v-else>
        <div class="export-img">
          <img src="@/assets/downloadF.png" />
          <span class="red">上传失败</span>
          <div class="linered"></div>
        </div>
        <div class="export-text">
          <span class="msg-text" v-for="(item, index) in msgList" :key="index">
            {{ index + 1 }}、{{ item.errorMsg }}
          </span>
        </div>
        <div class="export-tips">请修正后重新导入</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { createBatchApi } from "@/http/workOrder/workOrderPool.js";//接口
export default {
  emits: ["refresh"],
  props: {
    // kindId: {
    //   type: String,
    // },
  },
  setup(props, { emit }) {
    const data = reactive({
      dialogVisible: false,
      msg: "",
      scssce: true,
      msgList: [],
    });
    // 文件上传处理
    const httpRequest = (options) => {
      let fileFormData = new FormData();
      fileFormData.append("file", options.file, options.file.name);
      // fileFormData.append("orgId", data.kindId);
      createBatchApi(fileFormData).then((res) => {
        if (res.data.code == 200) {
          let resdata = res.data.data;
          console.log(resdata, "resdata");
          if (resdata.code == "OK") {
            data.dialogVisible = true;
            data.scssce = true;
            emit("refresh");
            data.msg = resdata.msg;
          } else if (resdata.code == "ERROR") {
            data.dialogVisible = true;
            data.scssce = false;
            data.msgList = resdata.data;
          }
        }
      });
    };
    // 上传之前
    const handleBefore = (file) => {
      const fileType = file.name
        .substring(file.name.lastIndexOf(".") + 1)
        .toLowerCase();
      const isExcel = fileType === "xlsx";
      if (!isExcel) {
        ElMessage({
          message: "请上传xlsx类型文件",
          type: "warning",
        });
        return false;
      }
    };
    return {
      ...toRefs(data),
      httpRequest,
      handleBefore,
    };
  },
};
</script>

<style lang="scss" scoped>
.export-wrap {
  display: inline-block;
  text-align: left;
  .upload-demo {
    display: inline-block;
    margin: 0 10px;
    .el-button {
      padding: 10px 17px;
    }
    /deep/ .el-upload-list {
      display: none;
    }
  }
  .export-main {
    text-align: center;
    .export-img {
      height: 100px;
      display: block;
      line-height: 23px;
      .green {
        display: block;
        color: #4a5669;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
      .red {
        display: block;
        color: #4a5669;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
      .linegreen {
        width: 80%;
        height: 6px;
        background: #56be94;
        border-radius: 5px;
        margin: 10px auto;
      }
      .linered {
        width: 80%;
        height: 6px;
        background: #e1e4e8;
        border-radius: 5px;
        margin: 10px auto;
      }
    }
    .export-text {
      display: block;
      width: 100%;
      box-sizing: border-box;
      min-height: 40px;
      margin-top: 38px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 23px;
      color: #898ea0;
      .msg-text {
        width: 80%;
        margin: 0 auto;
        display: block;
        line-height: 36px;
        text-align: left;
      }
    }
    .export-tips {
      display: block;
      width: 80%;
      margin: 10px auto;
      margin-top: 10px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
      color: #f57171;
      text-align: left;
    }
  }
}
</style>

 下载Excel（返回一个下载地址）

 const downloadFn = () => {
      downloadTemplateApi().then((res) => {
        window.open(
          process.env.VUE_APP_DOWNLOAD_URL + res.data.data,
          // res.data.data,
          "_self"
        );
      });
    };

 

标签：批量,resdata,height,导入,vue3,font,data,display,block
来源： https://www.cnblogs.com/ruyijiang/p/16415223.html