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

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

1. 安装依赖

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree
1
2
3
4
5

2. 引入平台

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

Vue.use(Vue2OrgTree)
1
2
3
4

3. 实现效果图

3. 代码实现

<vue2-org-tree
  :data="data"
  :horizontal="true"
  :collapsable="false"
  :label-class-name="labelClassName"
  :render-content="renderContent"
/>
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242

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]
  }
},
1
2
3
4
5
6
7
8
9
10
11

我们可以看到常量 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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 >
  )
},
1
2
3
4
5
6
7
8
9
10

去除商品和已定价的数据，其余添加定价按钮进行定价操作。由于 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} 吨 未定价`
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

对于取消定价按钮显示逻辑由 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)))
    }
  }
},
1
2
3
4
5
6
7
8
9
10