董国庆
2025-04-11 aa6ab634ff987ad35d960efcad6eb0f7c6af6ea7
src/views/applicationBatchList/components/UploadDialog.vue
@@ -6,8 +6,8 @@
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="180px">
      <el-form-item label="批次号" prop="batchNumber">
        <el-input v-model="form.batchNumber" placeholder="请输入" />
      <el-form-item label="批次号" prop="batchNumber" v-if="!info.id">
        <el-input v-model="form.batchNumber" placeholder="自动生成" disabled />
      </el-form-item>
      <el-form-item :label="'导入安置申请表'" prop="file">
        <el-upload
@@ -17,11 +17,12 @@
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="1"
          :accept="'.xlsx,.xls'"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            支持扩展名:.doc .docx .xlsx .xls
            支持扩展名:.xlsx .xls
          </div>
        </el-upload>
      </el-form-item>
@@ -35,13 +36,23 @@
<script>
import { importBatch } from "@/api/application-batch";
export default {
  name: 'UploadDialog',
  props: {
    info: {
      type: Object,
      default: () => {
       return {
        id: 0,
        batchNumber: ''
       }
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    }
  },
  data() {
    return {
@@ -51,18 +62,20 @@
        file: null
      },
      rules: {
        batchNumber: [
          { required: true, message: '请输入批次号', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请选择上传文件', trigger: 'change' }
        ]
        batchNumber: [{ required: false, message: '请输入批次号', trigger: 'blur' }],
        file: [{ required: true, message: '请选择上传文件', trigger: 'change' }]
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
    visible: {
      handler(val) {
        this.dialogVisible = val;
        if (!val) {
          this.handleClose();
        }
      },
      immediate: true
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
@@ -70,31 +83,48 @@
  },
  methods: {
    handleClose() {
      this.form.batchNumber = '';
      this.form.file = null;
      this.$refs.uploadForm && this.$refs.uploadForm.resetFields();
      this.form = {
        batchNumber: '',
        file: null
      };
      if (this.$refs.uploadForm) {
        this.$refs.uploadForm.resetFields();
      }
      this.dialogVisible = false;
    },
    handleFileChange(file) {
      const isExcel = file.raw.type === 'application/vnd.ms-excel' ||
                      file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
        this.$message.error('只能上传Excel文件!');
        this.form.file = null;
        return;
      }
      this.form.file = file.raw;
      // 手动触发文件字段验证
      this.$refs.uploadForm.validateField('file');
      if (this.$refs.uploadForm) {
        this.$refs.uploadForm.validateField('file');
      }
    },
    submitUpload() {
      this.$refs.uploadForm.validate(valid => {
        if (!valid) {
          return;
        }
    async submitUpload() {
      try {
        await this.$refs.uploadForm.validate();
        
        // 这里添加实际的上传逻辑
        const formData = new FormData();
        formData.append('file', this.form.file);
        // 模拟上传
        this.$message.info('正在上传,请稍候...');
        setTimeout(() => {
          this.$emit('success');
          this.handleClose();
        }, 1000);
      });
        if (this.info?.id) {
          formData.append('applyId', this.info.id);
          formData.append('batchNumber', this.info.batchNumber);
        } else {
          formData.append('batchNumber', this.form.batchNumber);
        }
        await importBatch(formData);
        this.$message.success('导入成功');
        this.$emit('success');
        this.handleClose();
      } catch (error) {
        this.$message.error(error.message || '导入失败');
      }
    }
  }
}