wms-vue/src/views/modules/noOrderIssue/noorder_upload_excel.vue

<template>
  <div class="customer-css">
    <el-dialog :title="titleCon" :close-on-click-modal="false" :visible.sync="visible" width="390px" style="height: 520px;" class="customer-dialog" @close="handleDialogClose" :show-close="!uploading">
      <el-form :inline="true" label-position="top" label-width="80px">
        <!-- <el-row>
          <el-form-item label=" ">
            <a href="/static/downLoad/NotifyUploadModel.xlsx" download="领料申请单导入模板.xlsx">
              下载 Excel 模板
            </a>
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-upload class="customer-upload" drag action="javascript:void(0);" ref="uploadFile" :limit="1" accept=".xlsx,.xls"
                       :before-upload="beforeUploadHandle" :on-change="onChange" :auto-upload="false" :disabled="uploading" style="text-align: left;" :file-list="fileList">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                {{ uploading ? '正在上传中，请稍候...' : '将文件拖到此处，或点击上传' }}
              </div>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUploadFile" :loading="uploading" :disabled="uploading">
          {{ uploading ? '上传中...' : '保存' }}
        </el-button>
        <el-button type="primary" @click="closeDialog" :disabled="uploading">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadNoorderNotifyExcel } from '@/api/orderIssure/noOrderIssueNotify.js'

export default {
  name: 'bomComponentUpload',
  data() {
    return {
      buList: [],
      titleCon: '文件导入',
      visible: false,
      fileList: [],
      pageData: {
        site: '',
        buNo: '',
        createBy: this.$store.state.user.name,
      },
      notifyData:{
        site: '',
        notifyNo: '',
      },
      uploading: false, // 上传状态标志
      returnData: '', // 返回的数据
    }
  },
  methods: {

    // 初始化组件的参数
    init (data) {
      this.fileList = []
      this.uploading = false // 重置上传状态
      console.log("init data",this.fileList);
      
      // 打开页面
      this.visible = true
      this.notifyData=JSON.parse(JSON.stringify(data))
    },

    // 上传之前
    beforeUploadHandle (file) {
      let extName = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
      if (!(extName === '.xlsx' || extName === '.xls')) {
        this.$message.error('数据导入失败，请选择正确的xlsx或xls格式的Excel文件')
        return false
      }
      return true
    },

    // 选择上传文件时
    onChange (file) {
      // 清空之前的文件列表，确保只有一个文件
      this.fileList = []
      this.fileList.push(file)
    },

    // 关闭modal
    closeDialog () {
      // 如果正在上传，不允许关闭
      if (this.uploading) {
        this.$message.warning('正在上传中，请稍候...')
        return false
      }
      this.deleteFile()
      // 关闭当前的页面
      this.visible = false
    },

    // 处理弹窗关闭事件（包括右上角X按钮）
    handleDialogClose () {
      if (this.uploading) {
        this.$message.warning('正在上传中，请稍候...')
        return
      }
      this.deleteFile()
    },

    deleteFile(){
      this.fileList = []
      this.visible = false
      this.uploading = false // 重置上传状态
      // 清空文件上传记录
      this.$refs.uploadFile.clearFiles()
      // 刷新报工的页面
    },
    successCallback(){
      this.fileList = []
      this.visible = false
      this.uploading = false // 重置上传状态
      this.$emit('refreshTable',this.returnData)
    },

    // 保存当前的数据
    saveUploadFile () {
      // 判断文件是否上传
      if (null == this.fileList || 0 === this.fileList.length) {
        this.$message.error("请先上传文件!")
        return false
      }

      // 再次校验文件格式
      const file = this.fileList[0].raw
      const fileName = file.name
      const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()

      if (!('.xls' === fileExtension || '.xlsx' === fileExtension)) {
        this.$message.error('文件格式不正确，只支持.xls和.xlsx格式的Excel文件')
        return false
      }

      // 设置上传状态
      this.uploading = true

      // 创建FormData对象
      const formData = new FormData()
      formData.append("file", file)
      formData.append("site", this.notifyData.site)
      formData.append("notifyNo", this.notifyData.notifyNo)

      // 调用新的上传接口
      uploadNoorderNotifyExcel(formData).then(({ data }) => {
        if (data.code === 0) {
          this.returnData = data.rows
          this.$message.success(data.msg || 'Excel文件上传成功')
          // 关闭窗口并刷新页面
          this.successCallback()
        } else {
          this.$message.error(data.msg || 'Excel文件上传失败')
        }
      }).catch(error => {
        console.error('Excel上传异常:', error)
        this.$message.error('Excel文件上传异常，请检查文件格式和内容')
      }).finally(() => {
        // 无论成功还是失败，都重置上传状态
        this.uploading = false
      })
    },
  }
}
</script>