vue2-org-tree Based VUE department organizational structure components, add or delete nodes

As used herein, portal components: VUE-ORG-Tree  

Based antd  (front end assembly frame other operations are substantially similar: iview, elementui, boostrap-vue ...)

Of course, other similar on github components implementation vary, also displayed differences, but they are very convenient assembly.

We see there are many online tutorials related to the use, on github also written very clearly, will not be repeated here, add or delete nodes to achieve this paper.

Scenario: We usually show department tree when simple direct is a drop-down box to show, in order to show clearly could use some trees.
   

Picture As: (antd VUE document)

But the simple tree has been difficult to meet the needs of the sick. Although the tree has done very natural organizational structure shows the relationship. This time you need to look better, more direct way of displaying.

Preview the style vue2-org-tree components:

 

Showing very good. Clear hierarchy, and support for opening and closing nodes, manually configure the style and so on.

To get started immediately, according to the official case engage in a, uh-huh, very good, indeed bigwigs want.

 Play with some, quite proud, easily solve the needs of annoying. Sure enough Inf, retribution was great, just lazy for a while, he was splashed with cold water, because I found a very desperate people problem. This component does not support extended child nodes.

Yes, it only supports data transfer you to come in, and then render the effect. Then the two switches, horizontal vertical display gone. . . . . . Just beginning to think that this component is not comprehensive enough, yes, at least support the additions and deletions of words. But now the front-end development, complete component development. You need aircraft, give you the plane, but the engine, seats, crew, facilities, need to add your own, because you can not develop a complete adaptation of all assembly configuration, if you developed, first of all cattle but this will be very huge component library, you need to fit a variety of facilities in your library, you need to download the half-hour library package (although the joke, but it does the library is relatively large load is very time-consuming). So we all tend to develop a compact and lightweight components .

Disappointed go down, some research and found that there are API component provides a prop custom rendering of: renderContent 

Since support for custom rendering, I passed a jsx what will happen? Quickly find the drop-down menu component antd of:

 Accompanied by an official source:

<template>
  <a-dropdown :trigger="['click']">
    <a class="ant-dropdown-link" href="#">
      Click me <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item key="0">
        <a href="http://www.alipay.com/">1st menu item</a>
      </a-menu-item>
      <a-menu-item key="1">
        <a href="http://www.taobao.com/">2nd menu item</a>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item key="3">3rd menu item</a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

By mouse click to expand the drop-down menu. Click submenus can achieve different functions. I let each node is a drop-down menu, can not it do? The above code rewrite jsx form, and writes renderContent  method, the recall defining component renderContent  properties oh.

 renderContent (h, data) {
      return (<span><a-dropdown trigger={['click']}>
        <a>{data.title}</a>
        <a-menu slot="overlay" onclick={(key) => this.onClick(key, data)}>
          <a-menu-item v-show={data.level !== 0} key={'add'}>添加同级部门</a-menu-item>
          <a-menu-item key={'addChild'}>添加下级部门</a-menu-item>
          <a-menu-item key={'edit'}>修改部门</a-menu-item>
          <a-menu-item key={'del'} >删除部门</a-menu-item ></a-menu ></a-dropdown ></span >)
    }

h do not explain the matter, it is jsx object. data is my data, title is the name. js onclick event is a element, here passed key drop-down menu, and use the arrow points to the function onClick custom functions.

the onClick (keyObj, Node) {
       IF (keyObj.key === 'del' ) {
         IF (node.children && node.children.length> 0 ) {
           the this . message.info $ ( 'subsectors current sector exists, please delete subsectors' ) 
        } the else {
           the this $ http.get (. '/ rdDept / del' , {the params: {ID: node.value}}) 
            .then (RES => {
               IF (res.success && RES. the Data) {
                 the this . $ message.success ( 'deleted successfully' )
                 the this .loadTree()
              } else {
                this.$message.error(res.errorMessage)
              }
            })
        }
      } else {
        this.$refs.modifyDept.showModal(keyObj.key, node)
      }
    }

onclick in only deal with the delete operation, and there is a child node, do not delete it.

Look at the current results:

View no problems. Actions drop-down menu:

 

The correct response.

I write to you, the delete operation has been achieved. Add, edit operations is already ready to come out, and a definition of the popup input box, where the specific code is not posted.

Display as follows:

 Now we return to the last line of code onClick method:

  this.$refs.modifyDept.showModal(keyObj.key, node)

modifyDept is my new components, showModal is a method of assembly, key component is the drop-down menu key, node is the current node. We look at showModal method:

 showModal (key, data) {switch (key) {
          case 'edit':
            this.setDept(data.title, data.value, data.parentId, data.level, `修改[${data.title}]`, data.identity)
            break
          case 'add':
            this.setDept('', -1, data.parentId, data.level, `添加同级部门[${data.title}]`, data.identity)
            break
          case 'addChild':
            data.identity = data.identity === '' ? data.value : `${data.identity}:${data.value}`
            this.setDept('', -1, data.value, data.level + 1, `添加下级部门[${data.title}]`, data.identity)
            break
          default:
            this.setDept('', -1, -1, 0, '添加研发部门', '')
            break
        }
    },
    setDept (name, id, parentId, level, title, identity) {
      this.form.setFieldsValue({ deptName: name })
      this.params.id = id
      this.params.parentId = parentId
      this.params.level = level
      this.params.thisIdentity = identity
      this.title = title
    }

The passed key operation is determined according to, setDept provided a method of operation of the current sector tree.

this.params object is passed to the object background. The object that you want to operate.

the this .form.setFieldsValue (DEPTNAME {: name}) which forms from antd form api, the set value input box DEPTNAME. 
Input box code is as follows:

<a-form :form="form">
　　<a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
 　　　<a-input v-decorator="['deptName',{rules: [{ required: true, message: '请输入研发部门' }]}]" />
 　</a-form-item>
</a-form>

Next, you just need to write a commit operation of form. Params object passed to the background, and the background is updated by the insert. Then refresh your department tree, additions and deletions to achieve the function.

But it is still in critical operations jsx that code. You can do any effect you want with jsx.

The end！