n20-common-lib 1.3.36 → 1.3.39

package/src/components/Step/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <el-steps
     :direction="direction"

package/src/components/TertiaryTab/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <el-tabs
     :value="init"

package/src/components/Upload/index.vue

@@ -38,17 +38,23 @@
     <template slot="tip">
       <slot name="tip"></slot>
     </template>
-    <el-dialog :visible.sync="progressV" title="提示" append-to-body>
-      <p v-if="!percentType">系统处理中，请稍等......</p>
-      <p v-else>{{ percentMsg }}</p>
-      <el-progress class="m-b" :percentage="percent" :status="percentType" />
-    </el-dialog>
+    <uploadMsg
+      :visible.sync="progressV"
+      :percent-type="percentType"
+      :percent-msg="percentMsg"
+      :percent="percent"
+      :validate-result="validateResult"
+    />
   </el-upload>
 </template>
 
 <script>
+import uploadMsg from './uploadMsg.vue'
 export default {
   name: 'Upload',
+  components: {
+    uploadMsg
+  },
   props: {
     fileName: {
       type: String,
@@ -127,6 +133,10 @@ export default {
     showClear: {
       type: Boolean,
       default: true
+    },
+    validateResult: {
+      type: Object,
+      default: undefined
     }
   },
   data() {
@@ -168,6 +178,8 @@ export default {
       }
     },
     beforeUploadFn(file) {
+      this.$emit('update:validateResult', undefined)
+
       let size = this.size
       let sizeNum
 

package/src/components/Upload/uploadMsg.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-dialog v-drag :visible.sync="progressV" :title="title" append-to-body>
+    <template v-if="!hidePercent">
+      <p v-if="!percentType">系统处理中，请稍等......</p>
+      <p v-else>{{ percentMsg }}</p>
+      <el-progress class="m-b" :percentage="percent" :status="percentType" />
+    </template>
+    <!-- 错误数据行提示 -->
+    <template v-if="validateResult">
+      <div>
+        <span class="m-r">导入统计</span>
+        <span>共计导入{{ validateResult.totalNum }}条, </span>
+        <span class="m-r-s">
+          其中有效数据
+          <span class="color-primary">{{ validateResult.successNum }}</span
+          >条,
+        </span>
+        <span>
+          无效数据
+          <span class="color-danger">{{ validateResult.errorList.length }}</span
+          >条。
+        </span>
+      </div>
+      <template v-if="validateResult.errorList.length">
+        <div class="m-t m-b">无效数据详情</div>
+        <el-table :data="errorList">
+          <el-table-column
+            v-for="column in columnsList"
+            :key="column.prop"
+            :prop="column.prop"
+            :label="column.label"
+          >
+            <template slot-scope="scope">
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <span v-html="scope.row[column.prop]"></span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="color-warning m-t-s">
+          上述数据输入有误，请修改导入文件中相关信息！
+        </div>
+      </template>
+      <span slot="footer">
+        <el-button type="primary" @click="progressV = false">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '提示'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    percentType: {
+      type: String,
+      default: undefined
+    },
+    percentMsg: {
+      type: String,
+      default: undefined
+    },
+    percent: {
+      type: Number,
+      default: undefined
+    },
+    validateResult: {
+      type: Object,
+      default: undefined
+    },
+    hidePercent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    progressV: {
+      get() {
+        return this.visible
+      },
+      set(v) {
+        this.$emit('update:visible', v)
+      }
+    },
+    columnsList() {
+      return (this.validateResult && this.validateResult.columnsList) || []
+    },
+    errorList() {
+      let errorList = this.validateResult && this.validateResult.errorList
+      if (errorList) {
+        let _errorList = []
+        errorList.forEach((item) => {
+          const temp = { ...item }
+          if (item.errorList) {
+            item.errorList.forEach((eK) => {
+              temp[eK] = `<span class="color-danger">${temp[eK]}</span>`
+            })
+          }
+          _errorList.push(temp)
+        })
+        return _errorList
+      } else {
+        return undefined
+      }
+    }
+  }
+}
+</script>

package/src/directives/VClickOutside/index.js

@@ -5,13 +5,21 @@ directive.install = (Vue) => {
     bind: function (el, binding, node) {
       el.clickOutsideEvent = function (event) {
         if (!(el === event.target || el.contains(event.target))) {
-          node.context[binding.expression](event)
+          binding.value(event)
         }
       }
-      document.body.addEventListener('click', el.clickOutsideEvent, binding.arg === 'capture')
+      document.body.addEventListener(
+        'click',
+        el.clickOutsideEvent,
+        binding.arg === 'capture'
+      )
     },
     unbind: function (el, binding) {
-      document.body.removeEventListener('click', el.clickOutsideEvent, binding.arg === 'capture')
+      document.body.removeEventListener(
+        'click',
+        el.clickOutsideEvent,
+        binding.arg === 'capture'
+      )
     }
   })
 }

