methods.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import '@antv/x6-vue-shape';
  2. import { Graph, Shape, Addon, FunctionExt, Dnd } from '@antv/x6';
  3. // 拖拽生成四边形或者圆形
  4. export const startDragToGraph = (graph, type, e) => {
  5. const dnd = new Dnd({
  6. target: graph,
  7. validateNode: (droppingNode, options) => {
  8. return true; // 可以根据需要添加验证逻辑
  9. },
  10. });
  11. const node = type === 'Start' ? graph.createNode({
  12. width: 100,
  13. height: 60,
  14. attrs: {
  15. label: {
  16. text: '开始',
  17. fill: '#1890ff',
  18. fontSize: 14,
  19. textWrap: {
  20. width: -10,
  21. height: -10,
  22. ellipsis: true,
  23. },
  24. },
  25. body: {
  26. stroke: '#1890ff',
  27. strokeWidth: 1,
  28. fill: '#ffffff',
  29. rx: 18,
  30. ry: 18
  31. },
  32. nodeData: getNodeData(type)
  33. },
  34. ports: ports,
  35. }) : type === 'End' ? graph.createNode({
  36. width: 100,
  37. height: 60,
  38. attrs: {
  39. label: {
  40. text: '结束',
  41. fill: '#000000',
  42. fontSize: 14,
  43. textWrap: {
  44. width: -10,
  45. height: -10,
  46. ellipsis: true,
  47. },
  48. },
  49. body: {
  50. stroke: '#000000',
  51. strokeWidth: 1,
  52. fill: '#ffffff',
  53. rx: 18,
  54. ry: 18
  55. },
  56. nodeData: getNodeData(type)
  57. },
  58. ports: ports
  59. }) : type === 'Rect' ? graph.createNode({
  60. width: 100,
  61. height: 60,
  62. attrs: {
  63. label: {
  64. text: '任务节点',
  65. fill: '#000000',
  66. fontSize: 14,
  67. textWrap: {
  68. width: -10,
  69. height: -10,
  70. ellipsis: true,
  71. },
  72. },
  73. body: {
  74. stroke: '#000000',
  75. strokeWidth: 1,
  76. fill: '#ffffff',
  77. },
  78. nodeData: getNodeData(type)
  79. },
  80. ports: ports
  81. }) : type === 'Circle' ? graph.createNode({
  82. shape: 'ellipse',
  83. width: 100,
  84. height: 100,
  85. attrs: {
  86. label: {
  87. text: '循环节点',
  88. fill: '#000000',
  89. fontSize: 14,
  90. textWrap: {
  91. width: -20,
  92. height: -10,
  93. ellipsis: true,
  94. },
  95. },
  96. body: {
  97. stroke: '#000000',
  98. strokeWidth: 1,
  99. fill: '#ffffff',
  100. },
  101. nodeData: getNodeData(type)
  102. },
  103. ports: ports
  104. }) : graph.createNode({
  105. shape: 'polygon',
  106. x: 40,
  107. y: 40,
  108. width: 120,
  109. height: 120,
  110. attrs: {
  111. label: {
  112. text: '条件节点',
  113. fill: '#000000',
  114. fontSize: 14,
  115. textWrap: {
  116. width: -50,
  117. height: '70%',
  118. ellipsis: true,
  119. },
  120. },
  121. body: {
  122. fill: '#ffffff',
  123. stroke: '#000000',
  124. refPoints: '0,10 10,0 20,10 10,20',
  125. strokeWidth: 1,
  126. },
  127. nodeData: getNodeData(type)
  128. },
  129. ports: ports
  130. })
  131. dnd.start(node, e);
  132. };
  133. const ports = {
  134. groups: {
  135. // 输入链接桩群组定义
  136. top: {
  137. position: 'top',
  138. attrs: {
  139. circle: {
  140. r: 4,
  141. magnet: true,
  142. stroke: '#2D8CF0',
  143. strokeWidth: 2,
  144. fill: '#fff',
  145. },
  146. },
  147. },
  148. // 输出链接桩群组定义
  149. bottom: {
  150. position: 'bottom',
  151. attrs: {
  152. circle: {
  153. r: 4,
  154. magnet: true,
  155. stroke: '#2D8CF0',
  156. strokeWidth: 2,
  157. fill: '#fff',
  158. },
  159. },
  160. },
  161. left: {
  162. position: 'left',
  163. attrs: {
  164. circle: {
  165. r: 4,
  166. magnet: true,
  167. stroke: '#2D8CF0',
  168. strokeWidth: 2,
  169. fill: '#fff',
  170. },
  171. },
  172. },
  173. right: {
  174. position: 'right',
  175. attrs: {
  176. circle: {
  177. r: 4,
  178. magnet: true,
  179. stroke: '#2D8CF0',
  180. strokeWidth: 2,
  181. fill: '#fff',
  182. },
  183. },
  184. },
  185. },
  186. items: [
  187. {
  188. id: 'port1',
  189. group: 'top',
  190. }, {
  191. id: 'port2',
  192. group: 'bottom',
  193. }, {
  194. id: 'port3',
  195. group: 'left',
  196. }, {
  197. id: 'port4',
  198. group: 'right',
  199. }
  200. ],
  201. };
  202. // 自定义参数存放处
  203. const getNodeData = (type) => {
  204. return {
  205. type: type,
  206. flowNode: {
  207. entityId: '',
  208. itemId: '',
  209. flowNodeType: '',
  210. groupIdentify: '',
  211. childFlowIdentify: '', //子流程
  212. methodName: '',
  213. methodParams: '',
  214. methodType: '',
  215. hasMethodParams: false,
  216. methodExp: '',
  217. flowJudges: [],
  218. // isJudgeNode: '0'
  219. }
  220. }
  221. }