eta_front/src/views/dataEntry_manage/components/insertData.vue

<template>
  <el-dialog
    :title="$t('ManualEntryPage.tit_insert_data')"
    :visible.sync="isShowinsert"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    center
    v-dialogDrag
    @close="cancelHandle"
    custom-class="dialog-cont"
    width="40%"
  >
    <div slot="title" style="display: flex; alignitems: center">
      <img
        :src="$icons.imp"
        style="color: #fff; width: 16px; height: 16px; marginright: 5px"
      />
      <span style="fontsize: 16px">{{$t('ManualEntryPage.tit_insert_data')}}</span>
    </div>
    <div class="down-min">
      <dataLoading :loading="isLoading"/>
      
      <div class="download-ico">
        <a :href="downloadTemplate" download="模板">
          <i class="icon down_ico"></i>
          <span style="color: #5882ef; cursor: pointer">{{$t('ManualEntryPage.down_tem')}}</span>
        </a>
        <!-- <a :href="downloadTemplate" download="模板" style="color:#5882EF;cursor:pointer;">下载模板</a> -->
      </div>
      <i class="arrow-ico"></i>
      <div class="import-ico">
        <el-upload
          class="upload-demo"
          :before-upload="beforeUploadFile"
          multiple
          :limit="3"
          :headers="headerConfig"
          :file-list="fileList"
          :on-success="handleSuccess"
          :on-progress="handleStarting"
          :action="action"
          accept=".xlsx"
          :data="params"
          :name="name"
          :show-file-list="false"
        >
          <i class="icon up_ico"></i>
          <span style="color: #5882ef; cursor: pointer">{{$t('ManualEntryPage.tit_insert_data')}}</span>
          <!-- <el-button type="primary">导入</el-button> -->
        </el-upload>
      </div>
    </div>
    <div class="down-tip-txt">
      <span>{{$t('ManualEntryPage.step_one')}}</span>
      <span>{{$t('ManualEntryPage.step_two')}}</span>
      <span>{{$t('ManualEntryPage.step_three')}}
        <a
          style="display: inline; color: #5882ef"
          :href="downloadErrorlist"
          download
          >{{$t('ManualEntryPage.down_fail_list')}}</a
        >。</span
      >
    </div>
  </el-dialog>
</template>

<script>
import { dataInterence } from "api/api.js";
export default {
  name: "",
  props: {
    isShowinsert: {
      type: Boolean,
    },
    source: {
      type: String,
    },
  },
  data() {
    return {
      action: process.env.VUE_APP_API_ROOT + "/entry/import/data", //上传文件
      downloadTemplate: process.env.VUE_APP_API_ROOT + "/entry/template", //模板下载
      downloadErrorlist:
        process.env.VUE_APP_API_ROOT +
        "/entry/import/failList" +
        `?${localStorage.getItem("auth")}`, //失败列表下载
      name: "EntryFile",
      params: {},
      headerConfig: {
        Authorization: localStorage.getItem("auth"),
      },
      isLoading: false,
      fileList: []
    };
  },
  watch: {
    source: {
      handler(nval) {
        if (nval === "targetList") {
          this.action = process.env.VUE_APP_API_ROOT + "/entry/target/import";
          this.downloadTemplate =
            process.env.VUE_APP_API_ROOT + "/entry/target/template";
          this.downloadErrorlist =
            process.env.VUE_APP_API_ROOT +
            "/entry/import_target/failList" +
            `?${localStorage.getItem("auth")}`;
          this.name = "ImportTargetFile";
        }
      },
      immediate: true,
    },
  },
  methods: {
    cancelHandle() {
      this.$emit("cancelHandle", 2);
    },
    // 校验文件和大小
    beforeUploadFile(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024; //M
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx和.xls的文件");
        return false;
      }
      if (size > 10) {
        this.$message.warning(/* "文件大小不得超过10M" */this.$t('ManualEntryPage.upload_size_msg'));
        return false;
      }
    },
    handleStarting() {
      this.isLoading = true;
    },
    // 上传成功之后
    handleSuccess(result) {
      //兼容下结构
      let res = this.$parseData({
        headers: {
          dk: sessionStorage.getItem('dk')||""
        },
        data: result
      });
      if (res.Ret === 200) {
        // 0成功 1部分失败 -1全部失败
        let str = `
						<h2 style="margin-bottom:30px">上传成功</h2>
						<p>本次共成功导入${res.Data.SuccessCount}条数据</p>
					`;
        if (res.Data.Status === 1) {
          // this.$message.warning('部分导入失败')
          str = `
							<h2 style="margin-bottom:30px">部分数据上传成功！</h2>
							<p>本次共成功导入${res.Data.SuccessCount}条数据，失败${res.Data.FailCount}条</p>
							<a style="display:inline;color:#5882EF;" href="${this.downloadErrorlist}" download>下载失败列表</a>
						`;
        } else if (res.Data.Status === -1) {
          // this.$message.success("导入成功!");
          str = `
							<h2 style="margin-bottom:30px">上传失败！</h2>
							<a style="display:inline;color:#5882EF;" href="${this.downloadErrorlist}" download>下载失败列表</a>
						`;
        }
        this.$alert(str, "", {
          dangerouslyUseHTMLString: true,
          center: true,
          showConfirmButton: false,
        });
        this.$emit("importSuccess");
      } else {
        this.$message.warning(res.Msg);
      }
      this.isLoading = false;
    },
    // 下载模板
    // downLoad() {
    // 	dataInterence.downTemplate().then(res => {})
    // },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.dialog-cont {
  max-width: 800px;
  .down-min {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 100px 0 90px;
    .arrow-ico {
      width: 140px;
      height: 14px;
      display: block;
      background: url("~@/assets/img/data_m/arrow_ico.png") no-repeat center;
      background-size: 100%;
      margin: 0 50px;
    }
    .icon {
      width: 100px;
      height: 100px;
      display: block;
      margin-bottom: 36px;
      &.down_ico {
        background: url("~@/assets/img/data_m/down_ico.png") no-repeat center;
        background-size: cover;
      }
      &.up_ico {
        background: url("~@/assets/img/data_m/up_ico.png") no-repeat center;
        background-size: cover;
      }
    }
  }
  .down-tip-txt {
    font-size: 14px;
    color: #1f2e4d;
    line-height: 25px;
    padding-bottom: 10px;
    span {
      display: block;
      margin-bottom: 18px;
    }
  }
}
</style>