| | |
| | | 'mk-rect', |
| | | { |
| | | inherit: 'rect', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-polygon', |
| | | { |
| | | inherit: 'polygon', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-paral', |
| | | { |
| | | inherit: 'polygon', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-ellipse', |
| | | { |
| | | inherit: 'ellipse', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-text', |
| | | { |
| | | inherit: 'text-block', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 50, |
| | | text: '文本域', |
| | | attrs: { |
| | | body: { |
| | |
| | | yellow_green: '#a0d911', |
| | | green: '#52c41a', |
| | | cyan: '#13c2c2', |
| | | blue_purple: '#2f54eb', |
| | | blue_purple: '#3860f4', |
| | | purple: '#722ed1', |
| | | magenta: '#eb2f96', |
| | | grass_green: '#aeb303', |
| | |
| | | const stencil = new Stencil({ |
| | | title: '流程图', |
| | | target: graph, |
| | | stencilGraphWidth: 180, |
| | | stencilGraphWidth: 230, |
| | | stencilGraphHeight: 180, |
| | | groups: [ |
| | | { |
| | | title: '通用节点', |
| | | name: 'group1', |
| | | graphHeight: 240 |
| | | graphHeight: 150 |
| | | }, |
| | | { |
| | | title: '自定义', |
| | | name: 'group2', |
| | | graphHeight: 150, |
| | | graphHeight: 300, |
| | | layoutOptions: { |
| | | rowHeight: 70 |
| | | } |
| | |
| | | ], |
| | | layoutOptions: { |
| | | columns: 2, |
| | | columnWidth: 80, |
| | | columnWidth: 110, |
| | | rowHeight: 55 |
| | | } |
| | | }) |
| | |
| | | |
| | | let mkdata = target.prop('mkdata') |
| | | |
| | | if (target.prop('mknode') === 'end') { |
| | | if (source.prop('mknode') === 'start' && target.prop('mknode') === 'end') { |
| | | edge.prop('mknode', 'throughEdge') |
| | | } else if (target.prop('mknode') === 'end') { |
| | | edge.prop('mknode', 'endEdge') |
| | | } else if (target.prop('mknode') === 'start') { |
| | | edge.prop('mknode', 'startEdge') |
| | |
| | | mkdata: {status: 0, statusName: '未提交'}, |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#52c41a', |
| | | stroke: '#52c41a' |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#000000', |
| | | stroke: '#000000' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | |
| | | } |
| | | } |
| | | }) |
| | | const r2 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '过程' |
| | | } |
| | | } |
| | | }) |
| | | const r3 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 6, |
| | | ry: 6, |
| | | fill: '#fff7e6', |
| | | stroke: '#fa8c16' |
| | | }, |
| | | text: { |
| | | text: '可选过程' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const r4 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#fff7e6', |
| | | stroke: '#fa8c16' |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '节点' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const r5 = graph.createNode({ |
| | | shape: 'mk-polygon', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '0,10 10,0 20,10 10,20', |
| | | fill: '#f9f0ff', |
| | | stroke: '#722ed1' |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '决策' |
| | | } |
| | | } |
| | | }) |
| | | const r6 = graph.createNode({ |
| | | shape: 'mk-paral', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '10,0 40,0 30,20 0,20', |
| | | fill: '#e6fffb', |
| | | stroke: '#13c2c2' |
| | | }, |
| | | text: { |
| | | text: '数据' |
| | | } |
| | | } |
| | | }) |
| | | const r7 = graph.createNode({ |
| | | shape: 'mk-circle', |
| | | attrs: { |
| | | body: { |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '连接' |
| | | } |
| | | } |
| | | }) |
| | |
| | | mkdata: {status: 888, statusName: '已完成'}, |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#fa8c16', |
| | | stroke: '#fa8c16' |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#000000', |
| | | stroke: '#000000' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | |
| | | } |
| | | }) |
| | | |
| | | stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1') |
| | | stencil.load([r1, r4, r5, r8], 'group1') |
| | | |
| | | const r2 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '过程' |
| | | } |
| | | } |
| | | }) |
| | | const r3 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 6, |
| | | ry: 6, |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '可选过程' |
| | | } |
| | | } |
| | | }) |
| | | const r6 = graph.createNode({ |
| | | shape: 'mk-paral', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '10,0 40,0 30,20 0,20', |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '数据' |
| | | } |
| | | } |
| | | }) |
| | | const r7 = graph.createNode({ |
| | | shape: 'mk-circle', |
| | | attrs: { |
| | | body: { |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '连接' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const p1 = graph.createNode({ |
| | | shape: 'mk-ellipse', |
| | |
| | | shape: 'mk-text' |
| | | }) |
| | | |
| | | stencil.load([p1, p2, p3], 'group2') |
| | | stencil.load([r2, r3, r6, r7, p1, p2, p3], 'group2') |
| | | |
| | | if (this.cells.length > 0) { |
| | | let cells = [] |
| | |
| | | const stencil = new Stencil({ |
| | | title: '流程图', |
| | | target: graph, |
| | | stencilGraphWidth: 180, |
| | | stencilGraphWidth: 230, |
| | | stencilGraphHeight: 180, |
| | | groups: [ |
| | | { |
| | |
| | | ], |
| | | layoutOptions: { |
| | | columns: 2, |
| | | columnWidth: 80, |
| | | columnWidth: 110, |
| | | rowHeight: 55 |
| | | } |
| | | }) |
| | |
| | | setback = () => { |
| | | if (this.mkGraph.canUndo()) { |
| | | this.mkGraph.undo() |
| | | } else { |
| | | message.warning('无可撤销记录!') |
| | | } |
| | | } |
| | | |
| | | setprev = () => { |
| | | if (this.mkGraph.canRedo()) { |
| | | this.mkGraph.redo() |
| | | } else { |
| | | message.warning('无可前进记录!') |
| | | } |
| | | } |
| | | |
| | |
| | | } else if (item.mknode === 'end') { |
| | | end_num++ |
| | | } else if (item.shape === 'edge') { |
| | | if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) { |
| | | if (item.mknode === 'throughEdge') { |
| | | if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) { |
| | | unvalid = true |
| | | } |
| | | } else if (item.mkdata.seniorCondition === 'open') { |
| | | |
| | | } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) { |
| | | unvalid = true |
| | | } else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') { |
| | | if (map.has(item.source.cell)) { |
| | |
| | | let cells = this.mkGraph.getCells() |
| | | const that = this |
| | | |
| | | if (cells.length === 0) return |
| | | if (cells.length === 0) { |
| | | message.warning('尚未添加元素!') |
| | | return |
| | | } |
| | | |
| | | confirm({ |
| | | title: '确定清空元素吗?', |
| | |
| | | } |
| | | } |
| | | |
| | | delCell = () => { |
| | | const { node } = this.state |
| | | |
| | | let cell = this.mkGraph.getCellById(node.id) |
| | | |
| | | this.mkGraph.removeCells([cell]) |
| | | |
| | | this.setState({node: null}) |
| | | } |
| | | |
| | | changeProps = (value, key) => { |
| | | const { node } = this.state |
| | | |
| | |
| | | this.selectNode.attr('line/strokeDasharray', 0) |
| | | } |
| | | } else if (key === 'mkdata') { |
| | | if (!node.mkdata) { |
| | | if (node.target && node.target.cell) { |
| | | let cell = this.mkGraph.getCellById(node.target.cell) |
| | | |
| | | if (cell) { |
| | | cell.prop('mkdata', {status: value.status, statusName: value.statusName || ''}) |
| | | } |
| | | } |
| | | } |
| | | |
| | | this.selectNode.prop('mkdata', value) |
| | | } |
| | | } else if (node.shape === 'lane') { |
| | |
| | | } else if (item.mknode === 'end') { |
| | | end_num++ |
| | | } else if (item.shape === 'edge' && !unvalidId && !rejectId && !approvalId) { |
| | | if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) { |
| | | if (item.mknode === 'throughEdge') { |
| | | if (!item.mkdata.seniorbers || item.mkdata.seniorbers.length === 0) { |
| | | unvalidId = item.id |
| | | } |
| | | } else if (item.mkdata.seniorCondition === 'open') { |
| | | |
| | | } else if (item.mknode !== 'endEdge' && item.mknode !== 'startEdge' && (!item.mkdata.members || item.mkdata.members.length === 0)) { |
| | | unvalidId = item.id |
| | | } else if (item.mknode === 'startEdge' || item.mkdata.flowType === 'reject') { |
| | | if (map.has(item.source.cell)) { |
| | |
| | | <div id={config.uuid + 'container'} className="mk-container"></div> |
| | | <div className="mk-node-edit"> |
| | | <div className="header">设置</div> |
| | | {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps}/>} |
| | | {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} orgs={orgs} onChange={this.changeProps} onDel={this.delCell}/>} |
| | | </div> |
| | | </div> |
| | | </div> |