|
|
<template>
|
|
|
<layout-body>
|
|
|
<Form :label-width="100" ref="form1" :model="modelData" :rules="ruleValidate">
|
|
|
<Form-item label="字段1名称:" prop="field1">
|
|
|
<Input v-model="modelData.field1" placeholder="请输入..." style="width: 400px;" />
|
|
|
</Form-item>
|
|
|
<Form-item label="字段2名称:" prop="field2">
|
|
|
<Input v-model="modelData.field2" placeholder="请输入..." style="width: 400px;" />
|
|
|
</Form-item>
|
|
|
<Form-item label="字段3:" prop="field3">
|
|
|
<radio-season v-model="modelData.field3"></radio-season>
|
|
|
</Form-item>
|
|
|
<Form-item label="字段4:" prop="field4">
|
|
|
<select-season v-model="modelData.field4"></select-season>
|
|
|
</Form-item>
|
|
|
<Form-item label="图片:" prop="img">
|
|
|
<div class="upload-item">
|
|
|
<div class="upload-item-img">
|
|
|
<drag-file-upload bucket="yhb-img01" @success="uploadImageSuccess" @remove="uploadImageRemove">
|
|
|
</drag-file-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Form-item>
|
|
|
<Form-item label="简介:" prop="intro">
|
|
|
<editor :content="modelData.intro" @change="editorChange" :z-index="2">
|
|
|
</editor>
|
|
|
</Form-item>
|
|
|
<Form-item>
|
|
|
<Button type="primary" @click="submit">保存</Button>
|
|
|
</Form-item>
|
|
|
</Form>
|
|
|
</layout-body>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {RadioSeason} from 'components/radio';
|
|
|
import {SelectSeason} from 'components/select';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
modelData: {
|
|
|
field1: '',
|
|
|
field2: '',
|
|
|
field3: '',
|
|
|
field4: '',
|
|
|
img: '',
|
|
|
intro: ''
|
|
|
},
|
|
|
ruleValidate: {
|
|
|
field1: [
|
|
|
{ required: true, message: '字段不能为空', trigger: 'blur' }
|
|
|
],
|
|
|
field2: [
|
|
|
{ required: true, message: '字段不能为空', trigger: 'blur' },
|
|
|
],
|
|
|
field3: [
|
|
|
{ required: true, message: '请选择季节', trigger: 'change' }
|
|
|
],
|
|
|
field4: [
|
|
|
{ required: true, message: '请选择季节', trigger: 'change' }
|
|
|
],
|
|
|
img: [
|
|
|
{ required: true, message: '请上传图片' },
|
|
|
],
|
|
|
intro: [
|
|
|
{ required: true, message: '请填写备注', trigger: 'change' }
|
|
|
]
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
editorChange: function(content) {
|
|
|
this.modelData.intro = content;
|
|
|
},
|
|
|
uploadImageSuccess: function(attach, file) {
|
|
|
this.modelData.img = file.url;
|
|
|
},
|
|
|
uploadImageRemove: function() {
|
|
|
this.modelData.img = '';
|
|
|
},
|
|
|
submit: function() {
|
|
|
this.$refs.form1.validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.$Message.success('提交成功!');
|
|
|
} else {
|
|
|
this.$Message.error('表单验证失败!');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
RadioSeason,
|
|
|
SelectSeason
|
|
|
}
|
|
|
};
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|