BasicForm.vue
4.33 KB
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
<template>
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
<a-form @submit="handleSubmit" :form="form">
<a-form-item
label="标题"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
v-decorator="[
'name',
{rules: [{ required: true, message: '请输入标题' }]}
]"
name="name"
placeholder="给目标起个名字" />
</a-form-item>
<a-form-item
label="起止日期"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-range-picker
name="buildTime"
style="width: 100%"
v-decorator="[
'buildTime',
{rules: [{ required: true, message: '请选择起止日期' }]}
]" />
</a-form-item>
<a-form-item
label="目标描述"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
rows="4"
placeholder="请输入你阶段性工作目标"
v-decorator="[
'description',
{rules: [{ required: true, message: '请输入目标描述' }]}
]" />
</a-form-item>
<a-form-item
label="衡量标准"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
rows="4"
placeholder="请输入衡量标准"
v-decorator="[
'type',
{rules: [{ required: true, message: '请输入衡量标准' }]}
]" />
</a-form-item>
<a-form-item
label="客户"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
v-decorator="[
'customer',
{rules: [{ required: true, message: '请描述你服务的客户' }]}
]" />
</a-form-item>
<a-form-item
label="邀评人"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
</a-form-item>
<a-form-item
label="权重"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
<a-input-number :min="0" :max="100" />
<span> %</span>
</a-form-item>
<a-form-item
label="目标公开"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
help="客户、邀评人默认被分享"
>
<a-radio-group v-model="value">
<a-radio :value="1">公开</a-radio>
<a-radio :value="2">部分公开</a-radio>
<a-radio :value="3">不公开</a-radio>
</a-radio-group>
<a-form-item>
<a-select mode="multiple" v-if="value === 2">
<a-select-option value="4">同事一</a-select-option>
<a-select-option value="5">同事二</a-select-option>
<a-select-option value="6">同事三</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
<a-form-item
:wrapperCol="{ span: 24 }"
style="text-align: center"
>
<a-button htmlType="submit" type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</template>
<script>
export default {
name: 'BaseForm',
data () {
return {
description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
value: 1,
// form
form: this.$form.createForm(this),
}
},
methods: {
// handler
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
// eslint-disable-next-line no-console
console.log('Received values of form: ', values)
}
})
}
}
}
</script>