p96170835
/
diboot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add: element/antd-admin 2.1.0文档

This commit is contained in:
wuy 2020-07-10 12:12:59 +08:00
parent ac33c9880d
commit 3c568bc85f
9 changed files with 1030 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
diboot-docs/.vuepress/config.js
View File

@ -63,6 +63,7 @@ module.exports = {
['/guide/diboot-antd-admin/添加页面', '添加页面'],
['/guide/diboot-antd-admin/权限控制', '权限控制'],
['/guide/diboot-antd-admin/接口请求', '接口请求'],
['/guide/diboot-antd-admin/组件', '组件'],
['/guide/diboot-antd-admin/CRUD快速集成', 'CRUD快速集成'],
]
}
@ -78,6 +79,7 @@ module.exports = {
['/guide/diboot-element-admin/添加页面', '添加页面'],
['/guide/diboot-element-admin/权限控制', '权限控制'],
['/guide/diboot-element-admin/接口请求', '接口请求'],
['/guide/diboot-element-admin/组件', '组件'],
['/guide/diboot-element-admin/CRUD快速集成', 'CRUD快速集成'],
]
}

277
diboot-docs/guide/diboot-antd-admin/CRUD快速集成.md
View File

@ -2,9 +2,11 @@
## 开始之前
* 在diboot-antd-admin中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了vue的mixins文件，这些文件在**src/components/diboot/mixins**文件夹下，强烈建议您先阅览以下他们。
* 在diboot-antd-admin中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了vue的mixins文件，这些文件在**src/components/diboot/mixins**文件夹下。
* 也可以对已有的一些页面组件代码进行阅读，比如**src/views/system/iamUser**文件夹下的相关组件代码。
::: tip
在阅读文档之前，建议您准备好[diboot-antd-admin 最新版的环境](https://github.com/dibo-software/diboot-antd-admin/releases)源码环境，搭配代码使用更佳。
:::
## 列表页
1. 引入列表的mixins文件，如下：
@ -41,23 +43,51 @@ export default {
}
}
```
5. 删除数据：直接在删除按钮上调用remove函数即可，传入需要删除的当前id。
6. 导出数据：直接在导出按钮上调用exportData函数即可，将会传入当前查询参数，并异步下载文件。
7. 自定义查询参数处理方法：重写rebuildQuery方法，接收mixins中已经定义的customQueryParam与queryParam的合并值，返回处理后的值，该方法将会在获取列表数据前或导出数据前被调用。
8. 钩子函数：afterLoadList，在列表加载完毕将会执行该操作，另外，删除函数返回的是 Promise对象，所以可以使用.then在删除完毕时执行某些操作。
9. 相关配置：
* customQueryParam: 不会被搜索栏改变的初始查询参数对象，一般用于页面固定的查询参数
* queryParam：与查询条件绑定的查询参数对象
* advanced：用于构建可收缩/展开的查询框的状态参数
* more：当前对象的关联数据对象
* getMore：是否在该页面初始化时加载当前对象的关联数据对象，加载的关联数据对象存储在more中，默认为false
* getListFromMixin：是否在页面初始化时自动加载列表数据，默认为true
* loadingData：标记页面加载数据状态
* pagination：分页配置
* baseApi：接口前缀（必须配置）
* listApi：列表数据接口，默认为 /list
* deleteApiPrefix：删除接口前缀，默认为 /
* exportApi: 导出接口，默认为 /export
5. 属性配置
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| baseApi | 请求接口基础路径（必须配置）|String | / | - |
| listApi | 列表数据接口| String | /list |- |
| deleteApiPrefix | 删除接口前缀 | String | / | - |
| exportApi | 导出接口| String |~~/export~~ /excel/export|~~2.0.5~~ **2.1.0**|
| customQueryParam| 自定义参数（不被查询表单重置和改变的参数） | object | {} | - |
| queryParam | 与查询条件绑定的参数（会被查询表单重置和改变的参数） | object | {} | - |
| dateRangeQuery | 日期区间选择配置 <br/>**时间区间字段请放在这个对象中，会自动构建参与查询** | object | {} | **2.1.0** |
| advanced | 高级搜索 展开/关闭 | boolean | false | **2.1.0** |
| data | 存储列表数据 | array | [] |-|
| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| boolean | false | - |
| attachMoreList | 获取关联数据列表的配置列表<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | array | [] | **2.1.0** |
| more | 存储当前对象的关联数据对象<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| object | {} | - |
| getListFromMixin| 是否在页面初始化时自动加载列表数据 | boolean | true | - |
| loadingData | 标记页面加载数据状态 | boolean | false | - |
| pagination | 分页配置 | object | {pageSize: 10,current: 1,total: 0,showSizeChanger: true,pageSizeOptions: ['10', '20', '30', '50', '100'],showTotal: (total, range) => `当前显示 ${range[0]} - ${range[1]} 条/共 ${total} 条` } | - |
6. 功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| handleTableChange | 分页、排序、筛选变化时触发 |function(pagination, filters, sorter) | - |
| appendSorterParam | 构建排序 handleTableChange调用|function(sorter) | **2.1.0** |
| toggleAdvanced | 切换展示更多搜索框（绑定**advanced**属性）| - | **2.1.0** |
| onSearch | 搜索，查询第一页（默认查询按钮触发）| - | - |
| postList | post请求的获取列表（可以传递更长、更复杂参数） | - | - |
| getList | get请求获取列表 | - | - |
| attachMore | 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more | - | - |
| reset | 重置查询 | - | - |
| remove | 根据id删除 | function(id) | - |
| exportData | 导出数据至excel | - | **2.1.0** |
| downloadFile | 下载文件 | function(res) | **2.1.0** |
| getPopupContainer | 解决带有下拉框组件在滚动时下拉框不随之滚动的问题 | function(trigger) |-|
| contentTransform | 处理查询参数中的moment数据 默认转化为YYYY-MM-DD | function(content, transform = {}) | **2.1.0** |
| dateRange2queryParam | 构建区间查询参数，（转化dateRangeQuery属性内容） | - | **2.1.0** |
7. 钩子函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| afterLoadList | 加载数据之后操作 |function(list) | - |
| rebuildQuery | 重新构建查询条件 (接收已经定义的customQueryParam与queryParam的合并值)|function(query) | - |
## 新建与更新
@ -69,36 +99,52 @@ export default {
mixins: [form]
}
```
2. 相同业务对象的新建与更新使用同一个表单组件，默认以抽屉形式打开，可在引入地方，直接调用该组件的open方法进行打开。
3. 使用以上引入列表mixins的方式引入form的mixins文件，将会具有mixins中的所有能力。
4. 已有功能：
* open函数，可直接调用打开该表单
* 提供根据open中参数情况自动切换新建与更新操作
* 提供打开与关闭完成的钩子函数
* 提供表单提交函数 onSubmit
* 对form下校验规则的自动校验
* 提供对校验的自定义操作
* 提供校验完成后的enhance钩子函数，可对需要提交的数据进行再处理
* 可以对新建数据或更新数据的方法重写
* 提供提交成功与提交失败的钩子函数
* 提供表单默认布局参数
* 提供对关联数据的自动加载
* 提供各项配置支持自定义接口等
5. 相关配置：
* baseApi：与列表页相同
* createApi：新建接口，将自动拼接在baseApi之后，默认为 /
* updateApiPrefix: 更新接口前缀，将自动拼接在baseApi之后，默认为 /
* model: 更新时加载的原数据
* title：页面标题，默认为新建或更新
* reloadMore：加载的关联数据对象，默认为{}，如果list页面以及由more数据，且不与自身关联，可通过传参方式直接使用list中的more参数
* getMore：初始化时是否加载reloadMore数据，默认为false
* state：当前组件状态对象，默认为：{visible: false, confirmSubmit: false}
6. 钩子函数：
* afterOpen：在组件打开后，或者更新时数据加载完毕后，执行该函数
* afterClose： 在组件关闭后，执行该函数
* enhance：在校验完成后，对提交数据进行处理的函数
* submitSuccess： 提交成功后，执行该函数，默认关闭该组件，并发送complete和changeKey事件
* submitFailed： 提交失败后，执行该函数，默认提示错误消息
2. 属性配置：
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| primaryKey | 主键字段名 | string | id | **2.1.0** |
| baseApi | 请求接口基础路径(必须配置)|String | / | - |
| createApi | 新建接口，自动拼接在*baseApi*之后| String | / |- |
| updateApiPrefix | 更新接口前缀，自动拼接在*baseApi*之后 | String | / | - |
| labelCol | label 默认布局样式 | object |{xs: {span: 24}, sm: {span: 5}}|-|
| wrapperCol | form控件默认布局样式 | object |{xs: {span: 24}, sm: {span: 16}}|-|
| model| 存放form数据 | object | {} | - |
| title | 标题 | String |新建/更新|-|
| more | 存储当前对象的关联数据对象<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | object | {} | - |
| attachMoreList | 获取关联数据列表的配置列表<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | array | [] | **2.1.0** |
| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| boolean | false | - |
| state | 当前组件状态对象 | object | {visible: false, confirmSubmit: false} | - |
| isUpload | 当前form是否包含上传<br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | boolean | false | **2.1.0** |
| fileWrapper | 文件包装容器 <br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | object | {} | **2.1.0** |
| fileUuidList | 文件存储服务器后返回的唯一标识集合<br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | array | [] | **2.1.0** |
3. 功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| moment | moment时间相关操作 |- | - |
| open | 打开表单 (根据参数id存在与否，设置为更新or新建操作) |function(id) | - |
| close | 关闭表单 |- | - |
| validate | 提交前的验证流程 |- | - |
| add | 新建记录的提交 |function(values) | - |
| update | 更新记录的提交 |function(values) | - |
| onSubmit | 表单提交事件 |- | - |
| getPopupContainer | 解决带有下拉框组件在滚动时下拉框不随之滚动的问题 |function(trigger) | - |
| attachMore | 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more |- | - |
| filterOption | select选择框启用search功能后的过滤器 |- | - |
| clearForm | 清除form内容（关闭的时候自动调用） |- | - |
| __setFileUuidList__ | 设置文件uuid，参考属性：isUpload、fileWrapper、fileUuidList |- | - |
| __defaultFileWrapperKeys__ | 初始化fileWrapper（关闭时候自动调用） |- | - |
4. 钩子函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| afterOpen | 在组件打开后，或者更新时数据加载完毕后，执行该函数 |function(id) | - |
| afterClose | 在组件关闭后，执行该函数 |- | - |
| enhance | 在校验完成后，对提交数据进行处理的函数 |function(values) | - |
| submitSuccess | 提交成功后，执行该函数，默认关闭该组件，并发送complete和changeKey事件 |function(result) | - |
| submitFailed | 提交失败后，执行该函数，默认提示错误消息 |function(result) | - |
## 查看详情
@ -110,16 +156,125 @@ export default {
mixins: [detail]
}
```
2. 已有功能：
* 自动加载当前记录数据
* 关闭弹窗或者抽屉
* 可通过父组件传入width参数，控制抽屉的宽度
3. 相关配置：
* baseApi：与列表页相同
* visible：当前组件显示状态，默认为false
* model：当前详情框详情数据
* title：当前详情框标题
4. 钩子函数：
* afterOpen: 打开详情之后执行的函数
* afterClose：关闭之后执行的函数
2. 属性配置
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| baseApi | 请求接口基础路径(必须配置)|String | / | - |
| visible | 当前组件显示状态 | String | / | - |
| model | 当前详情框详情数据 | object |{}|-|
| title | 标题 | String |详情|-|
| spinning | loading状态 | boolean | false | - |
3.功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| open | 打开详情（加载服务端数据）|function(id) | - |
| close | 关闭详情 | - | - |
| downloadFile | 下载文件(传入接口地址)| function(path) | **2.1.0** |
4. 钩子函数
| 属性 | 说明 | 参数 |
| ------------- |:-------------| -----|
| afterOpen | 打开之后的操作|function(id) |
| afterClose| 关闭之后操作 | - |
## 详解
- <a id="业务对象关联详解">业务对象关联详解</a>
- more: 值来源于*getMore*或*attachMoreList* 配置请求接口后返回的结果；
- getMore: 开启关联数据会从当前业务的/attachMore接口中读取，开启后优于attachMoreList使用；
- attachMoreList: **2.1.0 新增** 实现关联数据从/common/attachMore接口统一读取，配置如下：
```javascript
// type：D(字典数据)/T（关联业务对象）
attattachMoreList: [
{
type: 'D', // 查询字典
target: 'GENDER' // 指向字典的 type = GENDER字段值
},
{
type: 'D', //查询字典
target: 'USER_STATUS' // 指向字典的 type = USER_STATUS字段值
},
{
type: 'T', // 查询对象
target: 'iamRole', // 指向IamRole对象
key: 'name', // 指向IamRole#name字段，需要查询作为key的字段名称
value: 'id' // 指向IamRole#id字段，需要查询作为value的字段名称
}
]
```
- attachMoreList 返回值会自动绑定至more属性中，上述配置样例返回值为(⚠️data的key规则是上述target的小驼峰命名 + KvList)：
```json
{
"code":0,
"data":{
"userStatusKvList":[
{
"k":"有效",
"v":"A"
}
],
"iamRoleKvList":[
{
"k":"超级管理员",
"v":10000
}
],
"genderKvList":[
{
"k":"女",
"v":"F"
},
{
"k":"男",
"v":"M"
}
]
},
"msg":"操作成功"
}
```
- 如非特殊，建议使用attachMoreList配置用以简化代码
- <a id="文件上传详解">文件上传详解 (2.1.0新增)</a>
**以下属性讲解，基于Upload组件** :point_right: [Upload.vue组件概述](/guide/diboot-antd-admin/组件.html#upload组件)
- isUpload: 标记当前form表单中是否包含上传属性，使用如：图片、文件，默认不包含，如果引入组件，请手动开启：
```javascript
data() {
return {
isUpload: true
}
}
```
- fileWrapper: 所有文件的集合都放置与fileWrapper对象中，提交的时候会自动遍历，然后提交至服务端进行数据处理：
- template内容
```html{5}
<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-model="form.slideshowImgs"
></upload>
```
- script内容
```javascript
data() {
return {
// 包含属性
fileWrapper: {
//存储form.slideshowImgs属性对应的文件集合
slideshowImgsList: []
}
}
}
```
- fileUuidList: 如果包含上传，那么会自动构建文件的提交数据用于绑定当前对象

3
diboot-docs/guide/diboot-antd-admin/介绍.md
View File

@ -28,4 +28,5 @@ diboot-antd-admin前端基础项目，是一个与diboot其他后端组件构成
* 登录人员管理界面；
* 角色与权限管理功能；
* 权限管理功能；
* 登录日志管理功能。
* 登录日志管理功能；
* 预置上传、富文本、导入组件 **（2.1.0 新增）**

20
diboot-docs/guide/diboot-antd-admin/添加页面.md
View File

@ -7,11 +7,25 @@
* 在**src/views**文件夹下创建页面对应的文件夹以及对应的页面组件文件
## 添加路由配置
### 自动添加路由配置
:point_right: [devtools 2.1.0 自动化生成您的前端页面](/guide/diboot-devtools/介绍)
:::tip
devtools 2.1.0为您提供了前端页面和后端接口的快速构建，赶快点击体验吧！！！
:::
* 后台菜单是根据路由配置自动生成的，具体可参考[路由与菜单](https://pro.loacg.com/docs/router-and-nav)
### 手动添加路由配置
* 后台菜单是根据路由配置自动生成的，具体可参考[路由与菜单](https://pro.antdv.com/docs/router-and-nav)
* 在**src/config/router.config.js**文件中，可以配置需要新增页面的路由。
* 对于需要进行权限控制的菜单，需要放到asyncRouterMap中进行配置，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRouterMap中。
* 路由配置方式，可参考已有配置，如下：
* 对于需要进行权限控制的菜单，~~需要放到asyncRouterMap中进行配置~~，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRouterMap中。
> 2.1.0版本之后devtools具有前端生成能力，因此手动添加路由不建议直接放在asyncRoutes路由中，而是交给**generateRouterMap**处理，由devtools生成的路由会自动写入generateRouterMap集合
```javascript
export const asyncRouterMap = []
// 在router.config.js 末尾添加如下内容
const generateRouterMap = []
asyncRouterMap[0].children.splice(1, 0, ...generateRouterMap)
````
* 手动路由配置方式，可参考已有配置，如下：
```javascript
// 系统管理

276
diboot-docs/guide/diboot-antd-admin/组件.md Normal file
View File

@ -0,0 +1,276 @@
# 组件
> diboot组件基于Ant Design Vue进行二次封装和业务调整，搭配devtools后端接口服务，**一键生成交互代码**，减少您的学习成本。
::: tip
以下内容为组件概述，实际开发时，建议直接使用devtools生成前端代码。
:::
## import组件
> 路径：src/components/diboot/components/import/**.vue
>
> 功能：提供excel导入、示例下载、数据预览等功能
- 属性
| 名称 | 说明 | 类型 |默认值 | 必填|
| ------------- |:-------------| -----| -----| -----|
| exampleUrl |示例文件地址| string| -| Y|
| uploadUrl |上传地址| string| -| Y|
| previewUrl |预览地址| string| -| Y|
| previewSaveUrl |预览后保存地址| string| -| Y|
| fieldsRequired |提交时候必须的参数| object| {}| N|
- 事件
| 名称 | 说明 |
| ------------- |:-------------|
| finishedUpload |数据上传至数据库成功后触发|
- 示例
```vue
<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/import/ExcelImport'
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>
```
## richText组件
> 概述：富文本组件基于quill封装，提供简单的富文本功能
>
> 路径：src/components/diboot/components/richText/**.vue
>
> 功能：**QuillEditor.vue(富文本组件)** 和 **QuillHtmlRender.vue(渲染富文本组件)**
- QuillEditor.vue属性
| 名称 | 说明 | 类型 |
| ------------- |:-------------| -----|
| value |v-decorator绑定的值| string|
| placeholder |富文本框的提示| string|
- QuillEditor.vue事件
| 名称 | 说明 |
| ------------- |:-------------|
| change |直接使用v-decorator绑定属性值即可|
- QuillEditor.vue示例
```html
<!--v-if主要为了强制刷新富文本子组件，否则在打开更新的时候不会更新字段值-->
<quill-editor
v-if="state.visible"
placeholder="请输入富文本编辑"
v-decorator="[
'richText',
{
initialValue: model.richText
}
]"
></quill-editor>
```
- QuillHtmlRender.vue属性
| 名称 | 说明 | 类型 |
| ------------- |:-------------| -----|
| content |富文本内容| string|
- QuillEditor.vue示例
```html
<quill-html-render :content="model.richText"></quill-html-render>
```
## 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绑定属性值即可|
- 示例
```vue
<el-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>
</el-form-item>
<el-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>
</el-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))
})
}
}
})
// 更新的时候加载上传 附件
dibootApi.get(`/uploadFile/getList/${id}/${this.relObjType}/attachment`).then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.forEach(data => {
this.fileWrapper.attachmentList.push(this.fileFormatter(data))
})
}
}
})
}
},
/**
* 数据转化
*/
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>
```

302
diboot-docs/guide/diboot-element-admin/CRUD快速集成.md
View File

@ -2,9 +2,11 @@
## 开始之前
* 在diboot-element-admin中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了vue的mixins文件，这些文件在**src/components/diboot/mixins**文件夹下，强烈建议您先阅览以下他们。
* 在diboot-element-admin中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了vue的mixins文件，这些文件在**src/components/diboot/mixins**文件夹下。
* 也可以对已有的一些页面组件代码进行阅读，比如**src/views/system/iamUser**文件夹下的相关组件代码。
::: tip
在阅读文档之前，建议您准备好[diboot-element-admin 最新版的环境](https://github.com/dibo-software/diboot-element-admin/releases)源码环境，搭配代码使用更佳。
:::
## 列表页
1. 引入列表的mixins文件，如下：
@ -26,22 +28,56 @@ export default {
}
}
```
4. 删除数据：直接在删除按钮上调用remove函数即可，传入需要删除的当前id。
5. 导出数据：直接在导出按钮上调用exportData函数即可，将会传入当前查询参数，并异步下载文件。
6. 自定义查询参数处理方法：重写rebuildQuery方法，接收mixins中已经定义的customQueryParam与queryParam的合并值，返回处理后的值，该方法将会在获取列表数据前或导出数据前被调用。
7. 钩子函数：afterLoadList，在列表加载完毕将会执行该操作，另外，删除函数返回的是 Promise对象，所以可以使用.then在删除完毕时执行某些操作。
8. 相关配置：
* customQueryParam: 不会被搜索栏改变的初始查询参数对象，一般用于页面固定的查询参数
* queryParam：与查询条件绑定的查询参数对象
* more：当前对象的关联数据对象
* getMore：是否在该页面初始化时加载当前对象的关联数据对象，加载的关联数据对象存储在more中，默认为false
* getListFromMixin：是否在页面初始化时自动加载列表数据，默认为true
* loadingData：标记页面加载数据状态
* pagination：分页配置
* baseApi：接口前缀（必须配置）
* listApi：列表数据接口，默认为 /list
* deleteApiPrefix：删除接口前缀，默认为 /
* exportApi: 导出接口，默认为 /export
4. 属性配置：
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| primaryKey | 主键字段名 | string | id | **2.1.0** |
| baseApi | 请求接口基础路径（必须配置）|String | / | - |
| listApi | 列表数据接口| String | /list |- |
| deleteApiPrefix | 删除接口前缀 | String | / | - |
| exportApi | 导出接口| String |~~/export~~ /excel/export|~~2.0.5~~ **2.1.0**|
| customQueryParam| 自定义参数（不被查询表单重置和改变的参数） | object | {} | - |
| queryParam | 与查询条件绑定的参数（会被查询表单重置和改变的参数） | object | {} | - |
| dateRangeQuery | 日期区间选择配置 <br/>**时间区间字段请放在这个对象中，会自动构建参与查询** | object | {} | **2.1.0** |
| advanced | 高级搜索 展开/关闭 | boolean | false | **2.1.0** |
| list | 存储列表数据 | array | [] |-|
| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| boolean | false | - |
| attachMoreList | 获取关联数据列表的配置列表<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | array | [] | **2.1.0** |
| more | 存储当前对象的关联数据对象<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| object | {} | - |
| listFormatter| 是否将children转化为_children | boolean | true | - |
| getListFromMixin| 是否在页面初始化时自动加载列表数据 | boolean | true | - |
| loadingData | 标记页面加载数据状态 | boolean | false | - |
| exportLoadingData| 标记导出文件时加载状态 | boolean | false | **2.1.0** |
| pagination | 分页配置 | object | {pageSize: 10,current: 1,total: 0,showSizeChanger: true,pageSizeOptions: ['10', '20', '30', '50', '100']} | - |
5. 功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| handlePaginationChanged | 分页触发 |- | - |
| appendSorterParam | 构建排序（绑定table的@sort-change）<br/>**<a href="#列表排序详解">:point_right:列表排序详解</a>**| - | **2.1.0** |
| onSearch | 搜索，查询第一页（默认查询按钮触发）| - | - |
| toggleAdvanced | 切换展示更多搜索框（绑定**advanced**属性）| - | **2.1.0** |
| postList | post请求的获取列表（可以传递更长、更复杂参数） | - | - |
| getList | get请求获取列表 | - | - |
| menuCommand | 更新或者删除 | function（command, row) | - |
| filterListData | 处理list中含有children字段的问题 | function(list) | - |
| attachMore | 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more | - | - |
| reset | 重置查询 | - | - |
| remove | 根据id删除 | function(id) | - |
| exportData | 导出数据至excel | - | **2.1.0** |
| downloadFile | 下载文件 | function(res) | **2.1.0** |
| contentTransform | 处理查询参数中的moment数据 默认转化为YYYY-MM-DD | function(content, transform = {}) | **2.1.0** |
| dateRange2queryParam | 构建区间查询参数，（转化dateRangeQuery属性内容） | - | **2.1.0** |
6. 钩子函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| afterLoadList | 加载数据之后操作 |function(list) | - |
| rebuildQuery | 重新构建查询条件 (接收已经定义的customQueryParam与queryParam的合并值)|function(query) | - |
## 新建与更新
@ -53,37 +89,50 @@ export default {
mixins: [form]
}
```
2. 相同业务对象的新建与更新使用同一个表单组件，默认以抽屉形式打开，可在引入地方，直接调用该组件的open方法进行打开。
3. 使用以上引入列表mixins的方式引入form的mixins文件，将会具有mixins中的所有能力。
4. 已有功能：
* open函数，可直接调用打开该表单
* 提供根据open中参数情况自动切换新建与更新操作
* 提供打开与关闭完成的钩子函数
* 提供表单提交函数 onSubmit
* 对form下校验规则的自动校验
* 提供对校验的自定义操作
* 提供校验完成后的enhance钩子函数，可对需要提交的数据进行再处理
* 可以对新建数据或更新数据的方法重写
* 提供提交成功与提交失败的钩子函数
* 提供表单默认布局参数
* 提供对关联数据的自动加载
* 提供各项配置支持自定义接口等
5. 相关配置：
* baseApi：与列表页相同
* createApi：新建接口，将自动拼接在baseApi之后，默认为 /
* updateApiPrefix: 更新接口前缀，将自动拼接在baseApi之后，默认为 /
* initFormData：表单初始数据（表示表单数据结构）
* form: 更新时装载加载的原数据，新建时为上述initFormData数据的克隆
* title：页面标题，默认为新建或更新
* reloadMore：加载的关联数据对象，默认为{}，如果list页面以及由more数据，且不与自身关联，可通过传参方式直接使用list中的more参数
* getMore：初始化时是否加载reloadMore数据，默认为false
* state：当前组件状态对象，默认为：{visible: false, confirmSubmit: false}
6. 钩子函数：
* afterOpen：在组件打开后，或者更新时数据加载完毕后，执行该函数
* afterClose： 在组件关闭后，执行该函数
* enhance：在校验完成后，对提交数据进行处理的函数
* submitSuccess： 提交成功后，执行该函数，默认关闭该组件，并发送complete和changeKey事件
* submitFailed： 提交失败后，执行该函数，默认提示错误消息
2. 属性配置：
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| primaryKey | 主键字段名 | string | id | **2.1.0** |
| baseApi | 请求接口基础路径(必须配置)|String | / | - |
| createApi | 新建接口，自动拼接在*baseApi*之后| String | / |- |
| updateApiPrefix | 更新接口前缀，自动拼接在*baseApi*之后 | String | / | - |
| title | 标题 | String |新建/更新|-|
| initFormData| 表单初始数据（表示表单数据结构） | object | {} | - |
| form| 更新时装载加载的原数据，新建时为上述initFormData数据的克隆 | object | {} | - |
| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>**| boolean | false | - |
| attachMoreList | 获取关联数据列表的配置列表<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | array | [] | **2.1.0** |
| more | 存储当前对象的关联数据对象<br/>**<a href="#业务对象关联详解">:point_right:业务对象关联详解</a>** | object | {} | - |
| fullscreen | 当前组件全屏控制 | boolean | false | **2.1.0** |
| state | 当前组件状态对象 | object | {visible: false, confirmSubmit: false} | - |
| isUpload | 当前form是否包含上传<br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | boolean | false | **2.1.0** |
| fileWrapper | 文件包装容器 <br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | object | {} | **2.1.0** |
| fileUuidList | 文件存储服务器后返回的唯一标识集合<br/>**<a href="#文件上传详解">:point_right:文件上传详解</a>** | array | [] | **2.1.0** |
3. 功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| open | 打开表单 (根据参数id存在与否，设置为更新or新建操作) |function(id) | - |
| close | 关闭表单 |- | - |
| validate | 提交前的验证流程 |- | - |
| add | 新建记录的提交 |function(values) | - |
| update | 更新记录的提交 |function(values) | - |
| onSubmit | 表单提交事件 |- | - |
| attachMore | 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more |- | - |
| filterOption | select选择框启用search功能后的过滤器 |- | - |
| clearForm | 清除form内容（关闭的时候自动调用） |- | - |
| __setFileUuidList__ | 设置文件uuid，参考属性：isUpload、fileWrapper、fileUuidList |- | - |
| __defaultFileWrapperKeys__ | 初始化fileWrapper（关闭时候自动调用） |- | - |
4. 钩子函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| afterOpen | 在组件打开后，或者更新时数据加载完毕后，执行该函数 |function(id) | - |
| afterClose | 在组件关闭后，执行该函数 |- | - |
| enhance | 在校验完成后，对提交数据进行处理的函数 |function(values) | - |
| submitSuccess | 提交成功后，执行该函数，默认关闭该组件，并发送complete和changeKey事件 |function(result) | - |
| submitFailed | 提交失败后，执行该函数，默认提示错误消息 |function(result) | - |
## 查看详情
@ -95,16 +144,147 @@ export default {
mixins: [detail]
}
```
2. 已有功能：
* 自动加载当前记录数据
* 关闭弹窗或者抽屉
* 可通过父组件传入width参数，控制抽屉的宽度
3. 相关配置：
* baseApi：与列表页相同
* visible：当前组件显示状态，默认为false
* model：当前详情框详情数据
* title：当前详情框标题
4. 钩子函数：
* afterOpen: 打开详情之后执行的函数
* afterClose：关闭之后执行的函数
2. 属性配置
| 属性 | 说明 | 类型 |默认值 | 版本|
| ------------- |:-------------| -----| -----| -----|
| baseApi | 请求接口基础路径(必须配置)|String | / | - |
| visible | 当前组件显示状态 | String | / | - |
| model | 当前详情框详情数据 | object |{}|-|
| title | 标题 | String |详情|-|
| fullscreen | 当前组件全屏控制 | boolean | false | **2.1.0** |
3.功能函数
| 名称 | 说明 | 参数 | 版本|
| ------------- |:-------------| -----| -----|
| open | 打开详情（加载服务端数据）|function(id) | - |
| close | 关闭详情 | - | - |
| downloadFile | 下载文件(传入接口地址)| function(path) | **2.1.0** |
4. 钩子函数
| 属性 | 说明 | 参数 |
| ------------- |:-------------| -----|
| afterOpen | 打开之后的操作|function(id) |
| afterClose| 关闭之后操作 | - |
## 详解
- <a id="列表排序详解">列表排序详解</a>
- 排序前端依赖element-ui的table组件中 **@sort-change** 事件，使用排序请设置 **@sort-change="appendSorterParam"**
- 点击排序后会自动排序当前查询的列表数据，不会调用接口查询，但会构建排序的规则，当点击查询时，会自动对相关字段进行排序查询
- 示例：
```html {7,11-12}
<el-table
v-loading="loadingData"
:data="list"
element-loading-text="Loading"
border
fit
@sort-change="appendSorterParam"
highlight-current-row
row-key="id"
>
<!-- prop：指定排序字段名，sortable：开启当前字段排序>-->
<el-table-column label="创建时间" width="150" align="center" prop="createTime" sortable>
<template slot-scope="scope">
{{ scope.row.createTime }}
</template>
</el-table-column>
</el-table>
```
- <a id="业务对象关联详解">业务对象关联详解</a>
- more: 值来源于*getMore*或*attachMoreList* 配置请求接口后返回的结果；
- getMore: 开启关联数据会从当前业务的/attachMore接口中读取，开启后优于attachMoreList使用；
- attachMoreList: **2.1.0 新增** 实现关联数据从/common/attachMore接口统一读取，配置如下：
```javascript
// type：D(字典数据)/T（关联业务对象）
attattachMoreList: [
{
type: 'D', // 查询字典
target: 'GENDER' // 指向字典的 type = GENDER字段值
},
{
type: 'D', //查询字典
target: 'USER_STATUS' // 指向字典的 type = USER_STATUS字段值
},
{
type: 'T', // 查询对象
target: 'iamRole', // 指向IamRole对象
key: 'name', // 指向IamRole#name字段，需要查询作为key的字段名称
value: 'id' // 指向IamRole#id字段，需要查询作为value的字段名称
}
]
```
- attachMoreList 返回值会自动绑定至more属性中，上述配置样例返回值为(⚠️data的key规则是上述target的小驼峰命名 + KvList)：
```json
{
"code":0,
"data":{
"userStatusKvList":[
{
"k":"有效",
"v":"A"
}
],
"iamRoleKvList":[
{
"k":"超级管理员",
"v":10000
}
],
"genderKvList":[
{
"k":"女",
"v":"F"
},
{
"k":"男",
"v":"M"
}
]
},
"msg":"操作成功"
}
```
- 如非特殊，建议使用attachMoreList配置用以简化代码
- <a id="文件上传详解">文件上传详解 (2.1.0新增)</a>
**以下属性讲解，基于Upload组件** :point_right: [Upload.vue组件概述](/guide/diboot-element-admin/组件.html#upload组件)
- isUpload: 标记当前form表单中是否包含上传属性，使用如：图片、文件，默认不包含，如果引入组件，请手动开启：
```javascript
data() {
return {
isUpload: true
}
}
```
- fileWrapper: 所有文件的集合都放置与fileWrapper对象中，提交的时候会自动遍历，然后提交至服务端进行数据处理：
- template内容
```html{5}
<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-model="form.slideshowImgs"
></upload>
```
- script内容
```javascript
data() {
return {
// 包含属性
fileWrapper: {
//存储form.slideshowImgs属性对应的文件集合
slideshowImgsList: []
}
}
}
```
- fileUuidList: 如果包含上传，那么会自动构建文件的提交数据用于绑定当前对象

3
diboot-docs/guide/diboot-element-admin/介绍.md
View File

@ -28,4 +28,5 @@ diboot-element-admin前端基础项目，是一个与diboot其他后端组件构
* 登录人员管理界面；
* 角色与权限管理功能；
* 权限管理功能；
* 登录日志管理功能。
* 登录日志管理功能
* 预置上传、富文本、导入组件 **（2.1.0 新增）**

22
diboot-docs/guide/diboot-element-admin/添加页面.md
View File

@ -7,11 +7,25 @@
* 在**src/views**文件夹下创建页面对应的文件夹以及对应的页面组件文件
## 添加路由配置
### 自动添加路由配置
:point_right: [devtools 2.1.0 自动化生成您的前端页面](/guide/diboot-devtools/介绍)
:::tip
devtools 2.1.0为您提供了前端页面和后端接口的快速构建，赶快点击体验吧！！！
:::
### 手动添加路由配置
* 后台菜单是根据路由配置自动生成的，具体可参考[路由和侧边栏](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html)
* 在**src/router/index.js**文件中，可以配置需要新增页面的路由。
* 对于需要进行权限控制的菜单，需要放到asyncRoutes中进行配置，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRoutes中。
* 路由配置方式，可参考已有配置，如下：
* 对于需要进行权限控制的菜单，~~**需要放到asyncRoutes中进行配置**~~，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRoutes中。
> 2.1.0版本之后devtools具有前端生成能力，因此手动添加路由不建议直接放在asyncRoutes路由中，而是交给**generateRouterMap**处理，由devtools生成的路由会自动写入generateRouterMap集合
```javascript
export const asyncRoutes = []
// 在src/router/index.js 末尾添加如下内容
const generateRouterMap = []
asyncRoutes.splice(0, 0, ...generateRouterMap)
````
* 手动路由配置方式，可参考已有配置，如下：
```javascript
// 系统管理
@ -59,3 +73,5 @@
* permission：为显示该菜单所需要该用户具有的权限码，这个码会在稍后配置系统权限的时候自动代入。
* 如果不配置permission，将不会对该菜单进行权限验证，所有用户都可以访问该页面，如果permission的列表中配置了多个权限码，那么具有其中一个就将会具有当前菜单的访问权限。
* 配置完成后，就可以对这些页面进行访问了（如果配置了权限码，可以先使用具有管理员权限的账号访问到）。

253
diboot-docs/guide/diboot-element-admin/组件.md Normal file
View File

@ -0,0 +1,253 @@
# 组件
> diboot组件基于element-ui进行二次封装和业务调整，搭配devtools后端接口服务，**一键生成交互代码**，减少您的学习成本。
::: tip
以下内容为组件概述，实际开发时，建议直接使用devtools生成前端代码。
:::
## import组件
> 路径：src/components/diboot/components/import/**.vue
>
> 功能：提供excel导入、示例下载、数据预览等功能
- 属性
| 名称 | 说明 | 类型 |默认值 | 必填|
| ------------- |:-------------| -----| -----| -----|
| exampleUrl |示例文件地址| string| -| Y|
| uploadUrl |上传地址| string| -| Y|
| previewUrl |预览地址| string| -| Y|
| previewSaveUrl |预览后保存地址| string| -| Y|
| fieldsRequired |提交时候必须的参数| object| {}| N|
- 事件
| 名称 | 说明 |
| ------------- |:-------------|
| finishedUpload |数据上传至数据库成功后触发|
- 示例
```vue
<el-dialog
class="excel-import"
:visible.sync="visible"
title="数据上传"
@closed="close"
>
<excel-import
v-if="visible"
:example-url="`${baseApi}/downloadExample`"
:upload-url="`${baseApi}/upload`"
:preview-url="`${baseApi}/preview`"
:preview-save-url="`${baseApi}/previewSave`"
@finishedUpload="handleFinishedUpload"
></excel-import>
<div slot="footer" class="dialog-footer">
<el-button @click="close">关闭</el-button>
</div>
</el-dialog>
<script>
import ExcelImport from '@/components/diboot/components/import/ExcelImport'
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>
```
## richText组件
> 概述：富文本组件基于quill封装，提供简单的富文本功能
>
> 路径：src/components/diboot/components/richText/**.vue
>
> 功能：**QuillEditor.vue(富文本组件)** 和 **QuillHtmlRender.vue(渲染富文本组件)**
- QuillEditor.vue属性
| 名称 | 说明 | 类型 |
| ------------- |:-------------| -----|
| value |v-model绑定的值| string|
| placeholder |富文本框的提示| string|
- QuillEditor.vue事件
| 名称 | 说明 |
| ------------- |:-------------|
| input |直接使用v-model绑定属性值即可|
- QuillEditor.vue示例
```html
<!--v-if主要为了强制刷新富文本子组件，否则在打开更新的时候不会更新字段值-->
<quill-editor
v-if="state.visible"
placeholder="请输入详细描述"
v-model="form.richText"
></quill-editor>
```
- QuillHtmlRender.vue属性
| 名称 | 说明 | 类型 |
| ------------- |:-------------| -----|
| content |富文本内容| string|
- QuillEditor.vue示例
```html
<quill-html-render :content="model.richText"></quill-html-render>
```
## upload组件
> 概述：基于element-ui的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-model绑定的值| string| -| Y|
- 事件
| 名称 | 说明 |
| ------------- |:-------------|
| input |直接使用v-model绑定属性值即可|
- 示例
```vue
<el-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-model="form.slideshowImgs"
></upload>
</el-form-item>
<el-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-model="form.attachment"
></upload>
</el-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))
})
}
}
})
// 更新的时候加载上传 附件
dibootApi.get(`/uploadFile/getList/${id}/${this.relObjType}/attachment`).then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.forEach(data => {
this.fileWrapper.attachmentList.push(this.fileFormatter(data))
})
}
}
})
}
},
/**
* 数据转化
*/
fileFormatter(data) {
const file = {
uid: data.uuid,
name: data.fileName || ' ', // 文件名
filePath: data.accessUrl,
url: `${this.filePrefix}${data.accessUrl}/image`
}
return file
}
},
}
</script>
```