|
@@ -13,7 +13,7 @@
|
|
v-loading="loading"
|
|
v-loading="loading"
|
|
>
|
|
>
|
|
<byForm
|
|
<byForm
|
|
- :formConfig="formConfig"
|
|
|
|
|
|
+ :formConfig="formType === 'handle-btn' ? formConfig : branchBtnConfig"
|
|
:formOption="formOption"
|
|
:formOption="formOption"
|
|
v-model="formData.data"
|
|
v-model="formData.data"
|
|
:rules="rules"
|
|
:rules="rules"
|
|
@@ -95,8 +95,10 @@ import { ElMessage, ElMessageBox } from "element-plus";
|
|
import startBtn from "./startBtn.vue";
|
|
import startBtn from "./startBtn.vue";
|
|
import endBtn from "./endBtn.vue";
|
|
import endBtn from "./endBtn.vue";
|
|
import handleBtn from "./handleBtn.vue";
|
|
import handleBtn from "./handleBtn.vue";
|
|
|
|
+import branchBtn from "./branchBtn.vue";
|
|
import { MiniMap } from "@antv/x6-plugin-minimap";
|
|
import { MiniMap } from "@antv/x6-plugin-minimap";
|
|
import useTagsViewStore from "@/store/modules/tagsView";
|
|
import useTagsViewStore from "@/store/modules/tagsView";
|
|
|
|
+import { rectToBox } from "@vue-flow/core/dist/utils/graph";
|
|
|
|
|
|
defineProps({
|
|
defineProps({
|
|
title: {
|
|
title: {
|
|
@@ -110,6 +112,7 @@ const dialogVisible = ref(false);
|
|
const modalType = ref("add");
|
|
const modalType = ref("add");
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
const submitLoading = ref(false);
|
|
const submitLoading = ref(false);
|
|
|
|
+let formType = ref(1); //1办理 2分支
|
|
const formData = reactive({
|
|
const formData = reactive({
|
|
data: {
|
|
data: {
|
|
userName: "",
|
|
userName: "",
|
|
@@ -143,6 +146,17 @@ const rules = reactive({
|
|
},
|
|
},
|
|
],
|
|
],
|
|
});
|
|
});
|
|
|
|
+const branchBtnConfig = computed(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ type: "input",
|
|
|
|
+ prop: "nodeName",
|
|
|
|
+ label: "节点名称",
|
|
|
|
+ required: true,
|
|
|
|
+ itemType: "text",
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+});
|
|
const formConfig = computed(() => {
|
|
const formConfig = computed(() => {
|
|
return [
|
|
return [
|
|
{
|
|
{
|
|
@@ -152,7 +166,6 @@ const formConfig = computed(() => {
|
|
required: true,
|
|
required: true,
|
|
itemType: "text",
|
|
itemType: "text",
|
|
},
|
|
},
|
|
-
|
|
|
|
{
|
|
{
|
|
type: "select",
|
|
type: "select",
|
|
prop: "handleObjectType",
|
|
prop: "handleObjectType",
|
|
@@ -295,6 +308,7 @@ const submitAll = () => {
|
|
const nodeList = graph.toJSON().cells;
|
|
const nodeList = graph.toJSON().cells;
|
|
submitFormData.nodeObject = JSON.stringify(nodeList);
|
|
submitFormData.nodeObject = JSON.stringify(nodeList);
|
|
submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value);
|
|
submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value);
|
|
|
|
+ console.log(nodeList);
|
|
const isStart = false;
|
|
const isStart = false;
|
|
for (let i = 0; i < nodeList.length; i++) {
|
|
for (let i = 0; i < nodeList.length; i++) {
|
|
const element = nodeList[i];
|
|
const element = nodeList[i];
|
|
@@ -313,7 +327,7 @@ const submitAll = () => {
|
|
}
|
|
}
|
|
submitFormData.flowDefinitionNodeList.push({
|
|
submitFormData.flowDefinitionNodeList.push({
|
|
...flowDefinitionNodeObj.value[element.id],
|
|
...flowDefinitionNodeObj.value[element.id],
|
|
- nodeType: 2,
|
|
|
|
|
|
+ nodeType: element.shape == "branch-btn" ? 3 : 2,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
if (element.shape == "end-btn") {
|
|
if (element.shape == "end-btn") {
|
|
@@ -571,7 +585,7 @@ const antvInit = (data) => {
|
|
title: "流程图",
|
|
title: "流程图",
|
|
target: graph,
|
|
target: graph,
|
|
stencilGraphWidth: 360,
|
|
stencilGraphWidth: 360,
|
|
- stencilGraphHeight: 180,
|
|
|
|
|
|
+ stencilGraphHeight: 280,
|
|
collapsable: true,
|
|
collapsable: true,
|
|
groups: [
|
|
groups: [
|
|
{
|
|
{
|
|
@@ -661,7 +675,7 @@ const antvInit = (data) => {
|
|
});
|
|
});
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ formType.value = cell.shape;
|
|
if (flowDefinitionNodeObj.value[cell.id]) {
|
|
if (flowDefinitionNodeObj.value[cell.id]) {
|
|
formData.data = flowDefinitionNodeObj.value[cell.id];
|
|
formData.data = flowDefinitionNodeObj.value[cell.id];
|
|
formData.data.cell = cell;
|
|
formData.data.cell = cell;
|
|
@@ -795,6 +809,14 @@ const antvInit = (data) => {
|
|
ports: { ...ports },
|
|
ports: { ...ports },
|
|
});
|
|
});
|
|
register({
|
|
register({
|
|
|
|
+ shape: "branch-btn",
|
|
|
|
+ width: 150,
|
|
|
|
+ height: 90,
|
|
|
|
+ effect: ["title"],
|
|
|
|
+ component: branchBtn,
|
|
|
|
+ ports: { ...ports },
|
|
|
|
+ });
|
|
|
|
+ register({
|
|
shape: "end-btn",
|
|
shape: "end-btn",
|
|
width: 150,
|
|
width: 150,
|
|
height: 90,
|
|
height: 90,
|
|
@@ -829,6 +851,17 @@ const antvInit = (data) => {
|
|
},
|
|
},
|
|
});
|
|
});
|
|
const r3 = graph.createNode({
|
|
const r3 = graph.createNode({
|
|
|
|
+ shape: "branch-btn",
|
|
|
|
+ label: "分支",
|
|
|
|
+ zIndex: 100,
|
|
|
|
+ attrs: {
|
|
|
|
+ body: {
|
|
|
|
+ rx: 40,
|
|
|
|
+ ry: 46,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ const r4 = graph.createNode({
|
|
shape: "end-btn",
|
|
shape: "end-btn",
|
|
label: "结束",
|
|
label: "结束",
|
|
zIndex: 100,
|
|
zIndex: 100,
|
|
@@ -839,7 +872,7 @@ const antvInit = (data) => {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
- stencil.load([r2, r3], "group1");
|
|
|
|
|
|
+ stencil.load([r2, r3, r4], "group1");
|
|
// const startNode = graph.addNode({
|
|
// const startNode = graph.addNode({
|
|
// shape: 'custom-rect',
|
|
// shape: 'custom-rect',
|
|
// label: '开始',
|
|
// label: '开始',
|
|
@@ -880,11 +913,13 @@ const getFlowInfo = () => {
|
|
} else {
|
|
} else {
|
|
antvInit();
|
|
antvInit();
|
|
}
|
|
}
|
|
- console.log(flowDefinitionNodeObj.value);
|
|
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
//延迟等待dom渲染完成
|
|
//延迟等待dom渲染完成
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- if (flowDefinitionNodeObj.value[key].nodeName != "结束") {
|
|
|
|
|
|
+ if (
|
|
|
|
+ flowDefinitionNodeObj.value[key].nodeName != "结束" &&
|
|
|
|
+ flowDefinitionNodeObj.value[key].cell != "开始"
|
|
|
|
+ ) {
|
|
let htmlNode = document.querySelector(
|
|
let htmlNode = document.querySelector(
|
|
"g[data-cell-id='" + key + "']"
|
|
"g[data-cell-id='" + key + "']"
|
|
);
|
|
);
|
|
@@ -892,7 +927,7 @@ const getFlowInfo = () => {
|
|
htmlNode.getElementsByClassName("title")[0].innerHTML =
|
|
htmlNode.getElementsByClassName("title")[0].innerHTML =
|
|
flowDefinitionNodeObj.value[key].nodeName;
|
|
flowDefinitionNodeObj.value[key].nodeName;
|
|
}
|
|
}
|
|
- }, 1000);
|
|
|
|
|
|
+ }, 2000);
|
|
}
|
|
}
|
|
dialogVisible.value = false;
|
|
dialogVisible.value = false;
|
|
});
|
|
});
|