提交

src/api/system/config.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import uploadFile from '@/utils/uploadFile'
 
 // 查询参数列表
 export function listConfig(query) {
@@ -71,3 +72,11 @@ export function refreshCache() {
   })
 }
 
+export function updateFile(file) {
+  return uploadFile({
+    url: '/system/oss/upload',
+    method: 'post',
+    data:file
+  })
+}
+

src/utils/uploadFile.js

@@ -0,0 +1,148 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from '@/plugins/cache'
+import { saveAs } from 'file-saver'
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'multipart/form-data;charset=utf-8'
+// 对应国际化资源文件后缀
+axios.defaults.headers['Content-Language'] = 'zh_CN'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API,
+  // 超时
+  timeout: 360000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  // 是否需要防止数据重复提交
+  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      const s_url = sessionObj.url;                  // 请求地址
+      const s_data = sessionObj.data;                // 请求数据
+      const s_time = sessionObj.time;                // 请求时间
+      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+        const message = '数据正在处理，请勿重复提交';
+        console.warn(`[${s_url}]: ` + message)
+        return Promise.reject(new Error(message))
+      } else {
+        cache.session.setJSON('sessionObj', requestObj)
+      }
+    }
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // 二进制数据则直接返回
+    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
+      return res.data
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+          isRelogin.show = false;
+          store.dispatch('LogOut').then(() => {
+            location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
+          })
+      }).catch(() => {
+        isRelogin.show = false;
+      });
+    }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    } else if (code === 500) {
+      Message({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      Message({ message: msg, type: 'warning' })
+      return Promise.reject('error')
+    } else if (code !== 200) {
+      Notification.error({ title: msg })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  }
+)
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  return service.post(url, params, {
+    transformRequest: [(params) => { return tansParams(params) }],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob',
+    ...config
+  }).then(async (data) => {
+    const isBlob = blobValidate(data);
+    if (isBlob) {
+      const blob = new Blob([data])
+      saveAs(blob, filename)
+    } else {
+      const resText = await data.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+      Message.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r) => {
+    console.error(r)
+    Message.error('下载文件出现错误，请联系管理员！')
+    downloadLoadingInstance.close();
+  })
+}
+
+export default service

src/views/system/config/index.vue

@@ -11,6 +11,8 @@
     @refresh-change="getList"
     @search-change="getList"
     @search-reset="handleQuery"
+    :upload-before="uploadBefore"
+    :upload-after="uploadAfter"
   >
     <template slot="menuLeft">
       <el-button type="primary"
@@ -42,12 +44,16 @@
 </template>
 
 <script>
-import { listConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+import { listConfig, delConfig, addConfig, updateConfig, refreshCache,updateFile } from "@/api/system/config";
+import { getToken } from '@/utils/auth'
 export default {
   name: "Config",
   dicts: ['sys_yes_no'],
   data() {
     return {
+      uploadAction: 'http://example.com/upload', // 上传的API地址
+      uploadHeaders: { Authorization: 'Bearer '+ getToken() }, // 如果需要的话，可以设置上传的请求头
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -106,8 +112,12 @@ export default {
           label: '系统内置',
           prop: 'configType',
           type:'select',
-          dicUrl: process.env.VUE_APP_BASE_API+`/system/dict/data/type/sys_yes_no`,//数据字典接口
-          props: {//数据字典返回项解析
+          dicUrl:process.env.VUE_APP_BASE_API+`/system/dict/data/type/sys_yes_no`,
+          dicHeaders:{ Authorization: 'Bearer '+ getToken() },
+          dicFormatter:(res)=>{
+            return res.data;
+          },
+          props: {
             label: 'dictLabel',
             value: 'dictValue'
           },
@@ -136,6 +146,11 @@ export default {
             listType: 'picture-card',
             type: 'upload',
             span: 24,
+            propsHttp: {
+              res: 'data'
+            },
+            action:process.env.VUE_APP_BASE_API+`/system/oss/upload`,
+            headers:{ Authorization: 'Bearer '+ getToken() }
           },
         ]
       },
@@ -215,6 +230,14 @@ export default {
       refreshCache().then(() => {
         this.$modal.msgSuccess("刷新成功");
       });
+    },
+    /** 上传前的回调 */
+    uploadBefore (file, done, loading, column) {
+      /** 处理上传前的校验等相关问题 */
+    },
+    /** 上传后的回调 */
+    uploadAfter (res, done, loading, column) {
+      /** 处理上传后的显示及返回参数集合放入问题 */
     }
   }
 };