n20-common-lib 1.1.98

package/src/components/Task/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="f-s-b">
+    <i class="n20-icon-tianchongxing color-warning"></i>
+    <div class="m-l m-r-lg" style="display: inline-block; width: 300px">
+      <slot></slot>
+    </div>
+    <el-button class="m-l" type="text" @click="handleBtn">{{ text }}</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Task',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleBtn() {
+      this.$emit('click')
+    }
+  }
+}
+</script>

package/src/components/TertiaryTab/index.vue

@@ -0,0 +1,53 @@
+
+<template>
+  <el-radio-group :value="init" class="n20-tertiary-tab" :size="size">
+    <el-radio-button
+      v-for="item of data"
+      :key="item.name"
+      :label="item.name"
+      :disabled="item.disabled"
+      @click.native.prevent="(ev) => clickFn(item, ev)"
+    >
+      <span v-if="item.icon" :class="item.icon"></span>
+      {{ item.name }}
+    </el-radio-button>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'TertiaryTab',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: 'mini'
+    }
+  },
+  data() {
+    if (!this.$listeners['update:init'] && !this.$listeners['click']) {
+      console.warn('请设置 @click 或 init.sync')
+    }
+    return {}
+  },
+  methods: {
+    clickFn(item, ev) {
+      ev.currentTarget && ev.currentTarget.blur()
+
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    }
+  }
+}
+</script>

