fix Bug or add docs

src/utils/domUtils.ts

@@ -0,0 +1,165 @@
+import { upperFirst } from 'lodash-es';
+
+export interface ViewportOffsetResult {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  rightIncludeBody: number;
+  bottomIncludeBody: number;
+}
+
+export function getBoundingClientRect(element: Element): DOMRect | number {
+  if (!element || !element.getBoundingClientRect) {
+    return 0;
+  }
+  return element.getBoundingClientRect();
+}
+
+function trim(string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ' ' + el.className + ' ';
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+/**
+ * Get the left and top offset of the current element
+ * left: the distance between the leftmost element and the left side of the document
+ * top: the distance from the top of the element to the top of the document
+ * right: the distance from the far right of the element to the right of the document
+ * bottom: the distance from the bottom of the element to the bottom of the document
+ * rightIncludeBody: the distance between the leftmost element and the right side of the document
+ * bottomIncludeBody: the distance from the bottom of the element to the bottom of the document
+ *
+ * @description:
+ */
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement;
+
+  const docScrollLeft = doc.scrollLeft;
+  const docScrollTop = doc.scrollTop;
+  const docClientLeft = doc.clientLeft;
+  const docClientTop = doc.clientTop;
+
+  const pageXOffset = window.pageXOffset;
+  const pageYOffset = window.pageYOffset;
+
+  const box = getBoundingClientRect(element);
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
+  const offsetLeft = retLeft + pageXOffset;
+  const offsetTop = rectTop + pageYOffset;
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  const clientWidth = window.document.documentElement.clientWidth;
+  const clientHeight = window.document.documentElement.clientHeight;
+  return {
+    left: left,
+    top: top,
+    right: clientWidth - rectWidth - left,
+    bottom: clientHeight - rectHeight - top,
+    rightIncludeBody: clientWidth - left,
+    bottomIncludeBody: clientHeight - top,
+  };
+}
+
+export function hackCss(attr: string, value: string) {
+  const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT'];
+
+  const styleObj: any = {};
+  prefix.forEach((item) => {
+    styleObj[`${item}${upperFirst(attr)}`] = value;
+  });
+  return {
+    ...styleObj,
+    [attr]: value,
+  };
+}
+
+/* istanbul ignore next */
+export function on(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject
+): void {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function off(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: Fn
+): void {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function once(el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      fn.apply(this, args);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+}

src/utils/http/axios/checkStatus.ts

@@ -1,5 +1,4 @@
-export function checkStatus(status: number, msg: string): void {
-  const message = window['$message'];
+export function checkStatus(status: number, msg: string, message: any): void {
   switch (status) {
     case 400:
       message.error(`${msg}`);

src/utils/http/axios/index.ts

@@ -1,5 +1,4 @@
 // axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
-
 import { VAxios } from './Axios';
 import { AxiosTransform } from './axiosTransform';
 import axios, { AxiosResponse } from 'axios';
@@ -18,8 +17,6 @@ import { useUserStoreWidthOut } from '@/store/modules/user';
 
 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix || '';
-// @ts-ignore
-const { $message: Message, $dialog: Modal } = window;
 
 import router from '@/router';
 import { storage } from '@/utils/Storage';
@@ -32,18 +29,35 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据
    */
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { $message: Message, $dialog: Modal } = window;
     const {
-      isTransformRequestResult,
       isShowMessage = true,
       isShowErrorMessage,
       isShowSuccessMessage,
       successMessageText,
       errorMessageText,
+      isTransformResponse,
+      isReturnNativeResponse,
     } = options;
 
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+
     const reject = Promise.reject;
 
     const { data } = res;
+
+    if (!data) {
+      // return '[HTTP] Request has no return value';
+      return reject(data);
+    }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
     const { code, result, message } = data;
     // 请求成功
@@ -58,19 +72,14 @@ const transform: AxiosTransform = {
         Message.error(message || errorMessageText || '操作失败！');
       } else if (!hasSuccess && options.errorMessageMode === 'modal') {
         // errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
-        Modal.confirm({ title: '错误提示', content: message });
+        Modal.info({
+          title: '提示',
+          content: message,
+          positiveText: '确定',
+          onPositiveClick: () => {},
+        });
       }
     }
-    // 不进行任何处理，直接返回
-    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
-    if (!isTransformRequestResult) {
-      return res.data;
-    }
-
-    if (!data) {
-      // return '[HTTP] Request has no return value';
-      return reject(data);
-    }
 
     // 接口请求成功，直接返回结果
     if (code === ResultEnum.SUCCESS) {
@@ -94,19 +103,21 @@ const transform: AxiosTransform = {
       if (router.currentRoute.value.name == 'login') return;
       // 到登录页
       const timeoutMsg = '登录超时,请重新登录!';
-      Modal.destroyAll();
       Modal.warning({
         title: '提示',
-        content: '登录身份已失效,请重新登录!',
-        onOk: () => {
+        content: '登录身份已失效，请重新登录!',
+        positiveText: '确定',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          storage.clear();
           router.replace({
             name: 'login',
             query: {
               redirect: router.currentRoute.value.fullPath,
             },
           });
-          storage.clear();
         },
+        onNegativeClick: () => {},
       });
       return reject(new Error(timeoutMsg));
     }
@@ -175,9 +186,11 @@ const transform: AxiosTransform = {
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
+    const { $message: Message, $dialog: Modal } = window;
     const { response, code, message } = error || {};
+    // TODO 此处要根据后端接口返回格式修改
     const msg: string =
-      response && response.data && response.data.error ? response.data.error.message : '';
+      response && response.data && response.data.message ? response.data.message : '';
     const err: string = error.toString();
     try {
       if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
@@ -185,9 +198,11 @@ const transform: AxiosTransform = {
         return;
       }
       if (err && err.includes('Network Error')) {
-        Modal.confirm({
+        Modal.info({
           title: '网络异常',
           content: '请检查您的网络连接是否正常!',
+          positiveText: '确定',
+          onPositiveClick: () => {},
         });
         return;
       }
@@ -197,7 +212,7 @@ const transform: AxiosTransform = {
     // 请求是否被取消
     const isCancel = axios.isCancel(error);
     if (!isCancel) {
-      checkStatus(error.response && error.response.status, msg);
+      checkStatus(error.response && error.response.status, msg, Message);
     } else {
       console.warn(error, '请求被取消！');
     }
@@ -206,20 +221,20 @@ const transform: AxiosTransform = {
 };
 
 const Axios = new VAxios({
-  timeout: 15 * 1000,
-  // 基础接口地址
-  // baseURL: globSetting.apiUrl,
-  // 接口可能会有通用的地址部分，可以统一抽取出来
-  // prefixUrl: prefix,
-  headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+  timeout: 10 * 1000,
+  // 接口前缀
+  prefixUrl: urlPrefix,
+  headers: { 'Content-Type': ContentTypeEnum.JSON },
   // 数据处理方式
   transform,
   // 配置项，下面的选项都可以在独立的接口请求中覆盖
   requestOptions: {
     // 默认将prefix 添加到url
     joinPrefix: true,
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    isReturnNativeResponse: false,
     // 需要对返回数据进行处理
-    isTransformRequestResult: true,
+    isTransformResponse: true,
     // post请求的时候添加参数到url
     joinParamsToUrl: false,
     // 格式化提交参数时间

src/utils/http/axios/types.ts

@@ -13,7 +13,7 @@ export interface RequestOptions {
   // 格式化请求参数时间
   formatDate?: boolean;
   //  是否处理请求结果
-  isTransformRequestResult?: boolean;
+  isTransformResponse?: boolean;
   // 是否显示提示信息
   isShowMessage?: boolean;
   // 是否解析成JSON
@@ -34,6 +34,10 @@ export interface RequestOptions {
   errorMessageMode?: 'none' | 'modal';
   // 是否添加时间戳
   joinTime?: boolean;
+  // 不进行任何处理，直接返回
+  isTransformResponse?: boolean;
+  // 是否返回原生响应头
+  isReturnNativeResponse?: boolean;
 }
 
 export interface Result<T = any> {