吉鹏 / gulu-admin

Blame view

src/views/form/index.vue 2.53 KB
edit raw normal view history
80a28914e   吉鹏   init 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <template>
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="Activity name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select v-model="form.region" placeholder="please select your zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
          <el-col :span="11">
1172ebb79   Adam   auto commit the c... 
15
16
17
18
19
20
 
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="Pick a date"
              style="width: 100%;"
            />
80a28914e   吉鹏   init 
21
22
23
 
          </el-col>
          <el-col :span="2" class="line">-</el-col>
          <el-col :span="11">
1172ebb79   Adam   auto commit the c... 
24
25
26
27
28
29
 
            <el-time-picker
              v-model="form.date2"
              type="fixed-time"
              placeholder="Pick a time"
              style="width: 100%;"
            />
80a28914e   吉鹏   init 
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
 
          </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="Online activities" name="type" />
            <el-checkbox label="Promotion activities" name="type" />
            <el-checkbox label="Offline activities" name="type" />
            <el-checkbox label="Simple brand exposure" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
          <el-radio-group v-model="form.resource">
            <el-radio label="Sponsor" />
            <el-radio label="Venue" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button @click="onCancel">Cancel</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
1172ebb79   Adam   auto commit the c... 
65
66
67
68
 
          name: "",
          region: "",
          date1: "",
          date2: "",
80a28914e   吉鹏   init 
69
70
 
          delivery: false,
          type: [],
1172ebb79   Adam   auto commit the c... 
71
72
 
          resource: "",
          desc: ""
80a28914e   吉鹏   init 
73
 
        }
1172ebb79   Adam   auto commit the c... 
74
 
      };
80a28914e   吉鹏   init 
75
76
77
 
    },
    methods: {
      onSubmit() {
1172ebb79   Adam   auto commit the c... 
78
 
        this.$message("submit!");
80a28914e   吉鹏   init 
79
80
81
 
      },
      onCancel() {
        this.$message({
1172ebb79   Adam   auto commit the c... 
82
83
84
 
          message: "cancel!",
          type: "warning"
        });
80a28914e   吉鹏   init 
85
86
 
      }
    }
1172ebb79   Adam   auto commit the c... 
87
 
  };
80a28914e   吉鹏   init 
88
89
90
 
  </script>
  
  <style scoped>
1172ebb79   Adam   auto commit the c... 
91
 
  .line {
80a28914e   吉鹏   init 
92
93
94
 
    text-align: center;
  }
  </style>