Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
Zhaoyang
commit
1b73ba35db
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
> 众多开发团队现状: 效率低、质量差、可维护性差，我们也常听到开发者抱怨每天CRUD、工作就是搬砖。
|
||||
|
||||
> diboot-devtools 是面向Java开发人员的自动化助理，有了她，你可以彻底摆脱CRUD等重复性的工作，专注于数据结构设计、业务实现，提高软件的质量、效率、可维护性。
|
||||
> diboot-devtools 是面向Java开发人员的自动化助理，有了她，你可以彻底摆脱常规SQL与CRUD等重复性的工作，专注于数据结构设计、业务实现，提高软件的质量、效率、可维护性。
|
||||
|
||||
> **diboot-devtools - 将复杂的事情简单化，重复的事情自动化**
|
||||
|
||||
|
|
|
|||
|
|
@ -22,9 +22,28 @@ providedCompile("com.diboot:diboot-devtools-spring-boot-starter:{latestVersion}"
|
|||
<groupId>com.diboot</groupId>
|
||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||
<version>{latestVersion}</version>
|
||||
<scope>provided</scope>
|
||||
<scope>provided</scope><!-- 打war包时剔除devtools jar -->
|
||||
</dependency>
|
||||
```
|
||||
如果spring boot项目需要打jar包运行，则需要参考如下配置确保打包时剔除devtools：
|
||||
~~~
|
||||
<plugins>
|
||||
<plugin>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<!-- 打jar包时剔除 -->
|
||||
<excludes>
|
||||
<exclude>
|
||||
<groupId>com.diboot</groupId>
|
||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||
</exclude>
|
||||
</excludes>
|
||||
</configuration>
|
||||
</plugin>
|
||||
</plugins>
|
||||
~~~
|
||||
|
||||
> diboot-devtools-spring-boot-starter 是用于开发过程的助手工具，须声明 **provided**以免打包至非开发环境。
|
||||
|
||||
## 3. 添加配置信息
|
||||
|
|
@ -111,11 +130,27 @@ diboot-devtools在初次运行中，会自动检测安装以diboot_前缀的数
|
|||
```
|
||||
* Maven配置
|
||||
```
|
||||
// dependency节点
|
||||
<dependency>
|
||||
<groupId>com.diboot</groupId>
|
||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||
<scope>provided</scope>
|
||||
<scope>provided</scope><!-- 打war包时剔除 -->
|
||||
</dependency>
|
||||
|
||||
//plugins节点配置
|
||||
<plugin>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<!-- 打jar包时剔除 -->
|
||||
<excludes>
|
||||
<exclude>
|
||||
<groupId>com.diboot</groupId>
|
||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||
</exclude>
|
||||
</excludes>
|
||||
</configuration>
|
||||
</plugin>
|
||||
```
|
||||
|
||||
* 方式二（为devtools创建专属项目，与代码项目隔离开）：
|
||||
|
|
|
|||
|
|
@ -478,4 +478,321 @@ attachMoreList: [
|
|||
// 需要配置的属性
|
||||
toolbar: true
|
||||
})
|
||||
```
|
||||
```
|
||||
|
||||
### 4. diboot-element-admin前端调整
|
||||
|
||||
> 升级前请下载[diboot-element-admin 2.1.0](https://github.com/dibo-software/diboot-element-admin/releases)源码包，以下升级流程将依赖此包。
|
||||
|
||||
* 调整package.json相关依赖到2.1.0版本，具体如下：
|
||||
* 更新 *element-ui* 依赖：
|
||||
```json
|
||||
{
|
||||
"ant-design-vue": "2.13.2"
|
||||
}
|
||||
```
|
||||
|
||||
* 添加依赖项：
|
||||
```json
|
||||
{
|
||||
"qs": "^6.9.4",
|
||||
"quill": "^2.0.0-dev.4",
|
||||
"v-viewer": "^1.5.1"
|
||||
}
|
||||
```
|
||||
* 复制新版本 **src/components/diboot/** 路径下所有文件到旧版本项目中，添加及覆盖相关文件 **(注意不要您自定义的相关文件覆盖或删除)**；
|
||||
::: warning
|
||||
src/components/diboot/mixins目录下的文件在替换的时候，如果您对这些文件进行了自定义更改，请对比两者差异进行处理
|
||||
:::
|
||||
* 添加文件 **src/styles/custom-global.scss**，并在 **src/styles/index.scss** 中引入:
|
||||
```sass
|
||||
@import './custom-global.scss';
|
||||
```
|
||||
* 更新 **src/utils/request.js** 文件：
|
||||
* 引入qs：
|
||||
```javascript
|
||||
import qs from 'qs'
|
||||
```
|
||||
* 更改 **service.interceptors.request.use** 的处理如下（如果您对此进行了自定义更改，则需要对比一下内容与您当前内容差异进行处理）：
|
||||
```javascript
|
||||
// request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
if (store.getters.token) {
|
||||
config.headers[JWT_HEADER_KEY] = getToken()
|
||||
}
|
||||
// 只针对get方式进行序列化
|
||||
if (config.method === 'get') {
|
||||
config.paramsSerializer = function(params) {
|
||||
return qs.stringify(params, { arrayFormat: 'repeat' })
|
||||
}
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
console.log(error) // for debug
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
```
|
||||
* 更改 **service.interceptors.response.use** 的处理如下（如果您对此进行了自定义更改，则需要对比一下内容与您当前内容差异进行处理）：
|
||||
```javascript
|
||||
// response interceptor
|
||||
service.interceptors.response.use(response => {
|
||||
// 检查是否携带有新的token
|
||||
const newToken = response.headers[JWT_HEADER_KEY]
|
||||
if (newToken) {
|
||||
// 将该token设置到vuex以及本地存储中
|
||||
setToken(newToken)
|
||||
store.commit('SET_TOKEN', newToken)
|
||||
}
|
||||
// 如果请求成功，则重置心跳定时器
|
||||
if (response.status === 200) {
|
||||
resetPingTimer()
|
||||
}
|
||||
|
||||
// 如果返回的自定义状态码为 4001， 则token过期，需要清理掉token并跳转至登录页面重新登录
|
||||
if (response.data && response.data.code === 4001) {
|
||||
removeToken()
|
||||
router.push('/login')
|
||||
throw new Error('登录过期，请重新登录')
|
||||
}
|
||||
// 如果当前请求是下载请求
|
||||
if (response.headers.filename) {
|
||||
return {
|
||||
data: response.data,
|
||||
filename: decodeURI(response.headers.filename),
|
||||
code: parseInt(response.headers['err-code'] || '0'),
|
||||
msg: decodeURI(response.headers['err-msg'] || '')
|
||||
}
|
||||
}
|
||||
return response.data
|
||||
},
|
||||
error => {
|
||||
...
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
* 更改 **src/utils/treeDataUtil.js** 文件（如果您对该文件没有更改，可直接替换为新版本内容）：
|
||||
* 更改 **permissionTreeListFormatter** 方法，代码如下：
|
||||
```javascript
|
||||
/***
|
||||
* 权限树状结构转化（用于角色权限配置中）
|
||||
* @param treeList
|
||||
* @param valueField
|
||||
* @param titleField
|
||||
* @returns {[]|undefined}
|
||||
*/
|
||||
const permissionTreeListFormatter = function (treeList, valueField, titleField) {
|
||||
if (treeList === undefined || treeList.length === 0) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const formatterList = []
|
||||
treeList.forEach(item => {
|
||||
const slots = {
|
||||
icon: item.displayType === 'MENU' ? 'menu' : 'permission'
|
||||
}
|
||||
const formatterItem = {
|
||||
slots,
|
||||
type: item.displayType,
|
||||
parentId: item.parentId,
|
||||
id: item.id,
|
||||
sortId: item.sortId,
|
||||
key: item[valueField],
|
||||
value: item[valueField],
|
||||
title: item[titleField]
|
||||
}
|
||||
if (item.children !== undefined && item.children.length > 0) {
|
||||
formatterItem.children = permissionTreeListFormatter(item.children, valueField, titleField)
|
||||
}
|
||||
formatterList.push(formatterItem)
|
||||
})
|
||||
|
||||
return formatterList
|
||||
}
|
||||
```
|
||||
* 添加 **sortTreeListFormatter** 方法，代码如下：
|
||||
```javascript
|
||||
/***
|
||||
* 排序树状结构格式化
|
||||
* @param treeList
|
||||
* @param valueField
|
||||
* @param titleField
|
||||
* @returns {undefined}
|
||||
*/
|
||||
const sortTreeListFormatter = function (treeList, valueField, titleField) {
|
||||
if (treeList === undefined || treeList.length === 0) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const formatterList = []
|
||||
treeList.forEach(item => {
|
||||
const formatterItem = {
|
||||
type: item.displayType,
|
||||
parentId: item.parentId,
|
||||
id: item.id,
|
||||
sortId: item.sortId,
|
||||
key: item[valueField],
|
||||
value: item[valueField],
|
||||
title: item[titleField]
|
||||
}
|
||||
if (item.children !== undefined && item.children.length > 0) {
|
||||
formatterItem.children = sortTreeListFormatter(item.children, valueField, titleField)
|
||||
}
|
||||
formatterList.push(formatterItem)
|
||||
})
|
||||
|
||||
return formatterList
|
||||
}
|
||||
```
|
||||
* 导出地方增加 **sortTreeListFormatter** 方法，如下高亮部分：
|
||||
``` js {10}
|
||||
export {
|
||||
treeListFormatter,
|
||||
clearNullChildren,
|
||||
treeList2list,
|
||||
treeList2IndentList,
|
||||
list2childrenMap,
|
||||
routersFormatter,
|
||||
apiListFormatter,
|
||||
permissionTreeListFormatter,
|
||||
sortTreeListFormatter
|
||||
}
|
||||
```
|
||||
* 更改所有列表页搜索表单的 **查询提交事件**，修改触发函数即可，如下（此处如果没有自定义相关数值，可以使用批量替换）：
|
||||
```html
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
|
||||
查询
|
||||
</el-button>
|
||||
// 改为
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="onSearch">
|
||||
查询
|
||||
</el-button>
|
||||
```
|
||||
* 更改 **src/views/system/** ** **/list.vue**下文件，增加排序功能 **(此处更改非必须，根据自己需求添加)**
|
||||
* el-table 新增 *@sort-change*事件，如下高亮部分：
|
||||
```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"
|
||||
>
|
||||
<!-- 原：<el-table-column label="创建时间" width="150" align="center">-->
|
||||
<el-table-column label="创建时间" width="150" align="center" prop="createTime" sortable>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
```
|
||||
* 更改 **src/views/system/** ** **/form.vue**下文件，增加全屏功能**(此处更改非必须，根据自己需求添加)**
|
||||
* el-dialog 头部信息修改如下：
|
||||
```html
|
||||
<el-dialog
|
||||
:visible.sync="state.visible"
|
||||
:fullscreen="fullscreen"
|
||||
class="frontend-permission-form"
|
||||
:custom-class="!fullscreen ? 'controller-height': ''"
|
||||
:show-close="false"
|
||||
>
|
||||
<el-row slot="title" type="flex">
|
||||
<el-col :span="20">{{title}}</el-col>
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<svg-icon
|
||||
:icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
|
||||
style="cursor: pointer; margin-right: 10px"
|
||||
@click="() => {fullscreen = !fullscreen}"
|
||||
/>
|
||||
<i class="el-icon-close" style="cursor: pointer" @click="close" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--form表单内容不改动-->
|
||||
</el-dialog>
|
||||
```
|
||||
* 更改 **src/views/system/** ** **/detail.vue**下文件，增加全屏功能 **(此处更改非必须，根据自己需求添加)**
|
||||
* el-dialog 头部信息修改如下：
|
||||
```html
|
||||
<el-dialog
|
||||
class="detailModal"
|
||||
:visible.sync="visible"
|
||||
:fullscreen="fullscreen"
|
||||
:custom-class="!fullscreen ? 'controller-height': ''"
|
||||
:show-close="false"
|
||||
>
|
||||
<el-row slot="title" type="flex">
|
||||
<el-col :span="20">查看详情</el-col>
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<svg-icon
|
||||
:icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
|
||||
style="cursor: pointer; margin-right: 10px"
|
||||
@click="() => {fullscreen = !fullscreen}"
|
||||
/>
|
||||
<i class="el-icon-close" style="cursor: pointer" @click="close" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--detail详情内容不改动-->
|
||||
</el-dialog>
|
||||
```
|
||||
* 更改 **src/views/system/iamFrontendPermission/form.vue** 文件，使用新版本内容直接替换即可；
|
||||
* 更改 **src/views/system/iamLoginTrace/list.vue** 文件，使用新版本内容直接替换即可；
|
||||
* 更改 **src/views/system/iamUser/form.vue**，如下：
|
||||
* 角色选择标签更换如下：
|
||||
```html {3,10}
|
||||
<el-form-item label="角色" prop="roleIdList">
|
||||
<el-select
|
||||
v-if="more.iamRoleKvList"
|
||||
v-model="form.roleIdList"
|
||||
multiple
|
||||
placeholder="请选择角色"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in more.iamRoleKvList"
|
||||
:key="index"
|
||||
:value="item.v"
|
||||
:label="item.k"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
```
|
||||
* 更改 **src/views/system/iamUser/list.vue** 文件，删除data属性中的~~getMore~~字段，新增如下数据：
|
||||
|
||||
```javascript
|
||||
attachMoreList: [
|
||||
{
|
||||
type: 'D',
|
||||
target: 'GENDER'
|
||||
},
|
||||
{
|
||||
type: 'D',
|
||||
target: 'USER_STATUS'
|
||||
},
|
||||
{
|
||||
type: 'T',
|
||||
target: 'iamRole',
|
||||
key: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
],
|
||||
```
|
||||
* 更改 **src/main.js** 文件：
|
||||
* 添加import项，如下：
|
||||
```javascript
|
||||
import Viewer from 'v-viewer'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
```
|
||||
* 添加其他代码，如下：
|
||||
```javascript
|
||||
Vue.use(Viewer)
|
||||
Viewer.setDefaults({
|
||||
// 需要配置的属性
|
||||
toolbar: true
|
||||
})
|
||||
```
|
||||
Loading…
Reference in New Issue