diff --git a/diboot-docs/.vuepress/config.js b/diboot-docs/.vuepress/config.js
index b1d1970..056a416 100644
--- a/diboot-docs/.vuepress/config.js
+++ b/diboot-docs/.vuepress/config.js
@@ -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快速集成'],
]
}
diff --git a/diboot-docs/guide/diboot-antd-admin/CRUD快速集成.md b/diboot-docs/guide/diboot-antd-admin/CRUD快速集成.md
index 2d7f006..923e4f4 100644
--- a/diboot-docs/guide/diboot-antd-admin/CRUD快速集成.md
+++ b/diboot-docs/guide/diboot-antd-admin/CRUD快速集成.md
@@ -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 | 日期区间选择配置
**时间区间字段请放在这个对象中，会自动构建参与查询** | object | {} | **2.1.0** |
+| advanced | 高级搜索 展开/关闭 | boolean | false | **2.1.0** |
+| data | 存储列表数据 | array | [] |-|
+| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据
**:point_right:业务对象关联详解**| boolean | false | - |
+| attachMoreList | 获取关联数据列表的配置列表
**:point_right:业务对象关联详解** | array | [] | **2.1.0** |
+| more | 存储当前对象的关联数据对象
**:point_right:业务对象关联详解**| 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 | 存储当前对象的关联数据对象
**:point_right:业务对象关联详解** | object | {} | - |
+| attachMoreList | 获取关联数据列表的配置列表
**:point_right:业务对象关联详解** | array | [] | **2.1.0** |
+| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据
**:point_right:业务对象关联详解**| boolean | false | - |
+| state | 当前组件状态对象 | object | {visible: false, confirmSubmit: false} | - |
+| isUpload | 当前form是否包含上传
**:point_right:文件上传详解** | boolean | false | **2.1.0** |
+| fileWrapper | 文件包装容器
**:point_right:文件上传详解** | object | {} | **2.1.0** |
+| fileUuidList | 文件存储服务器后返回的唯一标识集合
**:point_right:文件上传详解** | 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：关闭之后执行的函数
-
\ No newline at end of file
+
+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| 关闭之后操作 | - |
+
+## 详解
+- 业务对象关联详解
+ - 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配置用以简化代码
+- 文件上传详解 (2.1.0新增)
+
+ **以下属性讲解，基于Upload组件** :point_right: [Upload.vue组件概述](/guide/diboot-antd-admin/组件.html#upload组件)
+ - isUpload: 标记当前form表单中是否包含上传属性，使用如：图片、文件，默认不包含，如果引入组件，请手动开启：
+ ```javascript
+ data() {
+ return {
+ isUpload: true
+ }
+ }
+ ```
+ - fileWrapper: 所有文件的集合都放置与fileWrapper对象中，提交的时候会自动遍历，然后提交至服务端进行数据处理：
+ - template内容
+ ```html{5}
+
+ ```
+ - script内容
+ ```javascript
+ data() {
+ return {
+ // 包含属性
+ fileWrapper: {
+ //存储form.slideshowImgs属性对应的文件集合
+ slideshowImgsList: []
+ }
+ }
+ }
+ ```
+ - fileUuidList: 如果包含上传，那么会自动构建文件的提交数据用于绑定当前对象
\ No newline at end of file
diff --git a/diboot-docs/guide/diboot-antd-admin/介绍.md b/diboot-docs/guide/diboot-antd-admin/介绍.md
index d8271ad..f1f93a3 100644
--- a/diboot-docs/guide/diboot-antd-admin/介绍.md
+++ b/diboot-docs/guide/diboot-antd-admin/介绍.md
@@ -28,4 +28,5 @@ diboot-antd-admin前端基础项目，是一个与diboot其他后端组件构成
* 登录人员管理界面；
* 角色与权限管理功能；
* 权限管理功能；
-* 登录日志管理功能。
+* 登录日志管理功能；
+* 预置上传、富文本、导入组件 **（2.1.0 新增）**
diff --git a/diboot-docs/guide/diboot-antd-admin/添加页面.md b/diboot-docs/guide/diboot-antd-admin/添加页面.md
index 9c47473..33b56f9 100644
--- a/diboot-docs/guide/diboot-antd-admin/添加页面.md
+++ b/diboot-docs/guide/diboot-antd-admin/添加页面.md
@@ -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
// 系统管理
diff --git a/diboot-docs/guide/diboot-antd-admin/组件.md b/diboot-docs/guide/diboot-antd-admin/组件.md
new file mode 100644
index 0000000..c863baf
--- /dev/null
+++ b/diboot-docs/guide/diboot-antd-admin/组件.md
@@ -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
+
+
+
+
+
+
+```
+
+## 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
+
+
+```
+- QuillHtmlRender.vue属性
+
+| 名称 | 说明 | 类型 |
+| ------------- |:-------------| -----|
+| content |富文本内容| string|
+
+- QuillEditor.vue示例
+```html
+
+```
+## 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
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md b/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md
index cd441a5..3d0930e 100644
--- a/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md
+++ b/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md
@@ -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 | 日期区间选择配置
**时间区间字段请放在这个对象中，会自动构建参与查询** | object | {} | **2.1.0** |
+| advanced | 高级搜索 展开/关闭 | boolean | false | **2.1.0** |
+| list | 存储列表数据 | array | [] |-|
+| getMore | 是否使mixin在当前业务的attachMore接口中自动获取关联数据
**:point_right:业务对象关联详解**| boolean | false | - |
+| attachMoreList | 获取关联数据列表的配置列表
**:point_right:业务对象关联详解** | array | [] | **2.1.0** |
+| more | 存储当前对象的关联数据对象
**:point_right:业务对象关联详解**| 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）
**:point_right:列表排序详解**| - | **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接口中自动获取关联数据
**:point_right:业务对象关联详解**| boolean | false | - |
+| attachMoreList | 获取关联数据列表的配置列表
**:point_right:业务对象关联详解** | array | [] | **2.1.0** |
+| more | 存储当前对象的关联数据对象
**:point_right:业务对象关联详解** | object | {} | - |
+| fullscreen | 当前组件全屏控制 | boolean | false | **2.1.0** |
+| state | 当前组件状态对象 | object | {visible: false, confirmSubmit: false} | - |
+| isUpload | 当前form是否包含上传
**:point_right:文件上传详解** | boolean | false | **2.1.0** |
+| fileWrapper | 文件包装容器
**:point_right:文件上传详解** | object | {} | **2.1.0** |
+| fileUuidList | 文件存储服务器后返回的唯一标识集合
**:point_right:文件上传详解** | 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：关闭之后执行的函数
-
\ No newline at end of file
+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| 关闭之后操作 | - |
+
+## 详解
+- 列表排序详解
+ - 排序前端依赖element-ui的table组件中 **@sort-change** 事件，使用排序请设置 **@sort-change="appendSorterParam"**
+ - 点击排序后会自动排序当前查询的列表数据，不会调用接口查询，但会构建排序的规则，当点击查询时，会自动对相关字段进行排序查询
+ - 示例：
+ ```html {7,11-12}
+
+
+
+
+ {{ scope.row.createTime }}
+
+
+
+ ```
+- 业务对象关联详解
+ - 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配置用以简化代码
+- 文件上传详解 (2.1.0新增)
+
+ **以下属性讲解，基于Upload组件** :point_right: [Upload.vue组件概述](/guide/diboot-element-admin/组件.html#upload组件)
+ - isUpload: 标记当前form表单中是否包含上传属性，使用如：图片、文件，默认不包含，如果引入组件，请手动开启：
+ ```javascript
+ data() {
+ return {
+ isUpload: true
+ }
+ }
+ ```
+ - fileWrapper: 所有文件的集合都放置与fileWrapper对象中，提交的时候会自动遍历，然后提交至服务端进行数据处理：
+ - template内容
+ ```html{5}
+
+ ```
+ - script内容
+ ```javascript
+ data() {
+ return {
+ // 包含属性
+ fileWrapper: {
+ //存储form.slideshowImgs属性对应的文件集合
+ slideshowImgsList: []
+ }
+ }
+ }
+ ```
+ - fileUuidList: 如果包含上传，那么会自动构建文件的提交数据用于绑定当前对象
\ No newline at end of file
diff --git a/diboot-docs/guide/diboot-element-admin/介绍.md b/diboot-docs/guide/diboot-element-admin/介绍.md
index d1d1920..e2ef447 100644
--- a/diboot-docs/guide/diboot-element-admin/介绍.md
+++ b/diboot-docs/guide/diboot-element-admin/介绍.md
@@ -28,4 +28,5 @@ diboot-element-admin前端基础项目，是一个与diboot其他后端组件构
* 登录人员管理界面；
* 角色与权限管理功能；
* 权限管理功能；
-* 登录日志管理功能。
+* 登录日志管理功能
+* 预置上传、富文本、导入组件 **（2.1.0 新增）**
diff --git a/diboot-docs/guide/diboot-element-admin/添加页面.md b/diboot-docs/guide/diboot-element-admin/添加页面.md
index 67a1840..1d31c75 100644
--- a/diboot-docs/guide/diboot-element-admin/添加页面.md
+++ b/diboot-docs/guide/diboot-element-admin/添加页面.md
@@ -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的列表中配置了多个权限码，那么具有其中一个就将会具有当前菜单的访问权限。
* 配置完成后，就可以对这些页面进行访问了（如果配置了权限码，可以先使用具有管理员权限的账号访问到）。
+
+
diff --git a/diboot-docs/guide/diboot-element-admin/组件.md b/diboot-docs/guide/diboot-element-admin/组件.md
new file mode 100644
index 0000000..62fbcf9
--- /dev/null
+++ b/diboot-docs/guide/diboot-element-admin/组件.md
@@ -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
+
+
+
+
+
+
+```
+
+## 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
+
+
+```
+- QuillHtmlRender.vue属性
+
+| 名称 | 说明 | 类型 |
+| ------------- |:-------------| -----|
+| content |富文本内容| string|
+
+- QuillEditor.vue示例
+```html
+
+```
+## 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
+
+
+
+
+
+
+
+
+```
\ No newline at end of file