# flow-detail 审批流详情组件
# 概述
审批流详情组件是根据一定的数据自动生成当前审批节点详情页的一个组件。
# 组件示例
当前状态：待审批
备注：营业执照照片不符合要求
邯郸二中
项目编号：201906186844
| 业务线 业务线 | 中学事业部 | ||
| 餐饮中心名称 | 232323hj-223 | 联系人手机号 | 182****2083 |
| 餐饮中心名称 | 232323hj | 联系人手机号 | 183****3288 |
| 设备及配件 | 变更前 | 变更后 | 本次变更内容 |
|---|---|---|---|
| 设备1 | D : 3 | D : 5 | D : +2 |
| 设备2 | D : 3 | D : 5 | D : +2 |
邯郸三中
项目编号：201906186844
| 资质证书照片 |  xiyun.jpg 2019-01-23  xiyun.jpg 2019-01-23 xiyun.jpg 2019-01-23 | 附件 |
# 代码示例
<xy-flow-detail :data="data" /> // data为详情数据
1
# 数据结构说明
# 整体结构概览
我们将数据分为大块和小块，每一个大块包含一组完整的审批数据，里面的小块是审批数据的细项内容。
[ 大块数据 { 小块数据 [ {每个小块内容}, {每个小块内容}, ], }, 大块数据 { 小块数据 [ {每个小块内容}, {每个小块内容}, ], }, ]
#### 详细数据结构示例
```js
[
{
// 定义大块本身的信息
info: {
title: '标题',
subTitle: '子标题',
// 审批状态
examin: {
// 状态码
// 需要根据业务定义出所有全状态码
// 0-待审批，1-审批中，2-审批驳回，3-审批通过
status: 2,
text: '当前状态：审批驳回',
// 依附于审批状态的额外信息
message: '营业执照照片不符合要求'
},
},
// 小块数据
patchs: [
{
// 标题
title: '小块标题',
// 类型
type: 'table',
// 字段
fields: {
// 有 head 就是普通表格，没有 head，就只渲染 body
head: [
{},{},{},
{
title: '标题1',
options: {
colspan: 1,
},
},
],
body: [
[{},{},{},{}],
// 定义表格数据结构
[
{
// 类型为普通文本的字段
type: 'text',
value: '标题',
// 选项
options: {
colspan: 1,
style: {
fontWeight: 'bold',
}
}
},
{
// 类型为指定组件的字段
type: 'components',
components: 'sensitive',
value: '15010992073',
options: {
colspan: 3,
}
},
{
// 类型为图片预览的组件
type: 'components',
components: 'v-viewer',
value: [
{
name: 'xiyun.jpg',
src: './images/23984sdfiuwoer.jpg',
desc: '上传时间：2019-01-23',
}
],
},
{
// 类型为下载的组件
type: 'components',
components: 'download',
value: [
{
name: 'xiyun.zip',
src: './files/23984sdfiuwoer.zip',
}
],
}
],
[{},{},{},{}],
],
}
},
{
type: 'tap',
title: 'tap多页',
fields: [
// 每一个 tap 页的数据
{},{},{},
{
// 某个 tap 页本身的信息
info: {
// tap 页名称
name: '阿迪达斯',
// tap 唯一 key
key: '1',
},
// 小块数据
patchs: [
{},{}
]
},
]
}
]
},
]
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
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