package/src/directives/VDrag/index.js

@@ -6,12 +6,14 @@
 // 封装全局弹窗拖拽指令 v-drag
 function dialogMoveFn(_this) {
   var dialogDom = _this.parentNode
-  dialogDom.style.top = parseFloat(dialogDom.style.top || '0') + _this.pageYc + 'px'
-  dialogDom.style.left = parseFloat(dialogDom.style.left || '0') + _this.pageXc + 'px'
+  dialogDom.style.top =
+    parseFloat(dialogDom.style.top || '0') + _this.pageYc + 'px'
+  dialogDom.style.left =
+    parseFloat(dialogDom.style.left || '0') + _this.pageXc + 'px'
 }
 
 const dialogMove = {
-  install: function(Vue) {
+  install: function (Vue) {
     Vue.directive('drag', {
       update(el, binding) {
         if (el.style.display === 'none') {
@@ -21,14 +23,14 @@ const dialogMove = {
             dialogDom.style.top = ''
           }
         }
-        Vue.nextTick(function() {
+        Vue.nextTick(function () {
           var dialogHeader = el.querySelector('.el-dialog__header')
           if (dialogHeader && !dialogHeader._hasMoveDir) {
             var _this, pvrPageX, pvrPageY
             dialogHeader._hasMoveDir = true
             dialogHeader.style.cursor = 'move'
 
-            dialogHeader.addEventListener('mousedown', function(evt) {
+            dialogHeader.addEventListener('mousedown', function (evt) {
               var ev = evt || event
               this.pageXc = this.pageYc = 0
               _this = this
@@ -38,7 +40,7 @@ const dialogMove = {
               document.addEventListener('mouseup', mouseupThisMove)
             })
 
-            var mousemoveThisMove = function(evt) {
+            var mousemoveThisMove = function (evt) {
               var ev = evt || event
               ev.stopPropagation()
               ev.preventDefault()
@@ -51,14 +53,16 @@ const dialogMove = {
                 _this.pageXc = ev.pageX - pvrPageX
                 _this.pageYc = ev.pageY - pvrPageY
                 if (_this.pageXc !== 0 || _this.pageYc !== 0) {
-                  binding.value ? binding.value(_this, binding.arg) : dialogMoveFn(_this)
+                  binding.value
+                    ? binding.value(_this, binding.arg)
+                    : dialogMoveFn(_this)
                 }
                 pvrPageX = ev.pageX
                 pvrPageY = ev.pageY
               }
             }
 
-            var mouseupThisMove = function() {
+            var mouseupThisMove = function () {
               document.removeEventListener('mousemove', mousemoveThisMove)
               document.removeEventListener('mouseup', mouseupThisMove)
             }

package/src/directives/VMove/index.js

@@ -4,7 +4,7 @@ directive.install = (Vue) => {
   Vue.directive('move', {
     bind(el, binding) {
       var _this, pvrPageX, pvrPageY
-      var mousemoveThisMove = function(evt) {
+      var mousemoveThisMove = function (evt) {
         var ev = evt || event
         ev.stopPropagation()
         ev.preventDefault()
@@ -16,11 +16,11 @@ directive.install = (Vue) => {
         pvrPageX = ev.pageX
         pvrPageY = ev.pageY
       }
-      var mouseupThisMove = function() {
+      var mouseupThisMove = function () {
         document.removeEventListener('mousemove', mousemoveThisMove)
         document.removeEventListener('mouseup', mouseupThisMove)
       }
-      el.addEventListener('mousedown', function(evt) {
+      el.addEventListener('mousedown', function (evt) {
         var ev = evt || event
         this.pageXc = this.pageYc = 0
         _this = this

package/src/directives/VRuleKey/index.js

@@ -0,0 +1,201 @@
+const VD = '_v-rule-key_validate_'
+
+function getRules(rules, evType) {
+  if (rules) {
+    let _rules = []
+    if (Array.isArray(rules)) {
+      _rules = rules
+    } else if (typeof rules === 'object') {
+      _rules.push(rules)
+    }
+    if (evType === 'submit') {
+      return _rules
+    } else {
+      return _rules.filter((r) => r.trigger.includes(evType))
+    }
+  } else {
+    return []
+  }
+}
+
+function validateRoule(rule, value) {
+  return new Promise(function (resolve, reject) {
+    if (rule.required) {
+      if (
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'string') {
+      if (typeof value !== 'string') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'number') {
+      if (typeof value !== 'number') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'boolean') {
+      if (typeof value !== 'boolean') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'array') {
+      if (!(Array.isArray(value) && value.length > 0)) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.type === 'date') {
+      if (new Date(value).toString() === 'Invalid Date') {
+        reject(rule.message)
+        return
+      }
+    }
+    if (rule.min !== undefined || rule.max !== undefined) {
+      if (value === undefined || value === null) {
+        reject(rule.message)
+        return
+      } else {
+        let _v = value.toString()
+        if (_v.length < rule.min || _v.length > rule.max) {
+          reject(rule.message)
+          return
+        }
+      }
+    }
+    if (rule.regexp) {
+      if (new RegExp(rule.regexp).test(value)) {
+        reject(rule.message)
+        return
+      }
+    }
+    if (!rule.validator) {
+      resolve()
+      return
+    }
+    if (rule.validator) {
+      rule.validator(rule, value, (err) => {
+        if (err === undefined || err === false) {
+          resolve()
+          return
+        } else {
+          reject(err === true ? rule.message : err)
+        }
+      })
+    }
+  })
+}
+
+function showErr(el, err = '', rErr) {
+  el.classList.add('rule-key__is-error')
+
+  if (rErr) {
+    let msgEl = el.querySelector('.rule-key__error_msg')
+    if (!msgEl) {
+      let msgEl = document.createElement('div')
+      msgEl.classList.add('rule-key__error_msg')
+      msgEl.innerText = err.toString()
+      el.appendChild(msgEl)
+    } else if (msgEl) {
+      msgEl.innerText = err.toString()
+    }
+  }
+}
+function hideErr(el, rErr) {
+  el.classList.remove('rule-key__is-error')
+
+  if (rErr) {
+    let msgEl = el.querySelector('.rule-key__error_msg')
+    if (msgEl) {
+      el.removeChild(msgEl)
+    }
+  }
+}
+
+const directive = {}
+directive.install = (Vue) => {
+  Vue.directive('rule-key', {
+    bind(el, binding, node) {
+      let _this = node.child
+
+      let ruleForm = _this.$attrs['rule-form'] || _this.$attrs['ruleForm']
+      ruleForm && el.classList.add(ruleForm)
+
+      let rErr =
+        _this.$attrs['rule-error-hide'] || _this.$attrs['ruleErrorHide']
+      rErr = rErr !== 'true' && rErr !== true
+
+      el[VD] = (val, type) => {
+        let _val = _this[binding.value || 'value']
+        let _rules = getRules(_this.$attrs['rules'], type)
+        if (_rules.length > 0) {
+          return Promise.all(_rules.map((rule) => validateRoule(rule, _val)))
+            .then(() => {
+              hideErr(el, rErr)
+            })
+            .catch((err) => {
+              showErr(el, err, rErr)
+            })
+        } else {
+          return Promise.resolve()
+        }
+      }
+
+      _this.$on('change', () => {
+        setTimeout(() => el[VD](undefined, 'change'))
+      })
+      // el.addEventListener('change', () => {
+      //   el[VD](undefined, 'change')
+      // })
+
+      _this.$on('blur', () => {
+        setTimeout(() => el[VD](undefined, 'blur'))
+      })
+      // el.addEventListener('blur', () => {
+      //   el[VD](undefined, 'blur')
+      // })
+    }
+  })
+}
+
+function rulesValidateForm(query, fn) {
+  let nodeList = document.querySelectorAll('.' + query)
+  if (nodeList.length) {
+    let validateList = []
+    nodeList.forEach((el) => {
+      typeof el[VD] === 'function' &&
+        validateList.push(el[VD](undefined, 'submit'))
+    })
+    return Promise.all(validateList)
+      .then(() => {
+        fn && fn(true)
+      })
+      .catch(() => {
+        fn && fn(false)
+      })
+  } else {
+    fn && fn(true)
+    return Promise.resolve()
+  }
+}
+function rulesValidateFormClear(query) {
+  let nodeList = document.querySelectorAll('.' + query)
+  nodeList.forEach((el) => {
+    hideErr(el, true)
+  })
+}
+
+window.rulesValidateForm = rulesValidateForm
+window.rulesValidateFormClear = rulesValidateFormClear
+
+export default directive

package/src/index.js

@@ -67,6 +67,7 @@ import DialogO from './components/Dialog/indexO.vue'
 import VTitle from './directives/VTitle/index.js'
 import VDrag from './directives/VDrag/index.js'
 import VMove from './directives/VMove/index.js'
+import VRuleKey from './directives/VRuleKey/index.js'
 import VClickOutside from './directives/VClickOutside/index.js'
 import VHas from './directives/VHas/index.js'
 
@@ -165,6 +166,7 @@ const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
   Vue.use(VTitle)
   Vue.use(VDrag)
   Vue.use(VMove)
+  Vue.use(VRuleKey)
   Vue.use(VClickOutside)
   Vue.use(VHas)
 

package/src/utils/auth.js

@@ -44,7 +44,9 @@ auth.cokenKey = 'Admin-Token'
 let ownLoginPath = '/login'
 function toLogin() {
   let hrefOld = window.location.href
-  let loginHref = window.__POWERED_BY_QIANKUN__ ? window.location.origin + '/login' : ownLoginPath
+  let loginHref = window.__POWERED_BY_QIANKUN__
+    ? window.location.origin + '/login'
+    : ownLoginPath
   if (hrefOld !== loginHref) {
     history.pushState(null, null, loginHref)
     window.location.reload()

package/src/utils/axios.js

@@ -60,7 +60,9 @@ const axios = _axios.create(config)
 axios.interceptors.request.use((opt) => {
   let token = auth.getToken()
   let headers = {
-    Authorization: token ? 'Bearer ' + token : 'Basic TlNUQzpWVkIxVG1sVlVURlNMemxyTkhoc2VtNXdObFJaUVQwOQ==',
+    Authorization: token
+      ? 'Bearer ' + token
+      : 'Basic TlNUQzpWVkIxVG1sVlVURlNMemxyTkhoc2VtNXdObFJaUVQwOQ==',
     OperationDesc: opt.OperationDesc ? encodeURI(opt.OperationDesc) : 'default',
     timestamp: Date.now(),
     requestKey: Date.now()

package/src/utils/repairElementUI.js

@@ -6,7 +6,8 @@ import FilterPanel from './tableheaderFilterpanel.vue'
 
 function hasClass(el, cls) {
   if (!el || !cls) return false
-  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (cls.indexOf(' ') !== -1)
+    throw new Error('className should not contain space.')
   if (el.classList) {
     return el.classList.contains(cls)
   } else {
@@ -32,14 +33,29 @@ function repairPopper() {
     Popper.prototype.repairR = true
 
     let __getBoundaries = Popper.prototype._getBoundaries
-    Popper.prototype._getBoundaries = function (data, padding, boundariesElement) {
-      const boundaries = __getBoundaries.call(this, data, padding, boundariesElement)
+    Popper.prototype._getBoundaries = function (
+      data,
+      padding,
+      boundariesElement
+    ) {
+      const boundaries = __getBoundaries.call(
+        this,
+        data,
+        padding,
+        boundariesElement
+      )
 
       if (this._options.boundariesElement === 'viewport') {
         const root = window
         const body = root.document.body
         const html = root.document.documentElement
-        let width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+        let width = Math.max(
+          body.scrollWidth,
+          body.offsetWidth,
+          html.clientWidth,
+          html.scrollWidth,
+          html.offsetWidth
+        )
         let height = Math.max(
           body.scrollHeight,
           body.offsetHeight,
@@ -48,8 +64,12 @@ function repairPopper() {
           html.offsetHeight
         )
 
-        boundaries.right = boundaries.right - root.document.documentElement.clientWidth + width
-        boundaries.bottom = boundaries.bottom - root.document.documentElement.clientHeight + height
+        boundaries.right =
+          boundaries.right - root.document.documentElement.clientWidth + width
+        boundaries.bottom =
+          boundaries.bottom -
+          root.document.documentElement.clientHeight +
+          height
       }
       return boundaries
     }
@@ -96,12 +116,16 @@ export default function (ElementUI) {
           let label = column.label || ''
           let sortable = column.sortable ? 24 : 0
           let filters = column.filters ? 16 : 0
-          column.minWidth = Math.max(80, label.length * 14 + 22 + sortable + filters)
+          column.minWidth = Math.max(
+            80,
+            label.length * 14 + 22 + sortable + filters
+          )
         } else {
           column.minWidth = 80
         }
       }
-      column.realWidth = column.width === undefined ? column.minWidth : column.width
+      column.realWidth =
+        column.width === undefined ? column.minWidth : column.width
       return column
     }
   })

package/src/utils/xls2json.js

@@ -13,7 +13,7 @@ export default function toJson(file, name) {
       })
     } else if (file instanceof ArrayBuffer) {
       try {
-        const workbook = read(array, { type: 'array', cellDates: true })
+        const workbook = read(file, { type: 'array', cellDates: true })
         resolve(workbook)
       } catch (err) {
         reject(err)