| | |
| | | <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 |
| | |
| | | :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> |
| | |
| | | </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); |
| | |
| | | }, |
| | | 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 || '导入失败'); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | .upload-demo { |
| | | text-align: center; |
| | | text-align: left; |
| | | } |
| | | .el-upload { |
| | | width: 100%; |