From 35ab5f1c791963aa9f970a6a8d730fd4732daf56 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 8 Oct 2021 08:39:16 +0800
Subject: [PATCH] workflowRefresh

---
 hb_client/src/api/workflow.js           |   8 +
 hb_client/src/views/workflow/state.vue  |  61 +++-
 hb_client/src/views/workflow/ticket.vue | 435 ++++++++++++++++--------
 3 files changed, 363 insertions(+), 141 deletions(-)

diff --git a/hb_client/src/api/workflow.js b/hb_client/src/api/workflow.js
index 5fd2b05..0b11d69 100644
--- a/hb_client/src/api/workflow.js
+++ b/hb_client/src/api/workflow.js
@@ -154,6 +154,14 @@ export function createTicket(data) {
     data
   })
 }
+//接单
+export function ticketAccpet(id,data) {
+  return request({
+    url: `/wf/ticket/${id}/accpet/`,
+    method: 'post',
+    data
+  })
+}
 //工单详情
 export function getTicketDetail(id) {
   return request({
diff --git a/hb_client/src/views/workflow/state.vue b/hb_client/src/views/workflow/state.vue
index 7895dca..6c12777 100644
--- a/hb_client/src/views/workflow/state.vue
+++ b/hb_client/src/views/workflow/state.vue
@@ -148,6 +148,28 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="字段状态">
+          <el-button @click="addWordStatusChange">添加修改</el-button>
+          <el-row v-for="(item,$index) in statusChange" :key="item+$index" style="margin-top: 10px">
+            <el-col :span="11">
+              <el-select  style="width: 100%" v-model="item.name" placeholder="请选择字段">
+                <el-option v-for="item in customfieldList" :key="item.id" :label="item.field_name" :value="item.field_key">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="1" style="height: 1px;"></el-col>
+            <el-col :span="8">
+              <el-select  style="width: 100%" v-model="item.value" placeholder="请选择状态">
+                <el-option label="只读" value="1"></el-option>
+                <el-option label="必填" value="2"></el-option>
+                <el-option label="可选" value="3"></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="2" style="text-align: center" v-if="$index!==0">
+              <i class="el-icon-remove-outline" @click.prevent="removeStatusChange($index)" style="color: red;font-size: 16px;"></i>
+            </el-col>
+          </el-row>
+        </el-form-item>
       </el-form>
       <div style="text-align: right">
         <el-button type="danger" @click="dialogVisible = false">取消</el-button>
@@ -157,7 +179,7 @@
   </div>
 </template>
 <script>
-import { getWfStateList, createWfState,updateWfState,deleteWfState } from "@/api/workflow";
+import { getWfStateList, createWfState,updateWfState,deleteWfState,getWfCustomfieldList } from "@/api/workflow";
 import { getOrganizationList,getUserList } from "@/api/user";
 import checkPermission from "@/utils/permission";
 const defaultwfstate = {
@@ -177,14 +199,17 @@ export default {
         enable_retreat:'',
         participant_type:'',
         participant:'',
-        distribute_type:'',
+        distribute_type:'',//分发类型
+        state_fields:{}//字段状态是否可写
       },
+      statusChange:[],
       participant:'',
       participants:[],
       is_hidden:false,
       enable_retreat:false,
       staffs:[],
       departments:[],
+      customfieldList:[],
       /*wfstateList: {
         count:0
       },*/
@@ -271,6 +296,12 @@ export default {
         }
         
       });
+      getWfCustomfieldList(this.ID).then((response) => {
+        if (response.data) {
+          this.customfieldList = response.data;
+        }
+
+      });
     },
     getUser(){
       getUserList({}).then(res=>{
@@ -305,6 +336,17 @@ export default {
       this.wfstate = Object.assign({}, scope.row); // copy obj
       this.participants = this.wfstate.participant;
       this.participant = this.wfstate.participant;
+      /////
+      debugger;
+      console.log(this.wfstate.state_fields);
+      let arr = [];
+      for (let  pro in this.wfstate.state_fields) {
+        let obj = new Object();
+        obj.name = pro;
+        obj.value = this.wfstate.state_fields[pro];
+        arr.push(obj)
+      }
+      this.statusChange = arr;
       this.wfstate.distribute_type = this.wfstate.distribute_type.toString();
       this.dialogType = "edit";
       this.dialogVisible = true;
@@ -312,12 +354,27 @@ export default {
         this.$refs["Form"].clearValidate();
       });
     },
+    addWordStatusChange(){
+      this.statusChange.push({name:'',value:''})
+    },
+    removeStatusChange(index){
+      this.statusChange.splice(index, 1)
+    },
     //编辑新建
     async confirm(form) {
       this.$refs[form].validate((valid) => {
         if (valid) {
           const isEdit = this.dialogType === "edit";
           // this.wfstate.participant = 1;
+          let state_fields = {};
+          if(this.statusChange.length>0){
+            for(let i=0;i<this.statusChange.length;i++){
+              state_fields[this.statusChange[i].name] = this.statusChange[i].value;
+            }
+          }
+          debugger;
+          console.log(state_fields);
+          this.wfstate.state_fields = state_fields;
           this.wfstate.participant = this.participant!==''?this.participant:this.participants;
           if (isEdit) {
             updateWfState(this.wfstate.id, this.wfstate).then((res) => {
diff --git a/hb_client/src/views/workflow/ticket.vue b/hb_client/src/views/workflow/ticket.vue
index 1d0895b..77078da 100644
--- a/hb_client/src/views/workflow/ticket.vue
+++ b/hb_client/src/views/workflow/ticket.vue
@@ -27,8 +27,8 @@
         <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
       </div>
     </el-card>
-    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
-      <el-tab-pane label="待处理" name="first">
+    <el-tabs v-model="pageForm.category" type="border-card" @tab-click="handleClick">
+      <el-tab-pane label="待处理" name="duty">
         <el-table :data="tickets"
                   border fit stripe
                   style="width: 100%"
@@ -60,8 +60,8 @@
           </el-table-column>
           <el-table-column align="center" label="操作">
             <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>
+              <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>-->
             </template>
           </el-table-column>
@@ -73,15 +73,29 @@
           @pagination="getList"
         />
       </el-tab-pane>
-      <el-tab-pane label="已处理" name="second">
-        <el-table :data="tickets" border fit stripe style="width: 100%" >
+      <el-tab-pane label="我处理" name="worked">
+        <el-table :data="tickets"
+                  border fit stripe
+                  style="width: 100%"
+                  height="100"
+                  highlight-current-row
+                  v-el-height-adaptive-table="{bottomOffset: 60}">
           <el-table-column label="工单标题" min-width="100" prop="title">
           </el-table-column>
           <el-table-column label="当前状态"  min-width="100">
             <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>
+              <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
+              <el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="进行状态"  min-width="100">
+            <template slot-scope="scope">
+              <span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
+              <span v-else>已{{scope.row.state_.name}}</span>
             </template>
           </el-table-column>
           <el-table-column label="类型"  min-width="100">
@@ -91,8 +105,9 @@
           </el-table-column>
           <el-table-column align="center" label="操作">
             <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>
+              <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>
@@ -103,17 +118,29 @@
           @pagination="getList"
         />
       </el-tab-pane>
-      <el-tab-pane label="已发起" name="third">
-        <!--<el-button type="primary" icon="el-icon-plus" @click="handleusedstepCreate"-->
-        <!--&gt;新增</el-button>-->
-        <el-table :data="tickets" border fit stripe style="width: 100%" >
+      <el-tab-pane label="我发起" name="owner">
+        <el-table :data="tickets"
+                  border fit stripe
+                  style="width: 100%"
+                  height="100"
+                  highlight-current-row
+                  v-el-height-adaptive-table="{bottomOffset: 60}">
           <el-table-column label="工单标题" min-width="100" prop="title">
           </el-table-column>
           <el-table-column label="当前状态"  min-width="100">
             <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>
+              <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
+              <el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="进行状态"  min-width="100">
+            <template slot-scope="scope">
+              <span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
+              <span v-else>已{{scope.row.state_.name}}</span>
             </template>
           </el-table-column>
           <el-table-column label="类型"  min-width="100">
@@ -123,7 +150,9 @@
           </el-table-column>
           <el-table-column align="center" label="操作">
             <template slot-scope="scope">
-              <el-link  type="danger" @click="handleDetail(scope)">处理</el-link>
+              <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>
             </template>
           </el-table-column>
         </el-table>
@@ -134,15 +163,29 @@
           @pagination="getList"
         />
       </el-tab-pane>
-      <el-tab-pane label="抄送我" name="fourth">
-        <el-table :data="tickets" border fit stripe style="width: 100%" >
+      <el-tab-pane label="抄送我" name="relation">
+        <el-table :data="tickets"
+                  border fit stripe
+                  style="width: 100%"
+                  height="100"
+                  highlight-current-row
+                  v-el-height-adaptive-table="{bottomOffset: 60}">
           <el-table-column label="工单标题" min-width="100" prop="title">
           </el-table-column>
           <el-table-column label="当前状态"  min-width="100">
             <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>
+              <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
+              <el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
+              <el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
+              <el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="进行状态"  min-width="100">
+            <template slot-scope="scope">
+              <span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
+              <span v-else>已{{scope.row.state_.name}}</span>
             </template>
           </el-table-column>
           <el-table-column label="类型"  min-width="100">
@@ -152,8 +195,8 @@
           </el-table-column>
           <el-table-column align="center" label="操作">
             <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>
+              <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>-->
             </template>
           </el-table-column>
@@ -173,9 +216,9 @@
           <el-step :title="item.name" v-for="item in flowSteps " :key="item.id">
           </el-step>
         </el-steps>
-        <svg  height=600 id="svg">
-          <g id="svgG"/>
-          <rect/>
+        <svg  height=600 id="mySvg">
+          <!--<g id="svgG"></g>-->
+          <!--<rect></rect>-->
         </svg>
       </div>
     </div>
@@ -186,15 +229,110 @@
         </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>{{ticketDetail.create_time}}</div>
-        </el-col>
-        <el-col :span="11">
-          <div class="listItem"><span>标题：</span>{{ticketDetail.title}}</div>
+        <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-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'" style="margin-bottom: 0">
+              <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"
+                  :on-remove="handleRemove"
+                  :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-col>
+            <el-form-item label="审批意见">
+              <el-input v-model="handleForm.suggestion" placeholder="审批意见"/>
+            </el-form-item>
+          </el-col>
 
-        </el-col>
+        </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>
@@ -219,13 +357,13 @@
           <template v-if="item.field_type=='string'">
             <el-input v-model="item.default_value" :placeholder="item.description" />
           </template>
-          <template v-if="item.field_type=='int'">
+          <template v-if="item.field_type==='int'">
             <el-input v-model="item.default_value" type="number" :placeholder="item.description" oninput="value=value.replace(/[^\d]/g,'')" />
           </template>
-          <template v-if="item.field_type=='float'">
+          <template v-if="item.field_type==='float'">
             <el-input v-model="item.default_value" type="number" :placeholder="item.description" />
           </template>
-          <template v-if="item.field_type=='date'">
+          <template v-if="item.field_type==='date'">
             <el-date-picker
               v-model="item.default_value"
               type="date"
@@ -235,7 +373,7 @@
             >
             </el-date-picker>
           </template>
-          <template v-if="item.field_type=='datetime'">
+          <template v-if="item.field_type==='datetime'">
             <el-date-picker
               v-model="item.default_value"
               type="datetime"
@@ -245,7 +383,7 @@
             >
             </el-date-picker>
           </template>
-          <template v-if="item.field_type=='select'">
+          <template v-if="item.field_type==='select'">
             <el-select style="width: 100%" v-model="item.default_value" placeholder="请选择">
               <el-option
                 v-for="item1 in item.field_choice"
@@ -256,7 +394,7 @@
               </el-option>
             </el-select>
           </template>
-          <template v-if="item.field_type=='selects'">
+          <template v-if="item.field_type==='selects'">
             <el-select  style="width: 100%" multiple v-model="item.default_value" placeholder="请选择">
               <el-option
                 v-for="item1 in item.field_choice"
@@ -267,10 +405,10 @@
               </el-option>
             </el-select>
           </template>
-          <template v-if="item.field_type=='textarea'">
-            <el-input type="textarea"  :rows="3" v-model="item.default_value" placeholder="指导书内容" />
+          <template v-if="item.field_type==='textarea'">
+            <el-input type="textarea"  :rows="3" v-model="item.default_value" placeholder="内容" />
           </template>
-          <template v-if="item.field_type=='file'">
+          <template v-if="item.field_type==='file'">
             <el-upload
               ref="upload"
               :action="upUrl"
@@ -295,9 +433,11 @@
   </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,getWfTransitionList,
+  import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
     ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
   import Pagination from "@/components/Pagination";
   import dagreD3 from 'dagre-d3'
@@ -316,6 +456,7 @@
         page:1,
         page_size:20,
         workflow:'',
+        category:'duty',
       },
       addForm:{
         title:'',
@@ -323,10 +464,16 @@
         ticket_data:{},
         transition:''
       },
+      handleForm:{
+        transition:'',
+        ticket_data:{},
+        suggestion:'',
+      },
+      handleRule:{},
       upUrl: upUrl(),
       upHeaders: upHeaders(),
       stateSteps:0,
-      activeName:'first',
+
       keyword:'',
       workflow:'',
       tickets:[],
@@ -370,25 +517,6 @@
     this.getList();
     this.getStates();
     this.getWorkFlow();
-   /* 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.pageForm.workflow)
-      }else{
-        localStorage.setItem('workflow',this.pageForm.workflow)
-      }
-    }else{//无传参
-      if(workflow){
-        this.workflow =workflow ;
-        this.pageForm.workflow =workflow ;
-      }else{}
-    }
-    debugger;
-    this.getList();
-    this.getStates();*/
   },
   methods:{
     getList(){
@@ -403,20 +531,11 @@
     },
     handleClick(tab, event) {
       console.log(tab, event);
+      console.log(this.pageForm.category);
       debugger;
-      //page、pageSize、total、tickets都要发生变化
-      let paneName = tab.paneName;
-      this.activeName = paneName;
-      if(paneName=='first'){
-
-      }else if(paneName=='second'){
-
-      }else if(paneName=='third'){
-
-      }else if(paneName=='fourth'){
-
-      }
+      this.getList();
     },
+    //获取工作流所有状态
     getStates(){
       if(this.pageForm.workflow!==''){
         getWfStateList(this.pageForm.workflow).then((response) => {
@@ -437,6 +556,7 @@
         });
       }
     },
+    //获取工作流
     getWorkFlow(){
       let listForm = {page:0};
       getWorkflowList(listForm).then((response) => {
@@ -445,6 +565,7 @@
         }
       });
     },
+    //获取过程标记
     getEdges(nodes){
         let edge = [];
         for(let i=1;i<nodes.length;i++){
@@ -531,10 +652,13 @@
     },
     handlePicture(scope){
       let that = this;
+      this.dialogVisible = true;
+      that.pageForm.workflow = scope.row.workflow;
+      // that.getStates();
       getWfFlowSteps( scope.row.id).then((res)=>{
         if(res.data){
           that.flowSteps = res.data;
-          getTicketDetail( ticketId).then((res)=>{
+          getTicketDetail( scope.row.id).then((res)=>{
             if(res.data){
               that.ticketDetail = res.data;
               let state = res.data.state;
@@ -542,66 +666,96 @@
                 return item.id==state;
               })
               this.actives = that.flowSteps.indexOf(dat[0]);
-              that.limitedStep = true;
             }
           });
         }
       });
-      // this.$router.push({name:"test"})
-      this.dialogVisible = true;
-      //获取D3
       this.$nextTick(()=>{
-        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
+        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.edges.forEach(item => {
-          g.setEdge(item.source, item.target, {
-            // 边标签
-            label: item.label,
-            // 边样式
-            style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
+          // 添加节点
+          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
+            });
           });
-        });
-        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('svg');
-        let svgGroup = svg.select('g');
-        // 在绘图容器上运行渲染器生成流程图.
-        render(d3.select("svg g"), g);
+          // 链接关系
+          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;
@@ -614,16 +768,9 @@
             if(res.data){
               that.ticketDetail = res.data;
               let state = res.data.state;
-              debugger;
-              console.log(state)
-              console.log(that.flowSteps)
-              debugger;
               let dat = that.flowSteps.filter((item)=>{
                 return item.id==state;
               })
-              console.log(dat)
-              console.log(that.flowSteps.indexOf(dat[0]))
-              debugger;
               this.actives = that.flowSteps.indexOf(dat[0]);
               that.limitedStep = true;
             }
@@ -636,13 +783,23 @@
       })
     },
     operationSubmit(){
-      let transition = {transition:this.operationBtn[0].id,ticket_data:this.ticketDetail.ticket_data};
-      ticketHandle(this.ticketId,transition).then(res=>{
+      this.handleForm.transition = this.operationBtn[0].id;
+      this.handleForm.ticket_data = this.ticketDetail.ticket_data;
+      ticketHandle(this.ticketId,this.handleForm).then(res=>{
         if (res.data){
           this.limitedStep = false;
         }
       })
     },
+    //接单
+    handleGetTicket(scope){
+      let ticketId = scope.row.id;
+      ticketAccpet(ticketId,{}).then(res=>{
+        if(res.code===200){
+          this.getList();
+        }
+      })
+    },
     stepclick(){},
     closeMark(){
       this.dialogVisible = false;