123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <template>
- <div class='input-form'>
- <el-form :model='ruleForm' :rules='rules' ref='ruleForm'>
- <el-form-item label='活动名称' prop='name'>
- <el-input v-model='ruleForm.name'></el-input>
- </el-form-item>
- <el-form-item label='活动区域' prop='region'>
- <el-select v-model='ruleForm.region' placeholder='请选择活动区域'>
- <el-option label='区域一' value='shanghai'></el-option>
- <el-option label='区域二' value='beijing'></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label='活动时间' required>
- <el-col :span='6'>
- <el-form-item prop='date1'>
- <el-date-picker type='date' placeholder='选择日期' v-model='ruleForm.date1' style='width: 100%;'></el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span='6'>
- <el-form-item prop='date2'>
- <el-time-picker
- type='fixed-time'
- placeholder='选择时间'
- v-model='ruleForm.date2'
- style='width: 100%;'
- ></el-time-picker>
- </el-form-item>
- </el-col>
- </el-form-item>
- <el-form-item label='活动时间' required>
- <el-col :span='6'>
- <el-form-item prop='date1'>
- <el-date-picker type='date' placeholder='选择日期' v-model='ruleForm.date1' style='width: 100%;'></el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span='6'>
- <el-form-item prop='date2'>
- <el-time-picker
- type='fixed-time'
- placeholder='选择时间'
- v-model='ruleForm.date2'
- style='width: 100%;'
- ></el-time-picker>
- </el-form-item>
- </el-col>
- </el-form-item>
- <el-form-item label='即时配送' prop='delivery'>
- <el-switch on-text off-text v-model='ruleForm.delivery'></el-switch>
- </el-form-item>
- <el-form-item label='活动性质' prop='type'>
- <el-checkbox-group v-model='ruleForm.type'>
- <el-checkbox label='美食/餐厅线上活动' name='type'></el-checkbox>
- <el-checkbox label='地推活动' name='type'></el-checkbox>
- <el-checkbox label='线下主题活动' name='type'></el-checkbox>
- <el-checkbox label='单纯品牌曝光' name='type'></el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item label='特殊资源' prop='resource'>
- <el-radio-group v-model='ruleForm.resource'>
- <el-radio label='线上品牌商赞助'></el-radio>
- <el-radio label='线下场地免费'></el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label='活动形式' prop='desc'>
- <el-input type='textarea' v-model='ruleForm.desc'></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type='primary' @click='submitForm("ruleForm")'>立即创建</el-button>
- <el-button @click='resetForm("ruleForm")'>重置</el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- name: 'FormPageDemo',
- props: [],
- components: {},
- data() {
- return {
- imagesArr: [
- 'http://service.sagacloud.cn:28888/image-service/common/file_get?systemId=saas&key=业主管理1537929021391.png'
- ],
- ruleForm: {
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: ''
- },
- rules: {
- name: [
- { required: true, message: '请输入活动名称', trigger: 'blur' },
- { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
- ],
- region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
- date1: [
- {
- type: 'date',
- required: true,
- message: '请选择日期',
- trigger: 'change'
- }
- ],
- date2: [
- {
- type: 'date',
- required: true,
- message: '请选择时间',
- trigger: 'change'
- }
- ],
- type: [
- {
- type: 'array',
- required: true,
- message: '请至少选择一个活动性质',
- trigger: 'change'
- }
- ],
- resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
- desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
- }
- }
- },
- methods: {
- imagesChange(keys) {
- this.imagesArr = keys
- },
- submitForm(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- alert('submit!')
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- resetForm(formName) {
- this.$refs[formName].resetFields()
- }
- }
- }
- </script>
- <style lang='scss' scoped>
- </style>
|