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
114
115
116
117
118
119
| <template>
| <div>
| <div class="tree_data_box">
| <el-form
| ref="form"
| size="mini"
| label-width="80px"
| :model="newRowData"
| :rules="rules"
| >
| <el-form-item label="名称" prop="name">
| <el-input v-model.trim="newRowData.name" :maxLength="20" clearable />
| </el-form-item>
| <el-form-item label="标签" prop="label">
| <el-input v-model.trim="newRowData.label" clearable />
| </el-form-item>
| <el-form-item label="起始状态" prop="startState">
| <el-select
| v-model="newRowData.startState"
| placeholder="请选择起始状态"
| style="width: 100%"
| >
| <el-option
| v-for="item in []"
| :key="item.value"
| :label="item.label"
| :value="item.value"
| >
| </el-option>
| </el-select>
| </el-form-item>
| <el-form-item label="描述">
| <el-input v-model.trim="newRowData.remark" type="textarea"></el-input>
| </el-form-item>
| </el-form>
| </div>
| <detail-panel>
| <template v-slot="{ status }">
| <node-panel :status="status">
| <detail-form type="node" />
| </node-panel>
| <edge-panel :status="status">
| <detail-form type="edge" />
| </edge-panel>
| <group-panel :status="status">
| <detail-form type="group" />
| </group-panel>
| <multi-panel :status="status" />
| <canvas-panel :status="status" />
| </template>
| </detail-panel>
| </div>
| </template>
|
| <script>
| import {
| NodePanel,
| EdgePanel,
| GroupPanel,
| MultiPanel,
| CanvasPanel,
| DetailPanel,
| } from "vue-flowchart-editor";
| import DetailForm from "./DetailForm";
|
| export default {
| name: "EditorDetailPanel",
| components: {
| NodePanel,
| EdgePanel,
| GroupPanel,
| MultiPanel,
| CanvasPanel,
| DetailPanel,
| DetailForm,
| },
| props: ["readOnly", "rowData"],
| data() {
| return {
| newRowData: {},
| rules: {
| name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
| label: [{ required: true, message: "标签不能为空", trigger: "blur" }],
| startState: [
| // { required: true, message: "起始状态不能为空", trigger: "change" },
| ],
| },
| };
| },
| methods: {
| getNewRowDate() {
| return new Promise((resolve) => {
| this.$refs.form.validate((flag) => {
| if (!flag) {
| resolve(false);
| } else {
| resolve(this.newRowData);
| }
| });
| });
| },
| },
| watch: {
| rowData: {
| deep: true,
| immediate: true,
| handler(newV) {
| if (
| typeof newV === "object" &&
| newV !== null &&
| Object.keys(this.rowData).length > 0
| ) {
| this.newRowData = Object.assign({}, newV);
| }
| },
| },
| },
| };
| </script>
|
|