优化

zhanghua

2022-10-20 bb036407bcc0f26a9a0f246aca100d87db2f6e76

 src/components/process/index.vue

@@ -4,33 +4,92 @@
            <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>
            :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>
          :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>
          :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' ]">
            :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="['line',active > index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></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',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 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>
@@ -38,18 +97,20 @@
    </div>
</template>
<script>
import helper from '@/utils/mydate'
import helper from "@/utils/mydate";
export default {
    data() {
        return {
            active: 0,
            list: [
            ],
        }
      list: [],
    };
    },
    props:['handlePassVo','baseCase'],
  props: ["handlePassVo", "baseCase"],
    created(){
        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
    const {
      handlePassVo: { workflowConfigSteps: mylist },
      baseCase: { state: mystate },
    } = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        // console.log(mylist);
        console.log(mystate);
@@ -69,12 +130,12 @@
    methods:{
        filterTime(time){
            if(time){
                return helper(time)
        return helper(time);
            }
            return;
        }
    }
}
    },
  },
};
</script>
<style lang="scss" scoped>
.my-process {
@@ -131,6 +192,7 @@
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
        padding-right: 50px;
            }
        }
    }