diff --git a/hb_client/src/App.vue b/hb_client/src/App.vue
index bf20ea3..b06679a 100644
--- a/hb_client/src/App.vue
+++ b/hb_client/src/App.vue
@@ -27,3 +27,13 @@ export default {
   }
 }
 </script>
+<style>
+  .el-step__head.is-process>.is-text{
+    color: #ffffff;
+    background: #409EFF;
+    border-color: #409EFF;
+  }
+  .el-step__title.is-process{
+    color: #409EFF;
+  }
+</style>
diff --git a/hb_client/src/api/workflow.js b/hb_client/src/api/workflow.js
index 724227a..74be8dd 100644
--- a/hb_client/src/api/workflow.js
+++ b/hb_client/src/api/workflow.js
@@ -35,6 +35,14 @@ export function getWfStateList(id) {
     method: 'get'
   })
 }
+//工单流转step
+export function getWfFlowSteps(id) {
+  return request({
+    url: `/wf/ticket/${id}/flowsteps/`,
+    method: 'get'
+  })
+}
+
 //流转状态创建
 export function createWfState(data) {
   return request({
@@ -43,6 +51,15 @@ export function createWfState(data) {
     data
   })
 }
+//处理工单
+export function ticketHandle(id,data) {
+  return request({
+    url: `/wf/ticket/${id}/handle/`,
+    method: 'post',
+    data
+  })
+}
+
 //流转状态更新
 export function updateWfState(id, data) {
   return request({
@@ -121,7 +138,7 @@ export function deleteWfTransition(id, data) {
     data
   })
 }
-//工单详情
+//工单列表
 export function getTickets(query) {
   return request({
     url: `/wf/ticket/`,
@@ -129,3 +146,17 @@ export function getTickets(query) {
     params:query
   })
 }
+//工单详情
+export function getTicketDetail(id) {
+  return request({
+    url: `/wf/ticket/${id}/`,
+    method: 'get'
+  })
+}
+//工单详情
+export function getTicketTransitions(id) {
+  return request({
+    url: `/wf/ticket/${id}/transitions/`,
+    method: 'get'
+  })
+}
diff --git a/hb_client/src/views/workflow/ticket.vue b/hb_client/src/views/workflow/ticket.vue
index 7039ed0..a4c6f0c 100644
--- a/hb_client/src/views/workflow/ticket.vue
+++ b/hb_client/src/views/workflow/ticket.vue
@@ -7,7 +7,11 @@
           <template slot-scope="scope">{{ scope.row.title }}</template>
         </el-table-column>
         <el-table-column label="当前状态">
-          <template slot-scope="scope">{{ scope.row.act_state }}</template>
+          <template slot-scope="scope">
+            <span v-if="scope.row.act_state===1">已提交</span>
+            <span v-else-if="scope.row.act_state===4">已完成</span>
+            <span v-else>审批中</span>
+          </template>
         </el-table-column>
         <el-table-column width="180" label="创建时间">
           <template slot-scope="scope">{{ scope.row.create_time }}</template>
@@ -15,6 +19,7 @@
         <el-table-column align="center" label="操作"  width="220px">
           <template slot-scope="scope">
             <el-link v-if="stateSteps==scope.row.act_state" type="danger" @click="handlePicture(scope)">查看流程图</el-link>
+            <el-link v-else type="danger" @click="handleDetail(scope)">工单详情</el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -35,20 +40,50 @@
         </svg>
       </div>
     </div>
+    <el-dialog :visible.sync="limitedStep"
+      title="工单流程">
+      <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" @click.native=stepclick(item.id)>
+        </el-step>
+      </el-steps>
+      <el-row>
+        <el-col :span="1" style="height: 1px;"></el-col>
+        <el-col :span="11">
+          <div class="listItem"><span>流水号：</span>{{ticketDetail.sn}}</div>
+          <div class="listItem"><span>开始时间：</span>{{}}</div>
+          <div class="listItem" v-if="ticketDetail.workflow_"><span>请假类型：</span>{{ticketDetail.workflow_.name}}</div>
+          <div class="listItem"><span>创建人：</span>{{}}</div>
+          <div class="listItem" v-if="ticketDetail.workflow_"><span>请假原因：</span>{{ticketDetail.workflow_.name}}</div>
+        </el-col>
+        <el-col :span="11">
+          <div class="listItem"><span>标题：</span>{{ticketDetail.title}}</div>
+          <div class="listItem"><span>结束时间：</span>{{}}</div>
+          <div class="listItem"><span>创建时间：</span>{{ticketDetail.create_time}}</div>
+          <div class="listItem" v-if="ticketDetail.ticket_data"><span>请假天数：</span>{{ticketDetail.ticket_data.days}}</div>
+        </el-col>
+      </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>
+      </div>
+    </el-dialog>
   </div>
 </template>
-<script src="https://d3js.org/d3.v4.min.js"></script>
+<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
 <script>
-  import {getWfStateList,getTickets } from "@/api/workflow";
+  import {getWfStateList,getTickets,ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
   import Pagination from "@/components/Pagination";
   import dagreD3 from 'dagre-d3'
   import * as d3 from 'd3'
   export default {
   name: "ticket",
   components: { Pagination },
+    inject:['reload'],
   data(){
     return{
       total:0,
+      actives:4,
+      ticketId:0,
       pageForm:{
         page:1,
         page_size:20,
@@ -58,24 +93,27 @@
       stateSteps:0,
       keyword:'',
       tickets:[],
+      ticketDetail:{},
       dialogVisible:false,
       listLoading:false,
+      limitedStep:false,
       nodes: [],
       tooltip:null,
-      edges: []
+      edges: [],
+      flowSteps:[],
+      operationBtn:[],
     }
   },
-  created(){
+  activated(){
     this.workflow = this.$route.params.workflow;
-
     let workflow = localStorage.getItem('workflow');
     if(this.workflow){
       this.pageForm.workflow = parseInt(this.workflow);
       if(workflow){
         localStorage.removeItem('workflow');
-        localStorage.setItem('workflow',this.$route.params.workflow)
+        localStorage.setItem('workflow',this.pageForm.workflow)
       }else{
-        localStorage.setItem('workflow',this.$route.params.workflow)
+        localStorage.setItem('workflow',this.pageForm.workflow)
       }
     }else{
       this.workflow =workflow ;
@@ -86,9 +124,11 @@
   },
   methods:{
     getList(){
+      this.listLoading = true;
       getTickets( this.pageForm).then((res)=>{
         if(res.data.results){
           this.tickets = res.data.results;
+          this.listLoading = false;
         }
       })
     },
@@ -106,7 +146,6 @@
             nodes.push(obj)
           }
           this.nodes = nodes;
-          console.log(nodes)
           this.getEdges(nodes);
         }
       });
@@ -121,7 +160,6 @@
           edge.push(obj);
         }
         this.edges = edge;
-        console.log(edge)
     },
     handleFilter(){},
     handlePicture(){
@@ -137,7 +175,6 @@
           marginx: 50,
           marginy: 50,
         });
-        console.log(g);
         // 添加节点
         this.nodes.forEach((item) => {
           g.setNode(item.id, {
@@ -181,13 +218,36 @@
       })
 
     },
+    handleDetail(scope){
+      // this.limitedStep = true;
+      this.ticketId = scope.row.id;
+      getWfFlowSteps( scope.row.id).then((res)=>{
+        if(res.data){
+          this.flowSteps = res.data;
+        }
+      });
+      getTicketDetail( scope.row.id).then((res)=>{
+        if(res.data){
+          this.ticketDetail = res.data;
+          this.actives = res.data.act_state;
+          this.limitedStep = true;
+        }
+      });
+      getTicketTransitions(scope.row.id).then(res=>{
+        this.operationBtn = res.data;
+      })
+    },
+    operationSubmit(){
+      // let transition = {transition:this.operationBtn[0].id};
+      // ticketHandle(this.ticketId,transition).then(res=>{
+      // })
+    },
+    stepclick(){},
     closeMark(){
       this.dialogVisible = false;
-    },
-  },
-    mounted() {
     }
   }
+  }
 </script>
 
 <style scoped>
@@ -221,12 +281,10 @@
   svg {
     font-size: 14px;
   }
-
   .node rect {
     stroke: #606266;
     fill: #fff;
   }
-
   .edgePath path {
     stroke: #606266;
     fill: #333;
@@ -235,4 +293,14 @@
   .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>