From 898fd9b3209eca6eec748eb3f0f4b7ebbc0aef4c Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 12 Oct 2021 10:37:38 +0800
Subject: [PATCH] workflowBranch

---
 hb_client/src/api/workflow.js                 |   8 +
 hb_client/src/router/index.js                 |   7 +
 .../src/views/workflow/configuration.vue      |  19 +-
 hb_client/src/views/workflow/index.vue        | 170 ++++++-
 hb_client/src/views/workflow/ticket.vue       | 386 +++++++++------
 hb_client/src/views/workflow/ticketHandle.vue | 462 ++++++++++++++++++
 hb_client/src/views/workflow/transitions.vue  |  27 +-
 7 files changed, 920 insertions(+), 159 deletions(-)
 create mode 100644 hb_client/src/views/workflow/ticketHandle.vue

diff --git a/hb_client/src/api/workflow.js b/hb_client/src/api/workflow.js
index 0b11d69..9e69564 100644
--- a/hb_client/src/api/workflow.js
+++ b/hb_client/src/api/workflow.js
@@ -176,3 +176,11 @@ export function getTicketTransitions(id) {
     method: 'get'
   })
 }
+
+//工单流转记录
+export function getTicketFlowlog(id) {
+  return request({
+    url: `/wf/ticket/${id}/flowlogs/`,
+    method: 'get'
+  })
+}
diff --git a/hb_client/src/router/index.js b/hb_client/src/router/index.js
index 48d89d0..7befda0 100644
--- a/hb_client/src/router/index.js
+++ b/hb_client/src/router/index.js
@@ -305,6 +305,13 @@ export const asyncRoutes = [
         meta: { title: '人员信息详情', icon: 'example', perms: ['workflow_manage'] },
         hidden: true
       },
