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; margin-right: 5px"
      />
      <span style="font-size: 16px">{{$t('ManualEntryPage.tit_insert_data')}}</span>
    </div>
    <div class="down-min">
      <dataLoading :loading="isLoading"/>

      <div class="section-item">
        <h3><!-- 下载导入模板 -->{{$t('ManualEntryPage.down_tem')}}</h3>
        <div class="templete-wrap">
          <div class="item" v-for="tem in templateList" :key="tem.name">
            <a :href="tem.url" download="模板">
              <el-button type="primary" icon="el-icon-download">{{tem.name}}</el-button>
            </a>
            <div>
              <img :src="tem.previewImg" alt="" width="150" style="display:block;margin:10px 0;">
              <span class="editsty" @click="handlePreviewImg(tem)"><!-- 查看大图 -->{{$t('ManualEntryPage.view_big_img')}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section-item">
        <h3><!-- 导入数据 -->{{$t('ManualEntryPage.tit_insert_data')}}</h3>
        <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"
        >
          <el-button type="primary" icon="el-icon-upload">{{$t('ManualEntryPage.tit_insert_data')}}</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: #0052D9"
          :href="downloadErrorlist"
          download
          >{{$t('ManualEntryPage.down_fail_list')}}</a
        >。</span
      >
    </div>

    <el-image-viewer 
        v-if="showImgViewer" 
        :on-close="()=>{this.previewList=[];this.showImgViewer = false}" 
        :url-list="previewList" 
    />
  </el-dialog>
</template>

<script>
import { dataInterence } from "api/api.js";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: "",
  components: { ElImageViewer },
  props: {
    isShowinsert: {
      type: Boolean,
    },
  },
  data() {
    return {
      action: process.env.VUE_APP_API_ROOT + "/entry/import/data", //上传文件
      downloadErrorlist:
        process.env.VUE_APP_API_ROOT +
        "/entry/import/failList" +
        `?${localStorage.getItem("auth")}`, //失败列表下载
      name: "EntryFile",

      templateList: [
        {
          name:/* "模板1"  */this.$t('ManualEntryPage.tem_msg',{index:1}),
          url: process.env.VUE_APP_API_ROOT + "/entry/template?Source=1",
          previewImg: require('@/assets/img/data_m/tem1.png')
        },
        {
          name:/* "模板2" */this.$t('ManualEntryPage.tem_msg',{index:2}),
          url: process.env.VUE_APP_API_ROOT + "/entry/template?Source=2",
          previewImg: require('@/assets/img/data_m/tem2.png')
        },
      ],
      params: {},
      headerConfig: {
        Authorization: localStorage.getItem("auth"),
      },
      isLoading: false,
      fileList: [],

      showImgViewer: false,
      previewList: []
    };
  },
  methods: {
    cancelHandle() {
      this.$emit('update:isShowinsert',false)
    },
    // 校验文件和大小
    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">${this.$t('MsgPrompt.upload_success_msg')}</h2>
						<p> ${this.$t('ManualEntryPage.upload_tip_msg',{success_count:res.Data.SuccessCount})}</p>
					`;
            // 本次共成功导入${res.Data.SuccessCount}条数据
        if (res.Data.Status === 1) {
          // this.$message.warning('部分导入失败')
          str = `
							<h2 style="margin-bottom:30px">${this.$t('MsgPrompt.upload_some_msg')}</h2>
							<p>${this.$t('ManualEntryPage.upload_tip_msg2',{success_count:res.Data.SuccessCount,fail_count:res.Data.FailCount})}</p>
							<a style="display:inline;color:#5882EF;" href="${this.downloadErrorlist}" download>${this.$t('ManualEntryPage.down_fail_list2')}</a>
						`;
        } else if (res.Data.Status === -1) {
          // this.$message.success("导入成功!");
          str = `
							<h2 style="margin-bottom:30px">${this.$t('MsgPrompt.upload_fail_msg')}</h2>
							<a style="display:inline;color:#5882EF;" href="${this.downloadErrorlist}" download>${this.$t('ManualEntryPage.down_fail_list2')}</a>
						`;
        }
        this.$alert(str, "", {
          dangerouslyUseHTMLString: true,
          center: true,
          showConfirmButton: false,
        });
        this.$emit("importSuccess");
      } else {
        this.$message.warning(res.Msg);
      }
      this.isLoading = false;
    },

    handlePreviewImg(item) {
      this.previewList=[item.previewImg]
      this.showImgViewer=true 
    }
  },
};
</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: 20px 0 50px;
    .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;
    }
  }

  .section-item {
    padding: 20px 0;
    &:first-child {
      border-bottom: 1px solid #C8CDD9;
    }
    h3 {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .templete-wrap {
      display: flex;
      gap: 20px;
    }
  }
}
</style>