<template>
|
<el-dialog :title="title" :visible.sync="visible" width="600px" @open="open"
|
:close-on-click-modal="false" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
<el-form-item label="批次号" prop="batchNumber">
|
<el-input :disabled="batchNumber" v-model="form.batchNumber" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<div>
|
<el-form-item label="导入资金表" prop="assetFile" v-if="type != 2">
|
<el-upload class="upload-container" action="#" drag :auto-upload="false" accept=".xlsx,.xls"
|
:on-change="handlehouseholdFileChangePrice" :limit="1">
|
<div class="upload-area">
|
<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">
|
已上传：
|
</div>
|
</el-upload>
|
</el-form-item>
|
|
<el-form-item label="导入购房表" prop="householdFile" v-if="type != 1">
|
<el-upload class="upload-container" action="#" drag :auto-upload="false" accept=".xlsx,.xls"
|
:on-change="handlehouseholdFileChange" :limit="1">
|
<div class="upload-area">
|
<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">
|
已上传：
|
</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
|
},
|
type: {
|
type: Number,
|
default: 3
|
},
|
title: {
|
type: String,
|
default: '导入自主购房安置资金申请'
|
},
|
batchNumber: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
uploadUrl: '/api/upload', // 上传地址
|
form: {
|
batchNumber: '',
|
assetFile: '',
|
householdFile: ''
|
},
|
rules: {
|
batchNumber: [
|
{ required: true, message: '请输入批次号', trigger: 'blur' }
|
],
|
assetFile: [
|
{ required: true, message: '请上传资金表', trigger: 'change' }
|
],
|
householdFile: [
|
{ required: true, message: '请上传购房表', trigger: 'change' }
|
]
|
},
|
}
|
},
|
methods: {
|
open() {
|
console.log('333333333333333333',this.batchNumber)
|
this.form.batchNumber = JSON.parse(JSON.stringify(this.batchNumber))
|
},
|
handlehouseholdFileChange(file, fileList) {
|
this.form.householdFile = file.raw
|
this.$refs.form.validateField('householdFile')
|
|
},
|
handlehouseholdFileChangePrice(file, fileList) {
|
this.form.assetFile = file.raw
|
this.$refs.form.validateField('assetFile')
|
},
|
// 移除文件
|
handleRemoveFile(file, type) {
|
if (type === 'money') {
|
this.form.assetFile = ''
|
this.$refs.form.validateField('assetFile')
|
} else {
|
this.form.householdFile = ''
|
this.$refs.form.validateField('householdFile')
|
}
|
},
|
// 取消
|
handleCancel() {
|
this.$emit('update:visible', false)
|
this.resetForm()
|
},
|
// 提交
|
handleSubmit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.loading = true
|
this.$emit('importPrice', this.form)
|
setTimeout(() => {
|
this.loading = false
|
this.resetForm()
|
}, 1000)
|
}
|
})
|
},
|
// 重置表单
|
resetForm() {
|
this.form = {
|
batchNumber: '',
|
assetFile: '',
|
householdFile: ''
|
}
|
this.$refs.form && this.$refs.form.resetFields()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-upload-dragger {
|
width: 100%;
|
height: unset !important;
|
}
|
|
.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>
|
