n20-common-lib 1.1.10

package/src/components/WornPagination/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="cl-worn-pagination">
+    <el-button :class="isbanprev ? 'isban' :''" plain onlyicon size="mini" icon="el-icon-arrow-left" @click="prev" />
+    <el-button :class="isban ? 'isban' :''" plain onlyicon size="mini" icon="el-icon-arrow-right" @click="next" />
+    <span class="pages">
+            <span>{{ current }}</span
+            >/{{ totalPage }}
+    </span>
+    <div class="page-jumper">
+      <span>到第</span>
+      <el-input
+          v-model="input"
+          class="el-pagination__editor"
+          :min="1"
+          :max="totalPage"
+          type="number"
+          @blur="onBlurPage"
+          @change="handleChange"
+      />
+
+      <span>页</span>
+    </div>
+    <i class="setting el-icon-s-tools" @click="goSetting"></i>
+    <div v-show="showSetting" class="setting-wrapper" @click="prevent">
+      <span class="hint">每页显示</span>
+      <el-button
+          v-for="(n, i) in settings"
+          :key="'pagination-setting-' + i"
+          size="mini"
+          type="primary"
+          @click="handleSizeChange(n)"
+      >{{ n }}
+      </el-button>
+
+      <el-input
+          v-model="sizeInput"
+          class="el-pagination__editor"
+          type="number"
+          placeholder="自定义"
+          @change="handleSizeChange"
+          @blur="onBlurPageSize"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom'
+export default {
+  name: 'WornPagination',
+  props: {
+    page: {
+      type:Number,
+      default: 1
+    },
+    pageSize:  {
+      type:Number,
+      default: 0
+    },
+    total:  {
+      type:Number,
+      default: 0
+    },
+    sizeInputLimit: {
+      //自定义分页条数 限制 默认200
+      type: Number,
+      default: 200
+    }
+  },
+  data() {
+    return {
+      settings: [20, 50, 100],
+      current: 1,
+      size: 20,
+      totalPage: 1,
+      input: 1,
+      sizeInput: '',
+      isban: false,
+      isbanprev: false,
+      showSetting: false
+    }
+  },
+  watch: {
+    size() {
+      let index = this.settings.indexOf(this.size)
+      if (index < 0) this.sizeInput = this.size
+      else this.sizeInput = ''
+    },
+    page() {
+      this.handleChange(this.page)
+    },
+    pageSize() {
+      this.handleSizeChange(this.pageSize)
+    },
+    total() {
+      this.handleTotal()
+    }
+  },
+  mounted() {
+    this.current = this.page
+    this.size = this.pageSize
+    this.handleTotal()
+  },
+  methods: {
+    prevent(e) {
+      e.preventDefault()
+      e.stopPropagation()
+    },
+    handleTotal() {
+      if (this.total) {
+        let count = parseInt(this.total / this.pageSize)
+        this.totalPage =
+            this.total % this.pageSize === 0 ? count : count + 1
+      }else{
+        this.totalPage = 1
+      }
+    },
+    onBlurPage() {
+      if (this.input === '') {
+        this.input = 1
+        this.current = 1
+        this.$emit('update:page', this.current)
+      }
+    },
+    handleChange(v) {
+      if (!v) return
+
+      v = parseInt(v)
+      if (v > this.totalPage) {
+        v = this.totalPage
+      }
+      if (v < 1) {
+        v = 1
+      }
+      this.input = v
+      this.current = v
+      this.$emit('update:page', this.current)
+    },
+    onBlurPageSize() {
+      if (!this.sizeInput) {
+        this.sizeInput = 20
+        this.$emit('update:pageSize', this.size)
+        this.current = 1
+        this.$emit('update:page', this.current)
+      }
+    },
+    handleSizeChange(v) {
+      if (!v) return
+
+      //检查是否超出限制
+      if (v > this.sizeInputLimit) {
+        this.$message.error(
+            '自定义分页不可超过' + this.sizeInputLimit + '条每页！'
+        )
+        return
+      }
+
+      v = parseInt(v)
+      if (v < 1) v = 1
+
+      this.size = v
+      this.$emit('update:pageSize', this.size)
+
+      this.current = 1
+      this.$emit('update:page', this.current)
+
+      this.handleTotal()
+    },
+    prev() {
+      if (this.current <= 1) {
+        this.isbanprev = true
+      }
+      this.isbanprev = false
+      this.handleChange(this.current - 1)
+    },
+    next() {
+      let num = this.current + 1
+      if (num !== this.totalPage + 1) {
+        this.isban = false
+        this.handleChange(this.current + 1)
+      } else {
+        this.isban = true
+      }
+    },
+    goSetting(e) {
+      this.showSetting = !this.showSetting
+      if (this.showSetting) {
+        setTimeout(() => {
+          on(document, 'click', this.handleDocumentClick)
+        }, 100)
+      }
+
+      e.preventDefault()
+      e.stopPropagation()
+    },
+    handleDocumentClick() {
+      this.showSetting = false
+      off(document, 'click', this.handleDocumentClick)
+    }
+  }
+}
+</script>

