top表格收缩

ebts-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js

@@ -1,3 +1,5 @@
+import utils from '../utils'
+
 /**
  * @author: clay
  * @data: 2021/5/14 23:20
@@ -58,7 +60,7 @@ export default {
       if (nodes) {
         nodes.forEach((node) => {
           const model = node.getModel();
-          if (model.attrs.length < 9) {
+          if (model.column.length < 9) {
             return;
           }
           const idx = model.startIndex || 0;
@@ -71,8 +73,8 @@ export default {
           if (startX > 0) {
             startX = 0;
           }
-          if (startIndex > model.attrs.length - 1) {
+          if (startIndex > model.column.length - 1) {
-            startIndex = model.attrs.length - 1;
+            startIndex = model.column.length - 1;
           }
           graph.update(node, {
             startIndex,
@@ -167,7 +169,7 @@ export default {
           });
           vm.selectedNodeParams = {
             label: clickNodeModel.label || "",
-            attrs:clickNodeModel.attrs,
+            column:clickNodeModel.column,
             appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
           };
         }
@@ -184,8 +186,8 @@ export default {
           vm.selectedEdgeParams = {
             label: clickEdgeModel.label || "",
             relationalItem: clickEdgeModel.relationalItem,
-            sourceAttrs:clickEdgeModel.sourceAttrs,
+            sourceColumn:clickEdgeModel.sourceColumn,
-            targetAttrs:clickEdgeModel.targetAttrs,
+            targetColumn:clickEdgeModel.targetColumn,
             appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
           };
         }
@@ -204,13 +206,16 @@ export default {
         graph.updateItem(item, {
           collapsed: true,
           size: [300, 50],
+          height:44,
         });
         setTimeout(() => graph.layout(), 100);
       } else if (shape.get("name") === "expand") {
-        graph.updateItem(item, {
+        let updateGraph = graph.updateItem(item, {
           collapsed: false,
           size: [300, 500],
+          height:316,
         });
+        // utils.anchor.update({height:100,}, graph)
         setTimeout(() => graph.layout(), 100);
       }else {
         // eslint-disable-next-line no-unused-vars

ebts-ui/src/views/tool/top/packages/topology/src/behavior/drag-add-edge.js

@@ -99,7 +99,7 @@ export default {
           id: utils.generateUUID(),
           // 起始节点
           source: sourceNodeModel.id,
-          sourceAttrs:sourceNodeModel.attrs,
+          sourceColumn:sourceNodeModel.attrs,
           sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "",
           // 终止节点/位置
           relational: relational,
@@ -160,7 +160,7 @@ export default {
                 target: targetNodeModel.id,
                 relationalItem:relationalItem,
                 targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "",
-                targetAttrs: targetNodeModel.attrs,
+                targetColumn: targetNodeModel.attrs,
               });
 
               // ************** 记录historyData的逻辑 start **************

ebts-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js

@@ -33,13 +33,13 @@ export default {
       };
 
       const {
-        attrs = [],
+        column = [],
         startIndex = 0,
         selectedIndex,
         collapsed,
         icon,
       } = cfg;
-      const list = attrs;
+      const list = column;
       const afterList = list.slice(
         Math.floor(startIndex),
         Math.floor(startIndex + itemCount - 1)
@@ -212,42 +212,40 @@ export default {
             name: `item-${Math.floor(startIndex) + i}-content`,
             draggable: true,
           });
-
+          //未来设置字段之间有锚点
-          if (!cfg.hideDot) {
+          // if (!cfg.hideDot) {
-            // utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY)
+          //   utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY)
-            // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
+          //   utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
-            // listContainer.addShape("marker", {
+          //   listContainer.addShape("marker", {
-            //   attrs: {
+          //     attrs: {
-            //     x: 0,
+          //       x: 0,
-            //     y: i * itemHeight + offsetY,
+          //       y: i * itemHeight + offsetY,
-            //     r: 3,
+          //       r: 3,
-            //     stroke: boxStyle.stroke,
+          //       stroke: boxStyle.stroke,
-            //     fill: "white",
+          //       fill: "white",
-            //     radius: 2,
+          //       radius: 2,
-            //     lineWidth: 1,
+          //       lineWidth: 1,
-            //     cursor: "crosshair",
+          //       cursor: "crosshair",
-            //   },
+          //     },
-            //
+          //
-            //   name: 'marker-shape'
+          //     name: 'marker-shape'
-            // });
+          //   });
-            // listContainer.addShape("marker", {
+          //   listContainer.addShape("marker", {
-            //   attrs: {
+          //     attrs: {
-            //     x: width,
+          //       x: width,
-            //     y: i * itemHeight + offsetY,
+          //       y: i * itemHeight + offsetY,
-            //     r: 3,
+          //       r: 3,
-            //     stroke: boxStyle.stroke,
+          //       stroke: boxStyle.stroke,
-            //     fill: "white",
+          //       fill: "white",
-            //     radius: 2,
+          //       radius: 2,
-            //     lineWidth: 1,
+          //       lineWidth: 1,
-            //     cursor: "crosshair",
+          //       cursor: "crosshair",
-            //
+          //
-            //
+          //
-            //   },
+          //     },
-            //   name: 'marker-shape'
+          //     name: 'marker-shape'
-            // });
+          //   });
-
+          // }
-
-          }
 
           listContainer.addShape("text", {
             attrs: {

ebts-ui/src/views/tool/top/packages/topology/src/topology.vue

@@ -139,7 +139,7 @@
                 <div class="input-select">
                   <el-select v-model="selectedEdgeParams.appConfig.tableComment" @change="tableCommentChang" size="mini">
                     <el-option
-                      v-for="(item ,index) in selectedEdgeParams.sourceAttrs"
+                      v-for="(item ,index) in selectedEdgeParams.sourceColumn"
                       :key="index"
                       :label="item.columnName+':'+item.columnComment"
                       :value="item.columnName"
@@ -152,7 +152,7 @@
                 <div class="input-select">
                   <el-select v-model="selectedEdgeParams.appConfig.relComment" @change="relCommentChange" size="mini">
                     <el-option
-                      v-for="(item ,index) in selectedEdgeParams.targetAttrs"
+                      v-for="(item ,index) in selectedEdgeParams.targetColumn"
                       :key="index"
                       :label="item.columnName+':'+item.columnName"
                       :value="item.columnName"
@@ -1196,7 +1196,7 @@ export default {
         // 开始添加
         if (starts){
           let droppoint = graph.getPointByClient(clientX, clientY)
-          let attrs = []
+          let column = []
           for (let i = 0; i < nodeType.topSearchColumnList.length; i++) {
             let item = nodeType.topSearchColumnList[i]
             if (item.isUse === 1) {
@@ -1205,7 +1205,7 @@ export default {
               item.ucType = null
               item.type = 1
               item.ucMock = null
-              attrs.push(item)
+              column.push(item)
             }
           }
 
@@ -1221,8 +1221,8 @@ export default {
             tableId: nodeType.id,
             table: nodeType.tableName,
             type: 'dice-er-box',
-            attrs: attrs,
+            column: column,
-            size: [55, 55],
+            size: [300, 500],
             width: 250,
             height: 316,
             anchorPoints: [

ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw.js

@@ -1,60 +0,0 @@
-/**
- * @author: clay
- * @data: 2019/08/15
- * @description: draw anchor
- */
-
-import theme from '../../theme'
-
-export default function(cfg, group) {
-  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
-  let { anchorPoints, width, height, id } = cfg
-  if (anchorPoints && anchorPoints.length) {
-    for (let i = 0, len = anchorPoints.length; i < len; i++) {
-      let [x, y] = anchorPoints[i]
-      // 计算Marker中心点坐标
-      let originX = -width / 2
-      let originY = -height / 2
-      let anchorX = x * width + originX
-      let anchorY = y * height + originY
-      // 添加锚点背景
-      let anchorBgShape = group.addShape('marker', {
-        id: id + '_anchor_bg_' + i,
-        attrs: {
-          name: 'anchorBg',
-          x: anchorX,
-          y: anchorY,
-          // 锚点默认样式
-          ...themeStyle.anchorBgStyle.default
-        },
-        draggable: false,
-        name: 'markerBg-shape'
-      })
-      // 添加锚点Marker形状
-      // eslint-disable-next-line no-unused-vars
-      let anchorShape = group.addShape('marker', {
-        id: id + '_anchor_' + i,
-        attrs: {
-          name: 'anchor',
-          x: anchorX,
-          y: anchorY,
-          // 锚点默认样式
-          ...themeStyle.anchorStyle.default
-        },
-        draggable: false,
-        name: 'marker-shape'
-      })
-
-      anchorShape.on('mouseenter', function() {
-        anchorBgShape.attr({
-          ...themeStyle.anchorBgStyle.active
-        })
-      })
-      anchorShape.on('mouseleave', function() {
-        anchorBgShape.attr({
-          ...themeStyle.anchorBgStyle.inactive
-        })
-      })
-    }
-  }
-}

ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/draw_mark.js

