<template>
|
<el-dialog
|
:title="'导入自主购房安置申请'"
|
:visible.sync="dialogVisible"
|
width="40%"
|
@close="handleClose"
|
>
|
<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="'导入安置申请表'" prop="file">
|
<el-upload
|
class="upload-demo"
|
drag
|
action="#"
|
: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">
|
支持扩展名：.xlsx .xls
|
</div>
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitUpload">确 定</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</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
|
}
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
form: {
|
batchNumber: '',
|
file: null
|
},
|
rules: {
|
batchNumber: [{ required: false, message: '请输入批次号', trigger: 'blur' }],
|
file: [{ required: true, message: '请选择上传文件', trigger: 'change' }]
|
}
|
}
|
},
|
watch: {
|
visible: {
|
handler(val) {
|
this.dialogVisible = val;
|
if (!val) {
|
this.handleClose();
|
}
|
},
|
immediate: true
|
},
|
dialogVisible(val) {
|
this.$emit('update:visible', val);
|
}
|
},
|
methods: {
|
handleClose() {
|
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;
|
if (this.$refs.uploadForm) {
|
this.$refs.uploadForm.validateField('file');
|
}
|
},
|
async submitUpload() {
|
try {
|
await this.$refs.uploadForm.validate();
|
|
const formData = new FormData();
|
formData.append('file', this.form.file);
|
|
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 || '导入失败');
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.upload-demo {
|
text-align: left;
|
}
|
.el-upload {
|
width: 100%;
|
}
|
.el-upload-dragger {
|
width: 100%;
|
}
|
</style>
|
