n20-common-lib 1.1.10

package/src/utils/axios.js

@@ -0,0 +1,180 @@
+import _axios from 'axios'
+import ElementUI from 'element-ui'
+import auth from './auth'
+const _Loading = ElementUI.Loading
+const _Message = ElementUI.Message
+
+/* 添加msg */
+function showMsg(msg, single = true) {
+  if (!single || !document.querySelector('xhr-msg-top')) {
+    _Message({
+      showClose: true,
+      message: msg,
+      type: 'error',
+      customClass: 'xhr-msg-top'
+    })
+  }
+}
+/* 添加loading */
+let loadingBox
+let loadingCount = 0
+function showLoading(opt) {
+  let loading = opt.loading
+  if (loading === true) {
+    if (loadingCount === 0 && !document.querySelector('xhr-loading-top')) {
+      loadingBox = _Loading.service({
+        lock: true,
+        text: '加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.3)',
+        customClass: 'xhr-loading-top'
+      })
+    }
+    loadingCount++
+  }
+}
+function closeLoading(opt) {
+  let loading = opt.loading
+  if (loading === true) {
+    loadingCount--
+    if (loadingCount === 0) {
+      if (loadingBox) loadingBox.close()
+    }
+  } else if (typeof loading === 'function') {
+    loading()
+  }
+}
+/* 请求防抖 */
+let debounceObj = {}
+
+const config = {
+  baseURL: process.env.VUE_APP_BASE_API || '',
+  crossDomain: true, // 允许跨域
+  // withCredentials: true, // 跨域携带cookie
+  timeout: 120000,
+  validateStatus(status) {
+    return status >= 200 && status < 500
+  }
+}
+const axios = _axios.create(config)
+
+axios.interceptors.request.use((opt) => {
+  opt.headers || (opt.headers = {})
+
+  let headers = {
+    Authorization: auth.getToken() ? 'Bearer ' + auth.getToken() : null,
+    timestamp: Date.now(),
+    OperationDesc: opt.OperationDesc ? encodeURI(opt.OperationDesc) : 'default'
+  }
+  Object.assign(opt.headers, headers)
+
+  return opt
+})
+
+axios.interceptors.response.use(
+  (res) => {
+    let status, msg
+    if (res.data) {
+      status = res.data.code || res.status
+    }
+    if (status === 200) {
+      return res
+    } else {
+      if (res.data) {
+        msg = res.data.msg || res.data.message
+      }
+      let noMsg = res.config.noMsg
+
+      if (status === 401 || msg.includes('401')) {
+        noMsg || showMsg('超时未操作，请重新登录！')
+        setTimeout(() => {
+          auth.removeToken()
+        }, 1000)
+      } else {
+        if (status >= 900) {
+          noMsg || showMsg(msg)
+        } else if (status === 400) {
+          noMsg || showMsg(msg)
+        } else if (msg.includes('400')) {
+          noMsg || showMsg('400，参数错误！')
+        } else if (msg.includes('404')) {
+          noMsg || showMsg('404，网络连接失败！')
+        } else if (msg.includes('500')) {
+          noMsg || showMsg('500，服务器链接失败！')
+        }
+
+        throw { code: status, msg: msg }
+      }
+    }
+  },
+  (err) => {
+    let status = err.status
+    let msg = err.message
+    let noMsg = err.config.noMsg
+
+    if (status === 'ECONNABORTED' && msg.includes('timeout')) {
+      noMsg || showMsg('请求超时')
+    } else if (status === 400) {
+      noMsg || showMsg(msg)
+    } else if (msg.includes('400')) {
+      noMsg || showMsg('400，参数错误！')
+    } else if (msg.includes('404')) {
+      noMsg || showMsg('404，网络连接失败！')
+    } else if (msg.includes('500')) {
+      noMsg || showMsg('500，服务器链接失败！')
+    } else {
+      noMsg || showMsg(msg)
+    }
+    throw { code: status, msg: msg }
+  }
+)
+
+function request(opt) {
+  if (debounceObj[opt.method + opt.url]) {
+    return debounceObj[opt.method + opt.url] // 短时间多次请求,均返回第一次请求结果
+  }
+  let loading = opt.loading === undefined ? true : opt.loading
+  showLoading({ loading })
+
+  let resPro = new Promise((resolve, reject) => {
+    axios
+      .request(opt)
+      .then((res) => {
+        if (opt.responseType !== 'blob' && typeof res.data === 'object' && res.data.data === undefined) {
+          res.data.data = {}
+        }
+        resolve(res.data)
+      })
+      .catch((error) => {
+        reject(error)
+      })
+  })
+
+  resPro.finally(() => {
+    delete debounceObj[opt.method + opt.url]
+
+    closeLoading({ loading })
+  })
+  debounceObj[opt.method + opt.url] = resPro
+  return resPro
+}
+
+// 自定义axios
+function customAxios(opt) {
+  return request(opt)
+}
+customAxios.request = request
+customAxios.get = function(url, params = {}, opt = {}) {
+  return request(Object.assign({ method: 'get', url, params }, opt))
+}
+customAxios.post = function(url, data = {}, opt = {}) {
+  return request(Object.assign({ method: 'post', url, data }, opt))
+}
+customAxios.put = function(url, data = {}, params = {}, opt = {}) {
+  return this.request(Object.assign({ method: 'put', url, data, params }, opt))
+}
+customAxios.delete = function(url, params = {}, opt = {}) {
+  return this.request(Object.assign({ method: 'delete', url, params }, opt))
+}
+
+export default customAxios

