首页获取节点 #33

UserUI/src/components/AddNode/index.js

@@ -3,36 +3,22 @@
  *     Initial: 2017/10/21        Wang RiYu
  */
 
-import React     from 'react';
-import PropTypes from 'prop-types';
+import React       from 'react';
+import { connect } from 'dva';
+import PropTypes   from 'prop-types';
 import {
   Form,
   Input,
   Select,
   Modal,
-}                from 'antd';
+}                  from 'antd';
 
 const Option = Select.Option;
 const FormItem = Form.Item;
 const formItemLayout = {
   labelCol: { span: 6 },
   wrapperCol: { span: 14 }
 };
-const options = [
-  {
-    id: '0',
-    label: 'Go'
-  }, {
-    id: '1',
-    label: '语法'
-  }, {
-    id: '2',
-    label: '框架'
-  }, {
-    id: '3',
-    label: '实例'
-  }
-];
 
 const AddNode = ({
   visible,
@@ -43,7 +29,10 @@ const AddNode = ({
     validateFieldsAndScroll,
     resetFields,
   },
+  home
 }) => {
+  const { nodes } = home;
+
   const handleOK = () => {
     validateFieldsAndScroll((errors, values) => {
       if (errors) { return }
@@ -68,7 +57,7 @@ const AddNode = ({
       <Form layout="horizontal">
         <FormItem label='节点' hasFeedback {...formItemLayout}>
           {
-            getFieldDecorator('parent', {
+            getFieldDecorator('pid', {
               initialValue: '',
               rules: [
                 {
@@ -83,7 +72,7 @@ const AddNode = ({
                 optionFilterProp="children"
                 filterOption={(input, option) => option.props.children.indexOf(input) >= 0}>
                 {
-                  options.map(node => <Option key={node.id} value={node.id}>{node.label}</Option>)
+                  nodes.map(node => <Option key={node.id} value={node.id}>{node.label}</Option>)
                 }
               </Select>
             )
@@ -104,7 +93,7 @@ const AddNode = ({
         </FormItem>
         <FormItem label='简介' hasFeedback {...formItemLayout}>
           {
-            getFieldDecorator('desc', {
+            getFieldDecorator('desci', {
               initialValue: '',
               rules: [
                 {
@@ -127,4 +116,4 @@ AddNode.protoTypes = {
   form: PropTypes.object,
 }
 
-export default Form.create()(AddNode)
+export default connect(({ home }) => ({ home }))(Form.create()(AddNode))

UserUI/src/models/home.js

@@ -4,80 +4,52 @@
  */
 
 import { routerRedux } from 'dva/router';
+import { message }     from 'antd';
+import { arrayToTree } from '../utils/index';
+import {
+  GetNodes,
+}                      from '../services/home';
 
 export default {
   namespace: 'home',
 
   state: {
-    source: {
-      label: 'Go',
-      color: '#86D560',
-      children: [{
-        label: '语法',
-        route: 'grammar',
-        children: [{
-          label: 'Graph',
-          route: 'graph',
-        }, {
-          label: 'Net',
-          route: 'net',
-        }, {
-          label: 'Tree',
-          route: 'tree',
-        }]
-      }, {
-        label: '框架',
-        route: 'framework',
-        children: [{
-          label: 'Canvas',
-          route: 'canvas',
-        }, {
-          label: 'Handler',
-          route: 'handler'
-        }, {
-          label: 'Layout',
-          route: 'layout',
-          children: [{
-            label: 'a',
-            route: 'a'
-          }, {
-            label: 'b',
-            route: 'b',
-            children: [{
-              label: 'a',
-              route: 'a'
-            }, {
-              label: 'b',
-              route: 'b'
-            }]
-          }]
-        }]
-      }, {
-        label: '实例',
-        route: 'sample',
-        color: '#86D560',
-        children: [{
-          label: 'Matrix',
-          route: 'matrix',
-          color: '#86D560'
-        }, {
-          label: 'Color',
-          route: 'color',
-        }, {
-          label: 'Util',
-          route: 'util',
-          size: 30
-        }]
-      }]
-    }
+    nodes: [],
+    source: {}
   },
 
   subscriptions: {
-    setup({ dispatch, history }) {  // eslint-disable-line
+    setup({ dispatch, history }) {
+      history.listen(location => {
+        if (location.pathname === '/home' || location.pathname === '/') {
+          dispatch({
+            type: 'query',
+            payload: location.query,
+          })
+        }
+      })
     },
   },
 
   effects: {
+    * query ({ payload }, { call, put }) {
+      const res = yield call(GetNodes, {});
+
+      if (!res.status) {
+        let array = res.data || [];
+
+        yield put({
+          type: 'setSource',
+          payload: {
+            source: arrayToTree(array)[0],
+            nodes: array
+          }
+        })
+      } else {
+        message.warn('获取节点失败')
+      }
+    },
+
     * clickNode ({ payload }, { select, put }) {
       const mode = yield select(state => state.app.mode);
 
@@ -92,8 +64,12 @@ export default {
   },
 
   reducers: {
-    save(state, action) {
-      return { ...state, ...action.payload };
+    setSource (state, action) {
+      return {
+        ...state,
+        source: action.payload.source,
+        nodes: action.payload.nodes,
+      };
     },
   },
 };

UserUI/src/routes/home/index.js

@@ -11,19 +11,16 @@ import TreeGraph   from './treeGraph';
 const Home = ({ home, dispatch }) => {
   const { source } = home;
 
-  const TreeProps = {
-    source,
-    onRoute (route) {
-      dispatch({
-        type: 'home/clickNode',
-        payload: route
-      })
-    }
+  const onRoute  = (route) => {
+    dispatch({
+      type: 'home/clickNode',
+      payload: route
+    })
   }
 
   return (
     <Card>
-      <TreeGraph {...TreeProps} />
+      <TreeGraph source={source} onRoute={onRoute} />
     </Card>
   )
 }

UserUI/src/routes/home/treeGraph.js

@@ -5,6 +5,8 @@
 
 import React from 'react';
 
+var tree;
+
 class TreeGraph extends React.Component {
   constructor (props) {
     super(props);
@@ -23,29 +25,39 @@ class TreeGraph extends React.Component {
     layoutCfg.getHGap = function (d) {
       return 6
     };
-    var tree = new G6.Tree({ // 创建图形，各项配置见https://antv.alipay.com/g6/api/graph.html#fitview-string-object
+    tree = new G6.Tree({ // 创建图形，各项配置见https://antv.alipay.com/g6/api/graph.html#fitview-string-object
       id: 'tree', // 绑定标签id
       height: 600,
       layoutCfg,
       forceFit: true,
       fitView: 'cc',
+      animate: true,
       layoutFn: G6.Layout.CompactBoxTree,
     });
     tree.tooltip({
-      split: '=>'
+      split: ': '
     });
-    tree.node().tooltip(obj => obj.route ? [['双击跳转', obj.label]] : '');
+    tree.node().tooltip('intro');
     tree.source(source); // 传入数据
     tree.edge().shape('smooth');
     tree.on('dblclick', function(ev){ // 双击跳转路由
       let item = ev.item;
-      if(tree.isNode(item) && item.get('model').route){
-        onRoute(item.get('model').route)
+      if(tree.isNode(item) && item.get('model').label){
+        onRoute(item.get('model').label)
       }
     });
     tree.render();
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    if (prevProps.source !== this.props.source) {
+      const { source } = this.props;
+
+      tree.changeData(source);
+      tree.autoZoom();
+    }
+  }
+
   render () {
     return (
       <div id='tree'></div>

UserUI/src/routes/login/index.js

@@ -26,7 +26,6 @@ const Login = ({ login, dispatch, form: { getFieldDecorator, validateFieldsAndSc
   function handleOk () {
     validateFieldsAndScroll((errors, values) => {
       if (errors) { return }
-      console.log(values)
 
       dispatch({
         type: 'login/login',

UserUI/src/services/home.js

@@ -0,0 +1,16 @@
+/*
+ * Revision History:
+ *     Initial: 2017/10/22        Wang RiYu
+ */
+
+import request from '../utils/request';
+import config  from '../utils/config';
+
+const { getNodes } = config.api.home;
+
+export async function GetNodes () {
+  return request({
+    url: getNodes,
+    method: 'get',
+  })
+}

UserUI/src/utils/index.js

@@ -0,0 +1,41 @@
+/*
+ * Revision History:
+ *     Initial: 2017/10/22        Wang RiYu
+ */
+
+/**
+ * 数组格式转树状结构
+ * @param   {array}     array
+ * @param   {String}    id
+ * @param   {String}    pid
+ * @param   {String}    children
+ * @return  {Array}
+ */
+const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {
+  let data = JSON.parse(JSON.stringify(array));
+  let result = []
+  let hash = {}
+  data.forEach((item, index) => {
+    hash[data[index][id]] = data[index]
+  })
+
+  data.forEach((item) => {
+    let hashVP = hash[item[pid]]
+    if (hashVP) {
+      if (item.pid === item.id)
+        result.push(item)
+      else {
+        !hashVP[children] && (hashVP[children] = [])
+        hashVP[children].push(item)
+      }
+    } else {
+      result.push(item)
+    }
+  })
+
+  return result
+}
+
+module.exports = {
+  arrayToTree,
+}