|
@@ -1,64 +1,55 @@
|
|
-<template lang="">
|
|
|
|
- <div class="vueFlow">
|
|
|
|
- <div id="container"></div>
|
|
|
|
- <div id="stencil"></div>
|
|
|
|
- <div id="graph-container"></div>
|
|
|
|
- <div id="minimap"></div>
|
|
|
|
- </div>
|
|
|
|
- <el-button @click="submitAll" type="primary" style="margin-top:15px">保存</el-button>
|
|
|
|
- <el-dialog
|
|
|
|
- title="节点信息配置"
|
|
|
|
- v-model="dialogVisible"
|
|
|
|
- width="800"
|
|
|
|
- v-loading="loading"
|
|
|
|
- >
|
|
|
|
- <byForm
|
|
|
|
- :formConfig="formType === 'handle-btn' ? formConfig : branchBtnConfig"
|
|
|
|
- :formOption="formOption"
|
|
|
|
- v-model="formData.data"
|
|
|
|
- :rules="rules"
|
|
|
|
- ref="byform"
|
|
|
|
- >
|
|
|
|
- </byForm>
|
|
|
|
- <template #footer>
|
|
|
|
- <el-button @click="dialogVisible = false" size="default"
|
|
|
|
- >取 消</el-button
|
|
|
|
- >
|
|
|
|
- <el-button
|
|
|
|
- type="danger"
|
|
|
|
- @click="deleteFlowDefinitionNodeObj()"
|
|
|
|
- size="default"
|
|
|
|
- :loading="submitLoading"
|
|
|
|
- >
|
|
|
|
- 删 除
|
|
|
|
- </el-button>
|
|
|
|
- <el-button
|
|
|
|
- type="primary"
|
|
|
|
- @click="submitForm('byform')"
|
|
|
|
- size="default"
|
|
|
|
- :loading="submitLoading"
|
|
|
|
- >
|
|
|
|
- 确 定
|
|
|
|
- </el-button>
|
|
|
|
- </template>
|
|
|
|
- </el-dialog>
|
|
|
|
- <el-dialog
|
|
|
|
- title="节点信息配置"
|
|
|
|
- v-model="startModalType"
|
|
|
|
- width="500"
|
|
|
|
- v-loading="loading"
|
|
|
|
- >
|
|
|
|
- <div>
|
|
|
|
- 节点后执行方法
|
|
|
|
- <el-input style="margin-top:10px" v-model="handlingMethod"></el-input>
|
|
|
|
- </div>
|
|
|
|
- <template #footer>
|
|
|
|
- <el-button @click="startModalType = false" size="default">取 消</el-button>
|
|
|
|
- <el-button type="primary" @click="startModalType = false" size="default" :loading="submitLoading">
|
|
|
|
- 确 定
|
|
|
|
- </el-button>
|
|
|
|
-</template>
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <div class="vueFlow">
|
|
|
|
+ <div id="container"></div>
|
|
|
|
+ <div id="stencil"></div>
|
|
|
|
+ <div id="graph-container"></div>
|
|
|
|
+ <div id="minimap"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-button @click="submitAll" type="primary" style="margin-top:15px">保存</el-button>
|
|
|
|
+
|
|
|
|
+ <el-dialog title="节点信息配置" v-model="dialogVisible" width="800" v-loading="loading">
|
|
|
|
+ <byForm :formConfig="formType === 'handle-btn' ? formConfig : branchBtnConfig" :formOption="formOption" v-model="formData.data" :rules="rules"
|
|
|
|
+ ref="byform">
|
|
|
|
+ </byForm>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <el-button @click="dialogVisible = false" size="default">取 消</el-button>
|
|
|
|
+ <el-button type="danger" @click="deleteFlowDefinitionNodeObj()" size="default" :loading="submitLoading">
|
|
|
|
+ 删 除
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button type="primary" @click="submitForm('byform')" size="default" :loading="submitLoading">
|
|
|
|
+ 确 定
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+
|
|
|
|
+ <el-dialog title="节点信息配置" v-model="startModalType" width="500">
|
|
|
|
+ <div v-loading="loading">
|
|
|
|
+ 节点后执行方法
|
|
|
|
+ <el-input style="margin-top:10px" v-model="handlingMethod"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <el-button @click="startModalType = false" size="default">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="startModalType = false" size="default" :loading="submitLoading">
|
|
|
|
+ 确 定
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+
|
|
|
|
+ <el-dialog title="线信息配置" v-model="lineDialog" width="800">
|
|
|
|
+ <byForm :formConfig="lineFormConfig" :formOption="formOption" v-model="formData.lineData" :rules="rules" ref="lineForm" v-loading="loading">
|
|
|
|
+ </byForm>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <el-button @click="lineDialog = false" size="default">取 消</el-button>
|
|
|
|
+ <el-button type="danger" @click="deleteFlowLine()" size="default" :loading="submitLoading">
|
|
|
|
+ 删 除
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button type="primary" @click="submitLineForm('byform')" size="default" :loading="submitLoading">
|
|
|
|
+ 确 定
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
import {
|
|
import {
|
|
@@ -107,17 +98,99 @@ 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 formType = ref(1); //1办理 2分支
|
|
const formData = reactive({
|
|
const formData = reactive({
|
|
data: {
|
|
data: {
|
|
|
|
+ nodeName: "",
|
|
userName: "",
|
|
userName: "",
|
|
password: "",
|
|
password: "",
|
|
|
|
+ id: "",
|
|
|
|
+ cell: null,
|
|
|
|
+ handleObjectId: "",
|
|
|
|
+ nodeButtonSet: null,
|
|
|
|
+ handleObjectType: "",
|
|
|
|
+ nodeHandleType: "",
|
|
|
|
+ },
|
|
|
|
+ lineData: {
|
|
|
|
+ lineUuid: "",
|
|
|
|
+ id: "",
|
|
|
|
+ cell: null,
|
|
|
|
+ jumpCondition: "",
|
|
|
|
+ sourceId: "",
|
|
|
|
+ targetId: "",
|
|
},
|
|
},
|
|
});
|
|
});
|
|
const startModalType = ref(false);
|
|
const startModalType = ref(false);
|
|
|
|
+const lineDialog = ref(false);
|
|
const handlingMethod = ref("");
|
|
const handlingMethod = ref("");
|
|
const byform = ref(null);
|
|
const byform = ref(null);
|
|
|
|
+const lineForm = ref(null);
|
|
const flowDefinitionNodeObj = ref({});
|
|
const flowDefinitionNodeObj = ref({});
|
|
|
|
+const flowDefinitionLineObj = ref({});
|
|
|
|
+const rankData = ref([
|
|
|
|
+ {
|
|
|
|
+ label: "员工",
|
|
|
|
+ value: 10,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "主管",
|
|
|
|
+ value: 20,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "经理",
|
|
|
|
+ value: 30,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "总监",
|
|
|
|
+ value: 40,
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+const nodeTypeData = ref([
|
|
|
|
+ {
|
|
|
|
+ label: "常规",
|
|
|
|
+ value: "10",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "聚合",
|
|
|
|
+ value: "20",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "抄送",
|
|
|
|
+ value: "30",
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+
|
|
|
|
+const btnData = ref([
|
|
|
|
+ {
|
|
|
|
+ label: "通过",
|
|
|
|
+ value: 1,
|
|
|
|
+ disabled: true,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "退回",
|
|
|
|
+ value: 8,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "驳回",
|
|
|
|
+ value: 2,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "加签",
|
|
|
|
+ value: 6,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "移交",
|
|
|
|
+ value: 7,
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+
|
|
|
|
+const csBtn = ref([
|
|
|
|
+ {
|
|
|
|
+ label: "已读",
|
|
|
|
+ value: 1,
|
|
|
|
+ disabled: true,
|
|
|
|
+ },
|
|
|
|
+]);
|
|
const rules = reactive({
|
|
const rules = reactive({
|
|
nodeName: [
|
|
nodeName: [
|
|
{
|
|
{
|
|
@@ -136,10 +209,35 @@ const rules = reactive({
|
|
handleObjectId: [
|
|
handleObjectId: [
|
|
{
|
|
{
|
|
required: true,
|
|
required: true,
|
|
- message: "办理人不能为空",
|
|
|
|
|
|
+ message: "请选择",
|
|
trigger: "blur",
|
|
trigger: "blur",
|
|
},
|
|
},
|
|
],
|
|
],
|
|
|
|
+ jumpCondition: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请输入条件表达式",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ nodeHandleType: [
|
|
|
|
+ {
|
|
|
|
+ required: true,
|
|
|
|
+ message: "请选择",
|
|
|
|
+ trigger: "blur",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+});
|
|
|
|
+const lineFormConfig = computed(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ type: "input",
|
|
|
|
+ prop: "jumpCondition",
|
|
|
|
+ label: "条件表达式",
|
|
|
|
+ required: true,
|
|
|
|
+ itemType: "text",
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
});
|
|
});
|
|
const branchBtnConfig = computed(() => {
|
|
const branchBtnConfig = computed(() => {
|
|
return [
|
|
return [
|
|
@@ -164,8 +262,8 @@ const formConfig = computed(() => {
|
|
{
|
|
{
|
|
type: "select",
|
|
type: "select",
|
|
prop: "handleObjectType",
|
|
prop: "handleObjectType",
|
|
- label: "办理人",
|
|
|
|
- placeholder: "请选择办理人类型",
|
|
|
|
|
|
+ label: "办理类型",
|
|
|
|
+ placeholder: "请选择办理类型",
|
|
required: true,
|
|
required: true,
|
|
itemWidth: 50,
|
|
itemWidth: 50,
|
|
fn: (e) => {
|
|
fn: (e) => {
|
|
@@ -174,7 +272,7 @@ const formConfig = computed(() => {
|
|
//1用户 2部门负责人 3部门总监 4岗位 5角色
|
|
//1用户 2部门负责人 3部门总监 4岗位 5角色
|
|
data: [
|
|
data: [
|
|
{
|
|
{
|
|
- label: "指定用户",
|
|
|
|
|
|
+ label: "用户",
|
|
value: 1,
|
|
value: 1,
|
|
},
|
|
},
|
|
// {
|
|
// {
|
|
@@ -190,16 +288,16 @@ const formConfig = computed(() => {
|
|
// value: 4,
|
|
// value: 4,
|
|
// },
|
|
// },
|
|
{
|
|
{
|
|
- label: "指定角色",
|
|
|
|
|
|
+ label: "角色",
|
|
value: 5,
|
|
value: 5,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- label: "动态用户",
|
|
|
|
- value: 6,
|
|
|
|
|
|
+ label: "职级",
|
|
|
|
+ value: 8,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- label: "部门主管",
|
|
|
|
- value: 8,
|
|
|
|
|
|
+ label: "用户主群(需定制开发)",
|
|
|
|
+ value: 6,
|
|
},
|
|
},
|
|
],
|
|
],
|
|
},
|
|
},
|
|
@@ -212,78 +310,64 @@ const formConfig = computed(() => {
|
|
// },
|
|
// },
|
|
{
|
|
{
|
|
type: "select",
|
|
type: "select",
|
|
- label: "",
|
|
|
|
|
|
+ label: "办理用户",
|
|
itemWidth: 50,
|
|
itemWidth: 50,
|
|
prop: "handleObjectId",
|
|
prop: "handleObjectId",
|
|
- placeholder: "请选择办理人",
|
|
|
|
|
|
+ placeholder: "请选择办理用户",
|
|
data: selectHanleData.value,
|
|
data: selectHanleData.value,
|
|
isShow:
|
|
isShow:
|
|
- formData.data.handleObjectType !== 5 &&
|
|
|
|
- formData.data.handleObjectType !== 6 &&
|
|
|
|
- formData.data.handleObjectType !== 8,
|
|
|
|
|
|
+ formData.data.handleObjectType &&
|
|
|
|
+ ![5, 6, 8].includes(formData.data.handleObjectType),
|
|
},
|
|
},
|
|
{
|
|
{
|
|
type: "select",
|
|
type: "select",
|
|
- label: "",
|
|
|
|
|
|
+ label: "办理角色",
|
|
itemWidth: 50,
|
|
itemWidth: 50,
|
|
prop: "handleObjectId",
|
|
prop: "handleObjectId",
|
|
multiple: true,
|
|
multiple: true,
|
|
- placeholder: "请选择办理人",
|
|
|
|
|
|
+ placeholder: "请选择办理角色",
|
|
data: selectHanleData.value,
|
|
data: selectHanleData.value,
|
|
isShow:
|
|
isShow:
|
|
formData.data.handleObjectType === 5 &&
|
|
formData.data.handleObjectType === 5 &&
|
|
formData.data.handleObjectType !== 6,
|
|
formData.data.handleObjectType !== 6,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- type: "input",
|
|
|
|
- prop: "handlingMethod",
|
|
|
|
- label: "节点后置执行方法",
|
|
|
|
- required: true,
|
|
|
|
- itemType: "text",
|
|
|
|
|
|
+ type: "select",
|
|
|
|
+ label: "办理职级",
|
|
|
|
+ itemWidth: 50,
|
|
|
|
+ prop: "handleObjectId",
|
|
|
|
+ multiple: false,
|
|
|
|
+ placeholder: "请选择办理职级",
|
|
|
|
+ data: rankData.value,
|
|
|
|
+ isShow: formData.data.handleObjectType === 8,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- type: "input",
|
|
|
|
- prop: "jumpCondition",
|
|
|
|
- label: "条件表达式",
|
|
|
|
- required: true,
|
|
|
|
- itemType: "text",
|
|
|
|
|
|
+ type: "select",
|
|
|
|
+ label: "节点类型",
|
|
|
|
+ itemWidth: 100,
|
|
|
|
+ prop: "nodeHandleType",
|
|
|
|
+ data: nodeTypeData.value,
|
|
},
|
|
},
|
|
|
|
+ // {
|
|
|
|
+ // type: "input",
|
|
|
|
+ // prop: "handlingMethod",
|
|
|
|
+ // label: "节点后置执行方法",
|
|
|
|
+ // required: true,
|
|
|
|
+ // itemType: "text",
|
|
|
|
+ // },
|
|
|
|
+ // {
|
|
|
|
+ // type: "input",
|
|
|
|
+ // prop: "jumpCondition",
|
|
|
|
+ // label: "条件表达式",
|
|
|
|
+ // required: true,
|
|
|
|
+ // itemType: "text",
|
|
|
|
+ // },
|
|
{
|
|
{
|
|
type: "checkbox",
|
|
type: "checkbox",
|
|
prop: "nodeButtonSet",
|
|
prop: "nodeButtonSet",
|
|
label: "节点按钮",
|
|
label: "节点按钮",
|
|
//1通过 2驳回 3返回上一步 4退回到发起人
|
|
//1通过 2驳回 3返回上一步 4退回到发起人
|
|
- data: [
|
|
|
|
- {
|
|
|
|
- label: "通过",
|
|
|
|
- value: 1,
|
|
|
|
- disabled: true,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "退回",
|
|
|
|
- value: 8,
|
|
|
|
- },
|
|
|
|
- // {
|
|
|
|
- // label: "退回",
|
|
|
|
- // value: 3,
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // label: "退回到发起人",
|
|
|
|
- // value: 4,
|
|
|
|
- // },
|
|
|
|
- {
|
|
|
|
- label: "驳回",
|
|
|
|
- value: 2,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "加签",
|
|
|
|
- value: 6,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: "移交",
|
|
|
|
- value: 7,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
|
|
+ data: formData.data.nodeHandleType == "30" ? csBtn.value : btnData.value,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
type: "radio",
|
|
type: "radio",
|
|
@@ -304,10 +388,10 @@ const formConfig = computed(() => {
|
|
});
|
|
});
|
|
const formOption = reactive({
|
|
const formOption = reactive({
|
|
inline: true,
|
|
inline: true,
|
|
- labelWidth: 130,
|
|
|
|
|
|
+ labelWidth: 100,
|
|
itemWidth: 100,
|
|
itemWidth: 100,
|
|
});
|
|
});
|
|
-let graph;
|
|
|
|
|
|
+let graph = null;
|
|
const submitForm = () => {
|
|
const submitForm = () => {
|
|
byform.value.handleSubmit((valid) => {
|
|
byform.value.handleSubmit((valid) => {
|
|
//如果处理类型是角色, 则角色转,分割
|
|
//如果处理类型是角色, 则角色转,分割
|
|
@@ -321,10 +405,23 @@ const submitForm = () => {
|
|
dialogVisible.value = false;
|
|
dialogVisible.value = false;
|
|
formData.data.cell.setData({
|
|
formData.data.cell.setData({
|
|
title: formData.data.nodeName,
|
|
title: formData.data.nodeName,
|
|
|
|
+ nodeHandleType: formData.data.nodeHandleType,
|
|
});
|
|
});
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+const deleteFlowLine = (cell) => {
|
|
|
|
+ graph.removeNode(formData.lineData.id);
|
|
|
|
+ lineDialog.value = false;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const submitLineForm = () => {
|
|
|
|
+ lineForm.value.handleSubmit((valid) => {
|
|
|
|
+ flowDefinitionLineObj.value[formData.lineData.id] = formData.lineData;
|
|
|
|
+ lineDialog.value = false;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
const submitFormData = {
|
|
const submitFormData = {
|
|
flowInfoId: null,
|
|
flowInfoId: null,
|
|
titleTemplate: null,
|
|
titleTemplate: null,
|
|
@@ -332,6 +429,7 @@ const submitFormData = {
|
|
nodeObject: "",
|
|
nodeObject: "",
|
|
lineObject: "",
|
|
lineObject: "",
|
|
flowDefinitionNodeList: [],
|
|
flowDefinitionNodeList: [],
|
|
|
|
+ flowDefinitionLineList: [],
|
|
};
|
|
};
|
|
const dataRollback = () => {
|
|
const dataRollback = () => {
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
@@ -339,11 +437,18 @@ const dataRollback = () => {
|
|
flowDefinitionNodeObj.value[key].handleObjectType &&
|
|
flowDefinitionNodeObj.value[key].handleObjectType &&
|
|
flowDefinitionNodeObj.value[key].handleObjectType === 5
|
|
flowDefinitionNodeObj.value[key].handleObjectType === 5
|
|
) {
|
|
) {
|
|
- flowDefinitionNodeObj.value[key].handleObjectId =
|
|
|
|
- flowDefinitionNodeObj.value[key].handleObjectId.split(",");
|
|
|
|
|
|
+ if (flowDefinitionNodeObj.value[key].handleObjectId) {
|
|
|
|
+ flowDefinitionNodeObj.value[key].handleObjectId =
|
|
|
|
+ flowDefinitionNodeObj.value[key].handleObjectId.split(",");
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+const allNodeData = ref([]);
|
|
|
|
+// 抄送节点
|
|
|
|
+const csNodeList = ref([]);
|
|
|
|
+// 线数据
|
|
|
|
+const lineNodeList = ref([]);
|
|
const submitAll = () => {
|
|
const submitAll = () => {
|
|
if (proxy.title == "") {
|
|
if (proxy.title == "") {
|
|
ElMessage({
|
|
ElMessage({
|
|
@@ -352,26 +457,35 @@ const submitAll = () => {
|
|
});
|
|
});
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
+ // 清空数据
|
|
|
|
+ csNodeList.value = [];
|
|
|
|
+ lineNodeList.value = [];
|
|
// 如果选择类型是角色,则角色数据转成 ','分割
|
|
// 如果选择类型是角色,则角色数据转成 ','分割
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
if (
|
|
if (
|
|
flowDefinitionNodeObj.value[key].handleObjectType &&
|
|
flowDefinitionNodeObj.value[key].handleObjectType &&
|
|
flowDefinitionNodeObj.value[key].handleObjectType === 5
|
|
flowDefinitionNodeObj.value[key].handleObjectType === 5
|
|
) {
|
|
) {
|
|
- flowDefinitionNodeObj.value[key].handleObjectId =
|
|
|
|
- flowDefinitionNodeObj.value[key].handleObjectId.join(",");
|
|
|
|
|
|
+ if (flowDefinitionNodeObj.value[key].handleObjectId) {
|
|
|
|
+ flowDefinitionNodeObj.value[key].handleObjectId =
|
|
|
|
+ flowDefinitionNodeObj.value[key].handleObjectId.join(",");
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
submitFormData.titleTemplate = proxy.title;
|
|
submitFormData.titleTemplate = proxy.title;
|
|
- const nodeList = graph.toJSON().cells;
|
|
|
|
- submitFormData.nodeObject = JSON.stringify(nodeList);
|
|
|
|
|
|
+ allNodeData.value = graph.toJSON().cells;
|
|
|
|
+ submitFormData.nodeObject = JSON.stringify(allNodeData.value);
|
|
submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value);
|
|
submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value);
|
|
-
|
|
|
|
- // console.log(nodeList);
|
|
|
|
- const isStart = false;
|
|
|
|
- for (let i = 0; i < nodeList.length; i++) {
|
|
|
|
- const element = nodeList[i];
|
|
|
|
|
|
+ for (let i = 0; i < allNodeData.value.length; i++) {
|
|
|
|
+ const element = allNodeData.value[i];
|
|
|
|
+ // 抄送节点
|
|
|
|
+ if (
|
|
|
|
+ element.shape == "handle-btn" &&
|
|
|
|
+ element.data &&
|
|
|
|
+ element.data.nodeHandleType == "30"
|
|
|
|
+ ) {
|
|
|
|
+ csNodeList.value.push(element);
|
|
|
|
+ }
|
|
//是办理节点
|
|
//是办理节点
|
|
if (
|
|
if (
|
|
element.shape != "start-btn" &&
|
|
element.shape != "start-btn" &&
|
|
@@ -408,6 +522,18 @@ const submitAll = () => {
|
|
}
|
|
}
|
|
//说明是线
|
|
//说明是线
|
|
if (element.shape == "edge") {
|
|
if (element.shape == "edge") {
|
|
|
|
+ lineNodeList.value.push(element);
|
|
|
|
+ // 线数据对象
|
|
|
|
+ if (!flowDefinitionLineObj.value[element.id]) {
|
|
|
|
+ flowDefinitionLineObj.value[element.id] = {
|
|
|
|
+ lineUuid: element.id,
|
|
|
|
+ id: element.id,
|
|
|
|
+ jumpCondition: "",
|
|
|
|
+ sourceId: element.source.cell,
|
|
|
|
+ targetId: element.target.cell,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+
|
|
if (!flowDefinitionNodeObj.value[element.target.cell]) {
|
|
if (!flowDefinitionNodeObj.value[element.target.cell]) {
|
|
ElMessage({
|
|
ElMessage({
|
|
message: "有节点未配置,请检查节点",
|
|
message: "有节点未配置,请检查节点",
|
|
@@ -422,6 +548,24 @@ const submitAll = () => {
|
|
submitFormData.flowDefinitionNodeList = [];
|
|
submitFormData.flowDefinitionNodeList = [];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ if (csNodeList.value && csNodeList.value.length > 0) {
|
|
|
|
+ for (let i = 0; i < csNodeList.value.length; i++) {
|
|
|
|
+ const node = csNodeList.value[i];
|
|
|
|
+ for (let j = 0; j < lineNodeList.value.length; j++) {
|
|
|
|
+ const line = lineNodeList.value[j];
|
|
|
|
+ // 如果线的开始节点是抄送节点
|
|
|
|
+ if (line.source.cell == node.id) {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: "抄送节点不可做为起始节点",
|
|
|
|
+ type: "warning",
|
|
|
|
+ });
|
|
|
|
+ dataRollback();
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
addVersion();
|
|
addVersion();
|
|
};
|
|
};
|
|
|
|
|
|
@@ -439,6 +583,7 @@ const addVersion = () => {
|
|
const idObg = {};
|
|
const idObg = {};
|
|
for (let i = 0; i < submitFormData.flowDefinitionNodeList.length; i++) {
|
|
for (let i = 0; i < submitFormData.flowDefinitionNodeList.length; i++) {
|
|
const element = submitFormData.flowDefinitionNodeList[i];
|
|
const element = submitFormData.flowDefinitionNodeList[i];
|
|
|
|
+ element.oldNodeId = element.id;
|
|
if (element.parentId == null && element.nodeName == "结束") {
|
|
if (element.parentId == null && element.nodeName == "结束") {
|
|
ElMessage({
|
|
ElMessage({
|
|
message: "有结束节点未连线,请配置",
|
|
message: "有结束节点未连线,请配置",
|
|
@@ -470,8 +615,51 @@ const addVersion = () => {
|
|
element.nodeButtonSet = element.nodeButtonSet.join(",");
|
|
element.nodeButtonSet = element.nodeButtonSet.join(",");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ // 线数据
|
|
|
|
+ for (let i = 0; i < allNodeData.value.length; i++) {
|
|
|
|
+ const node = allNodeData.value[i];
|
|
|
|
+ if (node.shape == "edge") {
|
|
|
|
+ let lineData = flowDefinitionLineObj.value[node.id];
|
|
|
|
+ // 找源节点
|
|
|
|
+ let sourceCell = submitFormData.flowDefinitionNodeList.find(
|
|
|
|
+ (x) => x.oldNodeId == lineData.sourceId
|
|
|
|
+ );
|
|
|
|
+ let sourceId = "";
|
|
|
|
+ if (sourceCell) {
|
|
|
|
+ sourceId = sourceCell.id;
|
|
|
|
+ } else {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: "未找到源节点",
|
|
|
|
+ type: "warning",
|
|
|
|
+ });
|
|
|
|
+ dataRollback();
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ // 找目标节点
|
|
|
|
+ let targetCell = submitFormData.flowDefinitionNodeList.find(
|
|
|
|
+ (x) => x.oldNodeId == lineData.targetId
|
|
|
|
+ );
|
|
|
|
+ let targetId = "";
|
|
|
|
+ if (targetCell) {
|
|
|
|
+ targetId = targetCell.id;
|
|
|
|
+ } else {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: "未找到目标节点",
|
|
|
|
+ type: "warning",
|
|
|
|
+ });
|
|
|
|
+ dataRollback();
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ submitFormData.flowDefinitionLineList.push({
|
|
|
|
+ lineUuid: lineData.id,
|
|
|
|
+ jumpCondition: lineData.jumpCondition,
|
|
|
|
+ sourceId,
|
|
|
|
+ targetId,
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- proxy.post("/flowDefinition/addVersion", submitFormData).then((res) => {
|
|
|
|
|
|
+ proxy.post("/flowDefinition/addVersion", submitFormData).then(() => {
|
|
ElMessage({
|
|
ElMessage({
|
|
message: "保存成功",
|
|
message: "保存成功",
|
|
type: "success",
|
|
type: "success",
|
|
@@ -725,21 +913,38 @@ const antvInit = (data) => {
|
|
});
|
|
});
|
|
// #endregion
|
|
// #endregion
|
|
graph.on("cell:click", ({ e, x, y, cell, view }) => {
|
|
graph.on("cell:click", ({ e, x, y, cell, view }) => {
|
|
- // console.log(flowDefinitionNodeObj.value);
|
|
|
|
- // console.log(cell);
|
|
|
|
if (cell.shape === "start-btn") {
|
|
if (cell.shape === "start-btn") {
|
|
startModalType.value = true;
|
|
startModalType.value = true;
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- if (cell.shape === "end-btn" || cell.shape === "edge") {
|
|
|
|
|
|
+ if (cell.shape === "end-btn") {
|
|
ElMessageBox.confirm("是否删除", "提示", {
|
|
ElMessageBox.confirm("是否删除", "提示", {
|
|
confirmButtonText: "确定",
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
type: "warning",
|
|
- }).then(() => {
|
|
|
|
- graph.removeNode(cell.id);
|
|
|
|
- // delete flowDefinitionNodeObj.value[id]
|
|
|
|
- });
|
|
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ graph.removeNode(cell.id);
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ console.log("取消");
|
|
|
|
+ });
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (cell.shape === "edge") {
|
|
|
|
+ lineDialog.value = true;
|
|
|
|
+ if (flowDefinitionLineObj.value[cell.id]) {
|
|
|
|
+ formData.lineData = flowDefinitionLineObj.value[cell.id];
|
|
|
|
+ } else {
|
|
|
|
+ formData.lineData = {
|
|
|
|
+ lineUuid: cell.id,
|
|
|
|
+ id: cell.id,
|
|
|
|
+ cell: cell,
|
|
|
|
+ jumpCondition: "",
|
|
|
|
+ sourceId: cell.store.data.source.cell,
|
|
|
|
+ targetId: cell.store.data.target.cell,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
formType.value = cell.shape;
|
|
formType.value = cell.shape;
|
|
@@ -757,6 +962,7 @@ const antvInit = (data) => {
|
|
id: cell.id,
|
|
id: cell.id,
|
|
cell: cell,
|
|
cell: cell,
|
|
nodeButtonSet: [1],
|
|
nodeButtonSet: [1],
|
|
|
|
+ nodeHandleType: "10",
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
@@ -923,17 +1129,17 @@ const antvInit = (data) => {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
- const r3 = graph.createNode({
|
|
|
|
- shape: "branch-btn",
|
|
|
|
- label: "分支",
|
|
|
|
- zIndex: 100,
|
|
|
|
- attrs: {
|
|
|
|
- body: {
|
|
|
|
- rx: 40,
|
|
|
|
- ry: 46,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
|
|
+ // const r3 = graph.createNode({
|
|
|
|
+ // shape: "branch-btn",
|
|
|
|
+ // label: "分支",
|
|
|
|
+ // zIndex: 100,
|
|
|
|
+ // attrs: {
|
|
|
|
+ // body: {
|
|
|
|
+ // rx: 40,
|
|
|
|
+ // ry: 46,
|
|
|
|
+ // },
|
|
|
|
+ // },
|
|
|
|
+ // });
|
|
const r4 = graph.createNode({
|
|
const r4 = graph.createNode({
|
|
shape: "end-btn",
|
|
shape: "end-btn",
|
|
label: "结束",
|
|
label: "结束",
|
|
@@ -945,7 +1151,7 @@ const antvInit = (data) => {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
- stencil.load([r2, r3, r4], "group1");
|
|
|
|
|
|
+ stencil.load([r2, r4], "group1");
|
|
// const startNode = graph.addNode({
|
|
// const startNode = graph.addNode({
|
|
// shape: 'custom-rect',
|
|
// shape: 'custom-rect',
|
|
// label: '开始',
|
|
// label: '开始',
|
|
@@ -983,24 +1189,32 @@ const getFlowInfo = () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ if (res.flowDefinitionLineList && res.flowDefinitionLineList.length) {
|
|
|
|
+ for (let i = 0; i < res.flowDefinitionLineList.length; i++) {
|
|
|
|
+ const lineNode = res.flowDefinitionLineList[i];
|
|
|
|
+ flowDefinitionLineObj.value[lineNode.lineUuid] = {
|
|
|
|
+ lineUuid: lineNode.lineUuid,
|
|
|
|
+ id: lineNode.lineUuid,
|
|
|
|
+ jumpCondition: lineNode.jumpCondition || "",
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
if (res.nodeObject) {
|
|
if (res.nodeObject) {
|
|
antvInit(JSON.parse(res.nodeObject));
|
|
antvInit(JSON.parse(res.nodeObject));
|
|
} else {
|
|
} else {
|
|
antvInit();
|
|
antvInit();
|
|
}
|
|
}
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
for (const key in flowDefinitionNodeObj.value) {
|
|
- //延迟等待dom渲染完成
|
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- if (
|
|
|
|
- flowDefinitionNodeObj.value[key].nodeName != "结束" &&
|
|
|
|
- flowDefinitionNodeObj.value[key].cell != "开始"
|
|
|
|
- ) {
|
|
|
|
- let htmlNode = document.querySelector(
|
|
|
|
- "g[data-cell-id='" + key + "']"
|
|
|
|
- );
|
|
|
|
- //获取htmlNode节点下的title,修改title的内容
|
|
|
|
- htmlNode.getElementsByClassName("title")[0].innerHTML =
|
|
|
|
- flowDefinitionNodeObj.value[key].nodeName;
|
|
|
|
|
|
+ let cell = graph.getCellById(key);
|
|
|
|
+ if (cell) {
|
|
|
|
+ cell.setData({
|
|
|
|
+ random: proxy.random(),
|
|
|
|
+ title: flowDefinitionNodeObj.value[key].nodeName,
|
|
|
|
+ nodeHandleType: flowDefinitionNodeObj.value[key].nodeHandleType,
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}, 2000);
|
|
}, 2000);
|
|
}
|
|
}
|
|
@@ -1026,7 +1240,6 @@ onMounted(() => {
|
|
// setTimeout(() => {
|
|
// setTimeout(() => {
|
|
// for (let i = 0; i < dataJson.flowDefinitionNodeList.length; i++) {
|
|
// for (let i = 0; i < dataJson.flowDefinitionNodeList.length; i++) {
|
|
// const element = dataJson.flowDefinitionNodeList[i];
|
|
// const element = dataJson.flowDefinitionNodeList[i];
|
|
- // console.log(element)
|
|
|
|
// if(!element.cell) {
|
|
// if(!element.cell) {
|
|
// continue
|
|
// continue
|
|
// }
|
|
// }
|
|
@@ -1104,6 +1317,6 @@ onMounted(() => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#stencil .x6-widget-stencil-content .x6-widget-stencil-group-content .x6-graph {
|
|
#stencil .x6-widget-stencil-content .x6-widget-stencil-group-content .x6-graph {
|
|
- height: 900px !important;
|
|
|
|
|
|
+ // height: 900px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|