# BiuCardForm 分块表单
当表单需要分类显示时，你可能需要此组件。
# 基础用法
使用 title 属性来定义 自定义标题。
<template>
<biu-card-form
ref="BiuCardForm"
v-model="form"
:source="source"
:formAttr="{ rules: rules, 'label-width': '92px' }"
></biu-card-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { reg } from 'calm-harbin'
@Component
export default class BiuCardFormDemo extends Vue {
form: any = {}
get source() {
return [
{
title: '基础信息',
list: [
{
formType: 'input',
id: 'ordercode',
label: '系统订单号'
},
{
formType: 'input',
id: 'carriercode',
label: '承运商单号'
},
{
formType: 'date',
id: 'created',
label: '下单时间',
dateType: 'datetime'
},
{
formType: 'select',
id: 'orderSource',
label: '订单来源',
dicType: '订单来源',
disable: true,
options: [
{
label: '订单录入',
value: '1'
},
{
label: '订单导入',
value: '2'
}
]
}
]
},
{
title: '发货人信息',
list: [
{
formType: 'input',
id: 'sendPerson',
label: '发货人'
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址'
}
]
},
{
title: '收货人信息',
list: [
{
formType: 'input',
id: 'receivePerson',
label: '收货人'
},
{
formType: 'input',
id: 'receivePhone',
label: '收货人电话'
},
{
formType: 'area',
id: 'receiveArea',
label: '收货地区'
},
{
formType: 'input',
id: 'receiveAddress',
label: '详细地址'
}
]
}
]
}
get rules() {
return {
sendPerson: [
{
required: true,
message: '请输入发货人',
trigger: 'change'
}
],
sendPhone: [
{
required: true,
message: '请输入发货人电话',
trigger: 'change'
},
{
type: 'string',
pattern: reg.phoneReg,
message: '发货人电话格式不正确',
trigger: 'change'
}
]
}
}
}
</script>
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
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
显示代码
# BiuCard Attributes
| 参数 | 说明 | 必填 | 类型 | 默认值 |
|---|---|---|---|---|
title | 标题 | string | — | |
border | 是否显示边框 | boolean | false |