@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-org/ks-tree-node.vue

@@ -0,0 +1,94 @@
+<template>
+<div class="ks-tree-container">
+  <div
+    class="tree-node"
+    v-for="(node) in treeData"
+    :key="node.id"
+    :id='"node"+node.id + $attrs.id'
+  >
+    <div class="tree-node__row">
+      <div class="tree-node__row-left" @click.stop="$listeners.nodeClick(node)">
+        <div class="tree-node__row-left__icon">
+          <van-icon
+            color="no"
+            size='10'
+            v-if="node.children && node.children.length"
+            name="play"
+            :class="{'tree-node__row-left__icon-checked': node.expanded, 'tree-node__row-left__icon-active': node.id === $attrs.checkedId}"
+          />
+        </div>
+          <div class="tree-node__row-left__text" :class="{'tree-node__row-left__text-checked': node.id === $attrs.checkedId }">
+            <slot name="treeNode" :node="node" :attrs='$attrs'>
+              {{node.name}}
+            </slot>
+          </div>
+      </div>
+    </div>
+    <div v-if="node.children && node.children.length" class="tree-node__children">
+      <ks-tree-node
+        v-bind="$attrs"
+        v-on='$listeners'
+        v-if="node.expanded || $attrs.expandedList.indexOf(node.id) > -1"
+        :tree-data="node.children"
+      >
+        <template slot="treeNode" slot-scope="{node, attrs}">
+          <slot name="treeNode" :node='node' :attrs='attrs'></slot>
+        </template>
+      </ks-tree-node>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['treeData'],
+  name: 'ks-tree-node',
+}
+</script>
+
+
+<style lang="less" scoped>
+.ks-tree-container {
+  .tree-node {
+    &__row {
+      width: 100%;
+      height: 36px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      &-left {
+        flex: 1;
+        display: flex;
+        &__icon {
+          display: flex;
+          align-items: center;
+          width: 10px;
+          padding: 9px 0;
+          margin-right: 8px;
+          color: #c0c4cc;
+          &-checked {
+            transform: rotate(90deg);
+            color: #165DFF;
+          }
+          &-active {
+          }
+        }
+        &__text {
+          font-size: 13px;
+          line-height: 36px;
+          height: 36px;
+          color: #03050d;
+          font-weight: 400;
+          &-checked {
+            color: #165DFF;
+          }
+        }
+      }
+    }
+    &__children {
+      padding-left: 16px;
+    }
+  }
+}
+</style>

package/kuasheng-ui/components/ks-org/ks-tree.vue

