新增分支功能

src/views/process/dealWith/index.vue

@@ -124,7 +124,7 @@ const config = computed(() => {
 
 		{
 			attrs: {
-				label: '处理类型',
+				label: '流程状态',
 				width: 100,
 				prop: 'status',
 			},

src/views/process/processConfig/branchBtn.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="branch-btn">
+        <div class="icon-box">
+            <div class="icon">
+                <i class="iconfont icon-iconm_fenz"></i>
+            </div>
+            <div class="icon-text">分支</div>
+        </div>
+        <div class="title">{{title || '待配置'}}</div>
+    </div>
+</template>
+<script setup>
+    import { defineProps, inject, ref } from 'vue'
+    
+    let title = ref('')
+    let getNode = inject('getNode')
+    const node = getNode()
+    node.on('change:data', ({current}) => {
+        title.value = current.title
+    })
+    
+
+</script>
+<style lang="scss">
+    .branch-btn{
+        height: 90px;
+        width: 150px;
+        background: #fff;
+        text-align: center;
+        box-shadow: 0px 2px 10px 1px rgba(51,51,51,0.1);
+        border-radius: 10px 10px 10px 10px;
+        padding: 10px;
+        .title {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            padding: 0 20px;
+            text-align: left;
+            background: #eee;
+            border-radius: 10px;
+            margin-top: 10px;
+            //文字一行多余省略
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .icon-box{
+            display: flex;
+            height: 20px;
+            line-height: 20px;
+            color: #333;
+            font-size: 14px;
+            .icon{
+                height: 20px;
+                width: 20px;
+                border-radius: 10px;
+                background: #7566F0;
+                color: #fff;
+                i{
+                    color: #fff;
+                    font-size: 12px;
+                }
+            }
+            .icon-text{
+                margin-left:10px;
+            }
+        }
+    }
+</style>

src/views/process/processConfig/vueFlow.vue

@@ -13,7 +13,7 @@
 		v-loading="loading"
 	>
 		<byForm
-			:formConfig="formConfig"
+			:formConfig="formType === 'handle-btn' ? formConfig : branchBtnConfig"
 			:formOption="formOption"
 			v-model="formData.data"
 			:rules="rules"
@@ -97,8 +97,10 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import startBtn from './startBtn.vue'
 import endBtn from './endBtn.vue'
 import handleBtn from './handleBtn.vue'
+import branchBtn from './branchBtn.vue'
 import { MiniMap } from "@antv/x6-plugin-minimap";
 import useTagsViewStore from '@/store/modules/tagsView'
+import { rectToBox } from '@vue-flow/core/dist/utils/graph'
 
 defineProps({
 	title: {
@@ -112,6 +114,7 @@ const dialogVisible = ref(false)
 const modalType = ref('add')
 const loading = ref(false)
 const submitLoading = ref(false)
+let formType = ref(1) //1办理 2分支
 const formData = reactive({
 	data: {
 		userName: '',
@@ -145,6 +148,17 @@ const rules = reactive({
 		},
 	],
 })
+const branchBtnConfig = computed(() => {
+	return [
+		{
+			type: 'input',
+			prop: 'nodeName',
+			label: '节点名称',
+			required: true,
+			itemType: 'text',
+		},
+	]
+})
 const formConfig = computed(() => {
 	return [
 		{
@@ -154,7 +168,6 @@ const formConfig = computed(() => {
 			required: true,
 			itemType: 'text',
 		},
-
 		{
 			type: 'select',
 			prop: 'handleObjectType',
@@ -298,6 +311,7 @@ const submitAll = () => {
 	const nodeList = graph.toJSON().cells
 	submitFormData.nodeObject = JSON.stringify(nodeList)
 	submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value)
+	console.log(nodeList)
 	const isStart = false
 	for (let i = 0; i < nodeList.length; i++) {
 		const element = nodeList[i]
@@ -313,7 +327,7 @@ const submitAll = () => {
 			}
 			submitFormData.flowDefinitionNodeList.push({
 				...flowDefinitionNodeObj.value[element.id],
-				nodeType: 2,
+				nodeType: element.shape == 'branch-btn' ? 3 : 2,
 			})
 		}
 		if(element.shape == 'end-btn') {
@@ -574,7 +588,7 @@ const antvInit = (data) => {
 		title: '流程图',
 		target: graph,
 		stencilGraphWidth: 360,
-		stencilGraphHeight: 180,
+		stencilGraphHeight: 280,
 		collapsable: true,
 		groups: [
 			{
@@ -664,7 +678,7 @@ const antvInit = (data) => {
 			});
 			return
 		}
-		
+		formType.value = cell.shape
 		if (flowDefinitionNodeObj.value[cell.id]) {
 			formData.data = flowDefinitionNodeObj.value[cell.id]
 			formData.data.cell = cell
@@ -798,6 +812,14 @@ const antvInit = (data) => {
 		ports: { ...ports },
 	})
 	register({
+		shape: 'branch-btn',
+		width: 150,
+		height: 90,
+		effect: ["title"],
+		component: branchBtn,
+		ports: { ...ports },
+	})
+	register({
 		shape: 'end-btn',
 		width: 150,
 		height: 90,
@@ -832,6 +854,17 @@ const antvInit = (data) => {
 		},
 	})
 	const r3 = graph.createNode({
+		shape: 'branch-btn',
+		label: '分支',
+		zIndex: 100,
+		attrs: {
+			body: {
+				rx: 40,
+				ry: 46,
+			},
+		},
+	})
+	const r4 = graph.createNode({
 		shape: 'end-btn',
 		label: '结束',
 		zIndex: 100,
@@ -842,7 +875,7 @@ const antvInit = (data) => {
 			},
 		},
 	})
-	stencil.load([r2, r3], 'group1')
+	stencil.load([r2,r3, r4], 'group1')
 	// const startNode = graph.addNode({
 	// 	shape: 'custom-rect',
 	// 	label: '开始',
@@ -886,16 +919,15 @@ const getFlowInfo =	(()=>{
 		}else{
 			antvInit()
 		}
-		console.log(flowDefinitionNodeObj.value)
 		for (const key in flowDefinitionNodeObj.value) {
 			//延迟等待dom渲染完成
 			setTimeout(() => {
-				if(flowDefinitionNodeObj.value[key].nodeName != '结束'){
+				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
 				}
-			}, 1000);
+			}, 2000);
 		}
 		dialogVisible.value = false
 	})