feat: 优化工作流及相关组件

src/components/scDegra.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="visible">
+  <div>
-    <svg id="mySvg" v-if="visible"></svg>
+    <svg id="mySvg"></svg>
   </div>
 </template>
 
@@ -12,143 +12,71 @@ 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,
-      visible:false,
+      inner: null,
-      isSaving: false,
+      render: null,
-      type:""
     };
   },
   watch: {
     nodes: {
-      handler(val) {
+      handler() {
-        console.log(val);
         this.updateGraph();
       },
       deep: true,
     },
     edges: {
-      handler(val) {
+      handler() {
-        console.log(val);
         this.updateGraph();
       },
       deep: true,
     },
   },
-  mounted() {},
+  mounted() {
-  methods: {
+    this.initGraph();
-    open(){
-      this.visible = true;
-      this.handleWatch();
   },
-    handleWatch() {
+  methods: {
-      let that = this;
+    /** 初始化图 */
-      that.$nextTick(() => {
+    initGraph() {
-        if(that.g!==null){
+      this.g = new dagreD3.graphlib.Graph({ multigraph: true }).setGraph({
-          that.updateGraph();     
+        rankdir: this.rankdir,
-        }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,
       });
-          // 添加节点
-          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);
-      });
 
-      // 重新添加节点
+      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, {
@@ -163,93 +91,83 @@ export default {
         }
       });
 
-      // 重新添加边
+      // 添加边（带唯一 key 和颜色）
-      that.edges.forEach((transition0) => {
+      that.edges.forEach((edge, index) => {
-        that.g.setEdge(transition0.source, transition0.target, {
+        let edgeColor = "green"; // 默认绿色
-          label: transition0.label,
+        if (edge.label === "驳回") edgeColor = "red";
-          style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
+        if (edge.label === "退回") edgeColor = "red";
-        });
+
-      });
+        that.g.setEdge(
-      let render = new dagreD3.render();
+          edge.source,
-      // 渲染更新后的图形
+          edge.target,
-      render(that.inner, that.g);
+          {
-      // 获取新的 SVG 尺寸
+            label: edge.label,
-      let mySvgHeight = document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height + 50;
+            id: edge.id,
-      let mySvgWdith = document.getElementsByClassName("output")[0]?.getBoundingClientRect().width + 150;
+            style: `fill:#ffffff;stroke:${edgeColor};stroke-width:1.5px`,
+            curve: d3.curveBasis,
+            minlen: 1 + index % 3,
+          },
+          `${edge.source}_${edge.target}_${edge.id}`
+        );
+      });
+
+      // 渲染图
+      this.render(this.inner, this.g);
 
-      // 检查节点和边的容器是否存在
-      if (mySvgHeight && mySvgWdith) {
       // 设置 SVG 尺寸
-        document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+      let mySvgHeight =
-        document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+        document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height +
-      } else {
+        50;
-        console.log("元素尚未加载，无法更新 SVG 尺寸");
+      let mySvgWdith =
+        document.getElementsByClassName("output")[0]?.getBoundingClientRect().width +
+        150;
+
+      if (mySvgHeight && 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");
+        }
+
+        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;
 }
@@ -264,14 +182,4 @@ 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,18 +1,35 @@
 <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'"></state>
+				<state  v-if="activeName==='state'" @success="refreshGraph"></state>
 			</el-tab-pane>
 
 			<el-tab-pane label="流转" name="transform">
-				<transform  v-if="activeName==='transform'"></transform>
+				<transform  v-if="activeName==='transform'" @success="refreshGraph"></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>
 
@@ -20,13 +37,15 @@
 	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 {
@@ -42,6 +61,9 @@
 				debugger;
 				console.log(tab,event);
 			},
+			refreshGraph(){
+				this.$refs.degraDialogs.init();
+			}
 		}
 	}
 </script>

src/views/wf/degraD3.vue

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

src/views/wf/degraD3_2.vue

@@ -0,0 +1,71 @@
+<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,6 +584,7 @@ export default {
       } else {
         that.isSaveing = false;
         that.dialogVisible = false;
+        this.$emit("success")
         that.getList();
       }
       // this.$refs.Form.validate((valid) => {
@@ -622,6 +623,7 @@ 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: '',
+					timer: 0,
 					source_state: '',
 					destination_state: '',
 					condition_expression: {},
@@ -198,6 +198,7 @@
 			},
 			handleDelete(row) {
 				this.$API.wf.transition.delete.req(row.id).then(res=>{
+					this.$emit("success")
 					this.getList()
 				})
 			},
@@ -224,6 +225,7 @@
 					that.isSaveing = false;
 				}else{
 					that.isSaveing = false;
+					this.$emit("success")
 					that.dialogVisible = false;
 					that.getList();
 				}

src/views/wf/workflow.vue

@@ -28,7 +28,11 @@
     <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="160"></el-table-column>
+        <el-table-column label="ID" prop="id" width="180">
+          <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"
@@ -114,14 +118,13 @@
       </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"
@@ -183,7 +186,7 @@
 </template>
 
 <script>
-import degraDialog from "./degraD3.vue";
+import degraDialog from "./degraD3_2.vue";
 export default {
   name: "index",
   components: {
@@ -348,9 +351,6 @@ export default {
       that.workFlowId = row.id;
       that.workflowName = row.name;
       that.limitedWatch = true;
-			that.$nextTick(() => {
-				that.$refs.degraDialogs.open();
-			});
     },
 
     closeMark() {