ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-06-27 10:01:58  阅读:217  来源: 互联网

标签:批量 resdata height 导入 vue3 font data display block


批量导入(带信息反馈)

<!-- 批量创建 批量导入 -->
<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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有