n20-common-lib 2.4.64 → 2.4.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.4.64",
+  "version": "2.4.65",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -49,7 +49,6 @@
   "dependencies": {
     "axios": "*",
     "dayjs": "*",
-    "element-ui": "^2.15.14",
     "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
     "lz-string": "^1.4.4",
@@ -63,6 +62,7 @@
     "vuedraggable": "*"
   },
   "devDependencies": {
+    "element-ui": "^2.15.14",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-flow-comments": "^7.14.5",
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/components/Tree/index.js

@@ -1,5 +1,6 @@
 import Tree from './index.vue'
 
+/* istanbul ignore next */
 Tree.install = function (Vue) {
   Vue.component(Tree.name, Tree)
 }

package/src/components/Tree/index.vue

@@ -4,6 +4,8 @@
     :node-key="nodeKey"
     :expand-on-click-node="false"
     :data="data"
+    :check-strictly="checkStrictlyC"
+    :show-checkbox="showCheckbox"
     :props="props"
     v-bind="$attrs"
     v-on="$listeners"
@@ -16,14 +18,21 @@
     >
       <span class="flex-box flex-v">
         <img :src="node.level == 1 ? folder : desc" class="m-r-ss" alt="" />
-
         {{ (data[props.value] ? '(' + data[props.value] + ') ' : '') + data[props.label] }}
       </span>
       <el-button
-        v-if="node.data[nodeKey] === checkFlag && checkFlag.data && checkFlag.data[nodeKey]"
+        v-if="showCheckbox && node.checked && node.data[nodeKey] === checkFlag?.data?.[nodeKey]"
         type="text"
-        @click="handleChecked(node)"
-        >{{ '只勾选当前节点' }}</el-button
+        class="m-r-s"
+        @click="handleClose(node, data)"
+        >{{ $lc('取消勾选') }}</el-button
+      >
+      <el-button
+        v-else-if="showCheckbox && !node.checked && node.data[nodeKey] === checkFlag?.data?.[nodeKey]"
+        type="text"
+        class="m-r-s"
+        @click="handleChecked(node, data)"
+        >{{ $lc('只勾选本层级') }}</el-button
       >
     </div>
   </el-tree>
@@ -40,6 +49,14 @@ export default {
       type: Object,
       default: () => ({})
     },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
     nodeKey: {
       type: String,
       default: ''
@@ -53,12 +70,24 @@ export default {
       list: []
     }
   },
+  computed: {
+    checkStrictlyC: {
+      get() {
+        return this.checkStrictly
+      },
+      set(v) {
+        console.log(v, 123)
+        return this.$emit('update:checkStrictly', v)
+      }
+    }
+  },
   mounted() {
     this.setRefData()
   },
   methods: {
     setRefData() {
       const {
+        store,
         filter,
         updateKeyChildren,
         getCheckedNodes,
@@ -97,12 +126,20 @@ export default {
       this.append = append
       this.insertBefore = insertBefore
       this.insertAfter = insertAfter
+      this.store = store
     },
-    handleChecked(node) {
+    handleChecked(node, data) {
+      this.store.checkStrictly = true
       this.setChecked(node.data, true)
+      this.store.checkStrictly = false
     },
     mouseenterTree(node, data) {
       this.checkFlag = node
+    },
+    handleClose(node, data) {
+      this.store.checkStrictly = true
+      this.setChecked(node.data, false)
+      this.store.checkStrictly = false
     }
   }
 }

package/src/components/Upload/uploadMsg.vue

@@ -48,7 +48,7 @@
                 type="text"
                 @click="
                   () => {
-                    footerBtn.export.click()
+                    footerBtn.importBtn.click()
                     progressV = false
                   }
                 "

package/src/directives/loading/index.js

@@ -0,0 +1,10 @@
+import directive from './src/directive.js'
+import service from './src/index.js'
+
+export default {
+  install(Vue) {
+    Vue.use(directive)
+  },
+  directive,
+  service
+}

package/src/directives/loading/src/directive.js

@@ -0,0 +1,134 @@
+import Vue from 'vue'
+import Loading from './loading.vue'
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'
+import { PopupManager } from 'element-ui/src/utils/popup'
+import afterLeave from 'element-ui/src/utils/after-leave'
+const Mask = Vue.extend(Loading)
+
+const loadingDirective = {}
+loadingDirective.install = Vue => {
+  if (Vue.prototype.$isServer) return
+  const toggleLoading = (el, binding) => {
+    if (binding.value) {
+      el.instance.processShowFn(binding.value)
+      Vue.nextTick(() => {
+        if (binding.modifiers.fullscreen) {
+          el.originalPosition = getStyle(document.body, 'position')
+          el.originalOverflow = getStyle(document.body, 'overflow')
+          el.maskStyle.zIndex = PopupManager.nextZIndex()
+
+          addClass(el.mask, 'is-fullscreen')
+          insertDom(document.body, el, binding)
+        } else {
+          removeClass(el.mask, 'is-fullscreen')
+
+          if (binding.modifiers.body) {
+            el.originalPosition = getStyle(document.body, 'position')
+            ;['top', 'left'].forEach(property => {
+              const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft'
+              el.maskStyle[property] =
+                el.getBoundingClientRect()[property] +
+                document.body[scroll] +
+                document.documentElement[scroll] -
+                parseInt(getStyle(document.body, `margin-${property}`), 10) +
+                'px'
+            })
+            ;['height', 'width'].forEach(property => {
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px'
+            })
+
+            insertDom(document.body, el, binding)
+          } else {
+            el.originalPosition = getStyle(el, 'position')
+            insertDom(el, el, binding)
+          }
+        }
+      })
+    } else {
+      afterLeave(
+        el.instance,
+        _ => {
+          if (!el.instance.hiding) return
+          el.domVisible = false
+          const target = binding.modifiers.fullscreen || binding.modifiers.body ? document.body : el
+          removeClass(target, 'el-loading-parent--relative')
+          removeClass(target, 'el-loading-parent--hidden')
+          el.instance.hiding = false
+        },
+        300,
+        true
+      )
+      el.instance.visible = false
+      el.instance.hiding = true
+    }
+  }
+  const insertDom = (parent, el, binding) => {
+    if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
+      Object.keys(el.maskStyle).forEach(property => {
+        el.mask.style[property] = el.maskStyle[property]
+      })
+
+      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed' && el.originalPosition !== 'sticky') {
+        addClass(parent, 'el-loading-parent--relative')
+      }
+      if (binding.modifiers.fullscreen && binding.modifiers.lock) {
+        addClass(parent, 'el-loading-parent--hidden')
+      }
+      el.domVisible = true
+
+      parent.appendChild(el.mask)
+      Vue.nextTick(() => {
+        if (el.instance.hiding) {
+          el.instance.$emit('after-leave')
+        } else {
+          el.instance.visible = true
+        }
+      })
+      el.domInserted = true
+    } else if (el.domVisible && el.instance.hiding === true) {
+      el.instance.visible = true
+      el.instance.hiding = false
+    }
+  }
+
+  Vue.directive('tableLoading', {
+    bind: function (el, binding, vnode) {
+      const textExr = el.getAttribute('element-loading-text')
+      const spinnerExr = el.getAttribute('element-loading-spinner')
+      const backgroundExr = el.getAttribute('element-loading-background')
+      const customClassExr = el.getAttribute('element-loading-custom-class')
+      const vm = vnode.context
+      const mask = new Mask({
+        el: document.createElement('div'),
+        data: {
+          text: (vm && vm[textExr]) || textExr,
+          spinner: (vm && vm[spinnerExr]) || spinnerExr,
+          background: (vm && vm[backgroundExr]) || backgroundExr,
+          customClass: (vm && vm[customClassExr]) || customClassExr,
+          fullscreen: !!binding.modifiers.fullscreen
+        }
+      })
+      el.instance = mask
+      el.mask = mask.$el
+      el.maskStyle = {}
+      binding.value && toggleLoading(el, binding)
+    },
+
+    update: function (el, binding) {
+      el.instance.setText(el.getAttribute('element-loading-text'))
+      if (binding.oldValue !== binding.value) {
+        toggleLoading(el, binding)
+      }
+    },
+
+    unbind: function (el, binding) {
+      if (el.domInserted) {
+        el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask)
+        toggleLoading(el, { value: false, modifiers: binding.modifiers })
+      }
+      el.instance && el.instance.$destroy()
+    }
+  })
+}
+
+export default loadingDirective