package/src/directives/VMove/index.js

@@ -0,0 +1,42 @@
+const directive = {}
+
+directive.install = (Vue) => {
+  Vue.directive('move', {
+    bind(el, binding) {
+      var _this, pvrPageX, pvrPageY
+      var mousemoveThisMove = function(evt) {
+        var ev = evt || event
+        ev.stopPropagation()
+        ev.preventDefault()
+        _this.pageXc = ev.pageX - pvrPageX
+        _this.pageYc = ev.pageY - pvrPageY
+        if (_this.pageXc !== 0 || _this.pageYc !== 0) {
+          binding.value(_this, binding.arg)
+        }
+        pvrPageX = ev.pageX
+        pvrPageY = ev.pageY
+      }
+      var mouseupThisMove = function() {
+        document.removeEventListener('mousemove', mousemoveThisMove)
+        document.removeEventListener('mouseup', mouseupThisMove)
+      }
+      el.addEventListener('mousedown', function(evt) {
+        var ev = evt || event
+        this.pageXc = this.pageYc = 0
+        _this = this
+        pvrPageX = ev.pageX
+        pvrPageY = ev.pageY
+        document.addEventListener('mousemove', mousemoveThisMove)
+        document.addEventListener('mouseup', mouseupThisMove)
+      })
+    }
+    /*update() {
+      console.log('被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新')
+    },
+    unbind() {
+      console.log('只调用一次， 指令与元素解绑时调用')
+    }*/
+  })
+}
+
+export default directive

package/src/directives/VTitle/index.js

@@ -0,0 +1,55 @@
+import Tooltip from './tooltip.vue'
+
+function tipShow(el, tip) {
+  if (el.$tooltipTitle) {
+    if (!el.$tooltipTitleOverflow || el.clientWidth < el.scrollWidth) {
+      tip.title = el.$tooltipTitle
+      tip.$refs['title-pop'].referenceElm = el
+      tip.$refs['title-pop'].doDestroy()
+      tip.$nextTick(() => {
+        tip.visible = true
+      })
+    }
+  }
+}
+function tipHide(el, tip) {
+  tip.visible = false
+}
+
+const TitleDirective = {}
+TitleDirective.install = (Vue) => {
+  if (Vue.prototype.$isServer) return
+
+  const tooltip = new (Vue.extend(Tooltip))({
+    el: document.createElement('div'),
+    data: {
+      title: '',
+      visible: false
+    }
+  })
+  document.querySelector('body').appendChild(tooltip.$el)
+
+  Vue.directive('title', {
+    bind: function(el, binding, vnode) {
+      if (vnode.data && vnode.data.attrs) {
+        el.$tooltipTitleOverflow = vnode.data.attrs['show-overflow-tooltip']
+      }
+      el.$tooltipTitle = binding.value
+      el.$tooltipShow = () => tipShow(el, tooltip)
+      el.$tooltipHide = () => tipHide(el, tooltip)
+      el.addEventListener('mouseenter', el.$tooltipShow)
+      el.addEventListener('mouseleave', el.$tooltipHide)
+    },
+    update: function(el, binding) {
+      if (binding.value !== binding.oldValue) {
+        el.$tooltipTitle = binding.value
+      }
+    },
+    unbind: function(el, binding) {
+      el.removeEventListener('mouseenter', el.$tooltipShow)
+      el.removeEventListener('mouseleave', el.$tooltipHide)
+    }
+  })
+}
+
+export default TitleDirective

package/src/directives/VTitle/tooltip.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-popover
+    ref="title-pop"
+    v-model="visible"
+    trigger="manual"
+    popper-class="title-pop"
+    placement="top"
+    >{{ title }}</el-popover
+  >
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '',
+      visible: false
+    }
+  }
+}
+</script>

package/src/directives/vDrag/index.js

@@ -0,0 +1,72 @@
+/**
+ * author: zhengwei
+ * tiem: 2021-8-31
+ * amend: 只注册到bind上,有问题;onXX会导致事件覆盖
+ */
+// 封装全局弹窗拖拽指令 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'
+}
+
+const dialogMove = {
+  install: function(Vue) {
+    Vue.directive('drag', {
+      update(el, binding) {
+        if (el.style.display === 'none') {
+          var dialogDom = el.querySelector('.el-dialog')
+          if (dialogDom) {
+            dialogDom.style.left = ''
+            dialogDom.style.top = ''
+          }
+        }
+        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) {
+              var ev = evt || event
+              this.pageXc = this.pageYc = 0
+              _this = this
+              pvrPageX = ev.pageX
+              pvrPageY = ev.pageY
+              document.addEventListener('mousemove', mousemoveThisMove)
+              document.addEventListener('mouseup', mouseupThisMove)
+            })
+
+            var mousemoveThisMove = function(evt) {
+              var ev = evt || event
+              ev.stopPropagation()
+              ev.preventDefault()
+              if (
+                ev.clientX >= 0 &&
+                ev.clientY >= 0 &&
+                ev.clientX <= document.documentElement.clientWidth &&
+                ev.clientY <= document.documentElement.clientHeight
+              ) {
+                _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)
+                }
+                pvrPageX = ev.pageX
+                pvrPageY = ev.pageY
+              }
+            }
+
+            var mouseupThisMove = function() {
+              document.removeEventListener('mousemove', mousemoveThisMove)
+              document.removeEventListener('mouseup', mouseupThisMove)
+            }
+          }
+        })
+      }
+    })
+  }
+}
+
+export default dialogMove

