董国庆
2025-04-11 aa6ab634ff987ad35d960efcad6eb0f7c6af6ea7
src/views/applicationBatchList/components/UploadDialog.vue
@@ -1,15 +1,15 @@
<template>
  <el-dialog
    :title="type === 'add' ? '新增申请批次' : '批量导入'"
    :title="'导入自主购房安置申请'"
    :visible.sync="dialogVisible"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="批次号" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="180px">
      <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="type === 'add' ? '导入文件' : '批量文件'" prop="file">
      <el-form-item :label="'导入安置申请表'" prop="file">
        <el-upload
          class="upload-demo"
          drag
@@ -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 .pdf .jpg .png .xlsx .xls
            支持扩展名:.xlsx .xls
          </div>
        </el-upload>
      </el-form-item>
@@ -34,41 +35,47 @@
</template>
<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
    },
    type: {
      type: String,
      default: 'add',
      validator: function(value) {
        return ['add', 'batch'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        batchNo: '',
        batchNumber: '',
        file: null
      },
      rules: {
        batchNo: [
          { 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);
@@ -76,35 +83,48 @@
  },
  methods: {
    handleClose() {
      this.form.batchNo = '';
      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);
        if (this.type === 'add') {
          formData.append('batchNo', this.form.batchNo);
        if (this.info?.id) {
          formData.append('applyId', this.info.id);
          formData.append('batchNumber', this.info.batchNumber);
        } else {
          formData.append('batchNumber', this.form.batchNumber);
        }
        // 模拟上传
        this.$message.info('正在上传,请稍候...');
        setTimeout(() => {
          this.$emit('success');
          this.handleClose();
        }, 1000);
      });
        await importBatch(formData);
        this.$message.success('导入成功');
        this.$emit('success');
        this.handleClose();
      } catch (error) {
        this.$message.error(error.message || '导入失败');
      }
    }
  }
}
@@ -112,7 +132,7 @@
<style scoped>
.upload-demo {
  text-align: center;
  text-align: left;
}
.el-upload {
  width: 100%;