@aochuang/common 1.0.0 → 1.0.126

package/components/tree/tree.vue

@@ -0,0 +1,485 @@
+<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="expandOnClickNode"
+      :current-node-key="current"
+      :lazy="lazy"
+      :load="lazyLoadMethod"
+      :props="treeProps"
+      @current-change="handleCurrentChange"
+      :filter-node-method="handleFilterNode"
+      :check-strictly="checkStrictly"
+      :default-expand-all="defaultExpandAll"
+      :allow-drop="allowDrop"
+      v-on="bindEvents"
+      @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>
+          <slot name="node" :data="data">
+            <span
+              :title="data[textField]"
+              class="ui-tree__node-text"
+            >{{ data[textField] }}</span>
+          </slot>
+          <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 UiLoading from '../loading'
+import { getNodesByLevel, getCheckLeastFatherNodes } from './utils'
+
+export default {
+  name: 'UiTree',
+  components: {
+    ElTree,
+    UiIcon,
+    UiLoading
+  },
+  props: {
+    height: {
+      type: String
+    },
+    width: {
+      type: String
+    },
+    border: {
+      type: Boolean
+    },
+    queryMethod: {
+      type: Function
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    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
+    },
+    filterMethod: {
+      type: Function
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: false
+    },
+    allowDrop: {
+      type: Function
+    },
+    isLeaf: {
+      type: [Function]
+    },
+    itemHeight: {
+      type: String,
+      default: '32px'
+    },
+    bindContextMenuEvent: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      innerData: this.data
+    }
+  },
+  computed: {
+    bindEvents () {
+      const events = {}
+      if (this.bindContextMenuEvent) {
+        events['node-contextmenu'] = this.handleNodeContextMenu
+      }
+      return events
+    },
+    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]
+      })
+    },
+    treeProps () {
+      return {
+        isLeaf: this.isLeaf
+      }
+    },
+    lazyLoadMethod () {
+      if (!this.lazy || !this.queryMethod) {
+        return
+      }
+      return (parentNode, resolveData) => {
+        const rs = this.queryMethod({
+          parentNode: !parentNode || !parentNode.parent ? null : parentNode 
+        })
+        if (rs && rs.then) {
+          rs.then((rs) => {
+            resolveData(rs)
+          }, () => {
+            resolveData([])
+          })
+        } else {
+          resolveData(rs || [])
+        }
+      }
+    }
+  },
+  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.lazy) {
+      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: {
+    handleNodeContextMenu (evt, data, node) {
+      this.$emit('node-contextmenu', {
+        event: evt,
+        data,
+        node
+      })
+    },
+    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 (this.filterMethod) {
+        return this.filterMethod({
+          keyword: value,
+          data
+        })
+      } else {
+        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)
+      })
+    },
+    filter (keyword) {
+      this.$refs.tree.filter(keyword)
+    },
+    reloadNode (node) {
+      return new Promise((resolve, reject) => {
+        if (this.lazy) {
+          node = this.getNode(node) || this.$refs.tree.root
+          if (!node) {
+            return reject(new Error('未找到节点'))
+          }
+          node.loaded = false
+          node.loadData(() => {
+            resolve()
+          })
+        } else {
+          if (this.queryMethod) {
+            this.loading = true
+            this.queryMethod().then(rs => {
+              this.innerData = rs || []
+              resolve(this.innerData)
+            }, err => {
+              reject(err)
+            }).finally(() => {
+              this.loading = false
+            })
+          }
+        }
+      })
+    },
+    expandNode (node) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      if (node.isLeaf) {
+        return
+      }
+      node.expand()
+    },
+    getNode (node) {
+      let result = null
+      let nodeId = typeof node === 'object' ? node[this.idField] : node
+      const loop = (nodes) => {
+        if (!nodes || !nodes.length) {
+          return
+        }
+        return nodes.some(node => {
+          if (node.data[this.idField] === nodeId) {
+            result = node
+            return true
+          } else {
+            return loop(node.childNodes)
+          }
+        })
+      }
+      loop(this.$refs.tree.root.childNodes)
+      return result
+    },
+    remove (node) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      return this.$refs.tree.remove(node)
+    },
+    append (data, parentNode) {
+      return this.$refs.tree.append(data, this.getNode(parentNode))
+    },
+    update (node, props) {
+      node = this.getNode(node)
+      if (!node) {
+        return
+      }
+      if (!props) {
+        return
+      }
+      Object.keys(props).forEach(key => {
+        this.$set(node.data, key, props[key])
+      })
+    },
+    getData () {
+      if (!this.$refs.tree || !this.$refs.tree.store) {
+        return []
+      }
+      return this.$refs.tree.store.root.data
+    }
+  }
+}
+</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,101 @@
+<template>
+  <video 
+    class="ui-video" 
+    :autoplay="autoplay" 
+    :width="width" 
+    :poster="poster" 
+    :preload="preload" 
+    :height="height" 
+    :controls="controls" 
+    @error="handleError"
+  >
+    <source :src="innerSrc">
+    您的浏览器不支持 video 标签。
+  </video>
+</template>
+<script>
+import { formatOssPath } from '../../utils/oss'
+
+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 formatOssPath(this.src)
+    }
+  },
+  data () {
+    return {
+      isError: false
+    }
+  },
+  watch: {
+    src () {
+      this.isError = false
+    }
+  },
+  mounted () {
+    this.loopCheckError()
+  },
+  methods: {
+    loopCheckError () {
+      if (this.isError) {
+        return
+      }
+      this._checkErrorTimer = setTimeout(() => {
+        // 0:没有关于媒体资源的可用信息，或者媒体资源尚未加载。
+        // 3: 媒体元素尝试加载资源，但没有找到有效的媒体源（可能是资源 URL 错误、403/404 等网络错误，或所有<source>标签指定的资源都无法加载）。
+        if (this.$el.readyState === 0 && this.$el.networkState === 3) {
+          this.isError = true
+          this.$emit('error')
+        } else {
+          this.loopCheckError()
+        }
+      }, 1000)
+    },
+    handleError () {
+      this.isError = true
+      this.$emit('error')
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._checkErrorTimer)
+  }
+}
+</script>
+<style lang="less">
+.ui-video {
+  background-color: #000;
+  object-fit: contain;
+}
+</style>