From d22f9b9278303f340e2f8efd6f5a98f0b614c05c Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 17 十月 2022 18:03:36 +0800
Subject: [PATCH] 部门功能修改

---
 src/components/process/index.vue |  104 ++++++++++++++++++++++++++++++----------------------
 1 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index 7ec8e99..20f092a 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,36 +1,36 @@
 <template>
     <div class="my-process">
         <div class="my-pro-header">
-            <div class="pro-step" v-for="(item,index) in list" :key="item.title">
+            <div class="pro-step" v-for="(item,index) in list" :key="item.name">
                 <div class="pro-step-top">
                     <div
-                        :class="['circle',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
+                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                     </div>
-                    <div :class="['line',active > item.index ? 'finish-line' :'']"
+                    <div :class="['line',active> index ? 'finish-line' :'']"
                         v-if="index<list.length-1 ? true:false"></div>
                 </div>
                 <div
-                    :class="['pro-step-name',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
-                    {{item.title}}</div>
+                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
+                    {{item.name}}</div>
             </div>
         </div>
         <div class="my-pro-main">
             <div class="pro-step-ver" v-for="(item,index) in list" :key="item.title">
                 <div
-                    :class="['pro-step-name',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
-                    {{item.title}}</div>
+                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
+                    {{item.name}}</div>
                 <div class="pro-step-top">
                     <div
-                        :class="['circle',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
+                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                     </div>
-                    <div :class="['line',active > item.index ? 'finish-line' :'']"
+                    <div :class="['line',active > index ? 'finish-line' :'']"
                         v-if="index<list.length-1 ? true:false"></div>
                 </div>
-                <div class="desc">
-                    <div class="desc-title">鐜妭鐢ㄦ椂:</div>
-                    <div class="desc-content" v-if="active > index+1">
+                <div :class="['desc',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]"> 
+                    <div class="desc-title">鐜妭鐢ㄦ椂:{{item.disposeRecords.length !==0 ? item.disposeRecords[0].linkTime : ''}}</div>
+                    <div class="desc-content" v-if="active > index">
                         <div class="desc-content-message">1111111</div>
-                        <div class="desc-content-endtime">22.09.06 16:40</div>
+                        <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? filterTime(item.disposeRecords[0].endTime):''}}</div>
                     </div>
                 </div>
             </div>
@@ -38,42 +38,41 @@
     </div>
 </template>
 <script>
+import helper from '@/utils/mydate'
 export default {
     data() {
         return {
-            active: 2,
+            active: 0,
             list: [
-                {
-                    title: '涓婃姤',
-                    status: 'success',
-                },
-                {
-                    title: '绔嬫',
-                    status: 'process',
-                },
-                {
-                    title: '娲鹃仯',
-                    status: 'process',
-                },
-                {
-                    title: '澶勭疆',
-                    status: 'process',
-                },
-                {
-                    title: '鏍告煡',
-                    status: 'process',
-                },
-                {
-                    title: '缁撴',
-                    status: 'process',
-                }
-            ]
+            ],
         }
     },
-    props:['handlePassVo'],
+    props:['handlePassVo','baseCase'],
     created(){
-        console.log('process');
-        console.log(this.handlePassVo);
+        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
+        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
+        // console.log(mylist);
+        console.log(mystate);
+        if(mystate ===6){
+            this.active = 1;
+        }else if(mystate===7){
+            this.active = 2;
+        }else if(mystate ===8){
+            this.active = 3;
+        }else if(mystate ===9){
+            this.active = 4;
+        }else{
+            this.active = -1;
+        }
+        this.list =  mylist;
+    },
+    methods:{
+        filterTime(time){
+            if(time){
+                return helper(time)
+            }
+            return;
+        }
     }
 }
 </script>
@@ -103,6 +102,8 @@
     }
 
     .my-pro-main {
+        margin-top: 30px;
+        margin-left: -50px;
         .pro-step-ver {
             display: flex;
             align-items: flex-start;
@@ -117,13 +118,16 @@
             align-items: center;
         }
         .pro-step-name {
+            width: 120px;
             line-height: 24px;
             margin-right: 10px;
+            text-align: right;
         }
         .desc{
             flex: 1;
             line-height: 24px;
             margin-left: 10px;
+            // color: #4b9bb7;
             .desc-content-endtime{
                 display: flex;
                 justify-content: flex-end;
@@ -136,14 +140,26 @@
         height: 24px;
         border-radius: 50%;
         background-color: #fff;
+        border: 2px solid #808080;
     }
 
     .line {
         background-color: #c0c4cc;
     }
-
+    .in-process{
+        color: #0079fe;
+    }
+    .in-process__circle{
+        border: 2px solid #0079fe;
+    }
     .finish-line {
-        background-color: #4b9bb7;
+        background-color: #0079fe;
+    }
+    .finish{
+        border: 2px solid #4b9bb7;
+    }
+    .finish-name{
+        color: #4b9bb7;
     }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0