lw-cdp-ui 1.1.14 → 1.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/lwFlow/components/lfControl.vue +126 -0
- package/dist/components/lwFlow/components/lfNodePanel.vue +90 -0
- package/dist/components/lwFlow/index.vue +273 -0
- package/dist/components/lwFlow/nodes/basisEnd.js +83 -0
- package/dist/components/lwFlow/nodes/basisStart.js +84 -0
- package/dist/components/lwTableForm/index.vue +19 -11
- package/dist/lw-cdp-ui.esm.js +3239 -2691
- package/dist/lw-cdp-ui.esm.js.map +1 -1
- package/dist/lw-cdp-ui.umd.js +9 -9
- package/dist/lw-cdp-ui.umd.js.map +1 -1
- package/dist/static/images/logo.svg +78 -78
- package/dist/static/images/logo4.svg +73 -73
- package/dist/style.css +1 -1
- package/package.json +6 -2
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<el-button-group>
|
|
4
|
+
<el-tooltip class="box-item"
|
|
5
|
+
effect="dark"
|
|
6
|
+
content="放大"
|
|
7
|
+
placement="bottom-end">
|
|
8
|
+
<el-button plain
|
|
9
|
+
@click="zoomIn"
|
|
10
|
+
icon="el-icon-zoom-in"></el-button>
|
|
11
|
+
</el-tooltip>
|
|
12
|
+
<el-tooltip class="box-item"
|
|
13
|
+
effect="dark"
|
|
14
|
+
content="缩小"
|
|
15
|
+
placement="bottom-end">
|
|
16
|
+
<el-button plain
|
|
17
|
+
@click="zoomOut"
|
|
18
|
+
icon="el-icon-zoom-out"></el-button>
|
|
19
|
+
</el-tooltip>
|
|
20
|
+
|
|
21
|
+
<el-tooltip class="box-item"
|
|
22
|
+
effect="dark"
|
|
23
|
+
content="还原(大小&定位)"
|
|
24
|
+
placement="bottom-end">
|
|
25
|
+
<el-button plain
|
|
26
|
+
@click="reset"
|
|
27
|
+
icon="el-icon-location"></el-button>
|
|
28
|
+
</el-tooltip>
|
|
29
|
+
<el-tooltip class="box-item"
|
|
30
|
+
effect="dark"
|
|
31
|
+
content="上一步(ctrl+z)"
|
|
32
|
+
placement="bottom-end">
|
|
33
|
+
<el-button plain
|
|
34
|
+
@click="undo"
|
|
35
|
+
icon="el-icon-arrow-left"
|
|
36
|
+
:disabled="undoDisable"></el-button>
|
|
37
|
+
</el-tooltip>
|
|
38
|
+
<el-tooltip class="box-item"
|
|
39
|
+
effect="dark"
|
|
40
|
+
content="下一步(ctrl+y)"
|
|
41
|
+
placement="bottom-end">
|
|
42
|
+
<el-button plain
|
|
43
|
+
@click="redo"
|
|
44
|
+
icon="el-icon-arrow-right"
|
|
45
|
+
:disabled="redoDisable"></el-button>
|
|
46
|
+
</el-tooltip>
|
|
47
|
+
|
|
48
|
+
<el-tooltip class="box-item"
|
|
49
|
+
effect="dark"
|
|
50
|
+
:content="lf.extension.miniMap.isShow ? '查看缩略图' : '关闭缩略图'"
|
|
51
|
+
placement="bottom-end">
|
|
52
|
+
<el-button plain
|
|
53
|
+
@click="showMiniMap"
|
|
54
|
+
icon="el-icon-position"></el-button>
|
|
55
|
+
</el-tooltip>
|
|
56
|
+
|
|
57
|
+
</el-button-group>
|
|
58
|
+
</div>
|
|
59
|
+
</template>
|
|
60
|
+
<script>
|
|
61
|
+
/**
|
|
62
|
+
* 工具栏
|
|
63
|
+
*/
|
|
64
|
+
export default {
|
|
65
|
+
name: 'lfControl',
|
|
66
|
+
props: {
|
|
67
|
+
lf: Object || String,
|
|
68
|
+
catTurboData: Boolean
|
|
69
|
+
},
|
|
70
|
+
data() {
|
|
71
|
+
return {
|
|
72
|
+
undoDisable: true,
|
|
73
|
+
redoDisable: true,
|
|
74
|
+
graphData: null,
|
|
75
|
+
dataVisible: false,
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
mounted() {
|
|
79
|
+
this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
|
|
80
|
+
this.$data.undoDisable = !undoAble
|
|
81
|
+
this.$data.redoDisable = !redoAble
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
methods: {
|
|
85
|
+
zoomIn() {
|
|
86
|
+
this.$props.lf.zoom(true);
|
|
87
|
+
},
|
|
88
|
+
zoomOut() {
|
|
89
|
+
this.$props.lf.zoom(false);
|
|
90
|
+
},
|
|
91
|
+
zoomReset() {
|
|
92
|
+
this.$props.lf.resetZoom();
|
|
93
|
+
},
|
|
94
|
+
translateRest() {
|
|
95
|
+
this.$props.lf.resetTranslate();
|
|
96
|
+
},
|
|
97
|
+
reset() {
|
|
98
|
+
this.$props.lf.resetZoom();
|
|
99
|
+
this.$props.lf.resetTranslate();
|
|
100
|
+
},
|
|
101
|
+
undo() {
|
|
102
|
+
this.$props.lf.undo();
|
|
103
|
+
},
|
|
104
|
+
redo() {
|
|
105
|
+
this.$props.lf.redo();
|
|
106
|
+
},
|
|
107
|
+
download() {
|
|
108
|
+
this.$props.lf.getSnapshot();
|
|
109
|
+
},
|
|
110
|
+
catData() {
|
|
111
|
+
this.$emit('catData');
|
|
112
|
+
},
|
|
113
|
+
catTurboData() {
|
|
114
|
+
this.$emit('catTurboData');
|
|
115
|
+
},
|
|
116
|
+
showMiniMap() {
|
|
117
|
+
const { lf } = this.$props;
|
|
118
|
+
if (lf.extension.miniMap.isShow) {
|
|
119
|
+
lf.extension.miniMap.hide()
|
|
120
|
+
} else {
|
|
121
|
+
lf.extension.miniMap.show(lf.graphModel.width - 178, 50)
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
</script>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="node-panel">
|
|
3
|
+
<el-collapse v-model="activeName"
|
|
4
|
+
accordion>
|
|
5
|
+
<el-collapse-item v-for="item in nodeList"
|
|
6
|
+
:title="item.title"
|
|
7
|
+
:name="item.title">
|
|
8
|
+
<div class="node-list">
|
|
9
|
+
<div class="node-item"
|
|
10
|
+
v-for="item in item.list"
|
|
11
|
+
:class="[item.type]"
|
|
12
|
+
:key="item.name"
|
|
13
|
+
@mousedown="dragNode(item)">
|
|
14
|
+
<i class="iconfont"
|
|
15
|
+
:style="{color: item.themeColor}"
|
|
16
|
+
:class="[item.icon]"></i>
|
|
17
|
+
<span class="node-label">{{item.name}}</span>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</el-collapse-item>
|
|
21
|
+
</el-collapse>
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
<script>
|
|
25
|
+
/**
|
|
26
|
+
* 节点面板
|
|
27
|
+
*/
|
|
28
|
+
export default {
|
|
29
|
+
name: 'NodePanel',
|
|
30
|
+
props: {
|
|
31
|
+
lf: Object,
|
|
32
|
+
nodeList: Array,
|
|
33
|
+
},
|
|
34
|
+
methods: {
|
|
35
|
+
dragNode(item) {
|
|
36
|
+
console.log(item)
|
|
37
|
+
this.$props.lf.dnd.startDrag({
|
|
38
|
+
type: item.type,
|
|
39
|
+
})
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
44
|
+
<style lang="scss" scoped>
|
|
45
|
+
.node-panel {
|
|
46
|
+
position: absolute;
|
|
47
|
+
width: 200px;
|
|
48
|
+
left: 10px;
|
|
49
|
+
top: 10px;
|
|
50
|
+
border-radius: var(--el-popover-border-radius);
|
|
51
|
+
box-shadow: var(--el-box-shadow-light);
|
|
52
|
+
border: 1px solid var(--el-border-color-light);
|
|
53
|
+
padding: var(--el-popover-padding);
|
|
54
|
+
background-color: rgba($color: #ffffff, $alpha: 0.6);
|
|
55
|
+
box-shadow: 0 0 10px 1px rgb(228, 224, 219);
|
|
56
|
+
border-radius: 6px;
|
|
57
|
+
text-align: center;
|
|
58
|
+
z-index: 101;
|
|
59
|
+
:deep(.el-collapse) {
|
|
60
|
+
background-color: rgba($color: #ffffff, $alpha: 0.6);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
:deep(.el-collapse-item__header) {
|
|
64
|
+
padding-left: 10px;
|
|
65
|
+
font-weight: bold;
|
|
66
|
+
}
|
|
67
|
+
.node-list {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
gap: 10px;
|
|
71
|
+
padding: 10px;
|
|
72
|
+
max-height: 400px;
|
|
73
|
+
overflow: auto;
|
|
74
|
+
.node-item {
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
width: 100%;
|
|
77
|
+
padding: 6px 10px;
|
|
78
|
+
border-radius: var(--el-popover-border-radius);
|
|
79
|
+
color: var(--el-text-color-regular);
|
|
80
|
+
line-height: 20px;
|
|
81
|
+
font-size: var(--el-popover-font-size);
|
|
82
|
+
overflow-wrap: break-word;
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
background: var(--el-bg-color-overlay);
|
|
85
|
+
border: 1px solid var(--el-border-color-light);
|
|
86
|
+
display: flex;
|
|
87
|
+
gap: 5px;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</style>
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="logic-flow">
|
|
3
|
+
<!-- 画布 -->
|
|
4
|
+
<div ref="container"
|
|
5
|
+
class="logic-flow-body"></div>
|
|
6
|
+
<!-- 工具栏 -->
|
|
7
|
+
<lfControl class="logic-flow-control"
|
|
8
|
+
v-if="logicFlow"
|
|
9
|
+
:lf="logicFlow" />
|
|
10
|
+
<!-- 节点 -->
|
|
11
|
+
<lfNodePanel class="logic-flow-node"
|
|
12
|
+
v-if="logicFlow"
|
|
13
|
+
:lf="logicFlow"
|
|
14
|
+
:nodeList="nodeList" />
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
import LogicFlow from '@logicflow/core'
|
|
21
|
+
import '@logicflow/core/dist/index.css';
|
|
22
|
+
import { Menu, MiniMap } from "@logicflow/extension";
|
|
23
|
+
import '@logicflow/extension/lib/style/index.css';
|
|
24
|
+
|
|
25
|
+
// 注册组件
|
|
26
|
+
import lfControl from './components/lfControl.vue'
|
|
27
|
+
import lfNodePanel from './components/lfNodePanel.vue'
|
|
28
|
+
|
|
29
|
+
// 自定义节点
|
|
30
|
+
import basisStart from './nodes/basisStart'
|
|
31
|
+
import basisEnd from './nodes/basisEnd'
|
|
32
|
+
export default {
|
|
33
|
+
components: {
|
|
34
|
+
lfControl,
|
|
35
|
+
lfNodePanel
|
|
36
|
+
},
|
|
37
|
+
props: {
|
|
38
|
+
modelvalue: {
|
|
39
|
+
type: Object,
|
|
40
|
+
default: () => {
|
|
41
|
+
return {
|
|
42
|
+
// 节点
|
|
43
|
+
nodes: [
|
|
44
|
+
{
|
|
45
|
+
id: '21',
|
|
46
|
+
type: 'rect',
|
|
47
|
+
x: 100,
|
|
48
|
+
y: 200,
|
|
49
|
+
text: 'rect node',
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: '50',
|
|
53
|
+
type: 'circle',
|
|
54
|
+
x: 300,
|
|
55
|
+
y: 400,
|
|
56
|
+
text: 'circle node',
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
// 边
|
|
60
|
+
edges: [
|
|
61
|
+
{
|
|
62
|
+
type: 'polyline',
|
|
63
|
+
sourceNodeId: '50',
|
|
64
|
+
targetNodeId: '21',
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
/**
|
|
71
|
+
* apiNodes - 接口返回的节点的数组。请求到到将与内容节点合并。
|
|
72
|
+
* @type {Array}
|
|
73
|
+
* @default []
|
|
74
|
+
*/
|
|
75
|
+
apiNodes: {
|
|
76
|
+
type: Array,
|
|
77
|
+
default: []
|
|
78
|
+
},
|
|
79
|
+
/**
|
|
80
|
+
* 配置项对象，用于设置流程图的网格属性。
|
|
81
|
+
* @property {Object} grid - 网格配置对象。
|
|
82
|
+
* @property {number} grid.size - 网格大小，默认为10。
|
|
83
|
+
* @property {boolean} grid.visible - 是否显示网格，默认为true。
|
|
84
|
+
* @property {string} grid.type - 网格类型，默认为'mesh'。
|
|
85
|
+
* @property {Object} grid.config - 网格配置详情。
|
|
86
|
+
* @property {string} grid.config.color - 网格颜色，默认为'#f0f0f0'。
|
|
87
|
+
* @property {number} grid.config.thickness - 网格线厚度，默认为0.5。
|
|
88
|
+
*/
|
|
89
|
+
options: {
|
|
90
|
+
type: Object,
|
|
91
|
+
default: () => {
|
|
92
|
+
return {
|
|
93
|
+
grid: {
|
|
94
|
+
size: 10,
|
|
95
|
+
visible: true,
|
|
96
|
+
type: 'mesh',
|
|
97
|
+
config: {
|
|
98
|
+
color: '#f0f0f0',
|
|
99
|
+
thickness: 0.5
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
edgeTextDraggable: true,
|
|
103
|
+
hoverOutline: false,
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
data() {
|
|
109
|
+
return {
|
|
110
|
+
logicFlow: null
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
computed: {
|
|
114
|
+
nodeList() {
|
|
115
|
+
// 基础节点
|
|
116
|
+
let baseList = [
|
|
117
|
+
{
|
|
118
|
+
title: '流程控制',
|
|
119
|
+
list: [
|
|
120
|
+
{
|
|
121
|
+
name: '开始',
|
|
122
|
+
icon: 'icon-next',
|
|
123
|
+
type: 'start',
|
|
124
|
+
themeColor: "#39bcc5"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: '结束',
|
|
128
|
+
icon: 'icon-flow-stop',
|
|
129
|
+
type: 'end',
|
|
130
|
+
themeColor: "#000000"
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
|
|
136
|
+
let list = {}
|
|
137
|
+
this.apiNodes.forEach(item => {
|
|
138
|
+
if (!list[item.groupName]) {
|
|
139
|
+
list[item.groupName] = {
|
|
140
|
+
title: item.groupName,
|
|
141
|
+
list: []
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
list[item.groupName].list.push(item)
|
|
145
|
+
})
|
|
146
|
+
console.log(list)
|
|
147
|
+
return Object.values(list).length > 0 ? Object.values(list) : baseList
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
mounted() {
|
|
151
|
+
this.init()
|
|
152
|
+
},
|
|
153
|
+
methods: {
|
|
154
|
+
/**
|
|
155
|
+
* 初始化
|
|
156
|
+
* 传入数据初始化、右键菜单初始化
|
|
157
|
+
*/
|
|
158
|
+
init() {
|
|
159
|
+
this.logicFlow = new LogicFlow({
|
|
160
|
+
container: this.$refs.container,
|
|
161
|
+
// 注册组件
|
|
162
|
+
plugins: [Menu, MiniMap],
|
|
163
|
+
...this.options
|
|
164
|
+
})
|
|
165
|
+
this.initMenu()
|
|
166
|
+
this.initNode()
|
|
167
|
+
this.logicFlow.render(this.modelvalue)
|
|
168
|
+
// 内容移动到中心
|
|
169
|
+
this.logicFlow.translateCenter()
|
|
170
|
+
},
|
|
171
|
+
/**
|
|
172
|
+
* 初始化右键菜单
|
|
173
|
+
*/
|
|
174
|
+
initMenu() {
|
|
175
|
+
let _this = this
|
|
176
|
+
this.logicFlow.extension.menu.setMenuConfig({
|
|
177
|
+
nodeMenu: [
|
|
178
|
+
{
|
|
179
|
+
text: "删除",
|
|
180
|
+
callback(node) {
|
|
181
|
+
_this.logicFlow.deleteNode(node.id);
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
text: '编辑',
|
|
186
|
+
callback(node) {
|
|
187
|
+
_this.$emit('edit', node)
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
],
|
|
191
|
+
edgeMenu: [
|
|
192
|
+
{
|
|
193
|
+
text: "删除",
|
|
194
|
+
callback(edge) {
|
|
195
|
+
_this.logicFlow.deleteEdge(edge.id);
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
text: '编辑',
|
|
200
|
+
callback(edge) {
|
|
201
|
+
_this.$emit('edit', edge)
|
|
202
|
+
},
|
|
203
|
+
},
|
|
204
|
+
], // 删除默认的边右键菜单
|
|
205
|
+
graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
|
|
206
|
+
});
|
|
207
|
+
},
|
|
208
|
+
/**
|
|
209
|
+
* 初始化自定义节点
|
|
210
|
+
* 该函数用于初始化基础节点，包括开始节点（basisStart）和结束节点（basisEnd）。
|
|
211
|
+
* @param {Object} logicFlow - 逻辑流对象，用于操作节点。
|
|
212
|
+
*/
|
|
213
|
+
initNode() {
|
|
214
|
+
basisStart(this.logicFlow)
|
|
215
|
+
basisEnd(this.logicFlow)
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
}
|
|
219
|
+
</script>
|
|
220
|
+
|
|
221
|
+
<style lang="scss" scoped>
|
|
222
|
+
.logic-flow {
|
|
223
|
+
width: 100%;
|
|
224
|
+
height: calc(100% - 3px);
|
|
225
|
+
position: relative;
|
|
226
|
+
user-select: none;
|
|
227
|
+
.logic-flow-body {
|
|
228
|
+
width: 100%;
|
|
229
|
+
height: 100%;
|
|
230
|
+
}
|
|
231
|
+
.logic-flow-control {
|
|
232
|
+
position: absolute;
|
|
233
|
+
top: 10px;
|
|
234
|
+
right: 10px;
|
|
235
|
+
z-index: 88;
|
|
236
|
+
}
|
|
237
|
+
:deep(.lf-menu) {
|
|
238
|
+
width: 80px;
|
|
239
|
+
border-radius: var(--el-popover-border-radius);
|
|
240
|
+
padding: var(--el-popover-padding);
|
|
241
|
+
z-index: var(--el-index-popper);
|
|
242
|
+
color: var(--el-text-color-regular);
|
|
243
|
+
line-height: 20px;
|
|
244
|
+
font-size: var(--el-popover-font-size);
|
|
245
|
+
box-shadow: var(--el-box-shadow-light);
|
|
246
|
+
overflow-wrap: break-word;
|
|
247
|
+
box-sizing: border-box;
|
|
248
|
+
background: var(--el-bg-color-overlay);
|
|
249
|
+
border: 1px solid var(--el-border-color-light);
|
|
250
|
+
position: relative;
|
|
251
|
+
&::before {
|
|
252
|
+
content: "";
|
|
253
|
+
border: 1px solid var(--el-border-color-light);
|
|
254
|
+
background: var(--el-bg-color-overlay);
|
|
255
|
+
right: 0;
|
|
256
|
+
border-bottom-left-radius: 2px;
|
|
257
|
+
border-right-color: transparent !important;
|
|
258
|
+
border-top-color: transparent !important;
|
|
259
|
+
transform: rotate(45deg);
|
|
260
|
+
box-sizing: border-box;
|
|
261
|
+
position: absolute;
|
|
262
|
+
width: 10px;
|
|
263
|
+
height: 10px;
|
|
264
|
+
top: 5px;
|
|
265
|
+
left: -5px;
|
|
266
|
+
}
|
|
267
|
+
& > li {
|
|
268
|
+
line-height: 24px;
|
|
269
|
+
letter-spacing: 2px;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
</style>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
export default function registerEnd(lf) {
|
|
2
|
+
lf.register('end', ({ CircleNode, CircleNodeModel, h }) => {
|
|
3
|
+
class EndNode extends CircleNode {
|
|
4
|
+
getIconShape() {
|
|
5
|
+
const { model } = this.props
|
|
6
|
+
const { x, y, width, height } = model
|
|
7
|
+
const stroke = '#404040'
|
|
8
|
+
return h(
|
|
9
|
+
'svg',
|
|
10
|
+
{
|
|
11
|
+
x: x - width / 2,
|
|
12
|
+
y: y - height / 2,
|
|
13
|
+
width: 40,
|
|
14
|
+
height: 40,
|
|
15
|
+
viewBox: '0 0 1024 1024'
|
|
16
|
+
},
|
|
17
|
+
h('path', {
|
|
18
|
+
fill: stroke,
|
|
19
|
+
d: 'M212.992 526.336 212.992 526.336 212.992 526.336 215.04 526.336 212.992 526.336Z'
|
|
20
|
+
}),
|
|
21
|
+
h('path', {
|
|
22
|
+
fill: stroke,
|
|
23
|
+
d: 'M724.992 296.96 724.992 296.96 296.96 296.96 296.96 724.992 724.992 724.992 724.992 296.96Z'
|
|
24
|
+
})
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
getShape() {
|
|
28
|
+
const { model } = this.props
|
|
29
|
+
const { x, y, r } = model
|
|
30
|
+
const { fill, stroke, strokeWidth } = model.getNodeStyle()
|
|
31
|
+
return h('g', {}, [
|
|
32
|
+
h('circle', {
|
|
33
|
+
cx: x,
|
|
34
|
+
cy: y,
|
|
35
|
+
r,
|
|
36
|
+
fill,
|
|
37
|
+
stroke,
|
|
38
|
+
strokeWidth
|
|
39
|
+
}),
|
|
40
|
+
this.getIconShape()
|
|
41
|
+
])
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
class EndModel extends CircleNodeModel {
|
|
45
|
+
initNodeData(data) {
|
|
46
|
+
data.text = {
|
|
47
|
+
value: (data.text && data.text.value) || '',
|
|
48
|
+
x: data.x,
|
|
49
|
+
y: data.y + 35
|
|
50
|
+
}
|
|
51
|
+
super.initNodeData(data)
|
|
52
|
+
this.r = 20
|
|
53
|
+
}
|
|
54
|
+
// 自定义锚点样式
|
|
55
|
+
getAnchorStyle() {
|
|
56
|
+
const style = super.getAnchorStyle()
|
|
57
|
+
style.hover.r = 8
|
|
58
|
+
style.hover.fill = 'rgb(24, 125, 255)'
|
|
59
|
+
style.hover.stroke = 'rgb(24, 125, 255)'
|
|
60
|
+
return style
|
|
61
|
+
}
|
|
62
|
+
// 自定义节点outline
|
|
63
|
+
getOutlineStyle() {
|
|
64
|
+
const style = super.getOutlineStyle()
|
|
65
|
+
style.stroke = '#88f'
|
|
66
|
+
return style
|
|
67
|
+
}
|
|
68
|
+
getConnectedSourceRules() {
|
|
69
|
+
const rules = super.getConnectedSourceRules()
|
|
70
|
+
const notAsTarget = {
|
|
71
|
+
message: '终止节点不能作为连线的起点',
|
|
72
|
+
validate: () => false
|
|
73
|
+
}
|
|
74
|
+
rules.push(notAsTarget)
|
|
75
|
+
return rules
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return {
|
|
79
|
+
view: EndNode,
|
|
80
|
+
model: EndModel
|
|
81
|
+
}
|
|
82
|
+
})
|
|
83
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
export default function registerStart(lf) {
|
|
2
|
+
lf.register('start', ({ CircleNode, CircleNodeModel, h }) => {
|
|
3
|
+
class StartNode extends CircleNode {
|
|
4
|
+
getLabelShape() {
|
|
5
|
+
const { model } = this.props
|
|
6
|
+
const { x, y } = model
|
|
7
|
+
return h(
|
|
8
|
+
'text',
|
|
9
|
+
{
|
|
10
|
+
fill: '#000000',
|
|
11
|
+
fontSize: 12,
|
|
12
|
+
x: x - 12,
|
|
13
|
+
y: y + 4,
|
|
14
|
+
width: 50,
|
|
15
|
+
height: 25
|
|
16
|
+
},
|
|
17
|
+
'开始'
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
getShape() {
|
|
21
|
+
const { model } = this.props
|
|
22
|
+
const { x, y, r } = model
|
|
23
|
+
const { fill, stroke, strokeWidth } = model.getNodeStyle()
|
|
24
|
+
return h('g', {}, [
|
|
25
|
+
h('circle', {
|
|
26
|
+
cx: x,
|
|
27
|
+
cy: y,
|
|
28
|
+
r,
|
|
29
|
+
fill,
|
|
30
|
+
stroke,
|
|
31
|
+
strokeWidth
|
|
32
|
+
}),
|
|
33
|
+
this.getLabelShape()
|
|
34
|
+
])
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
class StartModel extends CircleNodeModel {
|
|
38
|
+
// 自定义节点形状属性
|
|
39
|
+
initNodeData(data) {
|
|
40
|
+
data.text = {
|
|
41
|
+
value: (data.text && data.text.value) || '',
|
|
42
|
+
x: data.x,
|
|
43
|
+
y: data.y + 35,
|
|
44
|
+
dragable: false,
|
|
45
|
+
editable: true
|
|
46
|
+
}
|
|
47
|
+
super.initNodeData(data)
|
|
48
|
+
this.r = 20
|
|
49
|
+
}
|
|
50
|
+
// 自定义节点样式属性
|
|
51
|
+
getNodeStyle() {
|
|
52
|
+
const style = super.getNodeStyle()
|
|
53
|
+
return style
|
|
54
|
+
}
|
|
55
|
+
// 自定义锚点样式
|
|
56
|
+
getAnchorStyle() {
|
|
57
|
+
const style = super.getAnchorStyle()
|
|
58
|
+
style.hover.r = 8
|
|
59
|
+
style.hover.fill = 'rgb(24, 125, 255)'
|
|
60
|
+
style.hover.stroke = 'rgb(24, 125, 255)'
|
|
61
|
+
return style
|
|
62
|
+
}
|
|
63
|
+
// 自定义节点outline
|
|
64
|
+
getOutlineStyle() {
|
|
65
|
+
const style = super.getOutlineStyle()
|
|
66
|
+
style.stroke = '#88f'
|
|
67
|
+
return style
|
|
68
|
+
}
|
|
69
|
+
getConnectedTargetRules() {
|
|
70
|
+
const rules = super.getConnectedTargetRules()
|
|
71
|
+
const notAsTarget = {
|
|
72
|
+
message: '起始节点不能作为连线的终点',
|
|
73
|
+
validate: () => false
|
|
74
|
+
}
|
|
75
|
+
rules.push(notAsTarget)
|
|
76
|
+
return rules
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return {
|
|
80
|
+
view: StartNode,
|
|
81
|
+
model: StartModel
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
}
|
|
@@ -394,7 +394,8 @@
|
|
|
394
394
|
</template>
|
|
395
395
|
<!-- 没有组件是component值 就是插槽名称 -->
|
|
396
396
|
<template v-else>
|
|
397
|
-
<slot :name="item.component"
|
|
397
|
+
<slot :name="item.component"
|
|
398
|
+
:row="row">
|
|
398
399
|
<el-tag type="danger">[{{item.component}}]
|
|
399
400
|
没有这个默认组件也未自定义插槽内容</el-tag>
|
|
400
401
|
</slot>
|
|
@@ -419,11 +420,14 @@
|
|
|
419
420
|
</template>
|
|
420
421
|
</el-table-column>
|
|
421
422
|
</el-table>
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
423
|
+
<div class="btn-list">
|
|
424
|
+
<el-button type="primary"
|
|
425
|
+
class="add-btn"
|
|
426
|
+
plain
|
|
427
|
+
icon="el-icon-plus"
|
|
428
|
+
@click="addItem()">{{ $t('btn.add') }}</el-button>
|
|
429
|
+
<slot name="deleteBtn"></slot>
|
|
430
|
+
</div>
|
|
427
431
|
</template>
|
|
428
432
|
|
|
429
433
|
<script>
|
|
@@ -511,7 +515,6 @@ export default {
|
|
|
511
515
|
});
|
|
512
516
|
}
|
|
513
517
|
} else {
|
|
514
|
-
console.log(this.isEmpty(data[item.name][item.options.name]))
|
|
515
518
|
if (rule.required && this.isEmpty(data[item.name])) {
|
|
516
519
|
if (!data?.errorMsg) {
|
|
517
520
|
data.errorMsg = {}
|
|
@@ -697,10 +700,6 @@ export default {
|
|
|
697
700
|
</script>
|
|
698
701
|
|
|
699
702
|
<style lang="scss" scoped>
|
|
700
|
-
.add-btn {
|
|
701
|
-
width: 100%;
|
|
702
|
-
margin-top: 10px;
|
|
703
|
-
}
|
|
704
703
|
.tags-list {
|
|
705
704
|
display: flex;
|
|
706
705
|
flex-wrap: wrap;
|
|
@@ -726,4 +725,13 @@ export default {
|
|
|
726
725
|
font-size: 10px;
|
|
727
726
|
color: var(--el-color-error);
|
|
728
727
|
}
|
|
728
|
+
.btn-list {
|
|
729
|
+
display: flex;
|
|
730
|
+
align-items: center;
|
|
731
|
+
margin-top: 10px;
|
|
732
|
+
width: 100%;
|
|
733
|
+
.add-btn {
|
|
734
|
+
width: 100%;
|
|
735
|
+
}
|
|
736
|
+
}
|
|
729
737
|
</style>
|