新增TOPO节点添加及删除功能

src/consts/urlConsts.js

@@ -224,6 +224,7 @@ export const FasSerUrl = {
   updateTopographyUrl: completePrefix(baseURI, 'api/Topography/updateTopo'),//更新Topo图数据
   queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
   saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
+  deleteTopoUrl:completePrefix(baseURI, 'api/Topography/{type}/{id}'),//删除点/线
 };
 
 

src/services/preControlService.js

@@ -220,4 +220,11 @@ export const nodeDetailTopoAction = (id) => {
  */
 export const nodeDetailTopoSaveAction = (nodeDatil) => {
   return commonPost(FasSerUrl.saveNodeDetailUrl, nodeDatil );
+};
+
+/**
+ * 删除节点/线
+ */
+export const deleteTopoAction = (id, type) => {
+  return commonDelete(formatUrl(FasSerUrl.deleteTopoUrl, { id, type }));
 };
\ No newline at end of file

src/styles/view/planMgmt/leaderStruct.scss

@@ -44,6 +44,15 @@
       border-right-style: solid;
       border-width: 1px;
 
+      .leader-struct-palette{
+        border: 1px solid rgb(201, 201, 201);
+        height: 10%;
+      }
+
+      .leader-struct-diagram{
+        height: 90%;
+      }
+
       .tooltip-content {
         width: 251px;
         background: #345fa6;

src/view/planMgmt/common/conf.js

@@ -17,5 +17,5 @@ export const leaderStructButton = [
   // { key: 'add', text: '添加', icon: 'tianjia' },
   { key: 'edit', text: '编辑', icon: 'xiugai' },
   { key: 'save', text: '保存', icon: 'baocun' },
-  // { key: 'delete', text: '删除', icon: 'shanchu' }
+  { key: 'delete', text: '删除', icon: 'shanchu' }
 ];

src/view/planMgmt/view/leaderStruct/LeaderStructModel.js

@@ -66,7 +66,6 @@ class LeaderStructModel extends Component {
 
   componentWillMount = () => {
     const { selectNode } = this.props || {};
-    debugger;
     this.getNodeDetail(selectNode);
   };
 
@@ -116,35 +115,34 @@ class LeaderStructModel extends Component {
     this.setState({ form });
   }
 
-  handleSubmit = nodeid => {
-    debugger;
+  handleSubmit = node => {
     this.form.validate((valid, dataValues) => {
-      debugger;
       if (valid) {
         let { form } = this.state;
-        form.nodeid = nodeid;
-        this.nodeDetailEdit(form);
+        form.nodeid = node.nodeid;
+        form.nodekey = node.key;
+        // this.nodeDetailEdit(form);
+        form.nodeDetail = JSON.stringify(form.nodeDetail);
+        this.props.saveTopography(form);
       } else {
         return false;
       }
     });
   };
 
-  nodeDetailEdit = body => {
-    debugger;
-    body.nodeDetail = JSON.stringify(body.nodeDetail);
-    nodeDetailTopoSaveAction(body).then(
-      data => {
-        AmosAlert.success('提示', '操作成功');
-        // this.props.reloadPage();
-        this.props.cancel();
-        this.props.reloadSelectNode(this.props.selectNode.id);
-      },
-      err => {
-        AmosAlert.error('提示', err);
-      }
-    );
-  };
+  // nodeDetailEdit = body => {
+  //   body.nodeDetail = JSON.stringify(body.nodeDetail);
+  //   nodeDetailTopoSaveAction(body).then(
+  //     data => {
+  //       AmosAlert.success('提示', '操作成功');
+  //       this.props.cancel();
+  //       this.props.reloadSelectNode(this.props.selectNode.id);
+  //     },
+  //     err => {
+  //       AmosAlert.error('提示', err);
+  //     }
+  //   );
+  // };
 
   /**
    * 获取表格刷新方法

src/view/planMgmt/view/leaderStruct/index.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { browserHistory } from 'amos-react-router';
-import { Modal, Button, message } from 'amos-framework';
+import { Modal, Button, message, AmosAlert } from 'amos-framework';
 import BizIcon from './../../../common/icon/BizIcon';
 import ToolBar from './ToolBar';
 import go from 'amos-gojs';
-import { queryTopographyAction, updateTopographyAction, nodeDetailTopoAction } from './../../../../services/preControlService';
+import { queryTopographyAction, updateTopographyAction, nodeDetailTopoAction, deleteTopoAction } from './../../../../services/preControlService';
 import LeaderStructModel from './LeaderStructModel';
 import LeaderStructRightGrid from './LeaderStructRightGrid';
 
@@ -27,75 +27,65 @@ class LeaderStruct extends Component {
       modal: false,
       toolBarFlag: '',
       selectNode: {},
+      selectNodeType: '',
       rightGridData: []
     };
     this.diagram = null; //gojs图
+    this.myPalette = null; //工具栏
     this.updateTopologyData = {};
   }
 
-  // componentWillMount(){
-  //   let { appId } = this.props.location.state;
-  //   debugger;
-
-  // }
-
   componentDidMount() {
     let { appId } = this.props.location.state;
-    debugger;
+    this.fetchData(appId);
+  }
+
+  fetchData = (appId) => {
     queryTopographyAction(appId).then(res =>{
       this.setState({nodeData: res.nodeData , linkData: res.linkData })
       this.renderCanvas();
     });
   }
 
-   // this function is the Node.dragComputation, to limit the movement of the parts
-   stayInFixedArea = (part, pt, gridpt) => {
-    let diagram = part.diagram;
-    if (diagram === null) {return pt;}
-		// compute the document area without padding
-    let v = diagram.documentBounds.copy();
-    v.subtractMargin(diagram.padding);
-		// get the bounds of the part being dragged
-    let b = part.actualBounds;
-    let loc = part.location;
-		// now limit the location appropriately
-    let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
-    let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
-    return new go.Point(x, y);
-  }
-
-  makePort = (name, align, spot, output, input) => {
-		var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
-		// the port is basically just a transparent rectangle that stretches along the side of the node,
-		// and becomes colored when the mouse passes over it
-		return goObj(go.Shape,
+  makePort = (name, spot, output, input) => {
+		// the port is basically just a small transparent square
+		return goObj(go.Shape, "Circle",
 				 {
-			// fill: "transparent",  // changed to a color in the mouseEnter event handler
-			strokeWidth: 0,  // no stroke
-			width: 0,  // if not stretching horizontally, just 8 wide
-			height: 0,  // if not stretching vertically, just 8 tall
-			alignment: align,  // align the port on the main Shape
-			stretch: 0,
+			fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
+			stroke: null,
+			desiredSize: new go.Size(7, 7),
+			alignment: spot,  // align the port on the main Shape
+			alignmentFocus: spot,  // just inside the Shape
 			portId: name,  // declare this object to be a "port"
-			fromSpot: spot,  // declare where links may connect at this port
-			fromLinkable: output,  // declare whether the user may draw links from here
-			toSpot: spot,  // declare where links may connect at this port
-			toLinkable: input,  // declare whether the user may draw links to here
-			cursor: "pointer",  // show a different cursor to indicate potential link point
-			mouseEnter: function(e, port) {  // the PORT argument will be this Shape
-				if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
-			},
-			mouseLeave: function(e, port) {
-				port.fill = "transparent";
+			fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
+			fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
+			cursor: "pointer"  // show a different cursor to indicate potential link point
+		});
+	}
+  //展示 连接点
+  showSmallPorts = (e,node) => {
+		node && node.ports.each(function(port) {
+			if (port.portId !== "") {  // don't change the default port, which is the big shape
+				port.fill = "rgba(0,0,0,.3)";
+			}
+		});
+  }
+
+  hideSmallPorts = (e,node) => {
+		node && node.ports.each(function(port) {
+			if (port.portId !== "") {  // don't change the default port, which is the big shape
+				port.fill = null;
 			}
 		});
 	}
 
   // 选择节点
   nodeSelectionChanged = (node) => {
-    console.log(node,'node');
-    this.reloadSelectNode(node.data.id);
-    this.setState({ selectNode: node.data || {}})
+    if(node.isSelected){
+      // console.log(node.data,'selected');
+      this.reloadSelectNode(node.data.id);
+      this.setState({ selectNode: node.data || {}, selectNodeType: node.type.name || ''});
+    }
   }
 
   reloadSelectNode = (id) => {
@@ -106,12 +96,14 @@ class LeaderStruct extends Component {
 
   // 提示框 
   showToolTip = (obj, diagram, tool) => {
-    let toolTipDIV = document.getElementById('toolTipDIV');
-    let pt = diagram.lastInput.viewPoint;
-    toolTipDIV.style.left = `${pt.x + 12}px`;
-    toolTipDIV.style.top = `${pt.y}px`;
-    toolTipDIV.style.display = 'block';
-    this.getNodeDetail(obj.data.id);
+    if(!obj.data.isPalette){
+      let toolTipDIV = document.getElementById('toolTipDIV');
+      let pt = diagram.lastInput.viewPoint;
+      toolTipDIV.style.left = `${pt.x + 12}px`;
+      toolTipDIV.style.top = `${pt.y}px`;
+      toolTipDIV.style.display = 'block';
+      this.getNodeDetail(obj.data.id);
+    }
   }
 
   hideToolTip = (diagram, tool) => {
@@ -129,12 +121,11 @@ class LeaderStruct extends Component {
 
   onOk = () => {
     let { selectNode } = this.state;
-    if (selectNode.id) {
-      this.model.handleSubmit(selectNode.id);
+    if (selectNode) {
+      this.model.handleSubmit(selectNode);
     } else {
       AmosAlert.warning('提示','请选择节点后，再进行操作');
     }
-    // this.setState({ model: false, toolBarFlag: '' })
   };
 
   cancel = () => {
@@ -162,65 +153,51 @@ class LeaderStruct extends Component {
     });
 
     this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
-      allowZoom: false,              // disallow zooming
-      // initialContentAlignment: go.Spot.TopLeft,
       contentAlignment: go.Spot.Center,
       initialPosition: new go.Point(0, 0),
       'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
       'animationManager.isEnabled': false, // 过渡动画
-      // 'textEditingTool.defaultTextEditor': this.customEditor,
-      ModelChanged: (e) => {     // just for demonstration purposes,
+      ModelChanged: (e,value) => {     // just for demonstration purposes,
         if (e.isTransactionFinished) {  // show the model data in the page's TextArea
-          console.log(e.model.toJson(), 'model');
           this.updateTopologyData = JSON.parse(e.model.toJson());
-          // this.props.nodeChange(e);
         }
-      },
-      SelectionMoved: (e) => {
-        // setTimeout(()=> {
-        //   this.updateTopo();
-        // },0);
-      },
-      ViewportBoundsChanged: () => {
-        // setTimeout(()=> {
-        //   this.updateTopo();
-        // },0);
       }
     });
     this.diagram.nodeTemplateMap.add('leaderStruct',
-      goObj(go.Node, 'Vertical',
+      goObj(go.Node, 'Spot',
         {
           locationSpot: go.Spot.Center,
-          // locationObjectName: 'ICON',
-          // selectionObjectName: 'ICON',
-          dragComputation: this.stayInFixedArea,
           selectionChanged: this.nodeSelectionChanged,
           toolTip: myToolTip
         },
-        new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
         goObj(go.Panel,'Auto',
           goObj(go.Shape, 'RoundedRectangle',
           { fill: 'white' }),
           goObj(go.TextBlock,
             {
-              editable: true,
               margin: 10,
-              font: '15px sans-serif'
+              font: '15px sans-serif',
+              editable: true,
             },
-            new go.Binding('text', 'text')
+            new go.Binding('text', 'text').makeTwoWay()
           ),
         ),
-        // this.makePort("T", go.Spot.Top, go.Spot.Top, false, true),
-        // this.makePort("L", go.Spot.Left, go.Spot.Left, true, true),
-        // this.makePort("R", go.Spot.Right, go.Spot.Right, true, true),
-        // this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false),
         {
           selectionAdornmentTemplate:
-              goObj(go.Adornment, 'Auto',
-                goObj(go.Shape, 'RoundedRectangle',
-                { fill: null, stroke: '#108ee9', strokeWidth: 3, margin:3 }),
-                goObj(go.Placeholder)
-              )  // end Adornment
+          goObj(go.Adornment, 'Auto',
+          goObj(go.Shape, 'RoundedRectangle',
+          { fill: null, stroke: '#108ee9', strokeWidth: 3, margin:3 }),
+          goObj(go.Placeholder)
+          )  // end Adornment
+        },
+        this.makePort("T", go.Spot.Top, false, true),
+        this.makePort("L", go.Spot.Left, true, true),
+        this.makePort("R", go.Spot.Right, true, true),
+        this.makePort("B", go.Spot.Bottom, true, false),
+        {
+          mouseEnter: this.showSmallPorts,
+          mouseLeave: this.hideSmallPorts,
         },
       )
     );
@@ -233,13 +210,12 @@ class LeaderStruct extends Component {
           relinkableFrom: true,
           relinkableTo: true,
           reshapable: true,
+          selectionChanged: this.nodeSelectionChanged,
         },
       goObj(go.Shape, { strokeWidth: 2 }),
       goObj(go.Shape, { toArrow: "OpenTriangle" })
 		 );
       
-      // nodeData = [{"id":"2-00014","key":"00014","category":"Picture","group":"03000","text":"上海NPC A","source":"single-way","treeid":"4","singlePort":"00014"},{"id":"2-00015","key":"00015","category":"Picture","group":"03000","text":"上海NPC B","source":"single-way","treeid":"4","singlePort":"00015"},{"id":"2-00016","key":"00016","category":"Picture","group":"03000","text":"上海NPC C","source":"single-way","treeid":"4","singlePort":"00016"},{"id":"2-00017","key":"00017","category":"Picture","group":"03000","text":"上海NPC D","source":"single-way","treeid":"4","singlePort":"00017"},{"id":"2-00020","key":"00020","category":"Picture","group":"03000","text":"XAPMTSAP1","source":"single-way","treeid":"4","singlePort":"00020"}]
-      // linkData = [{"id":"c02e649cecff53fe8a0e96a1e56a18f8","from":"00020","to":"00014","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00014"},{"id":"f8072d2df9545646b2460c813085014f","from":"00020","to":"00015","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00015"},{"id":"8767ffa2a97d50a7a59c9391cff9810e","from":"00015","to":"00016","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00016"},{"id":"3c3ec3b00372557e936c3c8eefe92da8","from":"00015","to":"00017","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00017"}]
     this.diagram.model = goObj(go.GraphLinksModel,
       {
         linkFromPortIdProperty: 'fromPort',  // required information:
@@ -248,34 +224,68 @@ class LeaderStruct extends Component {
         linkDataArray: linkData || []
       });
 
+    this.myPalette =
+      goObj(go.Palette, this.refs.myPaletteDiv, 
+        {
+      nodeTemplateMap: this.diagram.nodeTemplateMap,  // share the templates used by myDiagram
+      model: new go.GraphLinksModel([  // specify the contents of the Palette
+        { category: "leaderStruct", text: "节点", isPalette: true }
+      ]
+      )
+    });
   }
 
   onButtonClick = (key)=>{
+    const { selectNode, selectNodeType } = this.state;
     if (key === 'goback') {
       browserHistory.goBack();
     } else if (key === 'save'){
-      const { nodeDataArray,linkDataArray } = this.updateTopologyData;
-      const params = {
-        appId: this.props.location.state.appId,
-        nodeData: nodeDataArray,
-        linkData: linkDataArray
-      };
-      updateTopographyAction(params).then(data => {
-        message.success('拓扑图保存成功!');
-      });
+      this.saveTopography(null);
     }else if(key === 'edit'){
-      const { selectNode } = this.state;
-      if(selectNode.id){
+      if(selectNode && selectNodeType === "Spot"){
         this.setState({ modal: true });
       }else{
         message.danger('请选择节点!');
       }
+    }else if(key === 'delete'){
+      if(selectNode && selectNodeType){
+        selectNode.id && deleteTopoAction(selectNode.id, selectNodeType).then(data =>{
+          message.success('删除成功!');
+        });
+        this.diagram.commandHandler.deleteSelection();
+        this.setState({ selectNode: {}, selectNodeType: '' });
+      }else{
+        message.danger('请选择节点!');
+      }
     }else{
       console.log('暂未开发');
     }
     this.setState({toolBarFlag: key});
   }
 
+  saveTopography = (nodeDetail) => {
+    const { nodeDataArray,linkDataArray } = this.updateTopologyData;
+    const params = {
+      appId: this.props.location.state.appId,
+      nodeData: nodeDataArray,
+      linkData: linkDataArray,
+      nodeDetail: nodeDetail
+    };
+    updateTopographyAction(params).then(data => {
+      AmosAlert.success('提示', '拓扑图保存成功!');
+      this.cancel();
+      this.diagram.model =  goObj(go.GraphLinksModel,
+        {
+          linkFromPortIdProperty: 'fromPort',  // required information:
+          linkToPortIdProperty: 'toPort',      // identifies data property names
+          nodeDataArray: data.nodeData || [],
+          linkDataArray: data.linkData || []
+        });
+    }).catch(e => {
+      AmosAlert.error('错误', '保存失败');
+    });;
+  }
+
   getHeader = () => {
     const { toolBarFlag } = this.state;
     if (toolBarFlag === 'edit') {
@@ -291,6 +301,7 @@ class LeaderStruct extends Component {
                   cancel={this.cancel} 
                   selectNode={selectNode}  
                   reloadSelectNode={this.reloadSelectNode}
+                  saveTopography={this.saveTopography}
                   ref={component => this.model = component} 
                 />;
       }
@@ -318,19 +329,14 @@ class LeaderStruct extends Component {
         </div>
         <div className='leader-struct-content'>
           <div className='leader-struct-left'>
-
-            {/* <img src='/src/view/planMgmt/view/leaderStruct/company.jpg' alt='' /> */}
-
-            <div ref="goJsDiv" style={{height:'100%'}}/>
+            <div ref="myPaletteDiv"  className='leader-struct-palette' id = "myPaletteDiv"/>
+            <div ref="goJsDiv" className='leader-struct-diagram'/>
             {this.renderDetail()}
-            
-
           </div>
           <div className='leader-struct-right'>
             <LeaderStructRightGrid nodeDetail = { rightGridData }/>
           </div>
         </div>
-
         <Modal
           header={this.getHeader(toolBarFlag)}
           visible={modal}
@@ -343,7 +349,6 @@ class LeaderStruct extends Component {
           outterClosable={false}
           footer={this.getFooter()}
         />
-
       </div>
     );
   }