1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<template>
<div class="app-container" v-if="order">
<el-card class="card">
<div slot="header" class="card-title">
订单编号：{{order.orderNo}}
<template v-if="order.containerNumber">- {{order.containerNumber}}</template>
</div>
<el-row :gutter="20">
<el-col :span="12" v-if="order.consignorVO">
<el-descriptions class="margin-top" border title="发货人" :column="1" :labelStyle="{width:'150px'}">
<el-descriptions-item label="发货人">{{order.consignorVO.name}}</el-descriptions-item>
<el-descriptions-item label="发货人电话">{{order.consignorVO.phone}}</el-descriptions-item>
<el-descriptions-item label="发货人邮箱">{{order.consignorVO.email}}</el-descriptions-item>
<el-descriptions-item label="发货人公司名称">
{{order.consignorVO.company}}
</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="12" v-if="order.consigneeVO">
<el-descriptions class="margin-top" border title="收货人" :column="1" :labelStyle="{width:'150px'}">
<el-descriptions-item label="收货人">{{order.consigneeVO.name}}</el-descriptions-item>
<el-descriptions-item label="收货人电话">{{order.consigneeVO.phone}}</el-descriptions-item>
<el-descriptions-item label="收货人邮箱">{{order.consigneeVO.email}}</el-descriptions-item>
<el-descriptions-item label="收货人公司名称">
{{order.consigneeVO.company}}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</el-card>
<el-card class="card">
<el-row :gutter="20">
<el-col :span="12">
<el-descriptions class="margin-top" border title="物流信息" :column="2">
<el-descriptions-item label="始发仓">{{order.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
<el-descriptions-item label="目的仓">{{order.logisticsInfoDto.destTitleZh}}</el-descriptions-item>
<el-descriptions-item label="地址" :span="2">{{order.logisticsInfoDto.startAddressZh}}</el-descriptions-item>
<el-descriptions-item label="运输方式" :span="2">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" />
</el-descriptions-item>
<el-descriptions-item label="出货渠道" :span="2">{{order.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="12">
<el-descriptions class="margin-top" border title="基础信息" :column="2">
<el-descriptions-item label="唛头">{{order.marks}}</el-descriptions-item>
<el-descriptions-item label="送货时间"></el-descriptions-item>
<el-descriptions-item label="是否控货">{{order.isCargoControl?'是':'否'}}</el-descriptions-item>
<el-descriptions-item label="填单信息">
{{order.costVO.totalNum}}箱 {{order.costVO.totalWeight}}Kg {{order.costVO.totalVolume}}m³
</el-descriptions-item>
<el-descriptions-item label="仓库实测">
{{order.sumNum}}箱 {{order.sumWeight}}Kg {{order.sumVolume}}m³
</el-descriptions-item>
<el-descriptions-item label="收款数据">
{{order.entryNum}}箱 {{order.entryWeight}}Kg {{order.entryVolume}}m³
</el-descriptions-item>
<el-descriptions-item label="入仓类型">
<dict-tag :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" :value="order.warehouseType" />
</el-descriptions-item>
<el-descriptions-item label="单证报关">
<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" />
</el-descriptions-item>
<el-descriptions-item label="代收货款">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCollection" />
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</el-card>
<el-card class="card">
<el-tabs v-model="activeName">
<el-tab-pane label="货物详情" name="first">
<el-table :data="order.orderItemVOList" border style="width: 100%">
<el-table-column prop="prodTitleZh" label="中文品名" />
<el-table-column prop="prodTitleEn" label="英文品名" />
<el-table-column prop="brand" label="品牌">
<template slot-scope="{row}">
<dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brand" />
</template>
</el-table-column>
<el-table-column prop="num" label="填单件数" />
<el-table-column prop="num" label="入仓件数" />
<el-table-column prop="unit" label="单位">
<template slot-scope="{row}">
<dict-tag :type="DICT_TYPE.ECW_PACKAGE_TYPE" :value="row.unit" />
</template>
</el-table-column>
<el-table-column prop="worth" label="货值" />
<el-table-column prop="" label="材质">
<template slot-scope="{row}">
<dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="row.material" />
</template>
</el-table-column>
<el-table-column prop="volume" label="体积(m3)" />
<el-table-column prop="weight" label="重量(kg)" />
</el-table>
</el-tab-pane>
<el-tab-pane label="订单动态" name="second">
<el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true">
<el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="activity.timestamp">
{{ activity.titleZh }}
</el-timeline-item>
</el-timeline>
<el-result v-else icon="info " title="暂无数据" subTitle="暂无订单动态数据" />
</el-tab-pane>
<el-tab-pane label="运单资料/提货单" name="three">
<el-button type="text" @click="showWarehouseReceipt=true">查看入仓单</el-button>
<el-button type="text" @click.native="showLadingBill=true" :disabled="!order.tidanNo">查看提货单</el-button>
<el-button :disabled="true" type="text">装箱单未上传</el-button>
</el-tab-pane>
</el-tabs>
</el-card>
<print-warehouse-receipt v-if="showWarehouseReceipt" :order-id="order.orderId" @close="showWarehouseReceipt=false" />
<print-lading-bill v-if="showLadingBill" :order-id="order.tidanNo" :transport-type="order.transportId" @close="showLadingBill=false" />
</div>
</template>
<script>
import { getOrder } from '@/api/ecw/order'
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import PrintWarehouseReceipt from './components/PrintWarehouseReceipt'
import PrintLadingBill from './components/PrintLadingBill'
export default {
name: "detail",
components: {
PrintWarehouseReceipt, PrintLadingBill
},
filters: {
customsTypeFilter(e, customsTypeList) {
if (e) return customsTypeList.find(item => item.value == e).label
},
transportFilter(e, transportList) {
if (e) return transportList.find(item => item.value == e).label
}
},
data() {
return {
// 遮罩层
loading: false,
order: null,
activeName: 'first',
orderId: 17,
tableData: [],
queryParams: {
pageNo: 1,
pageSize: 10,
},
activities: [{
content: '活动按期开始',
timestamp: '2018-04-15'
}, {
content: '通过审核',
timestamp: '2018-04-13'
}, {
content: '创建成功',
timestamp: '2018-04-11'
}],
customsTypeList: getDictDatas(DICT_TYPE.ECW_CUSTOMS_TYPE), //报关类型
transportList: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), //运输方式
showWarehouseReceipt: false, // 是否显示打印入仓单
showLadingBill: false, // 是否显示打印提单
}
},
created() {
if (this.$route.query.orderId) {
this.orderId = this.$route.query.orderId
this.getOrder();
}
},
methods: {
/** 查询列表 */
getOrder() {
let that = this
that.loading = true;
// 执行查询
getOrder(that.orderId).then(response => {
that.order = response.data;
});
},
}
};
</script>
<style scoped>
.card {
margin-bottom: 20px;
}
.card-title{
font-size: 18px;
font-weight: bold;
}
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>