Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
Zhaoyang
commit
1b73ba35db
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
> 众多开发团队现状: 效率低、质量差、可维护性差，我们也常听到开发者抱怨每天CRUD、工作就是搬砖。
|
> 众多开发团队现状: 效率低、质量差、可维护性差，我们也常听到开发者抱怨每天CRUD、工作就是搬砖。
|
||||||
|
|
||||||
> diboot-devtools 是面向Java开发人员的自动化助理，有了她，你可以彻底摆脱CRUD等重复性的工作，专注于数据结构设计、业务实现，提高软件的质量、效率、可维护性。
|
> diboot-devtools 是面向Java开发人员的自动化助理，有了她，你可以彻底摆脱常规SQL与CRUD等重复性的工作，专注于数据结构设计、业务实现，提高软件的质量、效率、可维护性。
|
||||||
|
|
||||||
> **diboot-devtools - 将复杂的事情简单化，重复的事情自动化**
|
> **diboot-devtools - 将复杂的事情简单化，重复的事情自动化**
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,28 @@ providedCompile("com.diboot:diboot-devtools-spring-boot-starter:{latestVersion}"
|
||||||
<groupId>com.diboot</groupId>
|
<groupId>com.diboot</groupId>
|
||||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||||
<version>{latestVersion}</version>
|
<version>{latestVersion}</version>
|
||||||
<scope>provided</scope>
|
<scope>provided</scope><!-- 打war包时剔除devtools jar -->
|
||||||
</dependency>
|
</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**以免打包至非开发环境。
|
> diboot-devtools-spring-boot-starter 是用于开发过程的助手工具，须声明 **provided**以免打包至非开发环境。
|
||||||
|
|
||||||
## 3. 添加配置信息
|
## 3. 添加配置信息
|
||||||
|
|
@ -111,11 +130,27 @@ diboot-devtools在初次运行中，会自动检测安装以diboot_前缀的数
|
||||||
```
|
```
|
||||||
* Maven配置
|
* Maven配置
|
||||||
```
|
```
|
||||||
|
// dependency节点
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>com.diboot</groupId>
|
<groupId>com.diboot</groupId>
|
||||||
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
<artifactId>diboot-devtools-spring-boot-starter</artifactId>
|
||||||
<scope>provided</scope>
|
<scope>provided</scope><!-- 打war包时剔除 -->
|
||||||
</dependency>
|
</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创建专属项目，与代码项目隔离开）：
|
* 方式二（为devtools创建专属项目，与代码项目隔离开）：
|
||||||
|
|
|
||||||
|
|
@ -479,3 +479,320 @@ attachMoreList: [
|
||||||
toolbar: true
|
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