vue2-org-tree 树型结构的使用

vue2-org-tree 用于创建和显示组织结构树状图，帮助开发者轻松地可视化组织结构，例如公司的层级、部门之间的关系、团队成员等。其主要功能有：自定义节点、可折叠节点、支持拖放、搜索、导航等功能。
这里我们主要使用 vue2-org-tree 进行多次数、多种类对商品信息定价，以可视化的结构图展示，使其更易于理解和浏览。

1. 安装依赖

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

2. 引入平台

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

3. 实现效果图

3. 代码实现

<vue2-org-tree
  :data="data"
  :horizontal="true"
  :collapsable="false"
  :label-class-name="labelClassName"
  :render-content="renderContent"
/>

3.1 样式配置

<style lang="less">
.org-tree-node,
.org-tree-node-children {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;

  &:before, &:after {
    transition: all .35s;
  }
}
.org-tree-node-label {
  position: relative;
  display: inline-block;

  .org-tree-node-label-inner {
    padding: 10px 15px;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  }
}
.org-tree-node-btn {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 20px;
  height: 20px;
  z-index: 10;
  margin-left: -11px;
  margin-top: 9px;
  background-color: #fff;
  border: 1px dashed @colors;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: all .35s ease;

  &:hover {
    background-color: #e7e8e9;
    transform: scale(1.15);
  }

  &:before, &:after {
    content: '';
    position: absolute;
  }

  &:before {
    top: 50%;
    left: 4px;
    right: 4px;
    height: 0;
    border-top: 1px dashed @colors;
  }

  &:after {
    top: 4px;
    left: 50%;
    bottom: 4px;
    width: 0;
    // border-left: 1px dashed @colors;
  }

  &.expanded:after {
    border: none;
  }
}
.org-tree-node {
  padding-top: 20px;
  display: table-cell;
  vertical-align: top;

  &.is-leaf, &.collapsed {
    padding-left: 10px;
    padding-right: 10px;
  }

  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 19px;
  }

  &:after {
    left: 50%;
    border-left: 1px dashed @colors;
  }

  &:not(:first-child):before,
  &:not(:last-child):after {
    border-top: 1px dashed @colors;
  }

}
.collapsable .org-tree-node.collapsed {
  padding-bottom: 30px;

  .org-tree-node-label:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 20px;
    border-right: 1px dashed @colors;
  }
}
.org-tree > .org-tree-node {
  padding-top: 0;

  &:after {
    border-left: 0;
  }
}
.org-tree-node-children {
  padding-top: 20px;
  display: table;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 20px;
    border-right: 1px dashed @colors;
    border-left: none;
  }

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.horizontal {
  .org-tree-node {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    // display: table-cell;
    float: none;
    padding-top: 0;
    padding-left: 20px;

    &.is-leaf, &.collapsed {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    &:before, &:after {
      width: 19px;
      height: 50%;
    }

    &:after {
      top: 50%;
      left: 0;
      border-left: 0;
    }

    &:only-child:before {
      top: 1px;
      border-bottom: 1px dashed @colors;
    }

    &:not(:first-child):before,
    &:not(:last-child):after {
      border-top: 0;
      border-left: 1px dashed @colors;
    }

    &:not(:only-child):after {
      border-top: 1px dashed @colors;
    }

    .org-tree-node-inner {
      display: table;
    }

  }

  .org-tree-node-label {
    display: table-cell;
    vertical-align: middle;
  }

  &.collapsable .org-tree-node.collapsed {
    padding-right: 30px;

    .org-tree-node-label:after {
      top: 0;
      left: 100%;
      width: 20px;
      height: 50%;
      border-right: 0;
      border-bottom: 1px dashed @colors;
    }
  }

  .org-tree-node-btn {
    top: 50%;
    left: 100%;
    margin-top: -11px;
    margin-left: 9px;
  }

  & > .org-tree-node:only-child:before {
    border-bottom: 0;
  }

  .org-tree-node-children {
    display: table-cell;
    padding-top: 0;
    padding-left: 20px;

    &:before {
      top: 50%;
      left: 0;
      width: 20px;
      height: 0;
      border-left: 0;
      border-top: 1px dashed @colors;
    }

    &:after {
      display: none;
    }

    & > .org-tree-node {
      display: block;
    }
  }
}
</style>

3.2 定义 label 样式

使用 labelClassName API 给 label 上的 class，从而实现定义 label 样式。

const colorObj = {
  'DEPOSIT': 'bg-blue',
  'ESTIMATE': 'bg-green',
  'PAYMENTS': 'bg-orange',
}
// 定义 label 样式
labelClassName (item) {
  if (item.pricingType) {
    return colorObj[item.pricingType]
  }
},

我们可以看到常量 colorObj，其对象中的 key 值是定价类型，value 值是所对应的 class 名称。

<style lang="less">
.bg-green {
  color: #fff;
  background-color: #87d068;
}
.bg-blue {
  color: #fff;
  background-color: #2db7f5;
}
.bg-orange {
  color: #fff;
  background-color: #FF913A;
}
</style>

3.3 渲染节点

使用 renderContent API 来渲染子节点。

renderContent (h, item) {
  return (
    <div>
      <span class="item_name">
        {this.getTitle(item)}
      </span>
      {!item.name && !item.skuName && !item.pricingType && ['add'].includes(this.mode) && <a class="m-l-10" onClick={() => this.$emit('open', item)}>定价</a>}
    </div >
  )
},

去除商品和已定价的数据，其余添加定价按钮进行定价操作。由于 data 数据是树型结构，不同层级的渲染逻辑不同，因此我们将渲染逻辑抽离到 getTitle 方法中。代码如下：

getTitle (item) {
  const max = this.getPricingQtyMax(item)
  if (item.name) { // 根节点
    return item.name
  } else if (item.skuName) { // 商品信息
    return `${item.skuName} (${item.planMainQty}吨)`
  } else if (item.pricingType) { // 已定价
    return <span>
      {pricingType._find(item.pricingType).name}: {item.pricingQty}吨 {item.price}元
      {(max > 0) && ['add'].includes(this.mode) && <a class="c-red m-l-10" onClick={() => this.$emit('cancel', { ...item, pricingQtyMax: max, pricingQty: max })}>取消定价</a>}
    </span>
  } else { // 未定价
    return `${item.pricingQty} 吨 未定价`
  }
},

对于取消定价按钮显示逻辑由 getPricingQtyMax 方法处理的，具体代码如下：

getPricingQtyMax () {
  return function (item) {
    /* 货款：未申请支付 | 定金/暂估款：未定价部分 */
    if (['PAYMENTS'].includes(item.pricingType)) {
      return NP.minus(item.pricingQty, item.applyQty || 0)
    } else if (['DEPOSIT', 'ESTIMATE'].includes(item.pricingType)) {
      return NP.minus(item.pricingQty, handleTableTotal('pricingQty', item.children.filter(item => item.pricingType)))
    }
  }
},