ticketSearch

hb_client/src/views/workflow/ticket.vue

@@ -1,5 +1,29 @@
 <template>
   <div class="app-container">
+    <el-card style="margin-bottom: 10px">
+      <div>
+        <el-select v-model="pageForm.workflow" placeholder="工作流" clearable style="width: 200px" class="filter-item" @change="handleFilter">
+          <el-option
+            v-for="item in workflows"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+        <el-button
+          class="filter-item"
+          type="primary"
+          icon="el-icon-refresh-left"
+          @click="resetFilter"
+        >重置</el-button>
+        <el-button
+          class="filter-item"
+          type="primary"
+          icon="el-icon-search"
+          @click="handleFilter"
+        >搜索</el-button>
+      </div>
+    </el-card>
     <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
       <el-tab-pane label="待处理" name="first">
         <el-table :data="tickets" border fit stripe style="width: 100%" >
@@ -169,7 +193,7 @@
 </template>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
-  import {getWfStateList,getTickets,ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
+  import {getWorkflowList,getWfStateList,getTickets,ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
   import Pagination from "@/components/Pagination";
   import dagreD3 from 'dagre-d3'
   import * as d3 from 'd3'
@@ -186,13 +210,14 @@
       pageForm:{
         page:1,
         page_size:20,
-        workflow:0,
+        workflow:'',
       },
-      workflow:0,
       stateSteps:0,
       activeName:'first',
       keyword:'',
+      workflow:'',
       tickets:[],
+      workflows:[],
       ticketDetail:{},
       dialogVisible:false,
       listLoading:false,
@@ -207,7 +232,7 @@
     mounted(){
       this.workflow = this.$route.params.workflow;
       let workflow = localStorage.getItem('workflow');
-      if(this.workflow){
+      if(this.workflow){//有传参
         this.pageForm.workflow = parseInt(this.workflow);
         if(workflow){
           localStorage.removeItem('workflow');
@@ -215,18 +240,21 @@
         }else{
           localStorage.setItem('workflow',this.pageForm.workflow)
         }
-      }else{
+      }else {//无传参
-        this.workflow =workflow ;
+        if (workflow) {
-        this.pageForm.workflow =workflow ;
+          this.workflow = workflow;
+          this.pageForm.workflow = workflow;
+        } else {
+        }
       }
-      debugger;
       this.getList();
       this.getStates();
+      this.getWorkFlow();
     },
   activated(){
     this.workflow = this.$route.params.workflow;
     let workflow = localStorage.getItem('workflow');
-    if(this.workflow){
+    if(this.workflow){//有传参
       this.pageForm.workflow = parseInt(this.workflow);
       if(workflow){
         localStorage.removeItem('workflow');
@@ -234,9 +262,11 @@
       }else{
         localStorage.setItem('workflow',this.pageForm.workflow)
       }
-    }else{
+    }else{//无传参
-      this.workflow =workflow ;
+      if(workflow){
-      this.pageForm.workflow =workflow ;
+        this.workflow =workflow ;
+        this.pageForm.workflow =workflow ;
+      }else{}
     }
     debugger;
     this.getList();
@@ -270,20 +300,30 @@
       }
     },
     getStates(){
-      getWfStateList(this.workflow).then((response) => {
+      if(this.pageForm.workflow!==''){
-        if (response.data) {
+        getWfStateList(this.pageForm.workflow).then((response) => {
-          let nodes = [];
+          if (response.data) {
-          let res = response.data;
+            let nodes = [];
-          this.stateSteps = res.length;
+            let res = response.data;
-          for(let i=0;i<res.length;i++){
+            this.stateSteps = res.length;
-            let obj = new Object();
+            for(let i=0;i<res.length;i++){
-            obj.id = res[i].id;
+              let obj = new Object();
-            obj.label = res[i].name;
+              obj.id = res[i].id;
-            obj.shape = res[i].type===0? 'diamond':'rect';
+              obj.label = res[i].name;
-            nodes.push(obj)
+              obj.shape = res[i].type===0? 'diamond':'rect';
+              nodes.push(obj)
+            }
+            this.nodes = nodes;
+            this.getEdges(nodes);
           }
-          this.nodes = nodes;
+        });
-          this.getEdges(nodes);
+      }
+    },
+    getWorkFlow(){
+      let listForm = {page:0};
+      getWorkflowList(listForm).then((response) => {
+        if (response.data) {
+          this.workflows = response.data;
         }
       });
     },
@@ -298,7 +338,14 @@
         }
         this.edges = edge;
     },
-    handleFilter(){},
+    handleFilter(){
+      this.getList();
+      this.getStates();
+    },
+    resetFilter(){
+      this.pageForm.workflow = '',
+        this.getList();
+    },
     handlePicture(scope){
       let that = this;
       getWfFlowSteps( scope.row.id).then((res)=>{