axios，post请求，同一接口不能请求两次，防抖函数的封装，将部分列表接口的请求改为get

CallCenterWeb.UI/RMYY/src/api/systemSetup/roleSetting/orderTypeManage.js

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 export function getOrderTypeLists(params) {
   return request({
     url: 'GongDanType/GetList',
-    method: 'post',
+    method: 'get',
     params
   })
 }

CallCenterWeb.UI/RMYY/src/api/trafficData/trafficData.js

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 export function getCallRecords(params) {
   return request({
     url: 'Callrecords/GetList',
-    method: 'post',
+    method: 'get',
     params
   })
 }
@@ -32,4 +32,4 @@ export function getUpdateCallRecord(params) {
     method: 'post',
     params
   })
-}
+}

CallCenterWeb.UI/RMYY/src/utils/index.js

@@ -12,15 +12,15 @@ export function getNowDateTime() {
   myDate.getYear() // 获取当前年份(2位)
   const YY = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
   let MM = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
-  MM = MM > 9 ? MM : ('0' + MM)
+  MM = MM > 9 ? MM : '0' + MM
   let DD = myDate.getDate() // 获取当前日(1-31)
-  DD = DD > 9 ? DD : ('0' + DD)
+  DD = DD > 9 ? DD : '0' + DD
   let hh = myDate.getHours()
-  hh = hh > 9 ? hh : ('0' + hh)
+  hh = hh > 9 ? hh : '0' + hh
   let mm = myDate.getMinutes()
-  mm = mm > 9 ? mm : ('0' + mm)
+  mm = mm > 9 ? mm : '0' + mm
   let ss = myDate.getSeconds()
-  ss = ss > 9 ? ss : ('0' + ss)
+  ss = ss > 9 ? ss : '0' + ss
   return YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
 }
 
@@ -32,9 +32,9 @@ export function getNowDate() {
   myDate.getYear() // 获取当前年份(2位)
   const YY = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
   let MM = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
-  MM = MM > 9 ? MM : ('0' + MM)
+  MM = MM > 9 ? MM : '0' + MM
   let DD = myDate.getDate() // 获取当前日(1-31)
-  DD = DD > 9 ? DD : ('0' + DD)
+  DD = DD > 9 ? DD : '0' + DD
   return YY + '-' + MM + '-' + DD
 }
 
@@ -48,9 +48,9 @@ export function getPreDate(pdate = 3600 * 1000 * 24 * 30) {
   start.getYear() // 获取当前年份(2位)
   const YY = start.getFullYear() // 获取完整的年份(4位,1970-????)
   let MM = start.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
-  MM = MM > 9 ? MM : ('0' + MM)
+  MM = MM > 9 ? MM : '0' + MM
   let DD = start.getDate() // 获取当前日(1-31)
-  DD = DD > 9 ? DD : ('0' + DD)
+  DD = DD > 9 ? DD : '0' + DD
   return YY + '-' + MM + '-' + DD
 }
 
@@ -62,9 +62,9 @@ export function getFirstDayInCurrentMonth() {
   myDate.getYear() // 获取当前年份(2位)
   const YY = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
   let MM = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
-  MM = MM > 9 ? MM : ('0' + MM)
+  MM = MM > 9 ? MM : '0' + MM
   let DD = myDate.getDate() // 获取当前日(1-31)
-  DD = DD > 9 ? DD : ('0' + DD)
+  DD = DD > 9 ? DD : '0' + DD
   return YY + '-' + MM + '-01'
 }
 /**
@@ -73,14 +73,20 @@ export function getFirstDayInCurrentMonth() {
 export function getLastDay(year, month) {
   var order_month = month
   var new_year = year // 取当前的年份
-  var new_month = month++// 取下一个月的第一天，方便计算（最后一天不固定）
+  var new_month = month++ // 取下一个月的第一天，方便计算（最后一天不固定）
   if (month > 12) {
     new_month -= 12 // 月份减
     new_year++ // 年份增
   }
   var new_date = new Date(new_year, new_month, 1) // 取当年当月中的第一天
   console.log(month)
-  return year + '-' + order_month + '-' + (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate()// 获取当月最后一天日期
+  return (
+    year +
+    '-' +
+    order_month +
+    '-' +
+    new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate()
+  ) // 获取当月最后一天日期
 }
 /**
  * 超期变红
@@ -89,7 +95,12 @@ export function getLastDay(year, month) {
  */
 export function endtimeFilter(status) {
   const d = status.replace(/-/g, '/')
-  let curDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
+  let curDate =
+    new Date().getFullYear() +
+    '-' +
+    (new Date().getMonth() + 1) +
+    '-' +
+    new Date().getDate()
   curDate = curDate.replace(/-/g, '/')
   let str = ''
   if (Date.parse(d) >= Date.parse(curDate)) {
@@ -114,11 +125,16 @@ export function timestampToTime0(timestamp) {
   }
   const date = new Date(timestamp)
   const Y = date.getFullYear() + '-'
-  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
-  const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
-  const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
-  const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
-  const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
+  const M =
+    (date.getMonth() + 1 < 10
+      ? '0' + (date.getMonth() + 1)
+      : date.getMonth() + 1) + '-'
+  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
+  const h =
+    (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
+  const m =
+    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
+  const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return Y + M + D + h + m + s
 }
 
@@ -149,7 +165,16 @@ export function timestampToTime(time, cFormat) {
   }
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
     let value = formatObj[key]
-    if (key === 'a') return ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'][value - 1]
+    if (key === 'a')
+      return [
+        '星期一',
+        '星期二',
+        '星期三',
+        '星期四',
+        '星期五',
+        '星期六',
+        '星期日'
+      ][value - 1]
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
@@ -164,12 +189,12 @@ export function timestampToTime(time, cFormat) {
 export function secondToDuring(ss) {
   let days = parseInt(ss / (60 * 60 * 24))
   let hours = parseInt((ss % (60 * 60 * 24)) / (60 * 60))
-  let minutes = parseInt((ss % (60 * 60)) / (60))
+  let minutes = parseInt((ss % (60 * 60)) / 60)
   let seconds = ss % 60
-  days = days > 0 ? (days + '天') : ''
-  hours = hours > 0 ? (hours + '小时') : ''
-  minutes = minutes > 0 ? (minutes + '分') : ''
-  seconds = seconds >= 0 ? (seconds + '秒') : ''
+  days = days > 0 ? days + '天' : ''
+  hours = hours > 0 ? hours + '小时' : ''
+  minutes = minutes > 0 ? minutes + '分' : ''
+  seconds = seconds >= 0 ? seconds + '秒' : ''
   return days + hours + minutes + seconds
 }
 
@@ -197,7 +222,8 @@ export function formatTime(time, option) {
 
   if (diff < 30) {
     return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
+  } else if (diff < 3600) {
+    // less 1 hour
     return Math.ceil(diff / 60) + '分钟前'
   } else if (diff < 3600 * 24) {
     return Math.ceil(diff / 3600) + '小时前'
@@ -207,39 +233,50 @@ export function formatTime(time, option) {
   if (option) {
     return formatTime(time, option)
   } else {
-    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
   }
 }
 
 // 格式化 日期选择器的 带快捷选项
 export const pickerOptions = {
-  shortcuts: [{
-    text: '最近一周',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '最近一个月',
-    onClick(picker) {
-      const start = new Date()
-      const end = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '最近三个月',
-    onClick(picker) {
-      const start = new Date()
-      const end = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-      picker.$emit('pick', [start, end])
+  shortcuts: [
+    {
+      text: '最近一周',
+      onClick(picker) {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: '最近一个月',
+      onClick(picker) {
+        const start = new Date()
+        const end = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        picker.$emit('pick', [start, end])
+      }
+    },
+    {
+      text: '最近三个月',
+      onClick(picker) {
+        const start = new Date()
+        const end = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        picker.$emit('pick', [start, end])
+      }
     }
-  }
   ]
 }
 
@@ -274,10 +311,20 @@ export const filterContent = {
   },
   // 原样式输出内容
   content(con) {
-    if (con === 'null' || con === 'undefined' || con === null || con === undefined || con === '') {
+    if (
+      con === 'null' ||
+      con === 'undefined' ||
+      con === null ||
+      con === undefined ||
+      con === ''
+    ) {
       con = '暂无内容'
     } else {
-      con = con.replace(/[ ]/g, '&nbsp;').replace(/\ +/g, '&nbsp;').replace(/\r\n/g, '<br />').replace(/\n/g, '<br />')
+      con = con
+        .replace(/[ ]/g, '&nbsp;')
+        .replace(/\ +/g, '&nbsp;')
+        .replace(/\r\n/g, '<br />')
+        .replace(/\n/g, '<br />')
     }
     return con
   }
@@ -295,8 +342,8 @@ export function formatterContent(strVal) {
 // GUID 的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的 x 是 0-9 或 a-f 范围内的一个32位十六进制数
 export function guid() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    const r = Math.random() * 16 | 0
-    const v = c === 'x' ? r : (r & 0x3 | 0x8)
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
     return v.toString(16)
   })
 }
@@ -326,58 +373,70 @@ export function uniqueObjArray(oldArr, attr) {
 /**
  * 防抖动 节流
  */
-// scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发,
-// 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。
-// 针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。
-export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
-  const later = function() {
-    // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+// 例子 debounceList = debounce(getList, 5000)先声明
+// 后debounceList()调用，每个页面声明一次即可，调用可多次
+export function debounce(fn, delay, immediate = false, resultCallback) {
+  // 1.定义一个定时器, 保存上一次的定时器
+  let timer = null
+  let isInvoke = false
 
-    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
-    if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
-    } else {
-      timeout = null
-      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-      if (!immediate) {
-        result = func.apply(context, args)
-        if (!timeout) context = args = null
+  // 2.真正执行的函数
+  const _debounce = function(...args) {
+    return new Promise((resolve, reject) => {
+      // 取消上一次的定时器
+      if (timer) clearTimeout(timer)
+
+      // 判断是否需要立即执行
+      if (immediate && !isInvoke) {
+        const result = fn.apply(this, args)
+        if (resultCallback) resultCallback(result)
+        resolve(result)
+        isInvoke = true
+      } else {
+        // 延迟执行
+        timer = setTimeout(() => {
+          // 外部传入的真正要执行的函数
+          const result = fn.apply(this, args)
+          if (resultCallback) resultCallback(result)
+          resolve(result)
+          isInvoke = false
+          timer = null
+        }, delay)
       }
-    }
+    })
   }
-  return function(...args) {
-    context = this
-    timestamp = +new Date()
-    const callNow = immediate && !timeout
-    // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
-    if (callNow) {
-      result = func.apply(context, args)
-      context = args = null
-    }
-    return result
+
+  // 封装取消功能
+  _debounce.cancel = function() {
+    if (timer) clearTimeout(timer)
+    timer = null
+    isInvoke = false
   }
+
+  return _debounce
 }
 
 // 首字母转大写
 export function firstToUpper(str) {
-  return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
+  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
 }
 
 // 导出
 export function exportExcel(exporParams, getListExpt) {
   return new Promise(resolve => {
     getListExpt(exporParams).then(response => {
-      const headerDispostion = response.headers['content-disposition'] || response.headers['Content-Disposition'] || ''
+      const headerDispostion =
+        response.headers['content-disposition'] ||
+        response.headers['Content-Disposition'] ||
+        ''
       if (headerDispostion) {
         const content = response.data
         const blob = new Blob([content])
         // let fileName = '报表数据.xls'
         let fileName = headerDispostion.split(';')[1].split('=')[1]
         var explorer = navigator.userAgent
-        if (explorer.indexOf('MSIE') >= 0 || explorer.indexOf('Chrome') >= 0) { // IE和google浏览器
+        if (explorer.indexOf('MSIE') >= 0 || explorer.indexOf('Chrome') >= 0) {
+          // IE和google浏览器
           fileName = decodeURIComponent(fileName)
         } else {
           fileName = decodeURI(escape(fileName))
@@ -405,10 +464,10 @@ export function exportExcel(exporParams, getListExpt) {
 }
 
 /**
-     * 将一维的扁平数组转换为多层级对象
-     * @param  {[type]} list 一维数组，数组中每一个元素需包含id和pid两个属性
-     * @return {[type]} tree 多层级树状结构
-     */
+ * 将一维的扁平数组转换为多层级对象
+ * @param  {[type]} list 一维数组，数组中每一个元素需包含id和pid两个属性
+ * @return {[type]} tree 多层级树状结构
+ */
 export function buildTree(list) {
   const temp = {}
   const tree = {}
@@ -492,4 +551,3 @@ export function filterMenuDatas(menudatas) {
   })
   return accessedRouters
 }
-

CallCenterWeb.UI/RMYY/src/utils/request.js

@@ -4,6 +4,40 @@ import { Message, MessageBox } from 'element-ui'
 import store from '../store'
 import { getToken } from '@/utils/auth'
 
+// 正在进行中的请求列表
+const reqList = []
+/**
+ * 阻止重复请求
+ * @param {array} reqList - 请求缓存列表
+ * @param {string} url - 当前请求地址
+ * @param {function} cancel - 请求中断函数
+ * @param {string} errorMessage - 请求中断时需要显示的错误信息
+ */
+const stopRepeatRequest = function(reqList, url, cancel, errorMessage) {
+  const errorMsg = errorMessage || ''
+  for (let i = 0; i < reqList.length; i++) {
+    if (reqList[i] === url) {
+      cancel(errorMsg)
+      return
+    }
+  }
+  reqList.push(url)
+}
+
+/**
+ * 允许某个请求可以继续进行
+ * @param {array} reqList 全部请求列表
+ * @param {string} url 请求地址
+ */
+const allowRequest = function(reqList, url) {
+  for (let i = 0; i < reqList.length; i++) {
+    if (reqList[i] === url) {
+      reqList.splice(i, 1)
+      break
+    }
+  }
+}
+
 // const baseURL = process.env.BASE_API
 // 创建axios实例
 const service = axios.create({
@@ -16,10 +50,12 @@ const service = axios.create({
   // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
   // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
   // 解决axios默认发送数据时，数据格式是Request Payload的问题
-  transformRequest: [function(data) {
-    // 对 data 进行任意转换处理
-    return qs.stringify(data)
-  }],
+  transformRequest: [
+    function(data) {
+      // 对 data 进行任意转换处理
+      return qs.stringify(data)
+    }
+  ],
 
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
   // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
@@ -28,30 +64,52 @@ const service = axios.create({
   // return qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'brackets'})  // 形式：ids[]=1&ids[]=2&ids[]=3
   // return qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'repeat'})  // 形式： ids=1&ids=2&id=3
   paramsSerializer: function(params) {
-      return qs.stringify(params, {arrayFormat: 'repeat'})    // 形式：ids=1&ids=2&id=3
-  },
-
+    return qs.stringify(params, { arrayFormat: 'repeat' }) // 形式：ids=1&ids=2&id=3
+  }
 })
 // request拦截器
-service.interceptors.request.use(config => {
-  if (store.getters.token) {
-    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+service.interceptors.request.use(
+  config => {
+    if (store.getters.token) {
+      config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    let cancel
+    if (config.method === 'post') {
+      // 设置cancelToken对象
+      config.cancelToken = new axios.CancelToken(function(c) {
+        cancel = c
+      })
+      // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
+      stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`)
+      // stopRepeatRequest(reqList, config.url, cancel, `请求被中断`)
+    }
+
+    return config
+  },
+  error => {
+    // Do something with request error
+    Promise.reject(error)
   }
-  return config
-}, error => {
-  // Do something with request error
-  console.log(error) // for debug
-  Promise.reject(error)
-})
+)
 
 // respone拦截器
 service.interceptors.response.use(
   response => {
     /**
-		* state为非"success"时抛错
-		*/
+     * state为非"success"时抛错
+     */
+    // 增加延迟，相同请求不得在短时间内重复发送
+    if (response.config.method === 'post') {
+      setTimeout(() => {
+        const replaceList = response.config.url.split('/')
+        const newUrl =
+          replaceList[replaceList.length - 2] +
+          '/' +
+          replaceList[replaceList.length - 1]
+        allowRequest(reqList, newUrl)
+      }, 1000)
+    }
     const res = response.data
-
     if (res.state && res.state.toLowerCase() !== 'success') {
       Message({
         message: res.message,
@@ -59,12 +117,20 @@ service.interceptors.response.use(
         duration: 5 * 1000
       })
       // 50008:非法的token; 50012:其他客户端登录了;  "notoken":Token 过期了
-      if (res.state.toLowerCase() === 50008 || res.state.toLowerCase() === 50012 || res.state.toLowerCase() === 'notoken') {
-        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+      if (
+        res.state.toLowerCase() === 50008 ||
+        res.state.toLowerCase() === 50012 ||
+        res.state.toLowerCase() === 'notoken'
+      ) {
+        MessageBox.confirm(
+          '你已被登出，可以取消继续留在该页面，或者重新登录',
+          '确定登出',
+          {
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
           store.dispatch('FedLogOut').then(() => {
             location.reload() // 为了重新实例化vue-router对象 避免bug
           })
@@ -80,9 +146,10 @@ service.interceptors.response.use(
   },
   error => {
     console.log('err:' + error) // for debug
-    console.log(error) // for debug
     if (error && error.response) {
-      switch (error.response.status) { // 跨域存在获取不到状态码的情况
+      switch (
+        error.response.status // 跨域存在获取不到状态码的情况
+      ) {
         case 400:
           error.message = `请求错误(400):${error.response.config.url}`
           break
@@ -134,10 +201,11 @@ service.interceptors.response.use(
           error.message = `连接错误:${error.response.status}`
           break
       }
+    } else if (error.message.indexOf('请求被中断') !== -1) {
+      error.message = '请勿重复请求!'
     } else {
       error.message = '网络出现问题，请稍后重试!'
     }
-
     Message({
       message: error.message,
       type: 'error',