@@ -12,10 +12,8 @@ export default function(cfg, group) {
     for (let i = 0, len = anchorPoints.length; i < len; i++) {
       let [x, y] = anchorPoints[i]
       // 计算Marker中心点坐标
-      let originX = -width / 2
+      let anchorX = x * width
-      let originY = -height / 2
+      let anchorY = y * height
-      let anchorX = x * width + originX+125
-      let anchorY = y * height + originY+158
       // 添加锚点背景
       let anchorBgShape = group.addShape('marker', {
         id: id + '_anchor_bg_' + i,

ebts-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js

@@ -4,14 +4,14 @@
  * @description: anchor
  */
 
-// import draw from './draw'
 import erDrawLeft from './er-draw-left'
 import setState from './set-state'
 import drawMark from './draw_mark'
-// import update from './update'
+import update from './update'
 
 export default {
   setState,
   erDrawLeft,
   drawMark,
+  update
 }

ebts-ui/src/views/tool/top/topology.vue

@@ -119,7 +119,7 @@ export default {
         total:0
       },
       graphData: {
-        // "nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
+        // "nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceColumn":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetColumn":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
       },
       nodeTypeList: [
         // { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },

ebts/ebts-generator/src/main/java/com/ebts/generator/service/impl/TopQueryServiceImpl.java

@@ -4,6 +4,7 @@ import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.ebts.common.utils.ServerResult;
+import com.ebts.common.utils.StringUtils;
 import com.ebts.generator.dao.QueryDao;
 import com.ebts.generator.dao.RelationalMapDao;
 import com.ebts.generator.dao.TopSearchTableDao;
@@ -63,8 +64,10 @@ public class TopQueryServiceImpl implements TopQueryService {
                         sql.append(", ");
                     }
                     sql.append(column.getString("columnName"));
-                    sql.append(" as ");
+                    if (StringUtils.isNotNull(column.getString("columnComment"))){
-                    sql.append("'" + column.getString("columnComment") + "'");
+                        sql.append(" as ");
+                        sql.append("'" + column.getString("columnComment") + "'");
+                    }
                     start=true;
                 }
             }