package/src/directives/loading/src/index.js

@@ -0,0 +1,113 @@
+import Vue from 'vue'
+import loadingVue from './loading.vue'
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'
+import { PopupManager } from 'element-ui/src/utils/popup'
+import afterLeave from 'element-ui/src/utils/after-leave'
+import merge from 'element-ui/src/utils/merge'
+
+const LoadingConstructor = Vue.extend(loadingVue)
+
+const defaults = {
+  text: null,
+  fullscreen: true,
+  body: false,
+  lock: false,
+  customClass: ''
+}
+
+let fullscreenLoading
+
+LoadingConstructor.prototype.originalPosition = ''
+LoadingConstructor.prototype.originalOverflow = ''
+
+LoadingConstructor.prototype.close = function () {
+  if (this.fullscreen) {
+    fullscreenLoading = undefined
+  }
+  afterLeave(
+    this,
+    (_) => {
+      const target = this.fullscreen || this.body ? document.body : this.target
+      removeClass(target, 'el-loading-parent--relative')
+      removeClass(target, 'el-loading-parent--hidden')
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      }
+      this.$destroy()
+    },
+    300
+  )
+  this.visible = false
+}
+
+const addStyle = (options, parent, instance) => {
+  let maskStyle = {}
+  if (options.fullscreen) {
+    instance.originalPosition = getStyle(document.body, 'position')
+    instance.originalOverflow = getStyle(document.body, 'overflow')
+    maskStyle.zIndex = PopupManager.nextZIndex()
+  } else if (options.body) {
+    instance.originalPosition = getStyle(document.body, 'position')
+    ;['top', 'left'].forEach((property) => {
+      let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft'
+      maskStyle[property] =
+        options.target.getBoundingClientRect()[property] +
+        document.body[scroll] +
+        document.documentElement[scroll] +
+        'px'
+    })
+    ;['height', 'width'].forEach((property) => {
+      maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px'
+    })
+  } else {
+    instance.originalPosition = getStyle(parent, 'position')
+  }
+  Object.keys(maskStyle).forEach((property) => {
+    instance.$el.style[property] = maskStyle[property]
+  })
+}
+
+const Loading = (options = {}) => {
+  if (Vue.prototype.$isServer) return
+  options = merge({}, defaults, options)
+  if (typeof options.target === 'string') {
+    options.target = document.querySelector(options.target)
+  }
+  options.target = options.target || document.body
+  if (options.target !== document.body) {
+    options.fullscreen = false
+  } else {
+    options.body = true
+  }
+  if (options.fullscreen && fullscreenLoading) {
+    return fullscreenLoading
+  }
+
+  let parent = options.body ? document.body : options.target
+  let instance = new LoadingConstructor({
+    el: document.createElement('div'),
+    data: options
+  })
+
+  addStyle(options, parent, instance)
+  if (
+    instance.originalPosition !== 'absolute' &&
+    instance.originalPosition !== 'fixed' &&
+    instance.originalPosition !== 'sticky'
+  ) {
+    addClass(parent, 'el-loading-parent--relative')
+  }
+  if (options.fullscreen && options.lock) {
+    addClass(parent, 'el-loading-parent--hidden')
+  }
+  parent.appendChild(instance.$el)
+  Vue.nextTick(() => {
+    instance.visible = true
+  })
+  if (options.fullscreen) {
+    fullscreenLoading = instance
+  }
+  return instance
+}
+
+export default Loading

