hb_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} options 传入一个配置项，根据传入的配置项导出对应的 excel 表格，其中：
   * @param {Array} tTitle 表格的标题，置空则为默认以日期为标题的表格
   * @param {Array} tHeader 表格的表头，必传
   * @param {Array} tBody 表格需要展示的字段名，必传
   * @param {Array} tMerges 表格标题需要合并的单元格，置空则为默认 A1 格为表格标题显示区域
   * @param {Array} tData 表格渲染所用的数据源，必传
   * @param {Boolean} autoWidth 表是否根据表格内容自动撑开列宽，置空则为默认 true 
   * @param {String} exportName 所导出的表格文件名，置空则以时间戳为文件名称进行导出
   */
  exportExcelForJson (options) {
    const {
      export_json_to_excel
    } = __getExport2Excel();

    let title = options.tTitle;

    if (!title || !title.length) {
      title = []
      options.tBody.forEach((ele, index) => {
        if (!index) {
          title.push(new Date().formatDate("yyyy-MM-dd") + '导出的表格');
        } else {
          title.push("");
        }
      });
    }

    let header = options.tHeader;
    let data = options.tData.map(data => options.tBody.map(key => data[key]));
    let merges = options.tMerges || [];
    let filename = options.exportName || new Date().getTime();
    let bookType = "xlsx";
    let autoWidth = (options.autoWidth == true || options.autoWidth == false) ? options.autoWidth : true;

    data.map(item => {
      item.map((i, index) => {
        if (!i) item[index] = "";
      });
    });

    export_json_to_excel({
      title,
      header,
      data,
      merges,
      filename,
      bookType,
      autoWidth
    });
  },

  /**
   * 颜色进制转换  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+)?$/
  }
};