1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| import { HtmlNodeModel, HtmlNode } from '@logicflow/core'
| import { h, createApp, defineComponent, computed } from 'vue'
| import styles from './index.module.scss'
| import Icon from '@/components/Icon/Icon'
| import { injectStore } from '../../core/store'
|
| interface NodeType {
| name: string
| value: string
| color?: string
| }
| export default defineComponent({
| name: 'BaseNode',
| props: {
| node: {
| type: Object,
| default: () => ({}),
| },
| color: {
| type: String,
| default: '#000',
| },
| background: {
| type: String,
| default: '#fff',
| },
| icon: {
| type: String,
| },
| width: {
| type: [String, Number],
| default: '206',
| },
| height: {
| type: [String, Number],
| default: '65px',
| },
| },
| setup(props) {
| const { selected, onSelectNode } = injectStore()
|
| const nodeFlows = computed(() => {
| const node = props.node?.source || {}
|
| const nodeBusiness: NodeType[] = []
| if (node.SplitType) {
| nodeBusiness.push({
| name: '迁出模式',
| value: node.SplitType,
| color: '#000',
| })
| }
| if (node.JoinType) {
| nodeBusiness.push({
| name: '迁入模式',
| value: node.JoinType,
| color: '#000',
| })
| }
|
| if (node.ExitMode) {
| nodeBusiness.push({
| name: '退出模式',
| value: node.ExitMode,
| color: '#000',
| })
| }
| if (node.EnterMode) {
| nodeBusiness.push({
| name: '进入模式',
| value: node.EnterMode,
| color: '#000',
| })
| }
| return nodeBusiness
| })
|
| return () => {
| const style = {
| background: props.background,
| color: props.color,
| width: props.width,
| height: props.height,
| }
| const node = props.node
| return (
| <div onClick={() => onSelectNode(node)} class={styles.flowNodeContent}>
| <div
| class={{
| [styles.flowNode]: true,
| [styles.flowNodeSelected]: node.id === selected.value,
| }}
| >
| <header style={style} class={styles.flowHeader}>
| <Icon icon={props.icon} width={20} height={20} />
| {node.name}
| </header>
| <main class={styles.flowNodeMain}>
| {nodeFlows.value.map((node: NodeType) => {
| return (
| <div class={styles.flowInfo} style={{ color: node.color }}>
| <label class={styles.label}>{node.name}：</label>
| <span class={styles.info}>{node.value}</span>
| </div>
| )
| })}
| </main>
| </div>
| </div>
| )
| }
| },
| })
|
|
