@aochuang/common 1.0.0 → 1.0.1

package/components/tree/tree.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="ui-tree" :class="{'has-border': border}" :style="{height: height, width: width}">
+    <el-tree
+      class="ui-tree__control"
+      :class="{'is-hide-root-check': hideRootCheck}"
+      ref="tree"
+      :data="innerData"
+      :default-expanded-keys="defaultExpandedKeys"
+      :default-checked-keys="checkedKeys"
+      :node-key="idField"
+      :show-checkbox="multiple"
+      :highlight-current="highlightCurrent"
+      :expand-on-click-node="false"
+      :current-node-key="current"
+      @current-change="handleCurrentChange"
+      :filter-node-method="handleFilterNode"
+      :check-strictly="checkStrictly"
+      :default-expand-all="defaultExpandAll"
+      :allow-drop="allowDrop"
+      @check="handleNodeCheck"
+    >
+      <div class="ui-tree__node" slot-scope="{ node, data }" :style="{'height': itemHeight, 'line-height': itemHeight}">
+        <slot name="node" :data="data">
+          <component
+            :is="handleRenderLevelIcon(node)"
+          ></component>
+          <span
+            :title="data[textField]"
+            class="ui-tree__node-text"
+          >{{ data[textField] }}</span>
+          <span class="ui-tree__node-tool" v-if="$slots['node-toolbar']">
+            <slot name="node-toolbar" :data="data"></slot>
+          </span>
+          <slot name="node-append" :current="node.isCurrent"></slot>
+        </slot>
+      </div>
+    </el-tree>
+    <div class="ui-tree__loading" v-if="loading">
+      <ui-loading></ui-loading>
+    </div>
+  </div>
+</template>
+<script>
+import ElTree from 'element-ui/lib/tree'
+import 'element-ui/lib/theme-chalk/tree.css'
+import UiIcon from '../icon'
+import { getNodesByLevel, getCheckLeastFatherNodes } from './utils'
+
+export default {
+  name: 'UiTree',
+  components: {
+    ElTree
+  },
+  props: {
+    height: {
+      type: String
+    },
+    width: {
+      type: String
+    },
+    border: {
+      type: Boolean
+    },
+    queryMethod: {
+      type: Function
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    checkLeastFather: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    hideRootCheck: {
+      type: Boolean,
+      default: false
+    },
+    current: {
+      type: [String, Number]
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    idField: {
+      type: String
+    },
+    highlightCurrent: {
+      type: Boolean,
+      default: false
+    },
+    showLevelIcon: {
+      type: Boolean,
+      default: false
+    },
+    textField: {
+      type: String,
+      default: 'label'
+    },
+    levelIcons: {
+      type: Array,
+      default: () => []
+    },
+    checkedKeys: {
+      type: Array,
+      default: () => []
+    },
+    defaultExpandedLevel: {
+      type: Number
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    filterKeyword: {
+      type: String
+    },
+    allowDrop: {
+      type: Function
+    },
+    itemHeight: {
+      type: String,
+      default: '32px'
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      innerData: this.data
+    }
+  },
+  computed: {
+    levelIconsMap () {
+      const map = {}
+      if (this.levelIcons && this.levelIcons.length) {
+        this.levelIcons.forEach((v, i) => {
+          if (v.level) {
+            map[v.level] = v
+          } else {
+            map[i + 1] = v
+          }
+        })
+      }
+      return map
+    },
+    defaultExpandedKeys () {
+      return getNodesByLevel(this.innerData, this.defaultExpandedLevel).map(v => {
+        return v[this.idField]
+      })
+    }
+  },
+  watch: {
+    data () {
+      this.innerData = this.data
+    },
+    current (val) {
+      this.$nextTick(() => {
+        this.$refs.tree.setCurrentKey(val)
+      })
+    },
+    filterKeyword (val) {
+      this.$refs.tree && this.$refs.tree.filter(val)
+    },
+    checkedKeys () {
+      this.$nextTick(() => {
+        this.$refs.tree.setCheckedKeys(this.checkedKeys)
+      })
+    }
+  },
+  created () {
+    if (this.queryMethod) {
+      this.loading = true
+      this.queryMethod().then(rs => {
+        this.innerData = rs
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  },
+  mounted () {
+    this.$refs.tree.filter(this.filterKeyword)
+  },
+  methods: {
+    handleRenderLevelIcon (node) {
+      if (!this.showLevelIcon || !node.level) {
+        return
+      }
+      if (!this.levelIcons) {
+        return
+      }
+      const index = node.level
+      let item = this.levelIconsMap[index]
+      if (!item) {
+        item = this.levelIconsMap['*']
+      }
+      if (!item || !item.icon) {
+        return
+      }
+      return {
+        render: (h) => {
+          return h(UiIcon, {
+            class: ['ui-tree__node-icon'],
+            props: {
+              size: 14,
+              name: item.icon,
+              title: item.label
+            }
+          })
+        }
+      }
+    },
+    handleCurrentChange (item) {
+      this.$emit('current-change', {
+        item
+      })
+    },
+    handleFilterNode (value, data) {
+      if (typeof this.filterKeyword === 'undefined' || this.filterKeyword === null || this.filterKeyword === '') {
+        return true
+      }
+      return (data[this.textField] || '').toString().toLowerCase().indexOf(value) >= 0
+    },
+    handleNodeCheck (data, check) {
+      let checkedKeys = check.checkedKeys
+      if (this.checkLeastFather) {
+        const node = this.$refs.tree.getNode(data)
+        checkedKeys = getCheckLeastFatherNodes(node, check.checkedKeys, this.data, this.idField)
+        this.$refs.tree.setCheckedKeys(checkedKeys)
+      }
+      this.$emit('check-change', {
+        data,
+        checkedKeys
+      })
+    },
+    setCurrentKeyFn (val) {
+      this.$nextTick(() => {
+        this.$refs.tree.setCurrentKey(val)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-tree {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  &.has-border {
+    border: 1px solid #ddd;
+    border-radius: 3px;
+  }
+  .el-tree-node:focus>.el-tree-node__content{
+    transition: all .25s;
+  }
+  .el-tree-node__content{
+    height: auto;
+    &:hover{
+      color: #404040;
+      background-color: transparent;
+    }
+  }
+  &.is-hide-root-check{
+    > .el-tree-node{
+      > .el-tree-node__content{
+        .el-checkbox{
+          display: none;
+        }
+      }
+    }
+  }
+  &.el-tree--highlight-current{
+    .el-tree-node .is-current{
+      > .el-tree-node__content{
+        background-color: #f6f7fa!important;
+        color: #4d9fe7;
+        font-weight: bold;
+      }
+    }
+  }
+}
+.ui-tree__control {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.ui-tree__node{
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+}
+.ui-tree__node-text{
+  flex: 1;
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+}
+.ui-tree__node-icon{
+  margin-right: 6px;
+  display: inline-block;
+}
+.ui-tree__loading{
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  bottom: 1px;
+  right: 1px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+}
+</style>

package/components/tree/utils.js

@@ -0,0 +1,122 @@
+export function getNodesByLevel (treeData, level) {
+  const nodes = []
+  if (!treeData || !treeData.length || !level) {
+    return nodes
+  }
+  const loop = (data, lv) => {
+    if (lv >= level) {
+      return
+    }
+    if (!data) {
+      return
+    }
+    data.forEach(v => {
+      nodes.push(v)
+      if (v.children) {
+        loop(v.children, lv + 1)
+      }
+    })
+  }
+  loop(treeData, 0)
+  return nodes
+}
+
+export function getParentsNode (key, data, idField) {
+  const rs = []
+  if (!key || !data) {
+    return rs
+  }
+  const loop = (data) => {
+    if (!data || !data.length) {
+      return
+    }
+    return data.some(v => {
+      if (v[idField] === key) {
+        return true
+      } else if (v.children) {
+        if (loop(v.children)) {
+          rs.push(v)
+          return true
+        }
+      }
+    })
+  }
+  loop(data)
+  return rs
+}
+
+export function findNode (key, data, idField) {
+  let rs = null
+  if (!key || !data) {
+    return rs
+  }
+  const loop = (data) => {
+    if (!data || !data.length) {
+      return
+    }
+    return data.some(v => {
+      if (v[idField] === key) {
+        rs = v
+        return true
+      } else if (v.children) {
+        return loop(v.children)
+      }
+    })
+  }
+  loop(data)
+  return rs
+}
+
+export function getChildrensNode (key, data, idField) {
+  if (!key || !data) {
+    return []
+  }
+  const node = findNode(key, data, idField)
+  if (!node) {
+    return []
+  }
+  const loop = (nodes) => {
+    let rs = []
+    if (nodes && nodes.length) {
+      nodes.forEach(v => {
+        rs.push(v)
+        rs = rs.concat(loop(v.children))
+      })
+    }
+    return rs
+  }
+  return loop(node.children)
+}
+
+/**
+ * 获取保留父级节点后的节点集合
+*/
+export function getCheckLeastFatherNodes (node, checkedList, data, idField) {
+  if (!node) {
+    return
+  }
+  const checkedMap = (checkedList || []).reduce((rs, v) => {
+    rs[v] = true
+    return rs
+  }, {})
+  const childrens = getChildrensNode(node.data[idField], data, idField)
+  childrens.forEach(v => {
+    if (node.checked) {
+      checkedMap[v[idField]] = true
+    } else {
+      checkedMap[v[idField]] = false
+    }
+  })
+  const parents = getParentsNode(node.data[idField], data, idField)
+  parents.forEach(v => {
+    if (!v[idField]) {
+      return
+    }
+    if (v.children.some(vv => checkedMap[vv[idField]])) {
+      checkedMap[v[idField]] = true
+    } else {
+      // checkedMap[v[idField]] = false
+    }
+  })
+  return Object.keys(checkedMap).filter(v => checkedMap[v])
+}

package/components/video/index.js

@@ -0,0 +1,7 @@
+import Video from './video'
+
+Video.install = (Vue) => {
+  Vue.component(Video.name, Video)
+}
+
+export default Video

package/components/video/video.vue

@@ -0,0 +1,53 @@
+<template>
+  <video class="ui-video" :autoplay="autoplay" :width="width" :poster="poster" :preload="preload" :height="height" :controls="controls">
+    <source :src="innerSrc">
+    您的浏览器不支持 video 标签。
+  </video>
+</template>
+<script>
+export default {
+  name: 'UiVideo',
+  props: {
+    width: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    poster: {
+      type: String
+    },
+    preload: {
+      type: String
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    src: {
+      type: String
+    }
+  },
+  computed: {
+    style () {
+      return {
+        width: this.width,
+        height: this.height
+      }
+    },
+    innerSrc () {
+      return this.src
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-video {
+  background-color: #000;
+  object-fit: contain;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/common",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -9,6 +9,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "peerDependencies": {
+    "element-ui": "git+https://gitee.com/devi001/wk-element.git#v2.15.10"
+  },
   "author": "",
   "license": "ISC"
 }

package/utils/date.js

@@ -0,0 +1,55 @@
+/**
+ * 格式化日期
+*/
+export function formatDate (date, fmt = 'YYYY-mm-dd HH:MM:SS') {
+    if (!date) {
+      return
+    }
+    if (typeof date === 'string' && /^[0-9]+$/.test(date)) {
+      date = Number(date)
+    }
+    if (typeof date === 'string' || typeof date === 'number') {
+      date = new Date(date)
+    }
+    if (isNaN(date.getTime())) {
+      return
+    }
+    let ret
+    const opt = {
+      'Y+': date.getFullYear().toString(),
+      'm+': (date.getMonth() + 1).toString(),
+      'd+': date.getDate().toString(),
+      'H+': date.getHours().toString(),
+      'M+': date.getMinutes().toString(),
+      'S+': date.getSeconds().toString()
+    }
+    for (const k in opt) {
+      ret = new RegExp('(' + k + ')').exec(fmt)
+      if (ret) {
+        fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+      }
+    }
+    return fmt
+  }
+  
+  /**
+   * 将时间戳或者日期字符串转为日期对象
+  */
+  export function parseDate (date) {
+    if (!date) {
+      return
+    }
+    if (date.getTime) {
+      return date
+    }
+    if (typeof date === 'number') {
+      return new Date(date)
+    }
+    if (typeof date === 'string') {
+      const ds = date.split(/\D+/)
+      if (ds.length > 0) {
+        return new Date(ds[0], ds[1] ? (ds[1] - 1) : 0, ds[2] || 1, ds[3] || 0, ds[4] || 0, ds[5] || 0)
+      }
+    }
+  }
+  

package/utils/emitter.js

@@ -0,0 +1,3 @@
+import Emitter from 'element-ui/src/mixins/emitter'
+
+export default Emitter

package/utils/json.js

@@ -0,0 +1,19 @@
+export function stringify (data, ag1, ag2) {
+  if (data && typeof data === 'object') {
+    data = JSON.stringify(data, ag1, ag2)
+  }
+  return data
+}
+
+export function parse (data) {
+  try {
+    if (typeof data === 'string') {
+      data = JSON.parse(data)
+    }
+  } catch (e) {}
+  return data
+}
+
+export function clone (data) {
+  return JSON.parse(JSON.stringify(data))
+}

package/utils/resize-event.js

@@ -0,0 +1,35 @@
+import ResizeObserver from 'resize-observer-polyfill'
+
+const isServer = typeof window === 'undefined'
+
+/* istanbul ignore next */
+const resizeHandler = function (entries) {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || []
+    if (listeners.length) {
+      listeners.forEach(fn => {
+        fn()
+      })
+    }
+  }
+}
+
+/* istanbul ignore next */
+export const addResizeListener = function (element, fn) {
+  if (isServer) return
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = []
+    element.__ro__ = new ResizeObserver(resizeHandler)
+    element.__ro__.observe(element)
+  }
+  element.__resizeListeners__.push(fn)
+}
+
+/* istanbul ignore next */
+export const removeResizeListener = function (element, fn) {
+  if (!element || !element.__resizeListeners__) return
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect()
+  }
+}

package/utils/util.js

@@ -0,0 +1,12 @@
+/**
+ * 获取唯一字符串
+*/
+let _unique = 1587813800524
+export function unique (prefix = 'unique_') {
+  _unique++
+  return (prefix || '') + _unique
+}
+
+export function isEmpty (value) {
+  return value === null || value === undefined || value === ''
+}