1.文件上传校验导入实现一个demo2.修改bug

loulijun2021

2022-07-22 4bcf7f5cbc8185b10e773feda6bee90fe3f32137

 src/components/ImportPicker/index.vue

@@ -3,6 +3,7 @@
    :visible.sync="visible"
    :title="title"
    :code="code"
    :close-on-click-modal="false"
    @close="$emit('update:shows', false)"
  >
    <div>
@@ -19,13 +20,13 @@
        <p>2. 请勿调整导入模版中字段的左右顺序或新增sheet页</p>
      </div>

      <div v-if="div2 && div2_state === &quot;300&quot;">
      <div v-if="div2 && div2_state === '301'">
        <p><span class="gth_icon">!</span>文件中有<span style="color:red">{{ error_list.length }}</span>条错误数据，请修改后重新导入</p>
        <el-table class="table" :data="error_list" :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号" prop="Seq" />
          <el-table-column label="行号" prop="RoeNumber" />
          <el-table-column label="错误字段" prop="ErrorField" />
          <el-table-column label="错误详情" prop="ErrorCont" />
          <el-table-column label="序号" prop="Seq" width="50" />
          <!--          <el-table-column label="行号" prop="RoeNumber" />-->
          <el-table-column label="错误字段" prop="ErrorField" min-width="150" />
          <el-table-column label="错误详情" prop="ErrorCont" min-width="300" />
        </el-table>
      </div>
      <div v-if="div2 && div2_state === '200'" style="position:relative;margin-top:100px;">
@@ -38,7 +39,7 @@
        <h3>上传文件</h3>
        <el-upload
          style="display: inline-block;"
          action="/apis/importexcel/ExcelModelCheck"
          :action="baseUrl==='/api/'?'/api/importexcel/ExcelModelCheck':'/apis/importexcel/ExcelModelCheck'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload"
@@ -56,8 +57,10 @@
          <li>
            <div class="progress_bar bar-color-a" />
            <div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg1,'sb':sb1}" />
            <div v-if="json1 === 200" class="mt"><img src="@/assets/images/succ.png" class="img_position">文件上传 (成功)</div>
            <div v-if="json1 === 300" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">文件上传 (失败)</div>
            <!--            <div v-if="json1 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">文件上传 (成功)</div>-->
            <div v-if="json1 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message1 }}</div>
            <!--            <div v-if="json1 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">文件上传 (失败)</div>-->
            <div v-if="json1 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message1 }}</div>
            <div v-if="json1=== null" class="mt">文件上传（待校验）</div>
          </li>
          <!-- <li >
@@ -69,8 +72,8 @@
          <li>
            <div class="progress_bar bar-color-a" />
            <div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg2,'sb':sb2}" />
            <div v-if="json2 === 200" class="mt"><img src="@/assets/images/succ.png" class="img_position">模版校验 (成功)</div>
            <div v-if="json2 === 300" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">模版校验 (失败)</div>
            <div v-if="json2 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message2 }}</div>
            <div v-if="json2 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message2 }}</div>
            <div v-if="json2 === null" class="mt">模版校验（待校验）</div>
          </li>
          <!-- <li v-if="json2 === 300">
@@ -87,8 +90,8 @@
          <li>
            <div class="progress_bar bar-color-a" />
            <div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg3,'sb':sb3}" />
            <div v-if="json3 === 200" class="mt"><img src="@/assets/images/succ.png" class="img_position">数据量校验 (成功)</div>
            <div v-if="json3 === 300" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">数据量校验 (失败)</div>
            <div v-if="json3 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message3 }}</div>
            <div v-if="json3 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message3 }}</div>
            <div v-if="json3 === null" class="mt">数据量校验（待校验）</div>
          </li>
          <!-- <li v-if="json3 === 300">
@@ -125,7 +128,7 @@
</template>
<script>

import { DownLoadExcel, ExcelModelCheck } from '@/api/Excel'
import { DownLoadExcel, ExcelCheckData, ExcelImportSubmit, ExcelModelCheck } from '@/api/Excel'

