|
@@ -1,40 +1,29 @@
|
|
|
<template>
|
|
|
- <div class="logisTimeLine">
|
|
|
+ <div class="logisTimeLine" style="margin: 0 0 0 30px">
|
|
|
<el-steps
|
|
|
direction="vertical"
|
|
|
:active="options.length"
|
|
|
:space="80"
|
|
|
:finish-status="finishStatus"
|
|
|
- :process-status="finishStatus"
|
|
|
+ :process-status="processStatus"
|
|
|
>
|
|
|
+ <div v-if="status && status !== '0'" class="show-post clear">
|
|
|
+ <img v-if="post_logo" :src="post_logo" alt="" class="fl"/>
|
|
|
+ <div v-if="post_name" class="fl">{{post_name}}</div><div class="fl" v-if="post_code">{{post_code}}</div>
|
|
|
+ </div>
|
|
|
<el-step
|
|
|
- icon="el-icon-success"
|
|
|
+ :icon="index === 0 ? 'el-icon-success' : 'el-icon-truck'"
|
|
|
v-for="(item, index) in options"
|
|
|
:key="item.time + index"
|
|
|
:finish-status="finishStatus"
|
|
|
- :process-status="finishStatus"
|
|
|
- style="margin: 0 0 0 150px; position: relative"
|
|
|
+ :process-status="processStatus"
|
|
|
>
|
|
|
- <div
|
|
|
- slot="title"
|
|
|
- style="
|
|
|
- position: absolute;
|
|
|
- width: 142px;
|
|
|
- left: -150px;
|
|
|
- text-align: right;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.status_name }}
|
|
|
- </div>
|
|
|
<div slot="description">
|
|
|
<p class="name">
|
|
|
- 操作人: {{ item.action_name?item.action_name:'未知'}}
|
|
|
+ {{ item.time }}
|
|
|
</p>
|
|
|
- <!-- <p class="item">
|
|
|
- {{ item.action_name?item.action_name:'未知'}}
|
|
|
- </p> -->
|
|
|
<p class="time">
|
|
|
- {{ item.addtime }}
|
|
|
+ {{ item.context }}
|
|
|
</p>
|
|
|
</div>
|
|
|
</el-step>
|
|
@@ -43,7 +32,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import asyncRequest from "@/apis/components/process-time-line";
|
|
|
+import asyncRequest from "@/apis/components/logis-time-line";
|
|
|
import resToken from "@/mixins/resToken";
|
|
|
export default {
|
|
|
name: "logisTimeLine",
|
|
@@ -52,7 +41,13 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
options: [],
|
|
|
+ finishStatus: "",
|
|
|
+ processStatus: "process",
|
|
|
loading: false,
|
|
|
+ post_logo: "",
|
|
|
+ post_name: "",
|
|
|
+ post_code: "",
|
|
|
+ status: "",
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
@@ -71,12 +66,16 @@ export default {
|
|
|
if (!this.loading) {
|
|
|
this.loading = true;
|
|
|
this.options = [];
|
|
|
- const res = await asyncRequest.list({
|
|
|
- type: this.type,
|
|
|
- orderCode: this.orderCode,
|
|
|
+ const { code, data, message } = await asyncRequest.list({
|
|
|
+ post_code: this.orderCode,
|
|
|
});
|
|
|
- if (res && res.code === 0 && res.data) {
|
|
|
- this.options = res.data;
|
|
|
+ if (code === 0) {
|
|
|
+ const { status, post_logo, post_name, post_code, post_data } = data;
|
|
|
+ this.status = status + "";
|
|
|
+ this.post_logo = post_logo + "";
|
|
|
+ this.post_name = post_name + "";
|
|
|
+ this.post_code = post_code + "";
|
|
|
+ this.options = post_data;
|
|
|
} else {
|
|
|
this.options = [];
|
|
|
}
|
|
@@ -87,7 +86,22 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-.date-picker.el-input {
|
|
|
- // width: 150px !important;
|
|
|
+.logisTimeLine{
|
|
|
+ .show-post{
|
|
|
+height: 36px;
|
|
|
+margin: 5px 0 15px 0;
|
|
|
+img{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 3px 10px 0 0 ;
|
|
|
+}
|
|
|
+div{
|
|
|
+ height: 36px;
|
|
|
+ display: block;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|