sis_zhfx/src/tools/basicTool.js

let loadingStatus = null;

import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';

export default {
  /**
   * 页面顶部出现消息提示
   * @param {Object} options 传入一个对象为配置项，其中：
   * @param {Boolean} showClose 是否显示可手动关闭的 x 于提示框右侧，默认 false
   * @param {Boolean} center 消息提示内容是否居中，默认 true
   * @param {String} msg 消息提示的内容
   * @param {String} type 消息提示的类型，可选值为 ['success(成功)','warning(警告)','error(错误)',或者直接传入空字符串]，默认 error
   */
  showMsg (options) {
    ElMessage({
      showClose: (options.showClose == true || options.showClose == false) ? options.showClose : false,
      center: (options.center == true || options.center == false) ? options.center : true,
      message: options.msg,
      type: (options.type || options.type === '') ? options.type : 'error'
    });
  },

  /**
   * 显示防穿透点击 loading 蒙版
   * @param {Objectr} opt 传入一个对象为配置项，其中：
   * @param {String} target 此蒙版需要绑定的 DOM 标签 ID 或者 CLASS 或者 TAGNAME，默认绑在 body 上
   * @param {Boolean} body 是否插入蒙版至 boyd 上，默认 true
   * @param {Boolean} fullscreen 蒙版是否全屏蒙住整个 html 页面，默认 true
   * @param {Boolean} lock 蒙版出现时，是否锁定屏幕滚动，默认 false
   * @param {String} text 蒙版上显示的提示文本
   * @param {String} background 蒙版的背景颜色，写死 50% 透明度的纯黑色
   */
  showLoading (opt) {
    let options = opt || {};
    loadingStatus = ElLoading.service({
      target: options.target || 'body',
      body: (options.body == true || options.body == false) ? options.body : false,
      fullscreen: (options.fullscreen == true || options.fullscreen == false) ? options.fullscreen : true,
      lock: (options.lock == true || options.lock == false) ? options.lock : false,
      text: options.text || '请稍等...',
      background: 'rgba(0,0,0,.5)',
    });
  },

  /**
   * 获取标签上的自定义属性
   * @param {any} node 传入 字符串 或 标准DOM对象 或 jQuery DOM对象 ，函数自动判断传入的类型并返回其 dataset 属性。
   */
  getCurrentData (node) {
    // 如果传入的是 jQuery 对象
    if (window.jQuery && node instanceof jQuery) {
      return node[0].dataset;
    } else {
      // 判断传入的是否是标准 DOM 对象
      let isDom = (typeof node === 'object') ?
        function (obj) {
          return obj instanceof HTMLElement;
        } :
        function (obj) {
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        };

      // 如果是标准 DOM 对象，输出 dataset
      if (isDom(node)) {
        return node.dataset;
      } else {
        // 如果是不是，则表示传入的是字符串，根据字符串取 DOM 后输出 dataset
        let dom = document.querySelector(node);
        return dom.dataset;
      }
    }
  },

  /**
   * 关闭loading
   */
  closeLoading () {
    loadingStatus.close();
  },

  /**
   * 深拷贝 json 数组
   * @param {Array} jsonArray 传入 Json 数组，返回一个指向新指针拷贝份数据
   */
  deepCopy (jsonArray) {
    return JSON.parse(JSON.stringify(jsonArray));
  },

  /**
   * 根据后端返回的 ID 遍历树形结构包装组件编辑用数据函数
   * @param {String} key 需要找到的 ID
   * @param {Array} treeData 树形 Array
   */
  getTreeDeepArr (key, treeData) {

    let arr = []; // 在递归时操作的数组
    let returnArr = []; // 存放结果的数组
    let depth = 0; // 定义全局层级

    // 定义递归函数
    function childrenEach (childrenData, depthN) {

      for (var j = 0; j < childrenData.length; j++) {

        depth = depthN; // 将执行的层级赋值 到 全局层级
        arr[depthN] = (childrenData[j].id);

        if (childrenData[j].id == key) {

          // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
          returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组
          break;

        } else {

          if (childrenData[j].children) {

            depth++;
            childrenEach(childrenData[j].children, depth);

          }

        }

      }

      return returnArr;

    }

    return childrenEach(treeData, depth);

  },

  /**
   * 获取数据的类型
   * @param {any} options 传入一个数据，返回其类型 (object, array, string, number等)
   */
  getType (options) {
    return Object.prototype.toString.call(options).slice(8, Object.prototype.toString.call(options).length - 1).toLowerCase();
  },

  /**
   * 控制页面滚动到指定位置
   * @param {Object} options 传入一个配置项，其中：
   * @param {String} el 需要滚动的 DOM 元素选择器，可以为 CLASS 或 ID
   * @param {Number} scrollTop 需要滚动到顶部的位置，数值越低滚动的越靠近顶部，默认 0
   * @param {Number} scrollLeft 需要滚动到顶部的位置，数值越低滚动的越靠近顶部，默认 0
   * @param {Number} speed 滚动到指定位置需要的时间 (动画时间)，默认 200
   * @param {Function} success 滚动执行完毕后的回调函数
   */
  scrollTo (options) {
    if (!options || !options.el) {
      this.showMsg({
        msg: 'scrollTo() 方法需要传入 el 属性'
      });
      return;
    }
    if ($(options.el)[0] && ($(options.el)[0].scrollHeight > (window.innerHeight || document.documentElement.clientHeight))) {
      $(options.el).animate({
        scrollTop: options.scrollTop || 0,
        scrollLeft: options.scrollLeft || 0,
      }, options.speed || 200, () => {
        options.success && options.success();
      });
    } else {
      options.success && options.success();
    }
  },

  /**
   * 导出 Json 为 excel 表格
   * @param {Object} tableData 用于规定表格表头和内容的 Object
   * @param {String} excelName 导出的文件名
   */
  exportExcel (tableData, excelName) {
    const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
    let tHeader = []; // 上面设置Excel的表格第一行的标题       
    let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值   

    const formatJson = function (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    };

    tableData.column.forEach(ele => {
      tHeader.push(ele.name);
      filterVal.push(ele.field);
    });

    const list = tableData.data; //把要导出的数据tableData存到list 
    const data = formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, (excelName || "导出的Excel")); // 最后一个是表名字
  },



  // JS 触发全屏功能
  requestFullscreen () {
    //全屏
    const docElm = document.documentElement;
    //W3C
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    }

    //FireFox
    else if (docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();
    }

    //Chrome等
    else if (docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen();
    }

    //IE11
    else if (docElm.msRequestFullscreen) {
      docElm.msRequestFullscreen();
    }
  },

  /**
   * 颜色进制转换  16 <--> 10 互转
   * @param {String} colorStr 传入一个颜色字符串， 16进制 或者 10进制 ，返回转换后的结果，例：传入 #1890ff ，返回 rgb(24, 144, 255)，反之亦然
   */
  replaceColor (colorStr) {
    if (!colorStr) return '';

    let colorString = colorStr.replace(/#|rgb|\(|\)|\|;|\s+/g, "");

    if (colorString.indexOf(",") === -1) {
      let color10 = [];
      for (let i = 0; i < colorString.length; i++) {
        if (!((i + 1) % 2)) {
          color10.push(parseInt((colorString[i - 1] + colorString[i]), 16));
        }
      }
      return "rgb(" + color10.toString() + ")";
    } else {
      let colorArray = colorString.split(',');
      let color16 = '';
      colorArray.forEach(ele => {
        color16 += (parseInt(ele).toString(16));
      });
      return "#" + color16;
    }
  },

  // 正则表达式
  regs: {
    // 是否为手机号
    isPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
    // 是否为合法 15 或 18 位身份证号
    isIdentityCard: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
    // 是否是邮箱
    isMail: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
    // 是否是数字
    isNumber: /^(-?\d+)(\.\d+)?$/
  },

  elCkeck: {
    isNumber (rule, value, callback) {
      if (value === '') {
        callback(new Error('该值不可为空'));
      } else if (!/^(-?\d+)(\.\d+)?$/.test(value)) {
        callback(new Error('输入有误，仅支持输入数字'));
      } else {
        callback();
      }
    }
  }
}