top图字段修改完成

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

@@ -167,6 +167,7 @@ export default {
           });
           vm.selectedNodeParams = {
             label: clickNodeModel.label || "",
+            attrs:clickNodeModel.attrs,
             appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
           };
         }

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

@@ -49,6 +49,31 @@
               <span>节点标签</span>
               <el-input v-model="selectedNodeParams.label" size="mini"/>
               <!--              <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label" />-->
+              <div class="input-item">
+                <span>字段信息</span>
+                <template>
+                  <el-table
+                    :data="selectedNodeParams.attrs"
+                    max-height="350px"
+                    style="width: 100%">
+                    <el-table-column
+                      prop="key"
+                      width="120"
+                      label="字段名称">
+                      <template slot-scope="scope">
+                        {{ scope.row.key + ':' + scope.row.comment }}
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="isUse"
+                      label="是否使用">
+                      <template slot-scope="scope">
+                        <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.isUse"></el-checkbox>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </template>
+              </div>
               <div v-for="(value, key) in nodeAppConfig" :key="key">
                 <span>{{ value }}</span>
                 <el-input v-model="selectedNodeParams.appConfig[key]" size="mini"/>
@@ -60,12 +85,15 @@
           <div v-else-if="currentFocus === 'edge'">
             <div class="pannel-title">连线</div>
             <div class="block-container">
-<!--              <span>连线标签</span>-->
+              <!--              <span>连线标签</span>-->
-<!--              <el-input v-model="selectedEdgeParams.label" size="mini"/>-->
+              <!--              <el-input v-model="selectedEdgeParams.label" size="mini"/>-->
               <div class="input-item">
                 <span>查询方式</span>
                 <div class="input-select">
-                  <el-select v-model="selectedEdgeParams.appConfig.associated" @change="selectedEdgeParams.label = selectedEdgeParams.appConfig.associated+' join'" size="mini">
+                  <el-select v-model="selectedEdgeParams.appConfig.associated"
+                             @change="selectedEdgeParams.label = selectedEdgeParams.appConfig.associated+' join'"
+                             size="mini"
+                  >
                     <el-option label="left join" value="left"/>
                     <el-option label="right join" value="right"/>
                     <el-option label="inner join" value="inner"/>
@@ -315,6 +343,7 @@ export default {
         this.selectedNodeParamsTimeout = setTimeout(() => {
           selectedNodeModel.label = newVal.label
           selectedNodeModel.appConfig = newVal.appConfig
+          selectedNodeModel.attrs = newVal.attrs
           this.selectedNode.update(selectedNodeModel)
         }, 300)
       }
@@ -965,47 +994,56 @@ export default {
             {
               key: 'id',
               type: 'number(6)',
-              comment: '主键id'
+              comment: '主键id',
+              isUse: 1
             },
             {
               key: 'key',
               type: 'varchar(255)',
-              comment: '关键字'
+              comment: '关键字',
+              isUse: 1
             },
             {
               key: 'gender',
               type: 'enum(M, F)',
-              comment: 'gender'
+              comment: 'gender',
+              isUse: 1
             },
             {
               key: 'birthday',
               type: 'date',
-              comment: '生日'
+              comment: '生日',
+              isUse: 1
             },
             {
               key: 'hometown',
               type: 'varchar(255)',
-              comment: '家乡'
+              comment: '家乡',
+              isUse: 1
             },
             {
               key: 'country',
               type: 'varchar(255)',
-              comment: '国家'
+              comment: '国家',
+              isUse: 1
             },
             {
               key: 'nation',
               type: 'varchar(255)',
-              comment: 'nation'
+              comment: 'nation',
+              isUse: 1
             },
             {
               key: 'jobId',
               type: 'number(3)',
-              comment: '工作id'
+              comment: '工作id',
+              isUse: 1
             },
             {
               key: 'phone',
               type: 'varchar(255)',
-              comment: '电话'
+              comment: '电话',
+              isUse: 1
             }
           ],
           // img: nodeType.imgSrc,
@@ -1268,9 +1306,10 @@ export default {
     height: calc(100% - 55px);
   }
 
-  .input-item{
+  .input-item {
     margin-top: 8px;
-    .input-select{
+
+    .input-select {
       margin-top: 8px;
     }
   }

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

@@ -26,237 +26,7 @@ export default {
   },
   data() {
     return {
-      graphData: {
+      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': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c',
-          'x': 144.47865794573642,
-          'y': -12.739970930232559,
-          'labels': '服务器',
-          'table': 'test_table',
-          'type': 'dice-er-box',
-          'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          '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,
-          'label': '',
-          'appConfig': { 'ip': '', 'port': '', 'sysName': '' },
-          'depth': 0
-        }, {
-          'id': '933f5158-258e-44c9-8e1f-70aa701729a8',
-          'x': 494.37013081395366,
-          'y': 132.21506782945744,
-          'labels': '数据库',
-          'table': 'test_table',
-          'type': 'dice-er-box',
-          'attrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          '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,
-          'label': '',
-          'appConfig': { 'ip': '', 'port': '', 'sysName': '' },
-          'depth': 0
-        }], 'edges': [{
-          'id': 'b424996b-62cf-487c-bd7b-83210e8a6866',
-          'source': '933f5158-258e-44c9-8e1f-70aa701729a8',
-          'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          'sourceAnchor': 3,
-          'target': '933f5158-258e-44c9-8e1f-70aa701729a8',
-          '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': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
-          'endPoint': { 'x': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
-          'targetAnchor': 3,
-          'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          'curveOffset': [-20, 20],
-          'curvePosition': [0.5, 0.5],
-          'depth': 0
-        }, {
-          'id': '22cefcd1-5d30-4a89-a061-81d7c111a99d',
-          'source': '933f5158-258e-44c9-8e1f-70aa701729a8',
-          'sourceAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          'sourceAnchor': 3,
-          'target': 'a72f9f56-d3b6-4f7b-a42f-bf9cc45e7c3c',
-          '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': 493.87013081395366, 'y': 290.21506782945744, 'anchorIndex': 3 },
-          'endPoint': { 'x': 394.9786579457364, 'y': 145.26002906976743, 'anchorIndex': 1 },
-          'curveOffset': [-20, 20],
-          'curvePosition': [0.5, 0.5],
-          'targetAnchor': 1,
-          'targetAttrs': [{ 'key': 'id', 'type': 'number(6)', 'comment': '主键id' }, {
-            'key': 'key',
-            'type': 'varchar(255)',
-            'comment': '关键字'
-          }, { 'key': 'gender', 'type': 'enum(M, F)', 'comment': 'gender' }, {
-            'key': 'birthday',
-            'type': 'date',
-            'comment': '生日'
-          }, { 'key': 'hometown', 'type': 'varchar(255)', 'comment': '家乡' }, {
-            'key': 'country',
-            'type': 'varchar(255)',
-            'comment': '国家'
-          }, { 'key': 'nation', 'type': 'varchar(255)', 'comment': 'nation' }, {
-            'key': 'jobId',
-            'type': 'number(3)',
-            'comment': '工作id'
-          }, { 'key': 'phone', 'type': 'varchar(255)', 'comment': '电话' }],
-          'depth': 0,
-          'label': '',
-          'appConfig': { 'associated': 'left', 'tableComment': 'id', 'relComment': 'key' }
-        }], 'combos': []
-      },
       nodeTypeList: [
         // { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
         // { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },