feat: update org tree demo

Author: sendya

src/components/Tree/Tree.jsx

@@ -21,8 +21,8 @@ export default {
     }
   },
   methods: {
-    handlePlus (...args) {
-      this.$emit('onAdd', { args })
+    handlePlus (item) {
+      this.$emit('add', item)
     },
     handleTitleClick (...args) {
       this.$emit('titleClick', { args })
@@ -44,7 +44,7 @@ export default {
         <Item key={item.key}>
           { this.renderIcon(item.icon) }
           { item.title }
-          <a class="btn"><a-icon type="plus" onClick={() => this.handlePlus(item)} /></a>
+          <a class="btn" style="width: 20px;z-index:1300" {...{ on: { click: () => this.handlePlus(item) } }}><a-icon type="plus"/></a>
         </Item>
       )
     },

src/views/list/TreeList.vue

@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <a-row :gutter="8">
       <a-col :span="5">
-        <s-tree :dataSource="orgTree" :search="true" @click="handleClick"></s-tree>
+        <s-tree :dataSource="orgTree" :search="true" @click="handleClick" @add="handleAdd" @titleClick="handleTitleClick"></s-tree>
       </a-col>
       <a-col :span="19">
         <s-table
@@ -38,19 +38,23 @@
         </s-table>
       </a-col>
     </a-row>
+
+    <org-modal ref="modal" @ok="handleSaveOk" @close="handleSaveClose" />
   </a-card>
 </template>
 
 <script>
 import STree from '@/components/Tree/Tree'
 import STable from '@/components/table/'
+import OrgModal from './modules/OrgModal'
 import { getOrgTree, getServiceList } from '@/api/manage'
 
 export default {
   name: 'TreeList',
   components: {
     STable,
-    STree
+    STree,
+    OrgModal
   },
   data () {
     return {
@@ -118,9 +122,23 @@ export default {
       }
       this.$refs.table.refresh(true)
     },
+    handleAdd (item) {
+      console.log('add button, item', item)
+      this.$message.info(`提示：你点了 ${item.key} - ${item.title} ` )
+      this.$refs.modal.add(item.key)
+    },
+    handleTitleClick (item) {
+      console.log('handleTitleClick', item)
+    },
     titleClick (e) {
       console.log('titleClick', e)
     },
+    handleSaveOk () {
+
+    },
+    handleSaveClose () {
+
+    },
 
     onSelectChange (selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys

src/views/list/modules/OrgModal.vue

@@ -0,0 +1,100 @@
+<template>
+  <a-modal
+    title="操作"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          label="父级ID"
+        >
+          <a-input v-decorator="['parentId', {}]" disabled />
+        </a-form-item>
+
+        <a-form-item
+          label="机构名称"
+        >
+          <a-input v-decorator="['orgName', {}]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'OrgModal',
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      visible: false,
+      confirmLoading: false,
+      mdl: {},
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    console.log('form::', this.form)
+  },
+  created () {
+    
+  },
+  methods: {
+    add (id) {
+      this.edit({ parentId: id })
+    },
+    edit (record) {
+      this.mdl = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue( { ...record } )
+      })
+    },
+    close () {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk () {
+      const _this = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        // 验证表单没错误
+        if (!err) {
+          console.log('form values', values)
+
+          _this.confirmLoading = true
+          // 模拟后端请求 2000 毫秒延迟
+          new Promise((resolve) => {
+            setTimeout(() => resolve(), 2000)
+          }).then(() => {
+            // Do something
+            _this.$message.success('保存成功')
+            _this.$emit('ok')
+          }).catch(() => {
+            // Do something
+          }).finally(() => {
+            _this.confirmLoading = false
+            _this.close()
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    }
+
+  }
+}
+</script>