+      {
+        path: 'ticketHandle',
+        name: 'ticketHandle',
+        component: () => import('@/views/workflow/ticketHandle'),
+        meta: { title: '工单处理', icon: 'example', perms: ['workflow_manage'] },
+        hidden: true
+      },
     ]
   },
   {
diff --git a/hb_client/src/views/workflow/configuration.vue b/hb_client/src/views/workflow/configuration.vue
index 1e55695..aaee8bc 100644
--- a/hb_client/src/views/workflow/configuration.vue
+++ b/hb_client/src/views/workflow/configuration.vue
@@ -27,9 +27,20 @@ import TST from "@/views/workflow/transitions"
       };
     },
     created() {
-   
-     this.ID = this.$route.params.workflow;
-     
+      let id = sessionStorage.getItem('configurationId');
+     if(this.$route.params.workflow){
+       this.ID = this.$route.params.workflow;
+       if(id){
+         sessionStorage.removeItem('configurationId');
+         sessionStorage.setItem('configurationId',this.$route.params.workflow);
+       }else{
+         sessionStorage.setItem('configurationId',this.$route.params.workflow);
+       }
+     }else{
+       if(id){
+         this.ID = id;
+       }
+     }
   },
     methods: {
       handleClick(tab, event) {
@@ -38,4 +49,4 @@ import TST from "@/views/workflow/transitions"
       
     }
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/hb_client/src/views/workflow/index.vue b/hb_client/src/views/workflow/index.vue
index c92c762..40d6889 100644
--- a/hb_client/src/views/workflow/index.vue
+++ b/hb_client/src/views/workflow/index.vue
@@ -50,13 +50,13 @@
             {{ !!(scope.row.view_permission_check)?'是':'否' }}
           </template>
         </el-table-column>
-        <el-table-column  width="180" label="创建时间">
+        <el-table-column width="180" label="创建时间">
           <template slot-scope="scope">{{ scope.row.create_time }}</template>
         </el-table-column>
         <el-table-column
           align="center"
           label="操作"
-          width="220px"
+          width="300px"
         >
           <template slot-scope="scope">
             <el-link
@@ -76,6 +76,10 @@
               type="primary"
               @click="handleTicket(scope)"
             >查看工单</el-link>
+            <el-link
+              type="primary"
+              @click="handleWatch(scope)"
+            >查看流程图</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -87,6 +91,21 @@
         @pagination="getList"
       />
     </el-card>
+    <div class="svgMark" v-if="limitedWatch" @click="closeMark">
+      <div class="svgWrapper">
+        <div class="svgItem">工作流流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
+        <el-row>
+          <el-col :span="12">
+            <p>工作流名称 ：{{watchedName}}</p>
+          </el-col>
+          <el-col :span="12">
+            <p>创建时间 ：{{watchedCreateTime}}</p>
+          </el-col>
+        </el-row>
+        <svg height=800 id="mySvg" style="width: max-content!important">
+        </svg>
+      </div>
+    </div>
     <el-dialog
       :visible.sync="dialogVisible"
       :title="dialogType === 'edit' ? '编辑工作流' : '新增工作流'">
@@ -139,12 +158,14 @@
     </el-dialog>
   </div>
 </template>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
-  import { getWorkflowList, createWorkflow,updateWorkflow,deleteWorkflow,getWfCustomfieldList,getWfStateList } from "@/api/workflow";
+  import { getWfTransitionList,getWorkflowList, createWorkflow,updateWorkflow,deleteWorkflow,getWfCustomfieldList,getWfStateList } from "@/api/workflow";
   import checkPermission from "@/utils/permission";
   // import vueJsonEditor from 'vue-json-editor'
   import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
-
+  import dagreD3 from 'dagre-d3'
+  import * as d3 from 'd3'
 const defaultworkflow = {
   name: "",
   number: "",
@@ -163,6 +184,7 @@ export default {
         title_template:'',
         content_template:'',
       },
+      limitedWatch:false,
       view_permission_check:false,
        hasJsonFlag:true,  // json是否验证通过
          hasJsonFlag1:true,  // json是否验证通过
@@ -179,6 +201,8 @@ export default {
       listLoading: true,
       dialogVisible: false,
       dialogType: "new",
+      watchedName:'',
+      watchedCreateTime:'',
       rule1: {
         name: [{ required: true, message: "请输入", trigger: "blur" }],
         description: [{ required: true, message: "请输入", trigger: "blur" }]
@@ -289,7 +313,97 @@ export default {
         }
       });
     },
+    handleWatch(scope){
+      let that = this;
+      let workFlow = scope.row.id;
+      that.watchedName = scope.row.name;
+      that.watchedCreateTime = scope.row.create_time;
+      that.limitedWatch = true;
+      that.$nextTick(()=>{
+        var g = new dagreD3.graphlib.Graph().setGraph({
+          align: 'DL',
+          nodesep: 100,
+          edgesep: 100,
+          ranksep: 50,
+          marginx: 0,
+          marginy: 50,
+        });
+        //获取state得到节点
+        getWfStateList(workFlow).then((response) => {
+          if (response.data) {
+            let nodes = response.data;
+            // 添加节点
+            nodes.forEach((item) => {
+              g.setNode(item.id, {
+                // 节点标签
+                label: item.name,
+                // 节点形状
+                shape: 'rect',
+                toolText: item.name,
+                //节点样式
+                style: "fill:#fff;stroke:#000",
+                labelStyle: "fill:#000;",
+                // width: 83,
+                // height: 40,
+                rx :5,//矩形节点圆角度
+                ry :5
+              });
+            });
+            g.nodes().forEach(function (v) {
+              console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+            });
+            //获取流转得到线  链接关系
+            getWfTransitionList(workFlow).then((res)=>{
+              if(res.data){
+                let transitionList = res.data;
+                transitionList.forEach((transitions)=>{
+                  let transition0 = transitions;
+                  if (transition0.condition_expression.length>3){
+                    debugger;
+                    g.setNode(transition0.source_state_.id+100000, {label: "条件表达式",style: "stroke: #000;fill: #afa", shape: "diamond"});
+                    g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
+                      // 边标签
+                      label: transition0.name,
+                      style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                    });
+                    let condition_expression = JSON.parse(transition0.condition_expression);
+                    condition_expression.forEach(condition_expression0=>{
+                      g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
+                        label: condition_expression0.label,
+                        style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                      })
+                    })
+                  }else{
+                    g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
+                      // 边标签
+                      label: transition0.name,
+                      // 边样式
+                      style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
+                    });
+                  }
+                })
+                g.nodes().length-1
+                g.nodes().forEach(function (v) {
+                  console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+                });
 
+                // 创建渲染器
+                let render = new dagreD3.render();
+                // 选择 svg 并添加一个g元素作为绘图容器.
+                let svg = d3.select('#mySvg');
+                let svgGroup = svg.append('g');
+                // 在绘图容器上运行渲染器生成流程图.
+                render(d3.select("svg g"), g);
+              }else{}
+            });
+
+          }
+        });
+      })
+    },
+    closeMark(){
+      this.limitedWatch = false;
+    },
    onJsonChange (value) {
         // console.log('更改value:', value);
         // 实时保存
@@ -349,3 +463,51 @@ export default {
   },
 };
 </script>
+<style scoped>
+  .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,.3);
+  }
+  .svgWrapper{
+    background: #fff;
+    width: 800px;
+    margin: 10vh auto 0;
+    text-align: center;
+    border-radius: 2px;
+  }
+  .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;
+  }
+  .node rect {
+    stroke: #606266;
+    fill: #fff;
+  }
+  .edgePath path {
+    stroke: #606266;
+    fill: #333;
+    stroke-width: 1.5px;
+  }
+  g.conditions > rect {
+    fill: #00ffd0;
+    stroke: #000;
+  }
+  .el-icon-close{
+    cursor: pointer;
+  }
+</style>
diff --git a/hb_client/src/views/workflow/ticket.vue b/hb_client/src/views/workflow/ticket.vue
index 77078da..dd781ae 100644
--- a/hb_client/src/views/workflow/ticket.vue
+++ b/hb_client/src/views/workflow/ticket.vue
@@ -62,7 +62,7 @@
             <template slot-scope="scope">
               <el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
               <el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
-              <!--<el-link  type="danger" @click="handleDetail(scope)">处理</el-link>-->
+              <el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
             </template>
           </el-table-column>
         </el-table>
@@ -106,8 +106,6 @@
           <el-table-column align="center" label="操作">
             <template slot-scope="scope">
               <el-link type="primary" v-if="scope.row.act_state==4" @click="handlePicture(scope)">查看流程图</el-link>
-              <!--<el-link v-else-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>-->
-              <!--<el-link  type="danger" @click="handleDetail(scope)">处理</el-link>-->
             </template>
           </el-table-column>
         </el-table>
