# 方法
# 防抖/节流
import { debounce } from 'calm-harbin'
const fn = () => {}
// 防抖函数
const debounceFn = debounce(fn, 500)
// 节流函数
const throttleFn = debounce(fn, 500, true)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 导出 Excel
使用 exportExcel 方法来配合 biu-table 组件实现导出功能。
提示
formType='select'时导出数据会自动从options中查询值进行转换。- 用于
timeFormat属性时，会默认进行时间格式化后再导出。
<template>
<BiuPage
v-model="form"
:columns="columns"
:table-data="tableData"
:operation-options="operationOptions"
:tb-height="36 * 3"
>
</BiuPage>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { exportExcel } from 'calm-harbin'
import { OperationOptionType } from 'calm-harbin/types/operation'
@Component
export default class exportExcelDemo extends Vue {
form = {}
tableData = [
{
productCode: 'TCS202108310001',
productName: '名称一',
productType: '1'
},
{
productCode: 'TCS202108310002',
productName: '名称二',
productType: '2'
}
]
get columns() {
return [
{
formType: 'input',
label: '商品编号',
id: 'productCode'
},
{
formType: 'input',
label: '商品名称',
id: 'productName'
},
{
formType: 'select',
label: '商品类型',
id: 'productType',
formAttr: {
multiple: true,
options: [
{
label: '文件',
value: '1'
},
{
label: '食品',
value: '2'
}
]
}
}
]
}
get operationOptions(): OperationOptionType[] {
return [
{
title: '导出',
callback: () => {
exportExcel(
this.columns,
this.tableData,
'商品信息数据导出'
)
}
}
]
}
}
</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
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
显示代码
# 导入 Excel
使用 importExcel 方法来解析文件，获取 Excel 中的数据。
<template>
<div>
<Operation :operation-options="footer"></Operation>
<biu-table
:columns="columns"
:table-data="tableData"
:max-height="500"
></biu-table>
</div>
</template>
<script lang="tsx">
import { Vue, Component } from 'vue-property-decorator'
import { tableColumnType } from 'calm-harbin/types/biu-table'
import { OperationOptionType } from 'calm-harbin/types/operation'
import { exportExcelTemp, importExcel } from 'calm-harbin'
@Component
export default class importExcelDemo extends Vue {
tableData: any[] = []
get columns(): tableColumnType[] {
return [
{
label: '商品编码',
id: 'packing'
},
{
label: '商品名称',
id: 'goodsName',
width: 150
},
{
label: '总数量',
id: 'number'
},
{
label: '总重量(KG)',
id: 'weight'
},
{
label: '总体积(m³)',
id: 'volume'
},
{
label: '长(m)',
id: 'length'
},
{
label: '宽(m)',
id: 'width'
},
{
label: '高(m)',
id: 'height'
},
{
label: '净重',
id: 'netWeight'
},
{
label: '备注',
id: 'remark',
width: 200
}
]
}
get footer(): OperationOptionType[] {
return [
{
render: () => (
<file-upload
style={{
display: 'inline',
marginRight: '10px'
}}
accept=".xls,.xlsx"
importFile={this.importFile}
>
<el-button type="primary" size="mini">
选择文件
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</file-upload>
)
},
{
title: '保存',
callback: () => {
alert(`当前有${this.tableData.length}行数据`)
},
btnProps: {
disabled: this.tableData.length === 0
}
},
{
title: '清空数据',
callback: () => {
this.tableData = []
},
btnProps: {
disabled: this.tableData.length === 0
}
},
{
title: '下载模板',
callback: () => {
exportExcelTemp(this.columns, '导入演示')
}
}
]
}
importFile(files: File[]) {
console.log(files)
importExcel(files[0], this.columns).then((res: any[]) => {
console.log(res)
this.tableData = res
})
}
}
</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
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
显示代码
# 表格合计
使用 summary 方法来配合 biu-table 组件实现功能。
提示
需要传入show-summary属性哦。
<template>
<BiuPage
v-model="form"
:columns="columns"
:table-data="tableData"
:tb-height="36 * 4"
custom-show-summary
>
</BiuPage>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { summary } from 'calm-harbin'
@Component
export default class summaryDemo extends Vue {
form = {}
tableData: any[] = []
get columns() {
return [
{
formType: 'input',
label: '商品编号',
id: 'productCode'
},
{
formType: 'input',
label: '商品名称',
id: 'productName'
},
{
formType: 'select',
label: '商品类型',
id: 'productType',
formAttr: {
options: [
{
label: '文件',
value: '1'
},
{
label: '食品',
value: '2'
}
]
}
},
{
formType: 'input',
label: '商品数量',
id: 'number'
}
]
}
created() {
const tableData = [
{
productCode: 'TCS202108310001',
productName: '名称一',
productType: '1',
number: 24
},
{
productCode: 'TCS202108310002',
productName: '名称二',
productType: '2',
number: 32
}
]
// 添加合计
const total = summary(tableData, {
number: 0 // 这里传入需要合计的字段
})
this.tableData = [...tableData, total]
}
}
</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
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
显示代码
# 生成时间
import { startandends } from 'calm-harbin'
// 生成距离当前时间指定天的时间范围
// 假设当前时间为2021/7/24
startandends(30) // [new Date('2021/6/25 00:00:00'), new Date('2021/7/24 23:59:59')]
1
2
3
4
2
3
4