feat: 改造axios

Author: vanoneang

package.json

@@ -89,7 +89,7 @@
   "lint-staged": {
     "*.{js,vue}": [
       "prettier --write",
-      "vue-cli-service list",
+      "vue-cli-service lint",
       "git add"
     ]
   }

src/component/base/table/lin-table.vue.rej

@@ -0,0 +1,7 @@
+diff a/src/component/base/table/lin-table.vue b/src/component/base/table/lin-table.vue	(rejected hunks)
+@@ -217 +217,4 @@ export default {
+-        this.toggleSelection(this.currentData.filter(item => item.key === row.key), false)
++        this.toggleSelection(
++          this.currentData.filter(item => item.key === row.key),
++          false,
++        )

src/component/base/tinymce/index.vue

@@ -7,6 +7,8 @@
 // eslint-disable-next-line
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
+import { post } from '@/lin/plugin/axios'
+
 import 'tinymce/themes/silver'
 import './import-all'
 
@@ -59,7 +61,6 @@ export default {
     }
   },
   created() {
-    const _this = this
     this.tinymceInit = {
       language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
       skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
@@ -81,14 +82,9 @@ export default {
         const file = new File([blobInfo.blob()], blobInfo.filename(), {
           type: 'image/*',
         })
-        _this
-          .$axios({
-            method: 'post',
-            url: '/cms/file',
-            data: {
-              file,
-            },
-          })
+        post('cms/file', {
+          file,
+        })
           .then(res => {
             if (res[0] && res[0].url) {
               success(res[0].url)

src/component/base/upload-image/index.vue

@@ -78,6 +78,7 @@ todo: 文件判断使用 serveWorker 优化性能
 
 <script>
 import { getFileType, checkIsAnimated, isEmptyObj, createId } from './utils'
+import { post } from '@/lin/plugin/axios'
 
 /**
  * 本地图像通过验证后构造的信息对象
@@ -458,11 +459,7 @@ export default {
       uploadList.forEach((item, index) => {
         data[`file_${index}`] = item.img.file
       })
-      return this.$axios({
-        method: 'post',
-        url: '/cms/file',
-        data,
-      })
+      return post('cms/file', data)
         .then(res => {
           if (!Array.isArray(res) || res.length === 0) {
             throw new Error('图像上传失败')

src/component/layout/user.vue

@@ -113,6 +113,7 @@
 import { mapActions, mapGetters } from 'vuex'
 import Vue from 'vue'
 import Croppa from 'vue-croppa'
+import axios, { post } from '@/lin/plugin/axios'
 import User from '@/lin/model/user'
 import 'vue-croppa/dist/vue-croppa.css'
 import defaultAvatar from '@/assets/image/user/user.png'
@@ -256,12 +257,8 @@ export default {
         type: 'image/jpeg',
       })
 
-      return this.$axios({
-        method: 'post',
-        url: '/cms/file',
-        data: {
-          file,
-        },
+      return post('/cms/file', {
+        file,
       }).then(res => {
         // 清空输入框
         this.clearFileInput(this.$refs.avatarInput)
@@ -273,12 +270,8 @@ export default {
         // if (res.code === 10110) {
         //   throw new Error('文件体积过大')
         // }
-        return this.$axios({
-          method: 'put',
-          url: '/cms/user',
-          data: {
-            avatar: res[0].path,
-          },
+        return post('/cms/user', {
+          avatar: res[0].path,
         })
           .then(putRes => {
             // eslint-disable-line
@@ -311,7 +304,7 @@ export default {
       if (this.nickname) {
         const { user } = this.$store.state
         if (this.nickname !== user.nickname && this.nickname !== '佚名') {
-          this.$axios({
+          axios({
             method: 'put',
             url: '/cms/user',
             data: {

src/config/stage/plugin.js.rej

@@ -0,0 +1,8 @@
+diff a/src/config/stage/plugin.js b/src/config/stage/plugin.js	(rejected hunks)
+@@ -6,5 +6 @@ import linCmsUi from '@/plugin/lin-cms-ui/stage-config'
+-const pluginsConfig = [
+-  chart,
+-  custom,
+-  linCmsUi,
+-]
++const pluginsConfig = [chart, custom, linCmsUi]

src/lin/plugin/axios.js

@@ -1,6 +1,9 @@
-// ajax 封装插件, 使用 axios
-import Vue from 'vue'
+/**
+ * 封装 axios
+ */
 import axios from 'axios'
+import { Message } from 'element-ui'
+
 import store from '@/store'
 import Config from '@/config'
 import autoJump from '@/lin/util/auto-jump'
@@ -151,57 +154,24 @@ _axios.interceptors.response.use(
         }
       }
 
-      Vue.prototype.$message({
-        message,
-        type: 'error',
-      })
+      Message.error(message)
       reject()
     })
   },
   error => {
     if (!error.response) {
-      Vue.prototype.$notify({
-        title: 'Network Error',
-        dangerouslyUseHTMLString: true,
-        message: '<strong class="my-notify">请检查 API 是否异常</strong>',
-      })
+      Message.error('请检查 API 是否异常')
       console.log('error', error)
     }
 
     // 判断请求超时
     if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
-      Vue.prototype.$message({
-        type: 'warning',
-        message: '请求超时',
-      })
+      Message.warning('请求超时')
     }
     return Promise.reject(error)
   },
 )
 
