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

loulijun2021

2022-07-22 4bcf7f5cbc8185b10e773feda6bee90fe3f32137

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

 src/api/Excel.js

@@ -8,11 +8,30 @@
    params: data
  })
}

// Excel导入文件上传、模板验证、数据量、验证
export function ExcelModelCheck(data) {
  return request({
    url: 'ImportExcel/ExcelModelCheck',
    method: 'get',
    method: 'post',
    params: data
  })
}

// Excel导入数据验证
export function ExcelCheckData(data) {
  return request({
    url: 'ImportExcel/ExcelCheckData',
    method: 'post',
    params: data
  })
}

// Excel导入数据
export function ExcelImportSubmit(data) {
  return request({
    url: 'ImportExcel/ExcelImportSubmit',
    method: 'POST',
    params: data
  })
}

 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
      })
    }

 src/utils/request.js

@@ -51,7 +51,7 @@
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== '200') {
    if (res.code === '300') {
      Message({
        message: res.Message || 'Error',
        type: 'error',
@@ -59,18 +59,18 @@
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      //   // to re-login
      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
      //     confirmButtonText: 'Re-Login',
      //     cancelButtonText: 'Cancel',
      //     type: 'warning'
      //   }).then(() => {
      //     store.dispatch('user/resetToken').then(() => {
      //       location.reload()
      //     })
      //   })
      // }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res

 src/views/jcsz/jsqd.vue

@@ -47,7 +47,7 @@
      <div style="margin-left: 10px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-setting" @click="settingButton">设置</el-button>
        <!--        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->
        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>
      </div>
      <el-divider />
      <div class="elTableDiv">
@@ -117,7 +117,7 @@
          >
            <template slot-scope="{row}">
              <i v-if="row.is_user==='Y'" class="el-icon-user-solid" @click="userClick(row)" />
              <i v-if="row.is_user==='N'" class="el-icon-user-solid" style="color: #E4E7ED" @click="userClick(row)" />
              <i v-if="row.is_user==='N'" class="el-icon-user-solid" style="color: rgb(180 ,181, 185)" @click="userClick(row)" />
            </template>
          </el-table-column>
          <el-table-column
@@ -128,7 +128,7 @@
          >
            <template slot-scope="{row}">
              <i v-if="row.is_right==='Y'" class="el-icon-share" @click="rightClick(row)" />
              <i v-if="row.is_right==='N'" class="el-icon-share" style="color: #E4E7ED" @click="rightClick(row)" />
              <i v-if="row.is_right==='N'" class="el-icon-share" style="color: rgb(180 ,181, 185)" @click="rightClick(row)" />
            </template>
          </el-table-column>
          <el-table-column
@@ -504,11 +504,16 @@
        </div>
      </span>
    </el-dialog>

    <!--导入组件-->
    <import-picker ref="importPickerFunc" :shows.sync="shows" :title="title_value" :colos="colos" :code="code" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import ImportPicker from '@/components/ImportPicker'
import {
  AddUpdateRole,
  DeleteRole, RoleAssociationRight,
@@ -524,7 +529,7 @@
export default {
  name: 'JSQD',
  components: {
    Pagination
    Pagination, ImportPicker
  },
  data() {
    const validateName = (rule, value, callback) => {
@@ -538,13 +543,6 @@
        }
      }
    }
    // const validateTypeCode = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('请选择上级'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      isFullscreen: false,
      mainHeight: 0,
@@ -642,7 +640,18 @@
        value: 'code'
      },
      PCTrue: false, // 是否展示
      APPTrue: false// 是否展示
      APPTrue: false, // 是否展示

      title_value: '数据导入 / 角色清单',
      code: '1',
      shows: false
    }
  },
  watch: {
    shows() {
      if (!this.shows) {
        this.getRoleSearch()
      }
    }
  },
  created() {
@@ -707,10 +716,6 @@
      this.formSetting.order = order
      this.formSetting.prop = prop
      this.getRoleTypeSearch()
    },

    upload() {

    },
    // 查询
    search() {
@@ -1430,6 +1435,14 @@
          this.dialogFormRight.rightAPPArrSelected = ['APP']
        }
      }
    },
    // 导入按钮
    upload() {
      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    },
    colos() {
      this.shows = false
    }

  }

 src/views/jcsz/yhqd.vue

