# 组件
diboot组件基于Ant Design Vue进行二次封装和调整,搭配devtools生成的后端接口,一键生成前端代码,数倍提效。
TIP
以下内容为组件概述,实际开发时,建议直接使用devtools生成前端代码。
# import 导入组件
路径:src/components/diboot/components/excel/import.vue
功能:提供excel导入、示例下载、数据预览等功能
- 属性
名称 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
exampleUrl | 示例文件地址 | string | - | Y |
uploadUrl | 上传地址 | string | - | Y |
previewUrl | 预览地址 | string | - | Y |
previewSaveUrl | 预览后保存地址 | string | - | Y |
fieldsRequired | 提交时候必须的参数 | object | {} | N |
- 事件
名称 | 说明 |
---|---|
finishedUpload | 数据上传至数据库成功后触发 |
- 示例
<a-drawer
title="数据上传"
:width="720"
@close="close"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
>
<excel-import
v-if="visible"
:example-url="`${baseApi}/downloadExample/room-example.xlsx`"
:upload-url="`${baseApi}/upload`"
:preview-url="`${baseApi}/preview`"
:preview-save-url="`${baseApi}/previewSave`"
@finishedUpload="handleFinishedUpload"
></excel-import>
<div class="drawer-footer">
<a-button @click="close">关闭</a-button>
</div>
</a-drawer>
<script>
import ExcelImport from '@/components/diboot/components/excel/import'
export default {
name: 'ImportExample',
data() {
return {
baseApi: '/importExample/excel',
visible: false
}
},
methods: {
open() {
this.visible = true
},
/**
* 刷新数据
*/
handleFinishedUpload() {
//触发上传完成,告知list组件
this.$emit('complete')
this.visible = false
},
close() {
this.visible = false
}
},
components: {
ExcelImport
}
}
</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
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
# export 导出组件
since v2.4.0
路径:src/components/diboot/components/excel/export.vue
功能:提供excel导功能,其中包含动态导出列(可选择需要的列进行导出)
- 属性
名称 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
exportUrl | 导出文件地址 | string | - | Y |
tableHeadUrl | 获取表头地址 | string | - | Y |
params | 数据过滤参数 | string | - | Y |
options | 自定导出选项 | array | [] | N |
width | 提交时候必须的参数 | string | number | 520 | N |
- 示例
<template>
<!-- ... -->
<excel-export
:export-url="`${baseApi}/excel/export`"
:table-head-url="`${baseApi}/excel/tableHead`"
:params="buildQueryParam"
:options="[{title:'导出用户联系方式',columns:['realname','userNum','mobilePhone']}]"
/>
<!-- ... -->
</template>
<script>
import list from '@/components/diboot/mixins/list'
import ExcelExport from '@/components/diboot/components/excel/export'
export default {
mixins: [list],
components: {
ExcelExport
},
data() {
return {
baseApi: '/exportExample',
}
}
}
</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
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
# richText 富文本组件
概述:富文本组件基于tinymce封装,提供简单的富文本功能
路径:src/components/diboot/components/richText/**.vue
功能:RichEditor.vue(富文本组件) 和 RichRender.vue(渲染富文本组件)
- RichEditor.vue属性
名称 | 说明 | 类型 |
---|---|---|
value | v-model绑定的值 | string |
relObjType | 富文本框上传数据需要的对象类型 | string |
relObjId | 富文本框上传数据需要的对象id | string number |
- RichEditor.vue事件
名称 | 说明 |
---|---|
change | 更改值触发 |
- RichEditor.vue示例
<!--v-if主要为了强制刷新富文本子组件,否则在打开更新的时候不会更新字段值-->
<rich-editor
v-if="state.visible"
rel-obj-type="Demo"
:rel-obj-id="form.id"
v-model="form.richText"
>
</rich-editor>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- RichRender.vue属性
名称 | 说明 | 类型 |
---|---|---|
content | 富文本内容 | string |
- RichRender.vue示例
<rich-render :content="model.richText"></rich-render>
1
# upload 上传组件
概述:基于Ant Design Vue的upload组件封装,更加贴合diboot接口服务
路径:src/components/diboot/components/upload/Upload.vue
功能:增加图片form校验、增强与后端接口交互,简化代码流程
- 属性
名称 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
prefix | 地址前缀(axios的baseUrl),用于图片回显 | string | - | N |
action | 向后端发送的请求地址 | string | - | Y |
relObjType | 绑定的业务对象类名 | string | - | Y |
relObjField | 绑定业务对象的属性 | string | - | Y |
fileList | 文件存储位置 | array | - | Y |
listType | 上传列表的内建样式,支持text/picture-card | string | text(isImage为true时,使用picture-card) | N |
limitCount | 上传数量限制) | number | 1 | N |
limitType | 上传类型限制,不传默认所有文件,限制多个使用','分割 | string | - | N |
limitSize | 单个文件上传大小(M) | number | 2 | N |
isImage | 是否是图片,默认不是图片类型(主要用户上传后构建值) | boolean | false | N |
uploadText | 上传框里面的文本 | string | 上传 | N |
value | v-decorator绑定的值 | string | - | Y |
- 事件
名称 | 说明 |
---|---|
change | 直接使用v-decorator绑定属性值即可 |
- 示例
<a-form-item label="轮播图" >
<upload
v-if="state.visible"
:prefix="filePrefix"
:action="fileAction"
:file-list="fileWrapper.slideshowImgsList"
:rel-obj-type="relObjType"
rel-obj-field="slideshowImgs"
:limit-count="9"
:is-image="true"
list-type="picture-card"
v-decorator="[
'slideshowImgs',
{
initialValue: model.slideshowImgs
}
]"
></upload>
</a-form-item>
<a-form-item label="附件" >
<upload
v-if="state.visible"
:prefix="filePrefix"
:action="fileAction"
:file-list="fileWrapper.attachmentList"
:rel-obj-type="relObjType"
rel-obj-field="attachment"
:limit-count="1"
v-decorator="[
'attachment',
{
initialValue: model.attachment
}
]"
></upload>
</a-form-item>
<script>
import form from '@/components/diboot/mixins/form'
import Upload from '@/components/diboot/components/upload/Upload'
import { dibootApi } from '@/utils/request'
export default {
name: 'UploadExampleForm',
components: {
Upload
},
mixins: [form],
data() {
return {
baseApi: '/uploadExample',
filePrefix: '/api',
fileAction: '/uploadFile/upload/dto',
//当前业务对象类名
relObjType: 'UploadExample',
fileWrapper: {
//轮播图存放位置
slideshowImgsList: [],
//附件存放位置
attachmentList: [],
},
isUpload: true
}
},
methods: {
enhance(values) {
// 设置文件uuid
this.__setFileUuidList__(values)
},
/**
* 打开表单之后的操作, 加载
* @param id
*/
afterOpen(id) {
if (id) {
// 更新的时候加载上传的轮播图
dibootApi.get(`/uploadFile/getList/${id}/${this.relObjType}/slideshowImgs`).then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.forEach(data => {
this.fileWrapper.slideshowImgsList.push(this.fileFormatter(data, true))
})
}
}
})
// 更新的时候回显 附件
if (this.model.attachmentFileList && this.model.attachmentFileList.length > 0) {
this.fileWrapper.attachmentList = this.model.attachmentFileList.map(file => this.fileFormatter(file))
}
}
},
/**
* 数据转化
*/
fileFormatter (data, isImage) {
const file = {
uid: data.uuid, // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
name: data.fileName || ' ', // 文件名
status: 'done', // 状态有:uploading done error removed
response: '{"status": "success"}', // 服务端响应内容
filePath: data.accessUrl
}
if (isImage) {
Object.assign(file, {
url: `${this.filePrefix}${data.accessUrl}/image`,
thumbUrl: `${this.filePrefix}${data.accessUrl}/image`
})
}
return file
}
},
}
</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
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
# editTableCell 表格行编辑组件
路径:src/components/diboot/components/editTableCell.vue
功能:提供table表格行编辑功能
- 属性
名称 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
editable | 是否编辑中 | Boolean | false | Y |
value | 编辑/非编辑显示的值 | {String Boolean Number} | - | Y |
label | 非编辑显示的值(优先级最高) | string | - | N |
formType | 表单类型:[INPUT、INPUT_NUMBER、TEXTAREA、S_SELECT、SWITCH、DATEPICKER、DATETIMEPICKER,TREE] | string | - | Y |
isBoolean | 是否是布尔类型的单元格 | Boolean | false | N |
options | 选择情况下需要传入LabelValueList | Array | [] | N |
ellipsis | 非编辑状态超长是否省略 | Boolean | false | N |
placeholder | 导出文件地址 | string | - | N |
baseUrl | 基础请求路径(加载远程树结构数据基础路径,拼接/list,无树结构可不配,有树结构必须配置) | string | - | N |
fullUrl | 完整请求路径(加载远程树结构数据,覆盖baseUrl,无树结构可不配,有树结构必须配置) | string | - | N |
treeValueField | 树的value字段 | String | id | N |
treeTitleField | 树的显示字段 | string | 'label' | N |
- 示例
<template>
<a-table>
<edit-table-cell
v-if="record !== undefined"
slot="name"
slot-scope="text, record"
form-type="INPUT"
:editable="currentPrimaryValue === record[primaryKey]"
v-model="record.name"
/>
<edit-table-cell
v-if="record !== undefined"
slot="parentName"
slot-scope="text, record"
form-type="TREE"
base-url="/testTree"
:editable="currentPrimaryValue === record[primaryKey]"
:label="record.parentName"
v-model="record.parentId"
/>
</a-table>
</template>
<script>
import list from '@/components/diboot/mixins/list'
import EditTableCell from '@/components/diboot/components/editTableCell'
export default {
mixins: [list],
components: {
ExcelExport
},
data() {
return {
baseApi: '/exportExample',
columns: [
{
title: 'name',
dataIndex: 'name',
scopedSlots: { customRender: 'name' } },
{
title: '父级',
dataIndex: 'parentName',
scopedSlots: { customRender: 'parentName' }
}
]
}
}
}
</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
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
# FlatTree 平冠树组件
路径:src/components/FlatTree/index.vue
功能:树的叶子节点扁平化,用法与 UI 库的 Tree 组件一致