right-drawer.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <div ref="rightDrawer" class="right-drawer">
  3. <div ref="miniMap" class="drawer-map"></div>
  4. <div class="right-drawer-content">
  5. <div class="right-drawer-title">属性面板</div>
  6. <div class="right-drawer-body">
  7. <div class="right-drawer-body-item">
  8. <div class="right-drawer-body-item-title">节点名称</div>
  9. <div class="right-drawer-body-item-content">
  10. <input class="normal-input" type="text" v-model="drawerNode.nodeText" @change="changeNodeText"/>
  11. </div>
  12. </div>
  13. <div class="right-drawer-body-item">
  14. <div class="right-drawer-body-item-title">线条文本</div>
  15. <div class="right-drawer-body-item-content">
  16. <input class="normal-input" type="text" v-model="drawerEdge.edgeText" @change="changeEdgeText"/>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. drawerType: {
  27. type: String,
  28. default: 'grid'
  29. },
  30. selectCell: {
  31. type: Object | String,
  32. default: () => {}
  33. },
  34. graph: {
  35. type: Object | String,
  36. default: () => {}
  37. },
  38. grid: {
  39. type: Object
  40. },
  41. },
  42. data() {
  43. return {
  44. drawerNode: {
  45. fill: '',
  46. nodeText: '',
  47. fontSize: null,
  48. fontFill: '',
  49. strokeWidth: null,
  50. stroke: '',
  51. //其它参数
  52. nodeType: '',
  53. entityId: '',
  54. itemId: '',
  55. flowNodeType: '',
  56. groupIdentify: '',
  57. childFlowIdentify: '',
  58. methodName: '',
  59. methodParams: '',
  60. methodType: '',
  61. hasMethodParams: false,
  62. methodExp: '',
  63. flowJudges: [],
  64. // isJudgeNode: '0'
  65. },
  66. drawerEdge: {
  67. isCondition: false,
  68. edgeText: '',
  69. edgeSelect: true,
  70. edgeWidth: null,
  71. edgeColor: ''
  72. },
  73. }
  74. },
  75. watch: {
  76. selectCell: {
  77. handler(val) {
  78. if (val) {
  79. if (val.isNode()) { //节点
  80. this.drawerNode.fill = val.store.data.attrs.body.fill;
  81. this.drawerNode.nodeText = val.store.data.attrs.label.text;
  82. this.drawerNode.fontFill = val.store.data.attrs.label.fill;
  83. this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize);
  84. this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth);
  85. this.drawerNode.stroke = val.store.data.attrs.body.stroke;
  86. this.drawerNode.nodeType = val.store.data.attrs.nodeData.type;
  87. const flowNode = val.store.data.attrs.nodeData.flowNode;
  88. this.drawerNode.entityId = flowNode.entityId;
  89. this.drawerNode.itemId = flowNode.itemId;
  90. this.drawerNode.flowNodeType = flowNode.flowNodeType;
  91. this.drawerNode.groupIdentify = flowNode.groupIdentify;
  92. this.drawerNode.childFlowIdentify = flowNode.childFlowIdentify;
  93. this.drawerNode.methodExp = flowNode.methodExp;
  94. this.drawerNode.methodType = flowNode.methodType;
  95. this.drawerNode.flowJudges = flowNode.flowJudges;
  96. } else { //边
  97. this.drawerEdge.edgeText = val.store.data.labels ? val.store.data.labels[0].text != undefined ? val.store.data.labels[0].text : val.store.data.labels[0].attrs.label.text : '';
  98. console.log('his.drawerEdge.edgeText',this.drawerEdge.edgeText)
  99. this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth);
  100. this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
  101. //处理条件连线
  102. let sourceNode = this.graph.getCellById(val.store.data.source.cell);
  103. // console.log(sourceNode, val)
  104. //判断源节点是否为条件节点
  105. // if (sourceNode.store.data.attrs.nodeData.type === 'polygon') {
  106. // this.drawerEdge.isCondition = true;
  107. // if (this.drawerEdge.edgeText === '') {
  108. // this.drawerEdge.edgeText = this.drawerEdge.edgeSelect ? '是' : '否';
  109. // //修改线条文本
  110. // this.changeEdgeText();
  111. // }
  112. // this.drawerEdge.edgeSelect = this.drawerEdge.edgeText === '是' ? true : false;
  113. // } else {
  114. // this.drawerEdge.isCondition = false;
  115. // }
  116. }
  117. }
  118. },
  119. immediate: true,
  120. deep: false
  121. },
  122. },
  123. methods: {
  124. // 节点设置
  125. changeNodeText() {
  126. this.selectCell.attr('label/text', this.drawerNode.nodeText);
  127. },
  128. // 边设置
  129. changeEdgeText() {
  130. // console.log(this.drawerEdge.edgeText);
  131. this.selectCell.setLabels(
  132. [{ attrs: { label: { text: this.drawerEdge.edgeText } } }]
  133. )
  134. },
  135. }
  136. }
  137. </script>
  138. <style lang="scss" scoped>
  139. .right-drawer{
  140. margin-left: 20px;
  141. flex: 1;
  142. .drawer-map{
  143. height: 150px;
  144. }
  145. .right-drawer-content{
  146. margin-top: 20px;
  147. .right-drawer-title{
  148. font-size: 16px;
  149. font-weight: bold;
  150. line-height: 30px;
  151. background-color: #e5f1f1;
  152. }
  153. .right-drawer-body-item-title{
  154. line-height: 24px;
  155. }
  156. .normal-input{
  157. width: 200px;
  158. padding: 5px 10px;
  159. }
  160. }
  161. }
  162. </style>