| commit | author | age | ||
| 1ad93b | 1 | <template> |
| I | 2 | <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"> |
| 3 | <a-form-model-item ref="name" label="Activity name" prop="name"> | |
| 4 | <a-input v-model="form.name" @blur=" | |
| 5 | () => { | |
| 6 | $refs.name.onFieldBlur(); | |
| 7 | } | |
| 8 | " /> | |
| 9 | </a-form-model-item> | |
| 10 | <a-form-model-item label="Activity zone" prop="region"> | |
| 11 | <a-select v-model="form.region" placeholder="please select your zone"> | |
| 12 | <a-select-option value="shanghai"> | |
| 13 | Zone one | |
| 14 | </a-select-option> | |
| 15 | <a-select-option value="beijing"> | |
| 16 | Zone two | |
| 17 | </a-select-option> | |
| 18 | </a-select> | |
| 19 | </a-form-model-item> | |
| 20 | <a-form-model-item label="Activity time" required prop="date1"> | |
| 21 | <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" /> | |
| 22 | </a-form-model-item> | |
| 23 | <a-form-model-item label="Instant delivery" prop="delivery"> | |
| 24 | <a-switch v-model="form.delivery" /> | |
| 25 | </a-form-model-item> | |
| 26 | <a-form-model-item label="Activity type" prop="type"> | |
| 27 | <a-checkbox-group v-model="form.type"> | |
| 28 | <a-checkbox value="1" name="type"> | |
| 29 | Online | |
| 30 | </a-checkbox> | |
| 31 | <a-checkbox value="2" name="type"> | |
| 32 | Promotion | |
| 33 | </a-checkbox> | |
| 34 | <a-checkbox value="3" name="type"> | |
| 35 | Offline | |
| 36 | </a-checkbox> | |
| 37 | </a-checkbox-group> | |
| 38 | </a-form-model-item> | |
| 39 | <a-form-model-item label="Resources" prop="resource"> | |
| 40 | <a-radio-group v-model="form.resource"> | |
| 41 | <a-radio value="1"> | |
| 42 | Sponsor | |
| 43 | </a-radio> | |
| 44 | <a-radio value="2"> | |
| 45 | Venue | |
| 46 | </a-radio> | |
| 47 | </a-radio-group> | |
| 48 | </a-form-model-item> | |
| 49 | <a-form-model-item label="Activity form" prop="desc"> | |
| 50 | <a-input v-model="form.desc" type="textarea" /> | |
| 51 | </a-form-model-item> | |
| 52 | <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }"> | |
| 53 | <a-button type="primary" @click="onSubmit"> | |
| 54 | Create | |
| 55 | </a-button> | |
| 56 | <a-button style="margin-left: 10px;" @click="resetForm"> | |
| 57 | Reset | |
| 58 | </a-button> | |
| 59 | </a-form-model-item> | |
| 60 | </a-form-model> | |
| 61 | </template> | |
| 62 | <script> | |
| 63 | export default { | |
| 64 | data() { | |
| 65 | return { | |
| 66 | labelCol: { | |
| 67 | span: 4 | |
| 68 | }, | |
| 69 | wrapperCol: { | |
| 70 | span: 14 | |
| 71 | }, | |
| 72 | other: '', | |
| 73 | form: { | |
| 74 | name: '', | |
| 75 | region: undefined, | |
| 76 | date1: undefined, | |
| 77 | delivery: false, | |
| 78 | type: [], | |
| 79 | resource: '', | |
| 80 | desc: '', | |
| 81 | }, | |
| 82 | rules: { | |
| 83 | name: [{ | |
| 84 | required: true, | |
| 85 | message: 'Please input Activity name', | |
| 86 | trigger: 'blur' | |
| 87 | }, | |
| 88 | { | |
| 89 | min: 3, | |
| 90 | max: 5, | |
| 91 | message: 'Length should be 3 to 5', | |
| 92 | trigger: 'blur' | |
| 93 | }, | |
| 94 | ], | |
| 95 | region: [{ | |
| 96 | required: true, | |
| 97 | message: 'Please select Activity zone', | |
| 98 | trigger: 'change' | |
| 99 | }], | |
| 100 | date1: [{ | |
| 101 | required: true, | |
| 102 | message: 'Please pick a date', | |
| 103 | trigger: 'change' | |
| 104 | }], | |
| 105 | type: [{ | |
| 106 | type: 'array', | |
| 107 | required: true, | |
| 108 | message: 'Please select at least one activity type', | |
| 109 | trigger: 'change', | |
| 110 | }, ], | |
| 111 | resource: [{ | |
| 112 | required: true, | |
| 113 | message: 'Please select activity resource', | |
| 114 | trigger: 'change' | |
| 115 | }, ], | |
| 116 | desc: [{ | |
| 117 | required: true, | |
| 118 | message: 'Please input activity form', | |
| 119 | trigger: 'blur' | |
| 120 | }], | |
| 121 | }, | |
| 122 | }; | |
| 123 | }, | |
| 124 | methods: { | |
| 125 | onSubmit() { | |
| 126 | this.$refs.ruleForm.validate(valid => { | |
| 127 | if (valid) { | |
| 128 | console.log('11'); | |
| 129 | alert('submit!'); | |
| 130 | } else { | |
| 131 | console.log('error submit!!'); | |
| 132 | return false; | |
| 133 | } | |
| 134 | }); | |
| 135 | }, | |
| 136 | resetForm() { | |
| 137 | this.$refs.ruleForm.resetFields(); | |
| 138 | }, | |
| 139 | }, | |
| 140 | }; | |
| 141 | </script> | |