@@ -152,7 +150,7 @@
             <template slot-scope="scope">
               <el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
               <el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
-              <el-link v-if="scope.row.act_state==4" type="success" @click="handlePicture(scope)">查看流程图</el-link>
+              <el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
             </template>
           </el-table-column>
         </el-table>
@@ -195,9 +193,8 @@
           </el-table-column>
           <el-table-column align="center" label="操作">
             <template slot-scope="scope">
-              <el-link v-if="scope.row.act_state==4" type="danger" @click="handlePicture(scope)">查看流程图</el-link>
-              <el-link v-else-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>
-              <!--<el-link  type="danger" @click="handleDetail(scope)">处理</el-link>-->
+              <el-link type="danger" @click="handlePicture(scope)">查看流程图</el-link>
+              <el-link v-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>
             </template>
           </el-table-column>
         </el-table>
@@ -212,13 +209,19 @@
     <div class="svgMark" v-if="dialogVisible" @click="closeMark">
       <div class="svgWrapper">
         <div class="svgItem">工单流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
+        <el-row>
+          <el-col :span="12">
+            <p>工单名称 ：{{watchedName}}</p>
+          </el-col>
+          <el-col :span="12">
+            <p>创建时间 ：{{watchedCreateTime}}</p>
+          </el-col>
+        </el-row>
         <el-steps :active="actives" spac="400px" align-center="" style="padding-top: 20px;">
           <el-step :title="item.name" v-for="item in flowSteps " :key="item.id">
           </el-step>
         </el-steps>
-        <svg  height=600 id="mySvg">
-          <!--<g id="svgG"></g>-->
-          <!--<rect></rect>-->
+        <svg height=800 id="mySvg" style="width:100%!important;">
         </svg>
       </div>
     </div>
@@ -307,7 +310,7 @@
                 </el-select>
               </template>
               <template v-if="item.field_type==='textarea'">
-                <el-input type="textarea"  :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
+                <el-input type="textarea" :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
               </template>
               <template v-if="item.field_type==='file'">
                 <el-upload
@@ -335,7 +338,7 @@
         </el-form>
       </el-row>
       <div style="text-align: center">
-        <el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit">{{item.name}}</el-button>
+        <el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit(item.id)">{{item.name}}</el-button>
       </div>
     </el-dialog>
     <el-dialog :visible.sync="limitedAdd" title="新增工单">
@@ -433,12 +436,10 @@
   </div>
 </template>
 <script src="https://d3js.org/d3.v4.min.js"></script>
-<!--<script src="http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js"></script>-->
-<!--<script src=" http://d3js.org/d3.v3.min.js "></script>-->
 <script>
   import { upUrl, upHeaders } from "@/api/file";
   import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
-    ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
+    ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions,getTicketFlowlog } from "@/api/workflow";
   import Pagination from "@/components/Pagination";
   import dagreD3 from 'dagre-d3'
   import * as d3 from 'd3'
@@ -449,6 +450,7 @@
   data(){
     return{
       step:4,
+      sort:0,
       total:0,
       actives:4,
       ticketId:0,
@@ -472,10 +474,11 @@
       handleRule:{},
       upUrl: upUrl(),
       upHeaders: upHeaders(),
-      stateSteps:0,
-
       keyword:'',
       workflow:'',
+      watchedName:'',
+      watchedCreateTime:'',
+      logs:[],
       tickets:[],
       workflows:[],
       ticketDetail:{},
@@ -529,6 +532,15 @@
         }
       })
     },
+    getTicketFlowlogs(id){
+      getTicketFlowlog(id).then(res=>{
+        if(res.data){
+          debugger;
+          console.log(res)
+          this.logs = res.data;
+        }
+      })
+    },
     handleClick(tab, event) {
       console.log(tab, event);
       console.log(this.pageForm.category);
@@ -542,7 +554,6 @@
           if (response.data) {
             let nodes = [];
             let res = response.data;
-            this.stateSteps = res.length;
             for(let i=0;i<res.length;i++){
               let obj = new Object();
               obj.id = res[i].id;
@@ -610,9 +621,7 @@
             this.addForm.transition = res.data[i].id;
           }
         }
-
       })