package/src/components/TimePicker/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-time-picker
+    ref="time-picker"
+    class="n20-date-editor"
+    :class="{ 'has-value': clearable && value }"
+    v-bind="$attrs"
+    :value="value"
+    :clearable="clearable"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+/* 与原生elmUI区别就是加了一个has-value */
+export default {
+  name: 'TimePicker',
+  props: {
+    value: {
+      type: [String, Number, Date],
+      default: undefined
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>

package/src/components/Upload/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-upload
+    ref="upload"
+    :action="action"
+    :headers="headers"
+    :accept="accept"
+    :multiple="false"
+    :file-list="fileList"
+    :show-file-list="false"
+    v-bind="$attrs"
+    :on-success="successFn"
+    :on-error="errorFn"
+    :on-progress="progressFn"
+    :before-upload="beforeUploadFn"
+    v-on="$listeners"
+  >
+    <template slot="trigger">
+      <slot name="trigger">
+        <el-input
+          :value="fileNameC"
+          :placeholder="placeholder"
+          readonly
+          :disabled="$attrs.disabled"
+        >
+          <template slot="suffix">
+            <i
+              v-if="fileNameC && showClear"
+              class="el-input__icon upload-clear el-icon-close"
+              style="pointer-events: all"
+              @click.stop="clearFile"
+            ></i>
+            <i v-else class="el-input__icon n20-icon-shangchuan"></i>
+          </template>
+        </el-input>
+      </slot>
+    </template>
+    <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>
+  </el-upload>
+</template>
+
+<script>
+export default {
+  name: 'Upload',
+  props: {
+    fileName: {
+      type: String,
+      default: ''
+    },
+    fileUrl: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择文件'
+    },
+    msgType: {
+      type: String,
+      default: 'dialog'
+    },
+    action: {
+      type: String,
+      default: '/bems/1.0/attach'
+    },
+    headers: {
+      type: Object,
+      default: () => ({
+        token: window.sessionStorage.getItem('token') || 'main-token'
+      })
+    },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
+    accept: {
+      type: String,
+      default: undefined
+    },
+    onRemove: {
+      type: Function,
+      default: undefined
+    },
+    onProgress: {
+      type: Function,
+      default: undefined
+    },
+    onSuccess: {
+      type: Function,
+      default: undefined
+    },
+    onError: {
+      type: Function,
+      default: undefined
+    },
+    beforeUpload: {
+      type: Function,
+      default: undefined
+    },
+    showClear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      fileList: [],
+      percent: 0,
+      percentMsg: '',
+      progressV: false,
+      percentType: undefined
+    }
+  },
+  computed: {
+    fileNameC: {
+      get() {
+        return this.fileName
+      },
+      set(v) {
+        this.$emit('update:fileName', v)
+      }
+    },
+    fileUrlC: {
+      get() {
+        return this.fileUrl
+      },
+      set(v) {
+        this.$emit('update:fileUrl', v)
+      }
+    }
+  },
+  methods: {
+    clearFile() {
+      if (this.onRemove) {
+        this.onRemove(this.fileList[0], this.fileList)
+      } else {
+        this.fileNameC = ''
+        this.fileUrlC = ''
+        this.fileList.pop()
+        console.log('删除上传')
+      }
+    },
+    beforeUploadFn(file) {
+      let size = this.size
+      let sizeNum
+
+      if (size) {
+        if (/kb/i.test(size)) {
+          sizeNum = parseFloat(size) * 1024
+        } else if (/mb/i.test(size)) {
+          sizeNum = parseFloat(size) * 1024 * 1024
+        } else {
+          sizeNum = parseFloat(size)
+        }
+        if (file.size > sizeNum) {
+          this.$message.error('文件大小不能超过 ' + size + ' ！')
+          return false
+        }
+      }
+
+      let accept = this.accept
+      if (accept) {
+        let [ftB = '', ftA = ''] = file.type.split('/')
+        ftB = ftB + '/*'
+        ftA = file.name.match(/\.[^.]+$/)?.[0] || '.' + ftA
+        if (!(accept.includes(ftB) || accept.includes(ftA))) {
+          this.$message.error('文件格式错误 ！')
+          return false
+        }
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = 0
+        this.percentType = undefined
+        this.progressV = true
+      }
+
+      if (this.beforeUpload) {
+        return this.beforeUpload(file)
+      } else {
+        return
+      }
+    },
+    progressFn(event, file, fileList) {
+      if (this.onProgress) {
+        this.onProgress(event, file, fileList)
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = event.percent <= 99 ? Math.round(event.percent) : 99
+      }
+    },
+    successFn(response, file, fileList) {
+      if (this.onSuccess) {
+        this.onSuccess(response, file, fileList)
+      } else {
+        this.fileNameC = file.name
+        this.fileUrlC = response.data
+        this.fileList = [file]
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percent = 100
+        this.percentType = 'success'
+        this.percentMsg = response.msg || '上传成功！'
+      } else if (this.msgType === 'message') {
+        if (!this.onSuccess) {
+          this.$message({
+            type: 'success',
+            message: response.msg,
+            showClose: true
+          })
+        }
+      }
+    },
+    errorFn(err, file, fileList) {
+      if (this.onError) {
+        this.onError(err, file, fileList)
+      }
+
+      if (this.msgType === 'dialog') {
+        this.percentType = 'exception'
+        this.percentMsg = err?.msg || '上传失败！'
+      } else if (this.msgType === 'message') {
+        if (!this.onError) {
+          this.$message({
+            type: 'error',
+            message: err?.msg || '上传失败',
+            showClose: true
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/WornPagination/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex-box flex-r">
+    <Pagination :page-obj="pageObj" @change="pageChange" />
+  </div>
+</template>
+
+<script>
+import Pagination from '../Pagination/index.vue'
+export default {
+  name: 'WornPagination',
+  components: {
+    Pagination
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    total: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      pageObj: {
+        no: 1,
+        size: 20,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    page(v) {
+      this.pageObj.no = v
+    },
+    pageSize(v) {
+      this.pageObj.size = v
+    },
+    total(v) {
+      this.pageObj.total = v
+    }
+  },
+  created() {
+    this.pageObj = {
+      no: this.page,
+      size: this.pageSize,
+      total: this.total
+    }
+  },
+  mounted() {
+    console.warn('WornPagination组件已废弃,未来版本将剔除,请使用Pagination组件')
+  },
+  methods: {
+    pageChange(v) {
+      if (v.no !== this.page) {
+        this.$emit('update:page', v.no)
+      }
+      if (v.size !== this.size) {
+        this.$emit('update:pageSize', v.size)
+        // 为修复bug而写的bug
+        this.$nextTick(() => {
+          this.$emit('update:page', v.no)
+        })
+      }
+    }
+  }
+}
+</script>

package/src/directives/VClickOutside/index.js

@@ -0,0 +1,19 @@
+const directive = {}
+
+directive.install = (Vue) => {
+  Vue.directive('click-outside', {
+    bind: function (el, binding, node) {
+      el.clickOutsideEvent = function (event) {
+        if (!(el === event.target || el.contains(event.target))) {
+          node.context[binding.expression](event)
+        }
+      }
+      document.body.addEventListener('click', el.clickOutsideEvent)
+    },
+    unbind: function (el) {
+      document.body.removeEventListener('click', el.clickOutsideEvent)
+    }
+  })
+}
+
+export default directive

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/directives/VHas/index.js

@@ -0,0 +1,27 @@
+import { getRela } from '../../utils/relaNo.js'
+
+export function has(vals) {
+  let { relaNos } = getRela()
+  if (typeof vals === 'string') {
+    return relaNos.includes(vals)
+  } else if (Array.isArray(vals)) {
+    return vals.some((val) => relaNos.includes(val))
+  }
+}
+
+const directive = {}
+directive.install = (Vue) => {
+  Vue.prototype.$has = has
+
+  Vue.filter('isHas', has)
+
+  Vue.filter('noHas', (v) => !has(v))
+
+  Vue.directive('has', {
+    inserted(el, binding) {
+      !has(binding.value) && el.parentNode.removeChild(el)
+    }
+  })
+}
+
+export default directive

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,56 @@
+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.$tooltipHide()
+      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="n20-title-pop"
+    placement="top"
+    >{{ title }}</el-popover
+  >
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '',
+      visible: false
+    }
+  }
+}
+</script>