package/src/utils/print.js

@@ -0,0 +1,156 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+        styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+    // 包裹要打印的元素
+    let outerHTML = this.wrapperRefDom(this.dom).outerHTML
+    return outerHTML;
+  },
+  // 向父级元素循环，包裹当前需要打印的元素
+  // 防止根级别开头的 css 选择器不生效
+  wrapperRefDom: function (refDom) {
+    let prevDom = null
+    let currDom = refDom
+    // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
+    if (!this.isInBody(currDom)) return currDom
+
+    while (currDom) {
+      if (prevDom) {
+        let element = currDom.cloneNode(false)
+        element.appendChild(prevDom)
+        prevDom = element
+      } else {
+        prevDom = currDom.cloneNode(true)
+      }
+
+      currDom = currDom.parentElement
+    }
+
+    return prevDom
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+        f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function () {
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
+  isInBody: function (node) {
+    return (node === document.body) ? false : document.body.contains(node);
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+      function (obj) {
+        return obj instanceof HTMLElement;
+      } :
+      function (obj) {
+        return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+      }
+};
+export default Print;

package/src/utils/pushLink.js

@@ -0,0 +1,5 @@
+export default function pushLink(el) {
+  let href = el.currentTarget.getAttribute('href')
+  history.pushState('', '', href)
+  el.preventDefault()
+}

package/style/css/normalize.scss

@@ -0,0 +1,243 @@
+$--font-size-base: 14px !default;
+$--border-color-base: #dcdfe6 !default;
+
+body {
+  font-size: $--font-size-base;
+}
+li {
+  list-style: none;
+}
+iframe {
+  border: 0;
+  outline: none;
+}
+
+/* 菜单滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background-color: #d3d9e6;
+}
+
+::-webkit-scrollbar-track-piece {
+  width: 6px;
+}
+
+@mixin set-pm($m, $p) {
+  .p-a#{$m} {
+    padding: $p;
+  }
+
+  .p-t#{$m} {
+    padding-top: $p;
+  }
+
+  .p-b#{$m} {
+    padding-bottom: $p;
+  }
+
+  .p-l#{$m} {
+    padding-left: $p;
+  }
+
+  .p-r#{$m} {
+    padding-right: $p;
+  }
+
+  .m-a#{$m} {
+    margin: $p;
+  }
+
+  .m-t#{$m} {
+    margin-top: $p;
+  }
+
+  .m-b#{$m} {
+    margin-bottom: $p;
+  }
+
+  .m-l#{$m} {
+    margin-left: $p;
+  }
+
+  .m-r#{$m} {
+    margin-right: $p;
+  }
+}
+
+/* 内外边距 */
+@include set-pm('', 16px !important);
+@include set-pm('-xl', 32px !important);
+@include set-pm('-lg', 24px !important);
+@include set-pm('-m', 16px !important);
+@include set-pm('-s', 8px !important);
+@include set-pm('-0', 0 !important);
+
+/* 浮动布局 */
+.left,
+.float-left {
+  float: left;
+}
+
+.right,
+.float-right {
+  float: right;
+}
+
+.overflow {
+  height: auto;
+  overflow: hidden;
+}
+
+.overflow-clear {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+/* 行内块元素水平垂直对齐方式 */
+.b-center {
+  text-align: center;
+  & > * {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.b-vertical {
+  font-size: 0;
+  & > * {
+    vertical-align: middle;
+    display: inline-block;
+    font-size: 14px;
+  }
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 0px;
+    height: 100%;
+  }
+}
+
+/* 文字居中 */
+.text {
+  &-c {
+    text-align: center !important;
+  }
+  &-l {
+    text-align: left !important;
+  }
+  &-r {
+    text-align: right !important;
+  }
+  &-lr {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+}
+
+/* 弹性盒模型 */
+.flex {
+  &-box {
+    display: flex;
+  }
+  &-column {
+    display: flex;
+    flex-direction: column;
+  }
+  > * {
+    flex: none;
+  }
+  &-v {
+    align-items: center;
+  }
+  &-l {
+    justify-content: flex-start;
+  }
+  &-r {
+    justify-content: flex-start;
+  }
+  &-c {
+    justify-content: center;
+  }
+  &-lr {
+    justify-content: space-between;
+  }
+}
+
+.flex-item {
+  flex: auto;
+}
+@for $n from 0 to 10 {
+  .flex-#{$n} {
+    flex: $n $n auto;
+  }
+}
+
+/* 旋转图标90度 */
+.rotate90 {
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+/* 清除背景色 */
+.bg {
+  &-none {
+    background: none !important;
+  }
+}
+
+/* 边框 */
+.bd {
+  &-none {
+    border: none !important;
+  }
+  &-a {
+    border: 1px solid $--border-color-base;
+  }
+  &-t {
+    border-top: 1px solid $--border-color-base;
+  }
+  &-l {
+    border-left: 1px solid $--border-color-base;
+  }
+  &-r {
+    border-right: 1px solid $--border-color-base;
+  }
+  &-b {
+    border-bottom: 1px solid $--border-color-base;
+  }
+}
+
+/* 设置弹窗内容区内边距 */
+.el-dialog__wrapper {
+  &.p-a-0 {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  &.p-t-0 {
+    .el-dialog__body {
+      padding-top: 0;
+    }
+  }
+  &.p-b-0 {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+}