@@ -189,7 +189,7 @@
          >
            <template slot-scope="{row}">
              <i v-if="row.is_role==='Y'" class="el-icon-share" @click="roleClick({row})" />
              <i v-if="row.is_role==='N'" class="el-icon-share" style="color: #E4E7ED" @click="roleClick({row})" />
              <i v-if="row.is_role==='N'" class="el-icon-share" style="color: rgb(180 ,181, 185)" @click="roleClick({row})" />
            </template>
          </el-table-column>
          <el-table-column
@@ -653,11 +653,19 @@
        prop: 'group_code',
        order: 'desc'
      },

      title_value: '数据导入 / 用户清单',
      code: '1',
      code: '2',
      shows: false
    }
  },
  watch: {
    shows() {
      if (!this.shows) {
        this.getUserSearch()
      }
    }
  },
  created() {
    this.getUserSearch()
    this.getUserOrganization()

 src/views/zlgl/gxjy.vue

@@ -294,7 +294,8 @@
      JYSelectedArr: [], // 已选检验项目数组
      multipleSelection: [], // 表格多选框
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '' // 当前点击的列名
      tabClickLabel: '', // 当前点击的列名
      isCancel: false// 是否点击取消按钮
    }
  },
  created() {
@@ -332,6 +333,7 @@
    },
    // 检验标准下拉值改变
    async changeCheckStandard(val) {
      this.isCancel = false
      this.JYSelectedArr = []
      const { data: res } = await MesOrderStepCheckItemList({ checkstandcode: val })
      this.JYTableData = res
@@ -371,6 +373,9 @@
        this.checkResult = 'OK'
      } else {
        this.checkResult = 'NG'
      }
      if (this.isCancel) {
        this.checkResult = ''
      }
    },
    // 检验项目编码（名称）
@@ -525,6 +530,7 @@
    clearContent() {
      this.JYTableData = []
      this.multipleSelection = []
      this.JYSelectedArr = []
      this.checkdescr = ''
      this.checkUser = ''
      this.checkResult = ''
@@ -536,6 +542,8 @@
      this.form.partspec = ''
      this.form.stepcode = ''
      this.form.stepname = ''

      this.isCancel = true
    },

    // 单元格被点击时

 src/views/zzmx/chda.vue

@@ -197,7 +197,7 @@
            <template slot-scope="{row}">
              <div class="operationClass">
                <i v-if="row.proute_id==='Y'" class="el-icon-share" @click="routeClick(row)" />
                <i v-if="row.proute_id==='N'" style="color: #E4E7ED" class="el-icon-share" @click="routeClick(row)" />
                <i v-if="row.proute_id==='N'" style="color:rgb(180 ,181, 185)" class="el-icon-share" @click="routeClick(row)" />
              </div>
            </template>
          </el-table-column>

 src/views/zzmx/gxdy.vue

@@ -147,7 +147,7 @@
            <template slot-scope="{row}">
              <div class="operationClass">
                <i v-if="row.is_eqp==='Y'" class="el-icon-share" @click="workClick(row)" />
                <i v-if="row.is_eqp==='N'" class="el-icon-share" style="color: #E4E7ED" @click="workClick(row)" />
                <i v-if="row.is_eqp==='N'" class="el-icon-share" style="color: rgb(180 ,181, 185)" @click="workClick(row)" />
              </div>
            </template>
          </el-table-column>
@@ -159,7 +159,7 @@
            <template slot-scope="{row}">
              <div class="operationClass">
                <i v-if="row.is_defect==='Y'" class="el-icon-share" @click="defectClick(row)" />
                <i v-if="row.is_defect==='N'" class="el-icon-share" style="color: #E4E7ED;" @click="defectClick(row)" />
                <i v-if="row.is_defect==='N'" class="el-icon-share" style="color:rgb(180 ,181, 185);" @click="defectClick(row)" />
              </div>
            </template>
          </el-table-column>