From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选
---
src/components/process/index.vue | 236 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 158 insertions(+), 78 deletions(-)
diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index 8db0ab4..57a1383 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,95 +1,158 @@
<template>
<div class="my-process">
<div class="my-pro-header">
- <div class="pro-step" v-for="(item,index) in list" :key="item.name">
- <div class="pro-step-top">
- <div
- :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
- </div>
- <div :class="['line',active > index ? 'finish-line' :'']"
- v-if="index<list.length-1 ? true:false"></div>
- </div>
- <div
- :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
- {{item.name}}</div>
- </div>
+ <el-steps
+ :space="260"
+ :active="active"
+ align-center
+ >
+ <el-step
+ v-for="item in list"
+ :title="item.name"
+ :key="item.title"
+ >
+ <template slot="description">
+ <div>鐜妭鐢ㄦ椂锛�</div>
+ <div>
+ <i class="el-icon-time"></i>
+ {{
+ item.disposeRecords.length !== 0
+ ? item.disposeRecords[0].linkTime
+ : ''
+ }}
+ <!-- <span>day</span> -->
+ </div>
+ </template>
+ </el-step>
+ </el-steps>
</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 === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
- {{item.name}}</div>
- <div class="pro-step-top">
- <div
- :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
- </div>
- <div :class="['line',active > index ? 'finish-line' :'']"
- v-if="index<list.length-1 ? true:false"></div>
- </div>
- <div class="desc">
- <div class="desc-title">鐜妭鐢ㄦ椂:{{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">{{item.disposeRecords[0].endTime}}</div>
- </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 === index
+ ? 'in-process'
+ : active > index
+ ? 'finish-name'
+ : 'wait',
+ ]"
+ >
+ {{ item.name }}
</div>
+ <div class="pro-step-top">
+ <div
+ :class="[
+ 'circle',
+ active === index
+ ? 'in-process__circle'
+ : active > index
+ ? 'finish'
+ : 'wait',
+ ]"
+ ></div>
+ <div
+ :class="['line', active > index ? 'finish-line' : '']"
+ v-if="index < list.length - 1 ? true : false"
+ ></div>
+ </div>
+ <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">
+ {{
+ (item.disposeRecords[0] && item.disposeRecords[0].result) || ""
+ }}
+ </div>
+ <div class="desc-content-endtime">
+ {{
+ item.disposeRecords.length !== 0
+ ? filterTime(item.disposeRecords[0].endTime)
+ : ""
+ }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div> -->
</div>
</template>
<script>
+import helper from "@/utils/mydate";
export default {
data() {
return {
active: 0,
- list: [
- {
- title: '涓婃姤',
- status: 'success',
- },
- {
- title: '绔嬫',
- status: 'process',
- },
- {
- title: '娲鹃仯',
- status: 'process',
- },
- {
- title: '澶勭疆',
- status: 'process',
- },
- {
- title: '鏍告煡',
- status: 'process',
- },
- {
- title: '缁撴',
- status: 'process',
- }
- ]
- }
+ list: [],
+ };
},
- props:['handlePassVo'],
- created(){
- console.log('process');
- const {handlePassVo:{workflowConfigSteps:mylist}} = this;
- // console.log(this.handlePassVo.workflowConfigSteps[0].name);
- console.log(mylist);
- mylist.forEach(item=>{
- if(item.disposeRecords[0].endTime != null){
- this.active ++;
+ props: ["handlePassVo", "baseCase"],
+ created() {
+ const {
+ handlePassVo: { workflowConfigSteps: mylist },
+ baseCase: { state: mystate },
+ } = this;
+ 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 = 0;
+ }
+ this.list = mylist;
+ },
+ methods: {
+ filterTime(time) {
+ if (time) {
+ return helper(time);
}
- })
- this.list = mylist;
- }
-}
+ return;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
+// ::v-deep .el-step.is-horizontal .el-step__line {
+// border-top: 2px dashed #ccd1de;
+// height: 0;
+// background-color: transparent;
+// }
+::v-deep .el-step__title {
+ font-size: 20px;
+ padding: 10px 0;
+}
+::v-deep .el-step__title.is-process {
+ color: #5388f1;
+}
+
+::v-deep .el-step__description{
+ font-size: 14px;
+}
+
.my-process {
padding-top: 50px;
.my-pro-header {
- display: flex;
+ padding: 0 30px;
+ line-height: 1;
.pro-step {
flex: 1;
@@ -121,7 +184,7 @@
height: 100px;
}
}
- .pro-step-top{
+ .pro-step-top {
display: flex;
flex-direction: column;
align-items: center;
@@ -132,13 +195,15 @@
margin-right: 10px;
text-align: right;
}
- .desc{
+ .desc {
flex: 1;
line-height: 24px;
margin-left: 10px;
- .desc-content-endtime{
+ // color: #4b9bb7;
+ .desc-content-endtime {
display: flex;
justify-content: flex-end;
+ padding-right: 50px;
}
}
}
@@ -148,14 +213,29 @@
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;
+ }
+ .desc-content-message {
+ color: #666;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0