export default {
  props: {
@@ -160,6 +163,10 @@
  },
  data() {
    return {
      message1: '',
      message2: '',
      message3: '',
      getDataing: false,
      cg1: false,
      sb1: false,
      cg2: false,
@@ -188,7 +195,8 @@
      json3: '',
      mnList: [],
      error_list: [],
      button_text: '下一步'
      button_text: '下一步',
      baseUrl: ''

    }
  },
@@ -196,6 +204,9 @@
    shows() {
      this.visible = this.shows
    }
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API
  },
  methods: {
    newDataFunc() {
@@ -218,6 +229,7 @@
        FileCode: code,
        FileName: this.file_name
      }

      if (this.num === 0) {
        this.div1 = false
        this.div2 = true
@@ -232,40 +244,31 @@
      }
    },
    ExcelImportSubmit(data) {
      // all.ExcelImportSubmit(data).then((res) => {
      //   if (res.statusCode === '200') {
      //     this.div3 = true
      //     this.num += 2
      //     this.button_text = '完成'
      //     this.disState = false
      //   } else {
      //     this.num += 1
      //     this.div3_sb = true
      //     this.disState = true
      //     this.error_message = res.message
      //   }
      // })
      ExcelImportSubmit(data).then((res) => {
        if (res.code === '200') {
          this.div3 = true
          this.num += 2
          this.button_text = '完成'
          this.disState = false
        } else {
          this.num += 1
          this.div3_sb = true
          this.disState = true
          this.error_message = res.Message
        }
      })
    },
    ExcelCheckData(data) {
      // all.ExcelCheckData(data).then((res) => {
      //   this.div2_state = res.StuCode
      //   setTimeout(() => {
      //     this.cg4 = true
      //   }, 2000)
      //   this.error_list = res.list
      //   this.total_num = res.Count
      //   if (res.StuCode === '200') {
      //     this.disState = false
      //   }
      // })
      ExcelModelCheck(data).then(res => {
        this.div2_state = res.StuCode
      ExcelCheckData(data).then((res) => {
        this.div2_state = res.code
        setTimeout(() => {
          this.cg4 = true
        }, 2000)

        this.error_list = res.list

        this.total_num = res.Count
        if (res.StuCode === '200') {
        if (res.code === '200') {
          this.disState = false
        }
      })
@@ -287,7 +290,7 @@
      this.cg3 = false
      this.sb3 = false
      setTimeout(() => {
        if (res.json1.statusCode === 200) {
        if (res.json1.code === '200') {
          this.cg1 = true
        } else {
          this.sb1 = true
@@ -297,10 +300,11 @@
        }
      }, 500)
      setTimeout(() => {
        this.json1 = res.json1.statusCode
        this.json1 = res.json1.code
        this.message1 = res.json1.Message
        this.json2 = null
        this.json3 = null
        if (res.json2.statusCode === 200) {
        if (res.json2.code === '200') {
          this.cg2 = true
        } else {
          this.sb2 = true
@@ -309,35 +313,41 @@
        }
      }, 2000)
      setTimeout(() => {
        this.json2 = res.json2.statusCode
        this.json2 = res.json2.code
        this.message2 = res.json2.Message
        this.json3 = null
        if (res.json3.statusCode === 200) {
          this.cg3 = true
        } else {
          this.sb3 = true
          this.json3 = null
          this.button_name = '更新文件'
        if (res.json3 !== null) {
          if (res.json3.code === '200') {
            this.cg3 = true
          } else {
            this.sb3 = true
            this.json3 = null
            this.button_name = '更新文件'
          }
        }
      }, 4000)
      setTimeout(() => {
        this.json3 = res.json3.statusCode
        if (res.json3 !== null) {
          this.json3 = res.json3.code
          this.message3 = res.json3.Message
        }
      }, 6000)
      // if(res.json1.statusCode === 300){
      // if(res.json1.code === 300){
      //     this.json2 = null
      //     this.json3 =null
      //     this.button_name = '更新文件'
      // }else{
      //     this.json2 = res.json2.statusCode
      //     this.json2 = res.json2.code

      // }
      // if(res.json2.statusCode === 300){
      // if(res.json2.code === 300){
      //     this.json3 =null
      //     this.button_name = '更新文件'
      // }else{
      //     this.json3 = res.json3.statusCode
      //     this.json3 = res.json3.code
      // }
      setTimeout(() => {
        if (this.json1 === 200 && this.json2 === 200 && this.json3 === 200) {
        if (this.json1 === '200' && this.json2 === '200' && this.json3 === '200') {
          this.disState = false
        }
      }, 7000)
@@ -350,10 +360,10 @@
      //   window.location.href = res
      // })
      DownLoadExcel(data).then(res => {
        console.log(res.data)
        console.log(process.env.VUE_APP_BASE_API)
        console.log(process.env.VUE_APP_BASE_API_FILE)
        console.log(window.location.origin + res.data)
        // console.log(res.data)
        // console.log(process.env.VUE_APP_BASE_API, 8989899)
        // console.log(process.env.VUE_APP_BASE_API_FILE)
        // console.log(window.location.origin + res.data)
        window.location.href = process.env.VUE_APP_BASE_API_FILE + res.data
      })
    }