<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;
|
if (this.type == 2) {
|
delete this.form.assetFile;
|
}
|
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>
|
