|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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"
|
|
14
|
placeholder="给目标起个名字"/>
|
|
15
16
17
18
19
20
21
22
23
24
25
|
</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: '请选择起止日期' }]}
|
|
26
|
]"/>
|
|
27
28
29
30
31
32
33
34
35
36
37
|
</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: '请输入目标描述' }]}
|
|
38
|
]"/>
|
|
39
40
41
42
43
44
45
46
47
48
49
|
</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: '请输入衡量标准' }]}
|
|
50
|
]"/>
|
|
51
52
53
54
55
|
</a-form-item>
<a-form-item
label="客户"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
56
|
<a-input
|
|
57
58
59
60
|
placeholder="请描述你服务的客户,内部客户直接 @姓名/工号"
v-decorator="[
'customer',
{rules: [{ required: true, message: '请描述你服务的客户' }]}
|
|
61
|
]"/>
|
|
62
63
64
65
66
67
68
|
</a-form-item>
<a-form-item
label="邀评人"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
|
|
69
|
<a-input placeholder="请直接 @姓名/工号,最多可邀请 5 人"/>
|
|
70
71
72
73
74
75
76
|
</a-form-item>
<a-form-item
label="权重"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
:required="false"
>
|
|
77
|
<a-input-number :min="0" :max="100"/>
|
|
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
|
<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>
|
|
112
113
114
115
116
117
|
export default {
name: 'BaseForm',
data() {
return {
description: '表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。',
value: 1,
|
|
118
|
|
|
119
120
|
// form
form: this.$form.createForm(this),
|
|
121
|
|
|
122
123
124
|
}
},
methods: {
|
|
125
|
|
|
126
127
128
129
130
131
132
133
134
|
// 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)
}
})
|
|
135
136
|
}
}
|
|
137
|
}
|
|
138
|
</script>
|