-// eslint-disable-next-line
-Plugin.install = function(Vue, options) {
-  // eslint-disable-next-line
-  Vue.axios = _axios
-  window.axios = _axios
-  Object.defineProperties(Vue.prototype, {
-    axios: {
-      get() {
-        return _axios
-      },
-    },
-    $axios: {
-      get() {
-        return _axios
-      },
-    },
-  })
-}
-
-if (!Vue.axios) {
-  Vue.use(Plugin)
-}
-
 // 导出常用函数
 
 /**

src/view/center/center.vue

@@ -38,7 +38,7 @@
               label-position="left"
               ref="form"
               label-width="90px"
-              @submit.native.prevent
+              @submit.prevent
             >
               <el-form-item label="原始密码" prop="old_password">
                 <el-input type="password" v-model="form.old_password" autocomplete="off"></el-input>
@@ -61,7 +61,7 @@
     <!-- 修改头像 -->
     <el-dialog
       title="裁剪"
-      :visible.sync="cropVisible"
+      v-model:visible="cropVisible"
       width="300px"
       :append-to-body="true"
       :close-on-click-modal="false"
@@ -88,10 +88,12 @@
         </div>
         <div style="margin-top: 1em;">通过鼠标滚轮调节头像大小</div>
       </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cropVisible = false" size="small">取 消</el-button>
-        <el-button type="primary" @click="handleCrop" size="small">确 定</el-button>
-      </div>
+      <template v-solt:footer>
+        <div class="dialog-footer">
+          <el-button @click="cropVisible = false" size="small">取 消</el-button>
+          <el-button type="primary" @click="handleCrop" size="small">确 定</el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -101,6 +103,7 @@ import { mapActions, mapGetters } from 'vuex'
 import Vue from 'vue'
 import Croppa from 'vue-croppa'
 import User from '@/lin/model/user'
+import axios, { post, put } from '@/lin/plugin/axios'
 import 'vue-croppa/dist/vue-croppa.css'
 import defaultAvatar from '@/assets/image/user/user.png'
 
@@ -240,12 +243,8 @@ export default {
         type: 'image/jpeg',
       })
 
-      return this.$axios({
-        method: 'post',
-        url: '/cms/file',
-        data: {
-          file,
-        },
+      return post('cms/file', {
+        file,
       }).then(res => {
         // 清空输入框
         this.clearFileInput(this.$refs.avatarInput)
@@ -257,12 +256,8 @@ export default {
         // if (res.code === 10110) {
         //   throw new Error('文件体积过大')
         // }
-        return this.$axios({
-          method: 'put',
-          url: '/cms/user',
-          data: {
-            avatar: res[0].path,
-          },
+        return put('/cms/user', {
+          avatar: res[0].path,
         })
           .then(putRes => {
             // eslint-disable-line
@@ -289,7 +284,7 @@ export default {
       if (this.nickname) {
         const { user } = this.$store.state
         if (this.nickname !== user.nickname && this.nickname !== '佚名') {
-          this.$axios({
+          axios({
             method: 'put',
             url: '/cms/user',
             data: {