From 3c35fb2b9516e611bda7a8f6ce1b060f456586a3 Mon Sep 17 00:00:00 2001
From: wuy <1311695042@qq.com>
Date: Thu, 9 Jul 2020 14:09:37 +0800
Subject: [PATCH] =?UTF-8?q?add:=20element-admin=202.0.5=20->=202.1.0?=
=?UTF-8?q?=E5=8D=87=E7=BA=A7=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../guide/notes/upgrade/2_0_x升级至2_1_x.md | 271 +++++++++++++++++-
1 file changed, 270 insertions(+), 1 deletion(-)
diff --git a/diboot-docs/guide/notes/upgrade/2_0_x升级至2_1_x.md b/diboot-docs/guide/notes/upgrade/2_0_x升级至2_1_x.md
index 25cd211..ada00b0 100644
--- a/diboot-docs/guide/notes/upgrade/2_0_x升级至2_1_x.md
+++ b/diboot-docs/guide/notes/upgrade/2_0_x升级至2_1_x.md
@@ -478,4 +478,273 @@ attachMoreList: [
// 需要配置的属性
toolbar: true
})
- ```
\ No newline at end of file
+ ```
+
+### 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
+
+ 查询
+
+ // 改为
+
+ 查询
+
+```
+* 更改 **src/views/system/** ** **/list.vue**下文件，增加排序功能 **(此处更改非必须，根据自己需求添加)**
+ * el-table 新增 *@sort-change*事件，如下高亮部分：
+ ```html {7,11-12}
+
+
+
+
+ {{ scope.row.createTime }}
+
+
+
+ ```
+* 更改 **src/views/system/iamFrontendPermission/form.vue** 文件，使用新版本内容直接替换即可；
+* 更改 **src/views/system/iamLoginTrace/list.vue** 文件，使用新版本内容直接替换即可；
+* 更改 **src/views/system/iamUser/form.vue**，如下：
+ * 角色选择标签更换如下：
+ ```html {3,10}
+
+
+
+
+
+ ```
+* 更改 **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
+ })
+ ```
\ No newline at end of file