package/src/directives/loading/src/loading.vue

@@ -0,0 +1,90 @@
+<template>
+  <transition name="el-loading-fade" @after-leave="handleAfterLeave">
+    <div
+      v-show="visible"
+      class="el-loading-mask"
+      :style="{ backgroundColor: background || '' }"
+      :class="[customClass, { 'is-fullscreen': fullscreen }]"
+    >
+      <div class="el-loading-spinner">
+        <img class="loadingCss" src="./loading.png" />
+        <div class="numCss">
+          <div class="process">{{ percentage }}%</div>
+          <div v-if="percentage == 100" class="m-t-ss" style="font-size: 10px">Completed</div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: null,
+      spinner: null,
+      background: null,
+      fullscreen: true,
+      visible: false,
+      customClass: '',
+      processShow: false,
+      timer: null,
+      percentage: 0
+    }
+  },
+  watch: {},
+  methods: {
+    handleAfterLeave() {
+      this.$emit('after-leave')
+    },
+    processShowFn(val) {
+      //   // 查询进度条
+      this.percentage = 0
+      this.timer = setInterval(async (_) => {
+        // 计算当前进度
+        this.percentage = this.percentage + 5
+        // 若进度值达到百分之百时，
+        if (this.percentage > 99) {
+          this.percentage = 99
+        }
+      }, 3)
+    },
+    setText(text) {
+      if (text > 0) {
+        this.percentage = text
+        clearInterval(this.timer)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.loadingCss {
+  width: 120px;
+  height: 120px;
+  animation: rotate 3s linear infinite;
+}
+/deep/.el-loading-mask {
+  background-color: #fff;
+}
+.el-loading-spinner {
+  position: relative;
+  margin-top: -62px;
+}
+.numCss {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  width: 80px;
+  top: calc(50% - 44px);
+  left: calc(50% - 40px);
+  color: var(--color-primary);
+}
+.process {
+  font-size: 20px;
+  font-weight: bold;
+}
+</style>

package/src/index.js

@@ -94,6 +94,7 @@ import VHas from './directives/VHas/index.js'
 import VMove from './directives/VMove/index.js'
 import VRuleKey from './directives/VRuleKey/index.js'
 import { HoverTooltip, TitleDirective } from './directives/VTitle/index.js'
+import VTableLoading from './directives/loading/index.js'
 
 /** 注入方法 */
 import dayjs from 'dayjs'
@@ -221,6 +222,7 @@ const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
   Vue.use(VRuleKey)
   Vue.use(VClickOutside)
   Vue.use(VHas)
+  Vue.use(VTableLoading)
 
   Vue.use(i18n, opts.i18nConfig)
   Vue.prototype.$axios = axios