src/components/scDegra.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div v-if="visible">
-    <svg id="mySvg"></svg>
+    <svg id="mySvg" v-if="visible"></svg>
   </div>
 </template>
 
@@ -12,71 +12,143 @@ export default {
   name: "degraD3",
   props: {
     nodes: {
-      type: Array,
+      type:Array,
-      default: () => [],
+      default:()=>[]
     },
-    edges: {
+    edges:{
-      type: Array,
+      type:Array,
-      default: () => [],
+      default:()=>[]
     },
-    rankdir: {
+    rankdir:{
       type: String,
       default: "DL",
-    },
+    }
   },
   data() { 
     return {
-      g: null,
+      g:null,
-      inner: null,
+      visible:false,
-      render: null,
+      isSaving: false,
+      type:""
     };
   },
   watch: {
     nodes: {
-      handler() {
+      handler(val) {
+        console.log(val);
         this.updateGraph();
       },
       deep: true,
     },
     edges: {
-      handler() {
+      handler(val) {
+        console.log(val);
         this.updateGraph();
       },
       deep: true,
     },
   },
-  mounted() {
+  mounted() {},
-    this.initGraph();
-  },
   methods: {
-    /** 初始化图 */
+    open(){
-    initGraph() {
+      this.visible = true;
-      this.g = new dagreD3.graphlib.Graph({ multigraph: true }).setGraph({
+      this.handleWatch();
-        rankdir: this.rankdir,
+    },
+    handleWatch() {
+      let that = this;
+      that.$nextTick(() => {
+        if(that.g!==null){
+          that.updateGraph();     
+        }else{
+          that.g = new dagreD3.graphlib.Graph({multigraph: true}).setGraph({
+            rankdir: that.rankdir,
             nodesep: 40,
-        edgesep: 25,
+            edgesep: 25, //两条线之间的距离
-        ranksep: 20,
+            ranksep: 20, //节点之间的距离
             marginx: 80,
             marginy: 10,
           });
-
-      this.render = new dagreD3.render();
-      let svg = d3.select("#mySvg");
-      this.inner = svg.append("g");
-
-      this.renderGraph();
-      this.bindNodeClick(svg);
-    },
-
-    /** 渲染节点和边 */
-    renderGraph() {
-      let that = this;
-
-      // 清空原有节点和边
-      that.g.nodes().forEach((v) => that.g.removeNode(v));
-      that.g.edges().forEach((e) => that.g.removeEdge(e));
-
           // 添加节点
+          that.nodes.forEach((item) => {
+            if(item.id&& item.label){
+              that.g.setNode(item.id, {
+                // 节点标签
+                label: item.label,
+                // 节点形状
+                shape: item.shape,
+                toolText:  item.label,
+                //节点样式
+                style: "fill:#fff;stroke:#000",
+                labelStyle: "fill:#000;",
+                rx: 5, //矩形节点圆角度
+                ry: 5,
+              });
+            }
+          });
+          //流转得到线  链接关系
+          that.edges.forEach((transition0) => {
+            that.g.setEdge(transition0.source,transition0.target,{
+                label: transition0.label,// 边标签
+                id: transition0.id,
+                style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
+              },transition0.id);
+          });
+          // 创建渲染器
+          let render = new dagreD3.render();
+          // 选择 svg 并添加一个g元素作为绘图容器.
+          let svg = d3.select("#mySvg");
+          let inner = svg.append("g");
+          that.inner = inner;
+          // 在绘图容器上运行渲染器生成流程图.
+          render(inner, that.g);
+          let mySvgHeight =document.getElementsByClassName("nodes")[0].getBoundingClientRect().height + 50;
+          let mySvgWdith =document.getElementsByClassName("output")[0].getBoundingClientRect().width+150 ;
+          document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+          document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+          svg.selectAll("g.node").on("click", function(event, d) {
+            svg.selectAll("g.node").style("fill", "white");
+            svg.selectAll("g.node")._groups[0].forEach(item=>{
+              console.log('item',item);
+              d3.select(item).select("rect").style("fill", "#fff");  // 修改为白色
+            })
+            // 改变节点的颜色
+            const node = d3.select(this);
+            const currentColor = node.select("rect").style("fill")
+            // 判断当前颜色，如果是默认颜色，就修改为新的颜色
+            if (currentColor === "rgb(255, 255, 255)") { // 如果当前是白色
+              node.select("rect").style("fill", "#f00");  // 修改为红色
+            } else {
+              node.select("rect").style("fill", "#fff");  // 否则恢复白色
+            }
+            // 调用自定义方法
+            onNodeClick(d);
+          });
+          // 自定义方法：在节点点击时触发
+          function onNodeClick(nodeData) {
+            let batch = "";
+            that.nodes.forEach((item) => {
+              if (item.id === nodeData){
+                batch = item.label;
+              }
+            })
+            that.$emit("nodeClick", batch);
+            // 你可以在这里处理更多的逻辑，例如显示一个提示框，更新图形状态等
+          }
+        }
+      })
+    },
+    // 假设你有一个方法来更新节点和边的数据
+    updateGraph() {
+      let that = this;
+      // 清空现有图形
+      that.g.nodes().forEach(function (v) {
+        that.g.removeNode(v);
+      });
+      that.g.edges().forEach(function (e) {
+        that.g.removeEdge(e);
+      });
+
+      // 重新添加节点
       that.nodes.forEach((item) => {
         if (item.id && item.label) {
           that.g.setNode(item.id, {
@@ -91,83 +163,93 @@ export default {
         }
       });
 
-      // 添加边（带唯一 key 和颜色）
+      // 重新添加边
-      that.edges.forEach((edge, index) => {
+      that.edges.forEach((transition0) => {
-        let edgeColor = "green"; // 默认绿色
+        that.g.setEdge(transition0.source, transition0.target, {
-        if (edge.label === "驳回") edgeColor = "red";
+          label: transition0.label,
-        if (edge.label === "退回") edgeColor = "red";
+          style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-
-        that.g.setEdge(
-          edge.source,
-          edge.target,
-          {
-            label: edge.label,
-            id: edge.id,
-            style: `fill:#ffffff;stroke:${edgeColor};stroke-width:1.5px`,
-            curve: d3.curveBasis,
-            minlen: 1 + index % 3,
-          },
-          `${edge.source}_${edge.target}_${edge.id}`
-        );
         });
+      });
+      let render = new dagreD3.render();
+      // 渲染更新后的图形
+      render(that.inner, that.g);
+      // 获取新的 SVG 尺寸
+      let mySvgHeight = document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height + 50;
+      let mySvgWdith = document.getElementsByClassName("output")[0]?.getBoundingClientRect().width + 150;
 
-      // 渲染图
+      // 检查节点和边的容器是否存在
-      this.render(this.inner, this.g);
-
-      // 设置 SVG 尺寸
-      let mySvgHeight =
-        document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height +
-        50;
-      let mySvgWdith =
-        document.getElementsByClassName("output")[0]?.getBoundingClientRect().width +
-        150;
-
       if (mySvgHeight && mySvgWdith) {
-        document.getElementById("mySvg").setAttribute("height", mySvgHeight);
+        // 设置 SVG 尺寸
-        document.getElementById("mySvg").setAttribute("width", mySvgWdith);
+        document.getElementById('mySvg').setAttribute("height", mySvgHeight);
-      }
+        document.getElementById('mySvg').setAttribute("width", mySvgWdith);
-    },
-
-    /** 更新图形 */
-    updateGraph() {
-      if (!this.g) return;
-      this.renderGraph();
-    },
-
-    /** 绑定点击事件 */
-    bindNodeClick(svg) {
-      let that = this;
-      svg.selectAll("g.node").on("click", function (event, d) {
-        svg.selectAll("g.node")._groups[0].forEach((item) => {
-          d3.select(item).select("rect").style("fill", "#fff");
-        });
-
-        const node = d3.select(this);
-        const currentColor = node.select("rect").style("fill");
-        if (currentColor === "rgb(255, 255, 255)") {
-          node.select("rect").style("fill", "#f00");
       } else {
-          node.select("rect").style("fill", "#fff");
+        console.log("元素尚未加载，无法更新 SVG 尺寸");
       }
-
-        let batch = "";
-        that.nodes.forEach((item) => {
-          if (item.id === d) batch = item.label;
-        });
-        that.$emit("nodeClick", batch);
-      });
     },
-
-    /** 缩放演示 */
     scaleUp() {
       var svg = document.getElementById("mySvg");
       svg.style.transform = "scale(0.5)";
-    },
+    }
   },
 };
 </script>
-
 <style scoped>
+.treeMain {
+  height: 280px;
+  overflow: auto;
+  border: 1px solid #dcdfe6;
+  margin-bottom: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  background-color: #fefefe;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  background-color: #f5f5f5;
+}
+
+.svgMark {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.svgWrapper {
+  background: #fff;
+  width: 800px;
+  margin: 5vh auto;
+  height: 90vh;
+  text-align: center;
+  border-radius: 2px;
+  overflow-y: scroll;
+}
+
+.svgItem {
+  padding: 20px 40px 0;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+}
+
 svg {
   font-size: 14px;
 }
@@ -182,4 +264,14 @@ svg {
   fill: #333;
   stroke-width: 1.5px;
 }
+
+g.conditions > rect {
+  fill: #00ffd0;
+  stroke: #000;
+}
+
+.el-icon-close {
+  cursor: pointer;
+}
 </style>
+

src/views/wf/configuration.vue

@@ -1,35 +1,18 @@
 <template>
 	<el-container>
-
-		<el-main class="nopadding">
 		<el-tabs style="width: 100%; height:100%" type="border-card" v-model="activeName" id="workflowElTabs" @tab-click="handleClick">
 			<el-tab-pane label="状态" name="state">
-				<state  v-if="activeName==='state'" @success="refreshGraph"></state>
+				<state  v-if="activeName==='state'"></state>
 			</el-tab-pane>
 
 			<el-tab-pane label="流转" name="transform">
-				<transform  v-if="activeName==='transform'" @success="refreshGraph"></transform>
+				<transform  v-if="activeName==='transform'"></transform>
 			</el-tab-pane>
 
 			<el-tab-pane label="自定义字段" name="customField">
 				<field v-if="activeName==='customField'"></field>
 			</el-tab-pane>
 		</el-tabs>
-		</el-main>
-		<el-aside style="width: 24%" v-if="workflow">
-			<el-container>
-				<el-header>
-					 流程图
-				</el-header>
-				<el-main class="nopadding">
-					<degraDialog
-						ref="degraDialogs" 
-						:workFlowId="workflow"
-						>
-					</degraDialog>
-				</el-main>
-			</el-container>
-		</el-aside>
 	</el-container>
 </template>
 
@@ -37,15 +20,13 @@
 	import field from './field'
 	import state from './state'
 	import transform from './transform'
-	import degraDialog from "./degraD3_2.vue";
 
 	export default {
 		name: 'configuration',
 		components: {
 			field,
 			state,
-			transform,
+			transform
-			degraDialog
 		},
 		data() {
 			return {
@@ -61,9 +42,6 @@
 				debugger;
 				console.log(tab,event);
 			},
-			refreshGraph(){
-				this.$refs.degraDialogs.init();
-			}
 		}
 	}
 </script>

src/views/wf/degraD3.vue

@@ -1,5 +1,10 @@
 <template>
-    <svg id="mySvg"></svg>
+  <el-drawer 
+  v-model="visible"
+  :title="workflowName" 
+  :size="600">
+    <svg id="mySvg" v-if="visible"></svg>
+  </el-drawer>
 </template>
 
 <script>
@@ -9,6 +14,10 @@ import * as d3 from "d3";
 export default {
   name: "index",
   props: {
+    workflowName: {
+      type: String,
+      default: "",
+    },
     workFlowId: {
       type: String,
       default: "",
@@ -33,7 +42,7 @@ export default {
       let that = this;
       that.limitedWatch = true;
       that.$nextTick(() => {
-        var g = new dagreD3.graphlib.Graph({multigraph: true}).setGraph({
+        var g = new dagreD3.graphlib.Graph().setGraph({
           rankdir: "DL",
           nodesep: 40,
           edgesep: 25, //两条线之间的距离

src/views/wf/degraD3_2.vue

@@ -1,71 +0,0 @@
-<template>
-    <scDegra ref="scDegra_div" style="margin-top: 50px;" :nodes="nodes" :edges="edges" :rankdir="'DL'">
-    </scDegra>
-</template>
-
-<script setup>
-import { ref, reactive, defineProps, onMounted, defineExpose } from 'vue'
-import API from '@/api';
-const props = defineProps({
-    workFlowId: { type: String, default: null },
-})
-const nodes = ref([]);
-const edges = ref([]);
-const scDegra_div = ref(null);
-onMounted(async () => {
-    init();
-})
-const init = async () => {
-    let nodes_ = await API.wf.workflow.states.req(props.workFlowId);
-    nodes_.forEach((item) => {
-        item.label = item.name;
-        item.shape = "rect";
-        item.style = "fill:#fff;stroke:#000";
-        item.labelStyle = "fill:#000;";
-        item.rx = 5; //矩形节点圆角度
-        item.ry = 5;
-    });
-    let transitionList = await API.wf.workflow.transitions.req(props.workFlowId);
-    let edges_ = [];
-    transitionList.forEach((transition0) => {
-        let condition_expression = transition0.condition_expression;
-        if (condition_expression.length > 0) {
-            let newNodeId = transition0.id
-            nodes_.push(
-                { id: newNodeId, label: "条件流转", style: "stroke: #000;fill: #afa", shape: "diamond" }
-            )
-            edges_.push({
-                id: Math.random(100) + props.workFlowId,
-                source: transition0.source_state,
-                target: newNodeId,
-                style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-                label: transition0.name,
-            }
-            )
-            condition_expression.forEach((condition_expression0) => {
-                edges_.push({
-                    id: Math.random(100) + props.workFlowId + 'x',
-                    source: newNodeId,
-                    target: condition_expression0.target_state,
-                    style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
-                    label: condition_expression0.label,
-                }
-                )
-            });
-        } else {
-            edges_.push({
-                id: transition0.id,
-                source: transition0.source_state,
-                target: transition0.destination_state,
-                style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
-                label: transition0.name,
-            }
-            )
-        }
-    });
-    nodes.value = nodes_;
-    edges.value = edges_;
-    console.log("x", nodes.value, edges.value)
-}
-defineExpose({ init })
-</script>

src/views/wf/state.vue

@@ -584,7 +584,6 @@ export default {
       } else {
         that.isSaveing = false;
         that.dialogVisible = false;
-        this.$emit("success")
         that.getList();
       }
       // this.$refs.Form.validate((valid) => {
@@ -623,7 +622,6 @@ export default {
     },
     handleDelete(row) {
       this.$API.wf.state.delete.req(row.id).then((res) => {
-        this.$emit("success")
         this.getList();
       });
     },

src/views/wf/transform.vue

@@ -155,7 +155,7 @@
 				}],
 				addForm: {
 					name: '',
-					timer: 0,
+					timer: '',
 					source_state: '',
 					destination_state: '',
 					condition_expression: {},
@@ -198,7 +198,6 @@
 			},
 			handleDelete(row) {
 				this.$API.wf.transition.delete.req(row.id).then(res=>{
-					this.$emit("success")
 					this.getList()
 				})
 			},
@@ -225,7 +224,6 @@
 					that.isSaveing = false;
 				}else{
 					that.isSaveing = false;
-					this.$emit("success")
 					that.dialogVisible = false;
 					that.getList();
 				}

src/views/wf/workflow.vue

@@ -28,11 +28,7 @@
     <el-main class="nopadding">
       <scTable ref="table" :apiObj="apiObj" row-key="id">
         <el-table-column label="#" type="index"></el-table-column>
-        <el-table-column label="ID" prop="id" width="180">
+        <el-table-column label="ID" prop="id" width="160"></el-table-column>
-          <template #default="scope">
-            <el-link @click="workflowShow(scope.row)" type="primary">{{ scope.row.id }}</el-link>
-          </template>
-        </el-table-column>
         <el-table-column
           label="工作流名称"
           prop="name"
@@ -118,13 +114,14 @@
       </scTable>
     </el-main>
   </el-container>
-  <el-drawer v-model="limitedWatch" destroy-on-close :title="workflowName" :size="600">
   <degraDialog
+    v-if="limitedWatch" 
     ref="degraDialogs" 
+    :workflowName="workflowName" 
     :workFlowId="workFlowId"
+    @closeDialog="limitedWatch = false"
     >
   </degraDialog>
-  </el-drawer>
   <el-dialog :title="titleMap[type]" v-model="limitedVisible">
     <el-form
       :model="addForm"
@@ -186,7 +183,7 @@
 </template>
 
 <script>
-import degraDialog from "./degraD3_2.vue";
+import degraDialog from "./degraD3.vue";
 export default {
   name: "index",
   components: {
@@ -351,6 +348,9 @@ export default {
       that.workFlowId = row.id;
       that.workflowName = row.name;
       that.limitedWatch = true;
+			that.$nextTick(() => {
+				that.$refs.degraDialogs.open();
+			});
     },
 
     closeMark() {