@@ -0,0 +1,229 @@
+<template>
+  <ks-tree-node
+    v-if="visibleTree"
+    :expandedList='expandedList'
+    :checkedList='checkedList'
+    :tree-data="treeData"
+    :checkedId='checkedId'
+    :id='id'
+    @nodeClick='nodeClick'
+  >
+    <template slot="treeNode" slot-scope="{node,attrs}">
+      <slot name="treeNode" :node='node' :attrs='attrs'></slot>
+    </template>
+  </ks-tree-node>
+</template>
+
+<script>
+import ksTreeNode from './ks-tree-node.vue'
+import { scrollParentToElement, hasArrLength } from './utils.js'
+const ROOT_ID = '-11'
+export default {
+  name: 'ks-tree',
+  components: { ksTreeNode },
+  props: {
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => ([])
+    },
+    treeId: {
+      type: String,
+      default: ''
+    },
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => ([])
+    },
+    options: {
+      type: Object
+    },
+    filterNodeMethod: Function,
+    filterTreeMethods: Function
+  },
+  data() {
+    this.treeData = [] // 树的数据不做响应式，减少性能开销
+    return {
+      checkedId: '',
+      visibleTree: false,
+      expandedList: [],
+      checkedList: [],
+      id: this.treeId,
+    }
+  },
+  created() {
+    this.openTree()
+  },
+  destroyed() {
+    this.expandedList = []
+    this.checkedList = []
+  },
+  methods: {
+    /*
+      点击节点事件
+     */
+    nodeClick(item) {
+      this.checkedId = item.id
+      item.expanded = !item.expanded
+      if (item.expanded) {
+        const isExit = this.expandedList.findIndex(id => id === item.id)
+        isExit === -1 && this.expandedList.push(item.id)
+      } else {
+        const isExit = this.expandedList.findIndex(id => id === item.id)
+        isExit > -1 && this.expandedList.splice(isExit, 1)
+      }
+      this.$emit('node-click', item)
+    },
+    /*
+      hr.department.refactoring.get
+      查询选中节点的路径
+    */
+    async queryNodeDetail(id) {
+      try {
+        if (!id) {
+          return {}
+        }
+        const res = await this.$http('hr.department.refactoring.get',10179, { id }, {timeout: 30000})
+        return res
+      } catch (error) {
+        return {}
+      }
+    },
+    destroyedStatus() {
+      this.expandedList = []
+    },
+    /*
+      tree数据查询
+    */
+    async queryTreeData() {
+      if (this.treeData && this.treeData.length) {
+        return this.treeData
+      } else {
+        this.visibleTree = false
+        this.expandedList = []
+        const data = await this.$http('hr.department.refactoring.getSimplifyTreeWithAuth', 10179, {}, {timeout: 30000})
+        return data
+      }
+    },
+    /*
+      1. 打开弹窗时判断是否加载（有本地缓存的数据）如果没有再次查询数据
+      2. 回显。滚动定位， 颜色标识
+    */
+    async openTree () {
+      this.expandedList = []
+      const data = await this.queryTreeData()
+      data && this.processingTreeData(data)
+      // 判断是否存在默认值 如果存在则滚动到对应的节点
+      if (this.defaultCheckedKeys.length) {
+        // 如果相等则直接滚动到对应的位置
+        if (this.defaultCheckedKeys[0] === this.checkedId) {
+          // 可能滚动过，但是没选择
+          this.scrollToNode(this.defaultCheckedKeys[0])
+          return
+        }
+      } else {
+        this.resetNodeStatus()
+      }
+      this.$emit('updateTreeData', this.treeData)
+    },
+    // 滚动到指定的位置
+    scrollToNode(id) {
+      this.$nextTick(() => {
+        const val =  '#node'+id + this.treeId // 可能存在多棵树的时候，这个时候需要添加唯一的标识，不然无法滚动到对应的节点，ID可能出现重复
+        const dom = document.querySelector(val) // 没有就滚到第一个
+        dom && scrollParentToElement(dom)
+      })
+    },
+    resetNodeStatus() {
+      // 如果不存在则滚动到顶级节点 并重置状态
+      this.checkedId = ''
+      this.expandedList = []
+      const { id } =  this.treeData[0]
+      this.treeData.forEach(function iter(ele) {
+        // 其它的收起
+        ele.expanded = ele.id === id
+        ele.checked = false
+        ele.children && ele.children.forEach(iter)
+      })
+      // 滚动定位
+      this.scrollToNode(ROOT_ID)
+      this.$emit('node-click', null)
+      this.$emit('updateTreeData', this.treeData)
+    },
+    /*
+      设置某个节点的状态（包含父节点）
+     */
+    setNodeStatus(id) {
+      let node
+      this.checkedId = id
+      const iter = (ele) => {
+        if (ele.id === id) {
+          ele.expanded = true
+          node = ele
+        }
+        if (hasArrLength(ele.children)) {
+          ele.children.forEach(iter)
+        }
+      }
+      this.treeData.forEach(iter)
+      // 父级展开
+      const fn = (node) => {
+        this.treeData.forEach(function iter(x) {
+          if (x.id === node.parentId) {
+            x.expanded = true
+            fn(x)
+          }
+          if (hasArrLength(x.children)) {
+            x.children.forEach(iter)
+          }
+        })
+      }
+      node && node.parentId && fn(node)
+      // 滚动定位
+      this.scrollToNode(id)
+      node = null
+    },
+    /*
+      数据处理，添加expand
+    */
+    processingTreeData(res) {
+      if (!res || !res.id) {
+        return []
+      }
+      const filterNodeMethod = this.$props.filterNodeMethod
+      let obj = {
+        ...res,
+        expanded: true,
+      }
+      const iter = (obj, ele) => {
+        const {data, parentIds = []} = obj
+        ele.parentIds = [...parentIds, ele.parentId]
+        if (filterNodeMethod && typeof filterNodeMethod === 'function') {
+          const isFilter = filterNodeMethod({...ele, parentIds})
+          if (!isFilter) {
+            return obj
+          }
+        }
+        const node = {
+          ...ele,
+          expanded: false,
+          children: ele.children ? ele.children.reduce(iter, {data: [], parentIds: ele.parentIds}).data : [],
+        }
+        data.push(node)
+        return obj
+      }
+      const { data: children } = obj.children.reduce(iter, { data: [], parentIds: [obj.parentId]})
+      let treeData = {
+        ...obj,
+        children
+      }
+      const filterTreeMethods = this.$props.filterTreeMethods
+      if (filterTreeMethods && typeof filterTreeMethods === 'function') {
+        treeData = filterTreeMethods(treeData) || []
+      }
+      this.treeData = [treeData]
+      obj = null
+      this.visibleTree = true
+    },
+  }
+}
+</script>

package/kuasheng-ui/components/ks-org/utils.js

@@ -0,0 +1,54 @@
+/**
+ *
+ * @export 滚动到指定的dom位置
+ * @param {*} element
+ */
+ export function scrollParentToElement(element) {
+  const parent = getScrollParent(element)
+  parent.scrollTop = element.offsetTop - parent.offsetTop
+}
+
+/**
+ *
+ *
+ * @export  查询父级的滚动的dom
+ * @param {*} element
+ * @return {*}
+ */
+ export function getScrollParent(element) {
+  let style = window.getComputedStyle(element)
+  const excludeStaticParent = style.position === 'absolute'
+  const overflowRegex = /(auto|scroll)/
+
+  if (style.position === 'fixed') return document.body
+
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = window.getComputedStyle(parent)
+    if (excludeStaticParent && style.position === 'static') {
+      continue
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) { return parent }
+  }
+
+  return document.body
+}
+
+export function deepSearch(val, arr) {
+  if (!arr.length) {
+    return
+  }
+  let item = null
+  arr.some(function iter(ele) {
+    const { id, children } = ele
+    if (id === val) {
+      item = ele
+      return true
+    }
+    if (children && children.length) {
+      children.some(iter)
+    }
+  })
+  return item
+}
+
+export const hasArrLength = (data) => (Array.isArray(data) && !!data.length)