# BiuForm 表单
快速开发表单页面，低代码，高效率。
# 基础用法
你可以利用span自由配置宽度，使用br来强制换行，
<template>
<div>
<biu-form
ref="biuForm"
v-model="form"
:source="source"
:rules="rules"
label-width="92px"
label-position="right"
></biu-form>
<operation :operationOptions="operationOptions"></operation>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { reg } from 'calm-harbin'
import { BiuformType } from 'calm-harbin/types/biu-form'
import { OperationOptionType } from 'calm-harbin/types/operation'
@Component
export default class BiuFormDemo extends Vue {
form: any = {}
loading = false
get source(): BiuformType[] {
return [
{
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'
}
]
},
{
formType: 'input',
id: 'sendPerson',
label: '发货人'
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址'
},
{
formType: 'input',
id: 'receivePerson',
label: '收货人'
},
{
formType: 'input',
id: 'receivePhone',
label: '收货人电话'
},
{
formType: 'area',
id: 'receiveArea',
label: '收货地区'
},
{
formType: 'input',
id: 'receiveAddress',
label: '详细地址'
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea'
}
]
}
get rules() {
return {
sendPerson: [
{
required: true,
message: '请输入发货人',
trigger: 'change'
}
],
sendPhone: [
{
required: true,
message: '请输入发货人电话',
trigger: 'change'
},
{
type: 'string',
pattern: reg.phoneReg,
message: '发货人电话格式不正确',
trigger: 'change'
}
]
}
}
get operationOptions(): OperationOptionType[] {
return [
{
title: '重置',
callback: () => {
this.form = {}
}
},
{
title: '提交',
loading: this.loading,
btnProps: {
plain: true
},
callback: this.submit
}
]
}
/**
* 提交表单
*/
submit() {
console.log('提交')
;(this.$refs.biuForm as any).validate((valid: boolean) => {
if (valid) {
this.loading = true
setTimeout(() => {
this.$notify({
title: '提交成功',
message: '成功添加一条运单',
type: 'success'
})
this.loading = false
}, 1000)
}
})
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
显示代码
# 自定义列宽
你可以利用span自由配置宽度，目前仅支持 6，12，18，24 四种值，默认 6。
<template>
<biu-form
v-model="form"
:source="source"
label-width="92px"
label-position="right"
></biu-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormSpan extends Vue {
form: any = {}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'input',
id: 'sendPerson',
label: '发货人',
span: 12
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址',
span: 24
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea'
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 自定义换行
你可以配置br来控制换行。
<template>
<biu-form
v-model="form"
:source="source"
label-width="92px"
label-position="right"
></biu-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormBr extends Vue {
form: any = {}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'input',
id: 'sendPerson',
label: '发货人',
br: true // br 可配置该项后换行
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址',
span: 24
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea'
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 自定义渲染
我们为自定义渲染提供了两种方式，分为为render和slot，请注意示例中 发货人 和 发货地区 的配置。
注意
使用render来自定义渲染，注意：formType 必须为 slot 时生效。
<template>
<biu-form
v-model="form"
:source="source"
label-width="92px"
label-position="right"
>
<template v-slot:sendArea="{ col }">
<el-form-item :label="col.label" :prop="col.id">
<div>{{ form[col.id] }}</div>
</el-form-item>
</template>
</biu-form>
</template>
<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormSlot extends Vue {
form: any = {
sendPerson: '我是使用render自定义渲染的',
sendArea: '我是使用slot自定义渲染的，优先级比render高'
}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'slot',
id: 'sendPerson',
label: '发货人',
render: (h, col) => (
<el-form-item
label={col.label}
label-width="92px"
prop={col.id}
>
<div>{this.form[col.id]}</div>
</el-form-item>
)
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址',
span: 24
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea'
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 不自动适应宽度
配置resize为false可以取消自动适应宽度，强制使用配置的span值。
<template>
<biu-form
v-model="form"
:source="source"
label-position="right"
:resize="false"
></biu-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormResize extends Vue {
form: any = {}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'input',
id: 'sendPerson',
label: '发货人'
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址'
},
{
formType: 'input',
id: 'remark',
label: '备注',
type: 'textarea',
span: 24
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 垂直排列
配置direction为vertical可以让表单垂直排列。
<template>
<biu-form
v-model="form"
:source="source"
label-position="right"
direction="vertical"
></biu-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormDirection extends Vue {
form: any = {}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'input',
id: 'sendPerson',
label: '发货人',
span: 12
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区'
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址',
span: 24
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea'
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 使用 elementUI 的相关配置
对于el-form组件的属性你可以直接配置在biu-form组件上。
如果你想对某个表单项设置其他属性，请尽管配置在source的相应控件上吧。
<template>
<biu-form
v-model="form"
:source="source"
label-suffix="："
label-width="92px"
label-position="right"
></biu-form>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { BiuformType } from 'calm-harbin/types/biu-form'
@Component
export default class BiuFormElement extends Vue {
form: any = {
sendArea: ['北京市', '北京市', '东城区']
}
loading = false
get source(): BiuformType[] {
return [
{
formType: 'input',
id: 'sendPerson',
label: '发货人',
disabled: true // 禁用
},
{
formType: 'input',
id: 'sendPhone',
label: '发货人电话'
},
{
formType: 'area',
id: 'sendArea',
label: '发货地区',
clearable: false // 不允许删除
},
{
formType: 'input',
id: 'sendAddress',
label: '详细地址',
span: 24
},
{
formType: 'input',
id: 'remark',
label: '备注',
span: 24,
type: 'textarea',
autosize: true // 自适应高度
}
]
}
}
</script>
<style lang="scss" scoped>
.calm-opear-container {
justify-content: center;
}
</style>
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
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
显示代码
# 属性
| 参数 | 说明 | 必填 | 类型 | 默认值 |
|---|---|---|---|---|
source | 表单数据源 | BiuformType[] | — | |
value / v-model | 绑定值 | objType | — | |
showBtn | 是否显示搜索按钮 | boolean | false | |
direction | 表单项排列方向 | vertical， horizontal | horizontal | |
resize | 是否自适应表单项的宽度 | boolean | false | |
min | 表单项的最小宽度，仅当 resize=true 时生效 | number | 280 |
# 方法
| 方法名 | 说明 | 类型 |
|---|---|---|
validate | 对整个表单进行校验，同 element 的 validate | |
validateField | 对部分表单字段进行校验，同 element 的 validateField | |
resetFields | 对整个表单进行重置到初始值，并移除校验结果，同 element 的 resetFields | () => void |
clearValidate | 移除表单项的校验结果，同 element 的 clearValidate | (props?: string | string[]) => void |