<template>
|
<div class="step-list" :class="sizeClass">
|
<div class="step-item">
|
{{ data.name }}
|
</div>
|
<div class="step-item">
|
<div class="step-status-circle" :class="status.class"></div>
|
<div class="step-status-line" v-if="!end"></div>
|
</div>
|
<div class="step-item">
|
{{ status.text }}
|
</div>
|
<div class="step-item" v-if="startArr.length>0">
|
{{ startArr[0] }}<br>{{ startArr[1] }}
|
</div>
|
<div class="step-item" v-else>
|
{{ data.start }}
|
</div>
|
<div class="step-item" v-if="endArr.length>0">
|
{{ endArr[0] }}<br>{{ endArr[1] }}
|
</div>
|
<div class="step-item" v-else>
|
{{ data.end }}
|
</div>
|
<div class="step-item" v-if="endTextArr.length>0">
|
{{ endTextArr[0] }}<br>{{ endTextArr[1] }}
|
</div>
|
<div class="step-item" v-else>
|
{{ data.endText }}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "stepList",
|
props: {
|
end: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Object,
|
default () {
|
return {
|
name: '',
|
status: 0,
|
start: '',
|
end: '',
|
endText: ''
|
}
|
}
|
},
|
size: {
|
type: String,
|
default: ''
|
},
|
},
|
data() {
|
return {
|
|
}
|
},
|
|
computed: {
|
status() {
|
let data = this.data;
|
let result = {
|
class: 'not-start',
|
text: '未开始'
|
};
|
switch (data.status) {
|
case 1:
|
result.class = 'in-process';
|
result.text = '进行中';
|
break;
|
case 2:
|
result.class = 'complete';
|
result.text = '已完成';
|
break;
|
}
|
return result;
|
},
|
sizeClass() {
|
let sizeClass = "";
|
switch (this.size) {
|
case 'mini':
|
sizeClass = "mini-size";
|
break;
|
case 'small':
|
sizeClass = "small-size";
|
break;
|
}
|
return sizeClass;
|
},
|
startArr() {
|
let data = this.data;
|
if (data.start && data.start.indexOf("&&") != -1) {
|
return data.start.split("&&")
|
}
|
return []
|
},
|
endArr() {
|
let data = this.data;
|
if (data.end && data.end.indexOf("&&") != -1) {
|
return data.end.split("&&")
|
}
|
return []
|
},
|
endTextArr() {
|
let data = this.data;
|
if (data.endText && data.endText.indexOf("&&") != -1) {
|
return data.endText.split("&&")
|
}
|
return []
|
},
|
},
|
mounted() {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.step-list {
|
display: flex;
|
flex-direction: row;
|
font-size: 13px;
|
}
|
|
.step-item {
|
padding-right: 36px;
|
}
|
|
.small-size .step-item {
|
padding-right: 24px;
|
}
|
|
.mini-size .step-item {
|
padding-right: 12px;
|
font-size: 10px;
|
}
|
|
.step-status-circle {
|
background-color: #FFFFFF;
|
width: 24px;
|
height: 24px;
|
box-sizing: border-box;
|
border-radius: 50%;
|
border-width: 3px;
|
border-style: solid;
|
}
|
|
.small-size .step-status-circle {
|
width: 18px;
|
height: 18px;
|
border-width: 2px;
|
}
|
|
.mini-size .step-status-circle {
|
width: 16px;
|
height: 16px;
|
border-width: 2px;
|
}
|
|
.step-status-circle.complete {
|
border-color: #666EE8;
|
}
|
|
.step-status-circle.in-process {
|
border-color: #82e866;
|
}
|
|
.step-status-circle.not-start {
|
border-color: #686868;
|
}
|
|
.step-status-line {
|
position: relative;
|
width: 2px;
|
background-color: #999999;
|
background-image: linear-gradient(to right, #999999, #FFFFFF, #999999);
|
height: 30px;
|
margin-left: 50%;
|
left: -1px;
|
}
|
|
.small-size .step-status-line {
|
height: 25px;
|
}
|
|
.mini-size .step-status-line {
|
height: 20px;
|
}
|
</style>
|