package/src/index.js

@@ -0,0 +1,111 @@
+/** 提供组件给外部使用的入口 */
+import NavMenu from './components/NavMenu/index.vue'
+import InputNumber from './components/InputNumber/index.vue'
+import TimePicker from './components/TimePicker/index.vue'
+import DatePicker from './components/DatePicker/index.vue'
+import Select from './components/Select/index.vue'
+import Suspend from './components/Suspend/index.vue'
+import MoreTab from './components/MoreTab/index.vue'
+import Step from './components/Step/index.vue'
+import SecondaryTab from './components/SecondaryTab/index.vue'
+import TertiaryTab from './components/TertiaryTab/index.vue'
+import Pagination from './components/Pagination/index.vue'
+import WornPagination from './components/WornPagination/index.vue'
+import Statis from './components/Statis/index.vue'
+import ApproveCard from './components/ApproveCard/index.vue'
+import Expandable from './components/Expandable/index.vue'
+import Empty from './components/Empty/index.vue'
+import Upload from './components/Upload/index.vue'
+import Dialog from './components/Dialog/index.vue'
+import DragList from './components/DragList/index.vue'
+import Sifting from './components/Sifting/index.vue'
+import FileUploadTable from './components/FileUploadTable/index.vue'
+import FooterBox from './components/FooterBox/index.vue'
+import Filters from './components/Filters/index.vue'
+import FoldedPanel from './components/FoldedPanel/index.vue'
+/** 注入指令 */
+import VTitle from './directives/VTitle/index.js'
+import VDrag from './directives/vDrag/index.js'
+import VMove from './directives/VMove/index.js'
+
+/** 注入方法 */
+import axios from './utils/axios.js'
+import pushLink from './utils/pushLink.js'
+import print from './utils/print.js'
+
+const components = [
+  NavMenu,
+  InputNumber,
+  TimePicker,
+  DatePicker,
+  Select,
+  Suspend,
+  MoreTab,
+  Step,
+  SecondaryTab,
+  TertiaryTab,
+  Pagination,
+  WornPagination,
+  Statis,
+  ApproveCard,
+  Expandable,
+  Empty,
+  Upload,
+  Dialog,
+  DragList,
+  Sifting,
+  FileUploadTable,
+  FooterBox,
+  Filters,
+  FoldedPanel
+]
+
+const install = function(Vue, opts = { prefix: 'Cl' }) {
+  components.forEach((component) => {
+    let name = component.name
+    name = opts.prefix + name.replace(name[0], name[0].toUpperCase())
+    Vue.component(name, component)
+  })
+
+  Vue.use(VTitle)
+  Vue.use(VDrag)
+  Vue.use(VMove)
+
+  Vue.prototype.$axios = axios
+  Vue.prototype.$pushLink = pushLink
+  Vue.prototype.$print = print
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  version: '1.0.0',
+  install,
+  axios,
+  pushLink,
+  print,
+  NavMenu,
+  InputNumber,
+  TimePicker,
+  DatePicker,
+  Select,
+  Suspend,
+  MoreTab,
+  Step,
+  SecondaryTab,
+  TertiaryTab,
+  Pagination,
+  WornPagination,
+  Statis,
+  ApproveCard,
+  Expandable,
+  Empty,
+  Upload,
+  Dialog,
+  DragList,
+  Sifting,
+  FileUploadTable
+}

package/src/utils/auth.js

@@ -0,0 +1,41 @@
+/* 设置/获取token */
+import Cookies from 'js-cookie'
+
+const auth = {
+  TokenKey: 'token',
+  getTokenKey() {
+    return this.TokenKey
+  },
+  getCookieToken() {
+    return Cookies.get(this.TokenKey)
+  },
+  getToken() {
+    return sessionStorage.getItem(this.TokenKey)
+  },
+  setToken(token) {
+    Cookies.set(this.TokenKey, token, { expires: 1 })
+    sessionStorage.setItem(this.TokenKey, token)
+  },
+  removeToken() {
+    Cookies.remove(this.TokenKey)
+    sessionStorage.removeItem(this.TokenKey)
+    toLogin()
+  }
+}
+
+function toLogin() {
+  if (window.__POWERED_BY_QIANKUN__) {
+    window.open(window.location.origin, '_self')
+  } else {
+    alert('登录过期,请重新登录')
+  }
+}
+
+auth.TokenKey = 'Admin-Token'
+
+{
+  const _token = auth.getCookieToken()
+  _token && auth.setToken(_token)
+}
+
+export default auth