-
     },
     handlePreview(file) {
       if ("url" in file) {
@@ -652,138 +661,210 @@
     },
     handlePicture(scope){
       let that = this;
-      this.dialogVisible = true;
+      that.dialogVisible = true;
+      that.watchedName = scope.row.title;
+      that.watchedCreateTime = scope.row.create_time;
       that.pageForm.workflow = scope.row.workflow;
-      // that.getStates();
-      getWfFlowSteps( scope.row.id).then((res)=>{
-        if(res.data){
-          that.flowSteps = res.data;
-          getTicketDetail( scope.row.id).then((res)=>{
-            if(res.data){
-              that.ticketDetail = res.data;
-              let state = res.data.state;
-              let dat = that.flowSteps.filter((item)=>{
-                return item.id==state;
-              })
-              this.actives = that.flowSteps.indexOf(dat[0]);
-            }
-          });
-        }
-      });
-      this.$nextTick(()=>{
-        getWfStateList(this.pageForm.workflow).then((response) => {
-        if (response.data) {
-
-          let nodes = [];
-          let res = response.data;
-          this.stateSteps = res.length;
-          for(let i=0;i<res.length;i++){
-            let obj = new Object();
-            obj.id = res[i].id;
-            obj.label = res[i].name;
-            obj.shape = res[i].type===0? 'diamond':'rect';
-            nodes.push(obj)
-          }
-          that.nodes = nodes;
-          let edge = [];
-          for(let i=1;i<nodes.length;i++){
-            let obj = new Object();
-            obj.source = nodes[i-1].id;
-            obj.target = nodes[i].id;
-            obj.label = i>1?'同意':'';
-            edge.push(obj);
-          }
-          that.edges = edge;
-          console.log(nodes);
-          console.log(edge);
-          debugger;
-          var g = new dagreD3.graphlib.Graph().setGraph({
-            align: 'DL',
-            nodesep: 100,
-            edgesep: 100,
-            ranksep: 50,
-            marginx: 50,
-            marginy: 50,
-          });
-          // 添加节点
-          this.nodes.forEach((item) => {
-            g.setNode(item.id, {
-              // 节点标签
-              label: item.label,
-              // 节点形状
-              shape: item.shape,
-              toolText: item.label,
-              //节点样式
-              style: "fill:#fff;stroke:#000",
-              // 节点样式
-              labelStyle: "fill:#000;",
-              width: 83,
-              height: 40,
-              rx :5,
-              ry :5
-            });
-          });
-          // 链接关系
-          this.edges.forEach(item => {
-            g.setEdge(item.source, item.target, {
-              // 边标签
-              label: item.label,
-              // 边样式
-              style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
-            });
-          });
-          g.nodes().forEach(function (v) {
-            console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
-          });
-          g.edges().forEach(function (e) {
-            console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e)));
-          });
-          // 创建渲染器
-          let render = new dagreD3.render();
-          // 选择 svg 并添加一个g元素作为绘图容器.
-          let svg = d3.select('#mySvg');
-          let svgGroup = svg.append('g');
-          debugger;console.log(g)
-          debugger;console.log(svg)
-          debugger;console.log(document.getElementsByTagName('svg'))
-          debugger;console.log(svgGroup)
-          // 在绘图容器上运行渲染器生成流程图.
-          render(d3.select("svg g"), g);
-
-        }
-      });
-      })
-
-    },
-    //处理工单
-    handleDetail(scope){
-      // this.limitedStep = true;
-      let that = this;
-      that.ticketId = scope.row.id;
       let ticketId = scope.row.id;
-      getWfFlowSteps( scope.row.id).then((res)=>{
+      // that.getStates();
+      // that.getTicketFlowlogs(ticketId);
+      getWfFlowSteps( ticketId).then((res)=>{
         if(res.data){
+          debugger;
+          //流程步骤数组
           that.flowSteps = res.data;
           getTicketDetail( ticketId).then((res)=>{
             if(res.data){
+              debugger;
+              that.tooltip = that.createTooltip();
               that.ticketDetail = res.data;
               let state = res.data.state;
               let dat = that.flowSteps.filter((item)=>{
                 return item.id==state;
               })
-              this.actives = that.flowSteps.indexOf(dat[0]);
-              that.limitedStep = true;
+              that.sort = dat[0].sort;
+              that.actives = that.flowSteps.indexOf(dat[0]);
+              if( that.flowSteps.length-that.actives >1){}else{
+                that.actives =that.flowSteps.length;
+              }
+              var g = new dagreD3.graphlib.Graph().setGraph({
+                align: 'DL',
+                nodesep: 100,
+                edgesep: 100,
+                ranksep: 50,
+                marginx: 300,
+                marginy: 50,
+              });
+              //获取state得到节点
+              getWfStateList(that.pageForm.workflow).then((response) => {
+                if (response.data) {
+                  let nodes = response.data;
+                  // 添加节点
+                  nodes.forEach((item) => {
+                    /*debugger;
+                    console.log(item.sort)
+                    console.log(that.state)*/
+                    if(item.sort==that.sort){
+                      g.setNode(item.id, {
+                        // 节点标签
+                        label: item.name,
+                        // 节点形状
+                        shape: 'rect',
+                        toolText: item.name,
+                        //节点样式
+                        style: "fill:#409EFF;stroke:#000",
+                        labelStyle: "fill:#000;",
+                        rx :5,//矩形节点圆角度
+                        ry :5
+                      });
+
+                    }else{
+                      g.setNode(item.id, {
+                        // 节点标签
+                        label: item.name,
+                        // 节点形状
+                        shape: 'rect',
+                        toolText: item.name,
+                        //节点样式
+                        style: "fill:#fff;stroke:#000",
+                        labelStyle: "fill:#000;",
+                        rx :5,//矩形节点圆角度
+                        ry :5
+                      });
+                    }
+                  });
+                  g.nodes().forEach(function (v) {
+                    console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+                  });
+                  //获取流转得到线  链接关系
+                  getWfTransitionList(that.pageForm.workflow).then((res)=>{
+                    if(res.data){
+                      let transitionList = res.data;
+                      transitionList.forEach((transitions)=>{
+                        let transition0 = transitions;
+                        debugger;
+                        console.log(transition0.condition_expression.length)
+                        if (transition0.condition_expression.length>0){
+                          g.setNode(transition0.source_state_.id+100000, {label: "条件表达式", style: "fill: #a4d088", shape: "diamond"});
+                          g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
+                            // 边标签
+                            label: transition0.name,
+                            style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                          });
+                          let condition_expression = transition0.condition_expression;
+                          condition_expression.forEach(condition_expression0=>{
+                            g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
+                              label: condition_expression0.label,
+                              style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                            })
+                          })
+                        }else{
+                          g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
+                            // 边标签
+                            label: transition0.name,
+                            // 边样式
+                            style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
+                          });
+                        }
+                      })
+                      g.nodes().length-1
+                      g.nodes().forEach(function (v) {
+                        console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+                      });
+                      // 创建渲染器
+                      let render = new dagreD3.render();
+                      // 选择 svg 并添加一个g元素作为绘图容器.
+                      let svg = d3.select('#mySvg');
+                      let svgGroup = svg.append('g');
+                      let zoom = d3.zoom()
+                        .on("zoom", function() {
+                          svgGroup.attr("transform", d3.event.transform);
+                        });
+                      svg.call(zoom);
+                      // 在绘图容器上运行渲染器生成流程图.
+                      render(d3.select("svg g"), g);
+                      getTicketFlowlog(ticketId).then(res=> {
+                        if (res.data) {
+                          that.logs = res.data;
+                          svgGroup
+                            .selectAll('g.node')
+                            .on('mouseover', (v) => {
+                              // 假如当前toolText为"",则不展示
+                              //这里就是自定义tooltip的内容
+                              let filList = [],strList = [];
+                              filList = nodes.filter((ii) => {
+                                return ii.name === g.node(v).label
+                              })
+                              if (!filList.length) {
+                                return
+                              }
+                              filList.map((k) => {
+                                let filte = that.logs.filter(item=>{
+                                  return item.state_.id = k.id;
+                                })
+                                //每个
+                                let str = '处理人：'+filte[0].participant_.name;
+                                strList.push(str)
+                              })
+                              that.tipVisible(strList)
+                            })
+                            .on('mouseout', () => {
+                              this.tipHidden()
+                            })
+                        }
+                      })
+
+                    }else{}
+                  });
+                }
+              });
             }
           });
         }
       });
