feat: new fields

index.html

@@ -43,13 +43,42 @@
  el: '#app',
  data: () => ({
  tree: {
- label: 'Owner',
+ email: 'Owner',
+ old_email: 'Owner',
+ first_name: 'Name',
+ last_name: 'Name',
+ tree_id: '1',
+ parent_id: '1',
+ is_active: '1',
+ is_banned: '1',
+ bin_acc_id: '1',
  children: [{
- label: 'Label 1'
+ email: 'Label 2',
+ old_email: 'Label 2',
+ first_name: 'Name 2',
+ last_name: 'Name 2',
+ tree_id: '2',
+ parent_id: '2',
+ is_active: '1',
+ is_banned: '1',
+ bin_acc_id: '1'
  },{
- label: 'Label 2'
- },{
- label: 'Label 3'
+ old_email: 'Label 3',
+ first_name: 'Name 3',
+ last_name: 'Name 3',
+ tree_id: '3',
+ parent_id: '3',
+ is_active: '1',
+ is_banned: '1',
+ bin_acc_id: '1',
+ children: [
+ {
+ tree_id: null
+ },
+ {
+ tree_id: null
+ }
+ ]
  }]
  }
  }),
@@ -58,7 +87,7 @@
  return "bg_node";
  },
  renderContent (h, data) {
- return data.label;
+ return data;
  },
  onExpand (e, data) {
  if ('expand' in data) {

src/components/org-tree/node.js

@@ -69,7 +69,16 @@ export function renderBtn (h, data, { props, listeners }) {
 // 创建 label 节点
 export function renderLabel (h, data, context) {
  const { props, listeners } = context
- const label = data[props.props.label]
+ const email = data[props.props.email]
+ const old_email = data[props.props.email] ? undefined : data[props.props.old_email]
+ const is_active = !data[props.props.email] && data[props.props.tree_id] ? 'Не активирован' : undefined
+ const is_banned = data[props.props.is_banned] ? 'Забанен' : undefined
+ const first_name = data[props.props.first_name]
+ const last_name = data[props.props.last_name]
+ const tree_id = data[props.props.tree_id]
+ const parent_id = data[props.props.parent_id]
+ const bin_acc_id = data[props.props.bin_acc_id]
+ const empty = data[props.props.tree_id] === null ? 'Нет ребенка' : undefined
  const renderContent = props.renderContent
 
  // event handlers
@@ -78,12 +87,40 @@ export function renderLabel (h, data, context) {
  const mouseOverHandler = listeners[EVENTS.MOUSEOVER]
 
  const childNodes = []
+ const childNodes2 = []
+ const childNodes3 = []
+ const childNodes4 = []
+ const childNodes5 = []
+ const childNodes6 = []
+ const childNodes7 = []
+ const childNodes8 = []
+ const childNodes9 = []
+ const childNodes10 = []
+
  if (typeof renderContent === 'function') {
  let vnode = renderContent(h, data)
 
- vnode && childNodes.push(vnode)
+ vnode && childNodes.push(email)
+ && childNodes8.push(old_email)
+ && childNodes2.push(first_name)
+ && childNodes3.push(last_name)
+ && childNodes4.push(tree_id)
+ && childNodes5.push(parent_id)
+ && childNodes6.push(is_active)
+ && childNodes7.push(is_banned)
+ && childNodes9.push(bin_acc_id)
+ && childNodes10.push(empty)
  } else {
- childNodes.push(label)
+ childNodes.push(email)
+ childNodes8.push(old_email)
+ childNodes2.push(first_name)
+ childNodes3.push(last_name)
+ childNodes4.push(tree_id)
+ childNodes5.push(parent_id)
+ childNodes6.push(is_active)
+ childNodes7.push(is_banned)
+ childNodes9.push(bin_acc_id)
+ childNodes10.push(empty)
  }
 
  if (props.collapsable && !isLeaf(data, props.props.children)) {
@@ -124,7 +161,51 @@ export function renderLabel (h, data, context) {
  'mouseout': createListener(mouseOutHandler, data),
  'mouseover': createListener(mouseOverHandler, data)
  }
- }, childNodes)])
+ }, [h('div', {
+ domProps: {
+ className: 'user__is-active'
+ },
+ }, childNodes6),
+ h('div', {
+ domProps: {
+ className: 'user__email'
+ },
+ }, childNodes),
+ h('div', {
+ domProps: {
+ className: 'user__email'
+ },
+ }, childNodes8),
+ h('div', {
+ domProps: {
+ className: 'user__first-name'
+ },
+ }, childNodes2),
+ h('div', {
+ domProps: {
+ className: 'user__last-name'
+ },
+ }, childNodes3),
+ h('div', {
+ domProps: {
+ className: 'user__tree-id'
+ },
+ }, childNodes4),
+ h('div', {
+ domProps: {
+ className: 'user__is-banned'
+ },
+ }, childNodes7),
+ h('div', {
+ domProps: {
+ className: 'user__bin-acc-id'
+ },
+ }, childNodes9),
+ h('div', {
+ domProps: {
+ className: 'user__empty'
+ },
+ }, childNodes10)])])
 }
 
 // 创建 node 子节点

src/components/org-tree/org-tree.vue

@@ -40,7 +40,16 @@ export default {
  props: {
  type: Object,
  default: () => ({
- label: 'label',
+ email: 'email',
+ old_email: 'old_email',
+ first_name: 'first_name',
+ last_name: 'last_name',
+ tree_id: 'tree_id',
+ parent_id: 'parent_id',
+ is_active: 'is_active',
+ is_banned: 'is_banned',
+ bin_acc_id: 'bin_acc_id',
+ empty: 'empty',
  expand: 'expand',
  children: 'children'
  })

yarn.lock

@@ -4447,7 +4447,7 @@ vue-style-loader@^3.0.0:
  hash-sum "^1.0.2"
  loader-utils "^1.0.2"
 
-vue-template-compiler@^2.4.4:
+vue-template-compiler@^2.6.11:
  version "2.6.11"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
@@ -4459,11 +4459,6 @@ vue-template-es2015-compiler@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.6.11:
- version "2.6.11"
- resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
- integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
-
 watchpack@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"