<template>
<a-form-model
ref="ruleForm"
:model="formDataAll"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item ref="name" label="名称" prop="name">
<a-input
v-model="formDataAll.name"
@blur="
() => {
$refs.name.onFieldBlur();
}
"
/>
</a-form-model-item>
<a-form-model-item label="城市" prop="city">
<a-select v-model="formDataAll.city" placeholder="请选择城市">
<a-select-option value="shanghai">
上海
</a-select-option>
<a-select-option value="beijing">
北京
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="时间" required prop="date1">
<a-date-picker
v-model="formDataAll.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%;"
/>
</a-form-model-item>
<a-form-model-item label="多选" prop="type">
<a-checkbox-group v-model="formDataAll.type">
<a-checkbox value="1" name="type">
Online
</a-checkbox>
<a-checkbox value="2" name="type">
Promotion
</a-checkbox>
<a-checkbox value="3" name="type">
Offline
</a-checkbox>
</a-checkbox-group>
</a-form-model-item>
<a-form-model-item label="单选" prop="resource">
<a-radio-group v-model="formDataAll.resource">
<a-radio value="1">
Sponsor
</a-radio>
<a-radio value="2">
Venue
</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="上传文件">
<a-upload
:file-list="fileList"
:remove="handleRemove"
:before-upload="beforeUpload"
>
<a-button> <a-icon type="upload" /> Select File </a-button>
</a-upload>
</a-form-model-item>
<a-form-model-item label="描述" prop="desc">
<a-input v-model="formDataAll.desc" type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">
创建
</a-button>
<!-- <a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="onSubmit"
>
{{ uploading ? "上传中" : "创建" }}
</a-button> -->
<a-button style="margin-left: 10px;" @click="resetForm">
重置
</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
import reqwest from "reqwest";
export default {
data() {
return {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
other: "",
fileList: [],
uploading: false,
formDataAll: {
name: "",
city: undefined,
date1: undefined,
type: [],
resource: "",
fileName: null,
desc: ""
},
rules: {
name: [
{
required: true,
message: "Please input Activity name",
trigger: "blur"
},
{
min: 3,
max: 5,
message: "Length should be 3 to 5",
trigger: "blur"
}
],
city: [
{
required: true,
message: "请选择城市",
trigger: "change"
}
],
date1: [
{ required: true, message: "Please pick a date", trigger: "change" }
],
type: [
{
type: "array",
required: true,
message: "Please select at least one activity type",
trigger: "change"
}
],
resource: [
{
required: true,
message: "Please select activity resource",
trigger: "change"
}
],
desc: [
{
required: true,
message: "Please input activity form",
trigger: "blur"
}
]
}
};
},
methods: {
handleRemove(file) {
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList;
},
beforeUpload(file) {
this.fileList = [...this.fileList, file];
return false;
},
handleUpload() {
const { fileList } = this;
this.formDataAll.fileName = fileList[0].name;
const formData = new FormData();
fileList.forEach(file => {
formData.append("file", file);
});
// 请求加入新参数
for (var prop in this.formDataAll) {
if (this.formDataAll.hasOwnProperty(prop)) {
formData.append(prop, this.formDataAll[prop]);
}
}
// console.log(formData.get("user"));
this.uploading = true;
// You can use any AJAX library you like
reqwest({
url: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
method: "post",
processData: false,
data: formData,
success: () => {
this.fileList = [];
this.uploading = false;
this.$message.success("upload successfully.");
},
error: () => {
this.uploading = false;
this.$message.error("upload failed.");
}
});
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert("submit!");
this.handleUpload();
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm() {
this.fileList = [];
this.$refs.ruleForm.resetFields();
}
}
};
</script>