-
-      getTicketTransitions(scope.row.id).then(res=>{
-        this.operationBtn = res.data;
-      })
     },
-    operationSubmit(){
-      this.handleForm.transition = this.operationBtn[0].id;
+    // 创建提示框
+    createTooltip() {
+      return d3
+        .select('body')
+        .append('div')
+        .classed('tooltip', true)
+        .style('opacity', 0)
+        .style('display', 'none')
+    },
+    // tooltip显示
+    tipVisible(textContent) {
+      this.tooltip
+        .transition()
+        .duration(400)
+        .style('opacity', 1)
+        .style('display', 'block')
+        .style('color', '#ffffff')
+        .style('z-index', '3999')
+        .style('padding', '20px 30px')
+        .style('border-radius', '5px')
+        .style('position', 'fixed')
+        .style('background', 'rgba(0,0,0,.7)')
+      this.tooltip
+        .html(textContent)
+        .style('left', `${d3.event.pageX + 20}px`)
+        .style('top', `${d3.event.pageY-10}px`)
+    },
+
+    // tooltip隐藏
+    tipHidden() {
+      this.tooltip
+        .transition()
+        .duration(400)
+        .style('opacity', 0)
+        .style('display', 'none')
+    },
+    //处理工单
+    handleDetail(scope){
+      this.$router.push({name:"ticketHandle",params:{ticketId:scope.row.id,workflow:scope.row.workflow}})
+    },
+    operationSubmit(id){
+      this.handleForm.transition = id;
       this.handleForm.ticket_data = this.ticketDetail.ticket_data;
       ticketHandle(this.ticketId,this.handleForm).then(res=>{
         if (res.data){
@@ -861,4 +942,37 @@
     margin-right: 10px;
     display: inline-block;
   }
+
+
+
+  .tooltip {
+    position: absolute;
+    font-size: 12px;
+    text-align: left;
+    border-radius: 3px;
+    box-shadow: rgb(174, 174, 174) 0 0 10px;
+    cursor: pointer;
+    display: inline-block;
+    padding: 6px;
+    max-width: 300px;
+    word-wrap: break-word;
+    word-break: normal;
+  }
+
+  .tooltip > div {
+    padding: 10px;
+  }
+  .node rect {
+    stroke: #333;
+    fill: #999;
+  }
+  .node {
+    cursor: pointer;
+  }
+
+  .edgePath path {
+    stroke: #333;
+    fill: #333;
+    stroke-width: 1.5px;
+  }
 </style>
diff --git a/hb_client/src/views/workflow/ticketHandle.vue b/hb_client/src/views/workflow/ticketHandle.vue
new file mode 100644
index 0000000..7af69da
--- /dev/null
+++ b/hb_client/src/views/workflow/ticketHandle.vue
@@ -0,0 +1,462 @@
+<template>
+  <div class="app-container">
+    <el-card style="margin-bottom: 10px">
+      <el-steps :active="actives" spac="400px" align-center="" style="padding-top: 20px;">
+        <el-step :title="item.name" v-for="item in flowSteps " :key="item.id"></el-step>
+      </el-steps>
+    </el-card>
+    <el-row>
+      <el-col :span="8">
+        <el-card>
+          <svg height=800 id="mySvg" style="width:100%!important;"></svg>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card style="margin-left: 10px">
+          <el-form ref="Form" :model="handleForm" label-width="100px" label-position="right" :rules="handleRule">
+            <el-col :span="12">
+              <el-form-item label="标题" style="margin-bottom: 0">
+                <span>{{ticketDetail.title}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="工作流" style="margin-bottom: 0">
+                <span v-if="ticketDetail.workflow_">{{ticketDetail.workflow_.name}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="流水号" style="margin-bottom: 0">
+                <span>{{ticketDetail.sn}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="创建时间" style="margin-bottom: 0">
+                <span>{{ticketDetail.create_time}}</span>
+              </el-form-item>
+            </el-col>
+            <el-row style="display: flex;flex-wrap: wrap;width:100%;">
+              <el-col v-for="item in ticketDetail.ticket_data_" :key="item.id" :span="12">
+                <el-form-item :label="item.field_name" v-if="item.field_state==='1'">
+                  <span>{{ticketDetail.ticket_data[item.field_key]}}</span>
+                </el-form-item>
+                <el-form-item :label="item.field_name" v-else>
+                  <template v-if="item.field_type=='string'">
+                    <el-input v-model="ticketDetail.ticket_data[item.field_key]" :placeholder="item.description"/>
+                  </template>
+                  <template v-if="item.field_type==='int'">
+                    <el-input v-model="ticketDetail.ticket_data[item.field_key]" type="number" :placeholder="item.description" oninput="value=value.replace(/[^\d]/g,'')" />
+                  </template>
+                  <template v-if="item.field_type==='float'">
+                    <el-input v-model="ticketDetail.ticket_data[item.field_key]" type="number" :placeholder="item.description" />
+                  </template>
+                  <template v-if="item.field_type==='date'">
+                    <el-date-picker
+                      v-model="ticketDetail.ticket_data[item.field_key]"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                      style="width: 100%"
+                    >
+                    </el-date-picker>
+                  </template>
+                  <template v-if="item.field_type==='datetime'">
+                    <el-date-picker
+                      v-model="ticketDetail.ticket_data[item.field_key]"
+                      type="datetime"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                      style="width: 100%"
+                    >
+                    </el-date-picker>
+                  </template>
+                  <template v-if="item.field_type==='select'">
+                    <el-select style="width: 100%" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="请选择">
+                      <el-option
+                        v-for="item1 in item.field_choice"
+                        :key="item1"
+                        :label="item1"
+                        :value="item1"
+                      >
+                      </el-option>
+                    </el-select>
+                  </template>
+                  <template v-if="item.field_type==='selects'">
+                    <el-select  style="width: 100%" multiple v-model="ticketDetail.ticket_data[item.field_key]" placeholder="请选择">
+                      <el-option
+                        v-for="item1 in item.field_choice"
+                        :key="item1"
+                        :label="item1"
+                        :value="item1"
+                      >
+                      </el-option>
+                    </el-select>
+                  </template>
+                  <template v-if="item.field_type==='textarea'">
+                    <el-input type="textarea" :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
+                  </template>
+                  <template v-if="item.field_type==='file'">
+                    <el-upload
+                      ref="upload"
+                      :action="upUrl"
+                      :on-preview="handlePreview"
+                      :on-success="handleUpSuccess"
+                      :headers="upHeaders"
+                      :file-list="fileList"
+                      :limit="1"
+                      accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
+                    >
+                      <el-button size="small" type="primary">上传文件</el-button>
+                    </el-upload>
+                  </template>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="审批意见">
+                  <el-input type="textarea" :rows="3" v-model="handleForm.suggestion" placeholder="审批意见"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div style="text-align: center">
+            <el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit(item.id)">{{item.name}}</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<script>
+  import { upUrl, upHeaders } from "@/api/file";
+  import {getWorkflowList,getWfCustomfieldList,getWfStateList,getWfTransitionList,
+    ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions,getTicketFlowlog } from "@/api/workflow";
+  import Pagination from "@/components/Pagination";
+  import dagreD3 from 'dagre-d3'
+  import * as d3 from 'd3'
+  export default {
+    name: "ticketHandle",
+    components: { Pagination },
+    inject:['reload'],
+    data(){
+      return{
+        step:4,
+        actives:4,
+        ticketId:0,
+        stateSteps:0,
+        handleForm:{
+          transition:'',
+          ticket_data:{},
+          suggestion:'',
+        },
+        tooltip:null,
+        handleRule:{},
+        upUrl: upUrl(),
+        upHeaders: upHeaders(),
+        workflow:'',
+        watchedName:'',
+        watchedCreateTime:'',
+        logs:[],
+        edges: [],
+        nodes: [],
+        tooltip: [],
+        fileList:[],
+        workflows:[],
+        flowSteps:[],
+        ticketDetail:{},
+        operationBtn:[],
+        customfields:[],
+        transitions:[]
+      }
+    },
+    mounted(){
+      let that = this;
+      let ticketId = that.ticketId = this.$route.params.ticketId;
+      let workflow = that.workflow = this.$route.params.workflow;
+      let handleTicketId = sessionStorage.getItem('handleTicketId');
+      let handleTicketWorkflow = sessionStorage.getItem('handleTicketWorkflow');
+      if(ticketId&&workflow){
+        if(handleTicketId&&handleTicketWorkflow){
+          sessionStorage.removeItem('handleTicketId');
+          sessionStorage.removeItem('handleTicketWorkflow');
+          sessionStorage.setItem('handleTicketId',ticketId);
+          sessionStorage.setItem('handleTicketWorkflow',workflow);
+        }else{
+          sessionStorage.setItem('handleTicketId',ticketId);
+          sessionStorage.setItem('handleTicketWorkflow',workflow);
+        }
+      }else{
+        ticketId = that.ticketId = handleTicketId;
+        workflow = that.workflow = handleTicketWorkflow;
+      }
+      getTicketTransitions(ticketId).then(res=>{
+        this.operationBtn = res.data;
+      })
+      getWfFlowSteps( ticketId).then((res)=>{
+        if(res.data){
+          //流程步骤数组
+          that.flowSteps = res.data;
+          getTicketDetail( ticketId).then((res)=>{
+            if(res.data){
+              that.tooltip = that.createTooltip();
+              that.ticketDetail = res.data;
+              let state = res.data.state;
+              let dat = that.flowSteps.filter((item)=>{
+                return item.id==state;
+              })
+              that.sort = dat[0].sort;
+              that.actives = that.flowSteps.indexOf(dat[0]);
+              if( that.flowSteps.length-that.actives >1){}else{
+                that.actives =that.flowSteps.length;
+              }
+              var g = new dagreD3.graphlib.Graph().setGraph({
+                align: 'DL',
+                nodesep: 100,
+                edgesep: 100,
+                ranksep: 50,
+                marginx: 50,
+                marginy: 50,
+              });
+              //获取state得到节点
+              getWfStateList(workflow).then((response) => {
+                if (response.data) {
+                  let nodes = response.data;
+                  // 添加节点
+                  nodes.forEach((item) => {
+                    if(item.sort==that.sort){
+                      g.setNode(item.id, {
+                        // 节点标签
+                        label: item.name,
+                        // 节点形状
+                        shape: 'rect',
+                        toolText: item.name,
+                        //节点样式
+                        style: "fill:#409EFF;stroke:#000",
+                        labelStyle: "fill:#000;",
+                        rx :5,//矩形节点圆角度
+                        ry :5
+                      });
+
+                    }else{
+                      g.setNode(item.id, {
+                        // 节点标签
+                        label: item.name,
+                        // 节点形状
+                        shape: 'rect',
+                        toolText: item.name,
+                        //节点样式
+                        style: "fill:#fff;stroke:#000",
+                        labelStyle: "fill:#000;",
+                        rx :5,//矩形节点圆角度
+                        ry :5
+                      });
+                    }
+                  });
+                  g.nodes().forEach(function (v) {
+                    console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+                  });
+                  //获取流转得到线  链接关系
+                  getWfTransitionList(workflow).then((res)=>{
+                    if(res.data){
+                      let transitionList = res.data;
+                      transitionList.forEach((transitions)=>{
+                        let transition0 = transitions;
+                        if (transition0.condition_expression.length>0){
+                          g.setNode(transition0.source_state_.id+100000, {label: "条件表达式", style: "fill: #a4d088", shape: "diamond"});
+                          g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
+                            // 边标签
+                            label: transition0.name,
+                            style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                          });
+                          let condition_expression = transition0.condition_expression;
+                          condition_expression.forEach(condition_expression0=>{
+                            g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
+                              label: condition_expression0.label,
+                              style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
+                            })
+                          })
+                        }else{
+                          g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
+                            // 边标签
+                            label: transition0.name,
+                            // 边样式
+                            style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
+                          });
+                        }
+                      })
+                      g.nodes().length-1
+                      g.nodes().forEach(function (v) {
+                        console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
+                      });
+                      // 创建渲染器
+                      let render = new dagreD3.render();
+                      // 选择 svg 并添加一个g元素作为绘图容器.
+                      let svg = d3.select('#mySvg');
+                      let svgGroup = svg.append('g');
+                      let zoom = d3.zoom()
+                        .on("zoom", function() {
+                          svgGroup.attr("transform", d3.event.transform);
+                        });
+                      svg.call(zoom);
+                      // 在绘图容器上运行渲染器生成流程图.
+                      render(d3.select("svg g"), g);
+                      // this.getTicketFlowlogs(ticketId);
+                      getTicketFlowlog(ticketId).then(res=>{
+                        if(res.data){
+                          that.logs = res.data;
+                          svgGroup
+                            .selectAll('g.node')
+                            .on('mouseover', (v) => {
+                              // 假如当前toolText为"",则不展示
+                              //这里就是自定义tooltip的内容
+                              let filList = [], strList = [];
+                              filList = nodes.filter((ii) => {
+                                return ii.name === g.node(v).label
+                              })
+                              if (!filList.length) {
+                                return
+                              }
+                              filList.map((k) => {
+                                let filte = that.logs.filter(item=>{
+                                  return item.state_.id = k.id;
+                                })
+                                //每个
+                                let str = '处理人：'+filte[0].participant_.name;
+                                strList.push(str)
+                              })
+                              that.tipVisible(strList)
+                            })
+                            .on('mouseout', () => {
+                              this.tipHidden()
+                            })
+                        }
+                      })
+
+                    }else{}
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    },
+    activated(){
+    },
+    methods:{
+      //工单流转记录
+      getTicketFlowlogs(id){
+        getTicketFlowlog(id).then(res=>{
+          if(res.data){
+            this.logs = res.data;
+          }
+        })
+      },
+      handlePreview(file) {
+        if ("url" in file) {
+          window.open(file.url);
+        } else {
+          window.open(file.response.data.path);
+        }
+      },
+      handleUpSuccess(res, file, filelist) {
+        this.process.instruction = res.data.id;
+      },
+      handleRemove(file, filelist){
+        this.process.instruction = null;
+      },
+      // 创建提示框
+      createTooltip() {
+        return d3
+          .select('body')
+          .append('div')
+          .classed('tooltip', true)
+          .style('opacity', 0)
+          .style('display', 'none')
+      },
+      // tooltip显示
+      tipVisible(textContent) {
+        this.tooltip
+          .transition()
+          .duration(400)
+          .style('opacity', 1)
+          .style('display', 'block')
+          .style('color', '#ffffff')
+          .style('z-index', '3999')
+          .style('padding', '20px 30px')
+          .style('border-radius', '5px')
+          .style('position', 'fixed')
+          .style('background', 'rgba(0,0,0,.7)')
+        this.tooltip
+          .html(textContent)
+          .style('left', `${d3.event.pageX + 15}px`)
+          .style('top', `${d3.event.pageY-10}px`)
+      },
+
+      // tooltip隐藏
+      tipHidden() {
+        this.tooltip
+          .transition()
+          .duration(400)
+          .style('opacity', 0)
+          .style('display', 'none')
+      },
+      operationSubmit(id){
+        this.handleForm.transition = id;
+        this.handleForm.ticket_data = this.ticketDetail.ticket_data;
+        let obj = new Object();
+        obj.transition = id;
+        obj.ticket_data = this.ticketDetail.ticket_data;
+        obj.suggestion = this.handleForm.suggestion;
+        console.log(this.handleForm);
+        ticketHandle(this.ticketId,obj).then(res=>{
+          if (res.data){
+            this.$router.replace({name:"ticket"})
+          }
+        })
+      },
+    }
+  }
+</script>
+<style scoped>
+  .svgWrapper{
+    background: #fff;
+    width: 800px;
+    margin: 10vh auto 0;
+    text-align: center;
+    border-radius: 2px;
+  }
+  .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;
+  }
+  .node rect {
+    stroke: #606266;
+    fill: #fff;
+  }
+  .edgePath path {
+    stroke: #606266;
+    fill: #333;
+    stroke-width: 1.5px;
+  }
+  .el-icon-close{
+    cursor: pointer;
+  }
+  .listItem{
+    margin-top: 15px;
+    font-size: 16px;
+  }
+  .listItem>span{
+    width: 100px;
+    text-align: right;
+    margin-right: 10px;
+    display: inline-block;
+  }
+</style>
diff --git a/hb_client/src/views/workflow/transitions.vue b/hb_client/src/views/workflow/transitions.vue
index a11521a..341fa2b 100644
--- a/hb_client/src/views/workflow/transitions.vue
+++ b/hb_client/src/views/workflow/transitions.vue
@@ -97,10 +97,14 @@
           </el-select>
         </el-form-item>
         <el-form-item label="条件表达式" prop="condition_expression">
-          <el-input v-model="wftransition.condition_expression"/>
+          <vue-json-editor
+            v-model="wftransition.condition_expression"
+            :showBtns="false"
+            :mode="'code'"
+            lang="zh"
+          />
         </el-form-item>
          <el-form-item label="属性类型" prop="attribute_type">
-        
            <el-select  style="width: 100%" v-model="wftransition.attribute_type" placeholder="请选择">
              <el-option
                 v-for="item in options"
@@ -126,13 +130,13 @@
 <script>
 import {getWfStateList, getWfTransitionList, createWfTransition,updateWfTransition,deleteWfTransition } from "@/api/workflow";
 import checkPermission from "@/utils/permission";
-
+import vueJsonEditor from 'vue-json-editor'
 import { genTree } from "@/utils"
 const defaultwftransition = {
   name: "",
 };
 export default {
-  components: { },
+  components: { vueJsonEditor },
   name: "TST",
   props: ["ID"],
   data() {
@@ -211,13 +215,11 @@ export default {
       this.wftransition = Object.assign({}, scope.row); // copy obj
       this.dialogType = "edit";
       this.dialogVisible = true;
-      this.$nextTick(() => {
-        this.$refs["Form"].clearValidate();
-      });
+      // this.wftransition.condition_expression = JSON.stringify(scope.row.condition_expression)
+      // this.$nextTick(() => {
+      //   this.$refs["Form"].clearValidate();
+      // });
     },
-    
-   
-   
     async confirm(form) {
       this.$refs[form].validate((valid) => {
         if (valid) {
@@ -245,8 +247,6 @@ export default {
         }
       });
     },
-
-
    handleDelete(scope) {
       this.$confirm("确认删除?", "警告", {
         confirmButtonText: "确认",
@@ -262,9 +262,6 @@ export default {
           console.error(err);
         });
     },
-     
-
-
   },
 };
 </script>