add: element-admin 2.0.5 -> 2.1.0升级文档
This commit is contained in:
wuy
parent
6b88bfa368
commit
3c35fb2b95
|
|
@ -479,3 +479,272 @@ 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/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