From bb036407bcc0f26a9a0f246aca100d87db2f6e76 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 20 十月 2022 14:54:30 +0800
Subject: [PATCH] 优化
---
src/components/process/index.vue | 350 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 206 insertions(+), 144 deletions(-)
diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index 20f092a..0f18d78 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,165 +1,227 @@
<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 ? '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="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
- {{item.name}}</div>
- </div>
+ <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
+ ? '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="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">1111111</div>
- <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? filterTime(item.disposeRecords[0].endTime):''}}</div>
- </div>
- </div>
- </div>
+ <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 === 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].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'
+import helper from "@/utils/mydate";
export default {
- data() {
- return {
- active: 0,
- list: [
- ],
- }
- },
- props:['handlePassVo','baseCase'],
- created(){
- 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;
- }
+ data() {
+ return {
+ active: 0,
+ list: [],
+ };
+ },
+ props: ["handlePassVo", "baseCase"],
+ created() {
+ 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>
<style lang="scss" scoped>
.my-process {
- padding-top: 50px;
- .my-pro-header {
+ padding-top: 50px;
+ .my-pro-header {
+ display: flex;
+
+ .pro-step {
+ flex: 1;
+
+ .pro-step-top {
display: flex;
+ align-items: center;
- .pro-step {
- flex: 1;
-
- .pro-step-top {
- display: flex;
- align-items: center;
-
- .line {
- flex: 1;
- height: 2px;
- }
- }
-
- .pro-step-name {
- line-height: 20px;
- }
+ .line {
+ flex: 1;
+ height: 2px;
}
- }
+ }
- .my-pro-main {
- margin-top: 30px;
- margin-left: -50px;
- .pro-step-ver {
- display: flex;
- align-items: flex-start;
- .line {
- width: 2px;
- height: 100px;
- }
- }
- .pro-step-top{
- display: flex;
- flex-direction: column;
- 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;
- }
- }
+ .pro-step-name {
+ line-height: 20px;
+ }
}
+ }
- .circle {
- width: 24px;
- height: 24px;
- border-radius: 50%;
- background-color: #fff;
- border: 2px solid #808080;
+ .my-pro-main {
+ margin-top: 30px;
+ margin-left: -50px;
+ .pro-step-ver {
+ display: flex;
+ align-items: flex-start;
+ .line {
+ width: 2px;
+ height: 100px;
+ }
}
+ .pro-step-top {
+ display: flex;
+ flex-direction: column;
+ 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;
+ padding-right: 50px;
+ }
+ }
+ }
- .line {
- background-color: #c0c4cc;
- }
- .in-process{
- color: #0079fe;
- }
- .in-process__circle{
- border: 2px solid #0079fe;
- }
- .finish-line {
- background-color: #0079fe;
- }
- .finish{
- border: 2px solid #4b9bb7;
- }
- .finish-name{
- color: #4b9bb7;
- }
+ .circle {
+ width: 24px;
+ 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: #0079fe;
+ }
+ .finish {
+ border: 2px solid #4b9bb7;
+ }
+ .finish-name {
+ color: #4b9bb7;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0