<template>
|
<el-dialog title="导入人员购房资金申请" :visible.sync="visible" width="600px" :close-on-click-modal="false" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
<el-form-item label="批次号" prop="batchNo">
|
<el-input v-model="form.batchNo" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<div>
|
<el-form-item label="导入资金表" prop="moneyFile">
|
<el-upload class="upload-container" :action="uploadUrl" :before-upload="beforeUpload"
|
:on-success="handleMoneyFileSuccess" :on-error="handleUploadError" :file-list="moneyFileList" :limit="1">
|
<div class="upload-area" @click="handleClickUpload">
|
<i class="el-icon-folder"></i>
|
<div class="upload-text">点击或将文件文件拖拽到这里上传</div>
|
<div class="upload-tip">支持格式：.xlsx、.xls...</div>
|
</div>
|
<div slot="tip" class="el-upload__tip">
|
已上传：
|
<template v-if="moneyFileList.length">
|
<div v-for="(file, index) in moneyFileList" :key="index" class="file-item">
|
<i class="el-icon-document"></i>
|
<span class="file-name">{{ file.name }}</span>
|
<i class="el-icon-close" @click.stop="handleRemoveFile(file, 'money')"></i>
|
</div>
|
</template>
|
</div>
|
</el-upload>
|
</el-form-item>
|
|
<el-form-item label="导入购房表" prop="houseFile">
|
<el-upload class="upload-container" :action="uploadUrl" :before-upload="beforeUpload"
|
:on-success="handleHouseFileSuccess" :on-error="handleUploadError" :file-list="houseFileList" :limit="1">
|
<div class="upload-area" @click="handleClickUpload">
|
<i class="el-icon-folder"></i>
|
<div class="upload-text">点击或将文件文件拖拽到这里上传</div>
|
<div class="upload-tip">支持格式：.xlsx、.xls...</div>
|
</div>
|
<div slot="tip" class="el-upload__tip">
|
已上传：
|
<template v-if="houseFileList.length">
|
<div v-for="(file, index) in houseFileList" :key="index" class="file-item">
|
<i class="el-icon-document"></i>
|
<span class="file-name">{{ file.name }}</span>
|
<i class="el-icon-close" @click.stop="handleRemoveFile(file, 'house')"></i>
|
</div>
|
</template>
|
</div>
|
</el-upload>
|
</el-form-item>
|
</div>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleCancel">取 消</el-button>
|
<el-button type="primary" @click="handleSubmit" :loading="loading">确 认</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'ExportMoneyApplay',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
uploadUrl: '/api/upload', // 上传地址
|
form: {
|
batchNo: '',
|
moneyFile: '',
|
houseFile: ''
|
},
|
rules: {
|
batchNo: [
|
{ required: true, message: '请输入批次号', trigger: 'blur' }
|
],
|
moneyFile: [
|
{ required: true, message: '请上传资金表', trigger: 'change' }
|
],
|
houseFile: [
|
{ required: true, message: '请上传购房表', trigger: 'change' }
|
]
|
},
|
moneyFileList: [],
|
houseFileList: []
|
}
|
},
|
methods: {
|
// 上传前校验
|
beforeUpload(file) {
|
const isExcel = file.type === 'application/vnd.ms-excel' ||
|
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
const isLt10M = file.size / 1024 / 1024 < 10
|
|
if (!isExcel) {
|
this.$message.error('上传文件只能是 Excel 格式!')
|
return false
|
}
|
if (!isLt10M) {
|
this.$message.error('上传文件大小不能超过 10MB!')
|
return false
|
}
|
return true
|
},
|
// 资金表上传成功
|
handleMoneyFileSuccess(response, file, fileList) {
|
this.moneyFileList = fileList
|
this.form.moneyFile = response.data
|
this.$message.success('上传成功')
|
},
|
// 购房表上传成功
|
handleHouseFileSuccess(response, file, fileList) {
|
this.houseFileList = fileList
|
this.form.houseFile = response.data
|
this.$message.success('上传成功')
|
},
|
// 上传失败
|
handleUploadError() {
|
this.$message.error('上传失败')
|
},
|
// 移除文件
|
handleRemoveFile(file, type) {
|
if (type === 'money') {
|
this.moneyFileList = []
|
this.form.moneyFile = ''
|
} else {
|
this.houseFileList = []
|
this.form.houseFile = ''
|
}
|
},
|
// 点击上传区域
|
handleClickUpload() {
|
// 触发上传
|
},
|
// 取消
|
handleCancel() {
|
this.$emit('update:visible', false)
|
this.resetForm()
|
},
|
// 提交
|
handleSubmit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.loading = true
|
// TODO: 调用接口提交数据
|
setTimeout(() => {
|
this.loading = false
|
this.$message.success('提交成功')
|
this.$emit('update:visible', false)
|
this.resetForm()
|
}, 1000)
|
}
|
})
|
},
|
// 重置表单
|
resetForm() {
|
this.form = {
|
batchNo: '',
|
moneyFile: '',
|
houseFile: ''
|
}
|
this.moneyFileList = []
|
this.houseFileList = []
|
this.$refs.form && this.$refs.form.resetFields()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.upload-container {
|
.upload-area {
|
width: 100%;
|
height: 120px;
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
color: #666;
|
|
&:hover {
|
border-color: #409EFF;
|
}
|
|
.el-icon-folder {
|
font-size: 28px;
|
color: #8c939d;
|
margin-bottom: 10px;
|
}
|
|
.upload-text {
|
font-size: 14px;
|
margin-bottom: 5px;
|
}
|
|
.upload-tip {
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
|
.file-item {
|
display: flex;
|
align-items: center;
|
margin-top: 8px;
|
|
.el-icon-document {
|
margin-right: 5px;
|
color: #909399;
|
}
|
|
.file-name {
|
flex: 1;
|
color: #606266;
|
}
|
|
.el-icon-close {
|
cursor: pointer;
|
color: #909399;
|
|
&:hover {
|
color: #f56c6c;
|
}
|
}
|
}
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
</style>
|
