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
| <template>
| <div>
| <el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" size="320px">
| <el-scrollbar>
| <Line v-if="nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
| <Node v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
| </el-scrollbar>
| </el-drawer>
| </div>
| </template>
|
| <script lang="ts">
| import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue';
| import Line from './line.vue';
| import Node from './node.vue';
|
| // 定义接口来定义对象的类型
| interface WorkflowDrawerState {
| isOpen: boolean;
| nodeData: {
| type: string;
| };
| jsplumbConn: any;
| }
|
| export default defineComponent({
| name: 'pagesWorkflowDrawer',
| components: { Line, Node },
| setup(props, { emit }) {
| const lineRef = ref();
| const nodeRef = ref();
| const state = reactive<WorkflowDrawerState>({
| isOpen: false,
| nodeData: {
| type: 'node',
| },
| jsplumbConn: {},
| });
| // 打开抽屉
| const open = (item: any, conn: any) => {
| state.isOpen = true;
| state.jsplumbConn = conn;
| state.nodeData = item;
| nextTick(() => {
| if (item.type === 'line') lineRef.value.getParentData(item);
| else nodeRef.value.getParentData(item);
| });
| };
| // 关闭
| const close = () => {
| state.isOpen = false;
| };
| // 线 label 内容改变时
| const onLineChange = (label: any) => {
| state.jsplumbConn.label = label;
| emit('label', state.jsplumbConn);
| };
| // 节点内容改变时
| const onNodeSubmit = (data: object) => {
| emit('node', data);
| };
| return {
| lineRef,
| nodeRef,
| open,
| close,
| onLineChange,
| onNodeSubmit,
| ...toRefs(state),
| };
| },
| });
| </script>
|
|
