Error (#227)

* Update README.md

* Tinymce (#214)

* Update README.md

* Update axios.js

* feat:富文本 Tinymce

* fix:去掉tinymce标识

* update:新增富文本部分内置插件

* fix:富文本上传图片加入token验证

* fix:自动化导入富文本插件

* fix:修复没有分组时，新建用户选择分组的时候会显示0的bug (#221)

* build(.eslintrc.js): 去掉'linebreak-style': [0, 'error', 'windows']

airbnb校验规则会要求项目使用 LF 换行符, git for windows 在默认配置下会将签出的代码转换成 CRLF。此处应要求 windwos 开发者关闭 git 自动转换功能。

* chore(*): 更新依赖, 修复eslint不符合的地方

* feat(Login): 登录界面移动适配

* fix:全局错误处理

Author: gongjs

.eslintrc.js

@@ -13,7 +13,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'linebreak-style': [0, 'error', 'windows'],
     'import/extensions': 0, // import不需要写文件扩展名
     'import/no-unresolved': 0,
     // 'import/no-duplicates': 0,

README.md

@@ -89,12 +89,16 @@ QQ群搜索：林间有风 或 643205479
 
 ## 版本日志
 
+<<<<<<< HEAD
 最新版本 `0.2.0`
 
 ### 0.2.0
 
 1. `A` 新增图像上传、图像预览、富文本等自定义组件
 2. `A` 新增 lin-cms-ui 多个基础组件
+=======
+最新版本 `0.1.0-beta.3`
+>>>>>>> 0b890cda57f1aaa11af9315d031ae15fae4def51
 
 ### 0.1.0-beta.3
 

package-lock.json

@@ -13,54 +13,54 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.2.5",
+    "@babel/polyfill": "^7.4.4",
     "@tinymce/tinymce-vue": "^2.1.0",
     "axios": "~0.18.0",
-    "element-ui": "^2.8.2",
-    "event-source-polyfill": "^0.0.16",
+    "element-ui": "^2.10.1",
+    "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.14",
     "moment": "^2.24.0",
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
-    "tinymce": "^5.0.9",
-    "vue": "^2.6.8",
+    "tinymce": "^5.0.12",
+    "vue": "^2.6.10",
     "vue-awesome-swiper": "^3.1.3",
     "vue-croppa": "^1.3.8",
-    "vue-router": "~3.0.1",
-    "vuex": "~3.0.1",
-    "vuex-persist": "^2.0.0"
+    "vue-router": "^3.0.7",
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.7.0",
-    "@vue/cli-service": "^3.4.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/cli-plugin-babel": "^3.9.2",
+    "@vue/cli-plugin-eslint": "^3.9.2",
+    "@vue/cli-plugin-unit-jest": "^3.9.0",
+    "@vue/cli-service": "^3.9.2",
+    "@vue/eslint-config-airbnb": "^4.0.1",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "babel-eslint": "^10.0.2",
+    "babel-jest": "^24.8.0",
     "babel-plugin-component": "^1.1.1",
     "chalk": "^2.4.2",
     "child_process": "^1.0.2",
     "cz-conventional-changelog": "^2.1.0",
-    "directory-tree": "^2.2.1",
-    "ejs": "^2.6.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "fs-extra": "^7.0.1",
-    "inquirer": "^6.2.2",
-    "js-yaml": "^3.12.2",
+    "directory-tree": "^2.2.3",
+    "ejs": "^2.6.2",
+    "eslint": "^6.0.1",
+    "eslint-plugin-vue": "^5.2.3",
+    "fs-extra": "^8.1.0",
+    "inquirer": "^6.5.0",
+    "js-yaml": "^3.13.1",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
-    "semver": "^5.6.0",
+    "semver": "^6.2.0",
     "shelljs": "^0.8.3",
     "validate-npm-package-name": "^3.0.0",
     "vue-markdown-loader": "^2.4.1",
-    "vue-template-compiler": "^2.6.8",
+    "vue-template-compiler": "^2.6.10",
     "yaml-front-matter": "^4.0.0"
   },
   "postcss": {

package.json

@@ -0,0 +1,8 @@
+// eslint-disable-next-line
+const importAll = (requireContext) => requireContext.keys().forEach(requireContext)
+try {
+  // 导入所有插件
+  importAll(require.context('../../../../node_modules/tinymce/plugins', true))
+} catch (err) {
+  console.log(err)
+}

src/components/base/tinymce/importAll.js

@@ -3,22 +3,12 @@
     <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
   </div>
 </template>
-
 <script>
 // eslint-disable-next-line
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
-import 'tinymce/plugins/textcolor'
-import 'tinymce/plugins/advlist'
-import 'tinymce/plugins/table'
-import 'tinymce/plugins/lists'
-import 'tinymce/plugins/paste'
-import 'tinymce/plugins/preview'
-import 'tinymce/plugins/fullscreen'
-import 'tinymce/plugins/image'
-import 'tinymce/plugins/code'
-import 'tinymce/plugins/link'
+import './importAll'
 
 export default {
   name: 'TinymceEditor',
@@ -39,6 +29,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    toolbar: {
+      type: String,
+      // eslint-disable-next-line
+      default: ' undo redo |formatselect | bold italic strikethrough forecolor backcolor formatpainter | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | preview fullscreen code',
+    },
   },
   components: {
     Editor,
@@ -64,32 +59,25 @@ export default {
       statusbar: false, // 隐藏编辑器底部的状态栏
       paste_data_images: true, // 允许粘贴图像
       menubar: this.showMenubar, // 隐藏最上方menu
-      plugins: 'advlist table lists paste preview fullscreen image code link',
       // eslint-disable-next-line
-      toolbar:' undo redo |fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | link image | h1 h2 h3 blockquote table numlist bullist | preview fullscreen code',
+      plugins: 'print fullpage searchreplace autolink directionality visualblocks visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link',
+      toolbar: this.toolbar,
       // eslint-disable-next-line
       images_upload_handler: async function(blobInfo, success, failure) {
-        // eslint-disable-next-line
-        let json
-        const xhr = new XMLHttpRequest()
-        xhr.withCredentials = false
-        xhr.open('POST', `${_this.upload_url}`)
-        // eslint-disable-next-line
-        xhr.onload = function() {
-          if (xhr.status !== 200) {
-            failure(`HTTP Error: ${xhr.status}`)
-            return
-          }
-          json = JSON.parse(xhr.responseText)
-          if (json[0] && json[0].url) {
-            success(json[0].url)
-          } else {
-            failure(`Invalid JSON: ${xhr.responseText}`)
+        const file = new File([blobInfo.blob()], blobInfo.filename(), {
+          type: 'image/*',
+        })
+        _this.$axios({
+          method: 'post',
+          url: '/cms/file/',
+          data: {
+            file,
+          },
+        }).then((res) => {
+          if (res[0] && res[0].url) {
+            success(res[0].url)
           }
-        }
-        const formData = new FormData()
-        formData.append('file', blobInfo.blob(), blobInfo.filename())
-        xhr.send(formData)
+        }).catch(err => failure(err))
       },
     }
   },

src/components/base/tinymce/index.vue

@@ -80,9 +80,8 @@
 </template>
 
 <script>
-import Utils from '@/lin/utils/util'
-/* eslint-disable no-restricted-syntax */
 import { mapGetters } from 'vuex'
+import Utils from '@/lin/utils/util'
 
 export default {
   props: ['isCollapse'],

src/components/layout/SideBar.vue

@@ -106,9 +106,9 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import User from '@/lin/models/user'
 import Vue from 'vue'
 import Croppa from 'vue-croppa'
+import User from '@/lin/models/user'
 import 'vue-croppa/dist/vue-croppa.css'
 import defaultAvatar from '@/assets/img/user/user.png'
 

src/components/layout/User.vue

@@ -1,9 +1,7 @@
 
 const stateCode = {
-  0: '成功',
-  1007: '未知错误',
+  777: '未知错误',
   999: '服务器未知错误',
-  9999: '失败',
   10000: '认证失败',
   10020: '资源不存在',
   10030: '参数错误',

src/config/error-code.js

@@ -2,8 +2,10 @@
 import Vue from 'vue'
 import axios from 'axios'
 import Config from '@/config'
+import ErrorCode from '@/config/error-code'
 import store from '@/store'
 import { getToken } from '@/lin/utils/token'
+// eslint-disable-next-line import/no-cycle
 import User from '@/lin/models/user'
 
 
@@ -13,14 +15,14 @@ import User from '@/lin/models/user'
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 
 const config = {
-  baseURL: Config.baseUrl || process.env.apiUrl || '',
+  baseURL: Config.baseURL || process.env.apiUrl || '',
   timeout: 5 * 1000, // 请求超时时间设置
   crossDomain: true,
   // withCredentials: true, // Check cross-site Access-Control
   // 定义可获得的http响应状态码
   // return true、设置为null或者undefined，promise将resolved,否则将rejected
   validateStatus(status) {
-    return status >= 200 && status < 500
+    return status >= 200 && status < 510
   },
 }
 
@@ -109,10 +111,10 @@ _axios.interceptors.request.use((originConfig) => {
 
 // Add a response interceptor
 _axios.interceptors.response.use(async (res) => {
+  let { error_code, msg } = res.data  // eslint-disable-line
   if (res.status.toString().charAt(0) === '2') {
     return res.data
   }
-
   return new Promise(async (resolve, reject) => {
     // 将本次失败请求保存
     const { params, url, method } = res.config
@@ -121,25 +123,20 @@ _axios.interceptors.response.use(async (res) => {
       url,
       method,
     })
-
-    // 处理 API 异常
-    let { error_code, msg } = res.data // eslint-disable-line
-    if (msg instanceof Object) {
-      let showMsg = ''
-      Object.getOwnPropertyNames(msg).forEach((key, index) => {
-        if (index === 0) {
-          showMsg = msg[key] // 如果是数组，展示第一条
-        }
-      })
-      msg = showMsg
+    // 用户自己try catch
+    if (params.handleError) {
+      reject(res)
+      return
     }
-    // 如果令牌无效或者是refreshToken相关异常
+    // 处理 API 异常
     if (error_code === 10000 || error_code === 10100) {
       setTimeout(() => {
         store.dispatch('loginOut')
         const { origin } = window.location
         window.location.href = origin
       }, 1500)
+      resolve(null)
+      return
     }
     // 令牌相关，刷新令牌
     if (error_code === 10040 || error_code === 10050) {
@@ -153,12 +150,20 @@ _axios.interceptors.response.use(async (res) => {
         return
       }
     }
-
+    const errorArr = Object.entries(ErrorCode).filter(v => v[0] === error_code.toString())
+    // 匹配到自定义的错误码
+    if (errorArr.length > 0) {
+      if (errorArr[0][1] !== '') {
+        msg = errorArr[0][1] // eslint-disable-line
+      } else {
+        msg = ErrorCode['777']
+      }
+    }
     Vue.prototype.$message({
-      message: msg || '未知的error_code',
+      message: msg,
       type: 'error',
     })
-    reject(res.data)
+    resolve(null)
   })
 }, (error) => {
   if (!error.response) {

src/lin/plugins/axios.js

@@ -7,6 +7,7 @@ import '@/lin/filter'
 import '@/lin/plugins'
 import '@/lin/directives'
 
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
 import router from '@/router'
 import store from '@/store'
 import App from '@/App.vue'
@@ -15,10 +16,10 @@ import StickyTop from '@/components/base/sticky-top/sticky-top'
 import LIcon from '@/components/base/icon/lin-icon'
 import SourceCode from '@/components/base/source-code/source-code'
 
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
 
 import '@/assets/styles/index.scss' // eslint-disable-line
 import '@/assets/styles/realize/element-variables.scss'
+import 'element-ui/lib/theme-chalk/display.css'
 
 Vue.config.productionTip = false
 

src/main.js

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+
 import Tinymce from '@/components/base/tinymce'
 
 export default {

src/plugins/custom/views/Tinymce.vue

@@ -27,8 +27,8 @@
           >
             <el-input size="medium"  clearable type="password" v-model="form.confirm_password" autocomplete="off"></el-input>
           </el-form-item>
-          <el-form-item v-if="pageType !== 'password'" label="选择分组">
-            <el-select  size="medium" filterable v-model="form.group_id" placeholder="请选择分组">
+          <el-form-item v-if="pageType !== 'password'" label="选择分组" >
+            <el-select  size="medium" filterable v-model="form.group_id" :disabled="groups.length === 0" placeholder="请选择分组">
               <el-option
                 v-for="item in groups"
                 :key="item.id"
@@ -122,7 +122,7 @@ export default {
         password: '',
         confirm_password: '',
         email: '',
-        group_id: 0,
+        group_id: '请先创建分组',
       },
       // 验证规则
       rules: {

src/views/admin/user/UserInfo.vue

@@ -67,11 +67,11 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import log from 'lin/models/log'
+import { searchLogKeyword } from 'lin/utils/search'
 import LinSearch from '@/components/base/search/lin-search'
 import LinDatePicker from '@/components/base/date-picker/lin-date-picker'
-import { searchLogKeyword } from 'lin/utils/search'
-import { mapGetters } from 'vuex'
 
 export default {
   components: {