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