<template>
<div class="com-main com-margin-auto">
<div v-if="isLoading" v-loading="true" class="com-loading"></div>
<template v-else>
<section class="main-header">
<div class="main-header-mid flex between">
<h1>Job Name：{{ orderDetail.Sales_Order_Title_Job_Name }}</h1>
<img :src="orderDetail.user_logo" class="user_logo">
</div>
<div class="main-header-mid flex between">
<ul class="left">
<li class="left-i" @click="shareDialogVisible=true" v-if="isShow"><i class="el-icon-share"></i> <span>Client Tracking Share</span></li>
<li class="left-i" v-if="orderDetail.crm_pr_res?.length">
<image-list :data="orderDetail.crm_pr_res"/>
</li>
</ul>
<ul class="right">
<li v-if="orderDetail.Job_Group && isShow">Order Type: {{ orderDetail.Job_Group }}</li>
<li>Order No: {{ orderDetail.Reference }}</li>
<li>Order Date: {{ formatStepDesc(orderDetail.Sales_Order_Created) }}</li>
<li v-if="orderDetail.Expected_Delivery_Date">ETA: {{ formatStepDesc(orderDetail.Expected_Delivery_Date) }}</li>
<li v-if="isShow">Payment Status: {{ orderDetail.Payment_Status1 }}</li>
</ul>
</div>
<div class="steps">
<el-steps :active="comOrderState" align-center finish-status="success" process-status="wait">
<el-step title="Confirmed" :description="formatStepDesc(orderDetail.Order_Confirm)">
</el-step>
<el-step title="In Production" :description="formatStepDesc(orderDetail.Sampling_Factory_Confirm)"></el-step>
<el-step title="QC Inspection" :description="formatStepDesc(orderDetail.GZ_WH)"></el-step>
<el-step title="International Shipment" :description="formatStepDesc(orderDetail.International_transshipment)"></el-step>
<el-step title="AU Warehouse" :description="formatStepDesc(orderDetail.AU_WH)"></el-step>
<el-step :title="packageQty<productQty?'Shipped':'Domestic Delivery'" :description="formatStepDesc(orderDetail.AU_WH_Client)"></el-step>
<el-step title="Delivered" :description="formatStepDesc(orderDetail.Delivered_time)"></el-step>
</el-steps>
</div>
</section>
<section class="main-custom">
<p class="sharing-title">Customer information</p>
<div>
<p class="sharing-subtitle">{{isShow?'Billing':'Supplier'}} Address</p>
<div class="sharing-address">
<p>{{ orderDetail.Account_Name_name }}</p>
<p>{{ orderDetail.Billing_Unit_Building_Name }}</p>
<p>{{ orderDetail.Billing_Street }}</p>
<p>{{ orderDetail.Billing_City }}</p>
<p>{{ orderDetail.Billing_State }}</p>
<p>{{ orderDetail.Billing_Code }}</p>
<p>{{ orderDetail.Billing_Country }}</p>
</div>
</div>
<div>
<p class="sharing-subtitle">Shipping Address</p>
<div class="sharing-address">
<p>{{ orderDetail.Shipping_Unit_Building_Name }}</p>
<p>{{ orderDetail.Shipping_Street }}</p>
<p>{{ orderDetail.Shipping_City }}</p>
<p>{{ orderDetail.Shipping_State }}</p>
<p>{{ orderDetail.Shipping_Code }}</p>
<p>{{ orderDetail.Shipping_Country }}</p>
</div>
</div>
</section>
<section>
<p class="sharing-title">Shipping information</p>
<el-table
:data="orderDetail.shipping_tracking"
style="width: 100%"
:header-cell-style="{
background: '#F7F8FC',
color: '#101010',
fontWeight: 'normal'
}">
<el-table-column type="expand" style="padding: 0;">
<template slot-scope="props">
<el-table
:data="props.row.test_pkg_details"
style="margin-left: 50px; width: calc(100% - 50px);"
:header-cell-style="{
background: '#F7F8FC',
color: '#101010',
fontWeight: 'normal'
}">
<el-table-column prop="Product_name" label="Item & Description"></el-table-column>
<el-table-column prop="Quantity_to_pack" label="QTY" width="450"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="Title" label="Job Name"> </el-table-column>
<el-table-column prop="Courier" label="Carrier"></el-table-column>
<el-table-column prop="Tracking_No" label="Tracking#"></el-table-column>
<el-table-column prop="Package_Status" label="Shipment Status"></el-table-column>
<el-table-column label="Delivery Address" width="250">
<template slot-scope="scope">
<span>
{{ scope.row.Shipping_Unit_Building_Name }}<br>
{{ scope.row.Shipping_Street }}<br>
{{ scope.row.Shipping_City }}<br>
{{ scope.row.Shipping_State }}
</span>
</template>
</el-table-column>
<el-table-column prop="Tracking_URL" label="" width="200">
<template slot-scope="scope" v-if="scope.row.Tracking_URL">
<el-button
size="mini" @click.native="openTracking_URL(scope.row.Tracking_URL)"
style="background-color: rgb(0, 33, 59); color: #fff" plain>TRACK SHIPMENT</el-button></template>
</el-table-column>
</el-table>
</section>
<section class="orderTable">
<p class="sharing-title">Products Information</p>
<el-table
:data="orderDetail.sales_orders_details"
style="width: 100%"
:header-cell-style="{
background: '#fff',
color: '#101010',
fontWeight: 'normal'
}">
<el-table-column type="index" label="S.NO" width="70"> </el-table-column>
<el-table-column label="Product Name" min-width="300">
<template slot-scope="scope">
<p class="colorBlue" >{{ scope.row.product_name }}</p>
<p v-html="scope.row.product_description"></p>
<!-- <p :class="scope.row.showMore?'ellipsis':''" v-html="scope.row.product_description"></p>
<p class="colorBlue cursor" @click="toggleShow(scope.row)" v-if="scope.row.product_description">{{scope.row.showMore?'Show More':'Conceal'}}<i :class="scope.row.showMore?'el-icon-caret-bottom':'el-icon-caret-top'"></i></p> -->
</template>
</el-table-column>
<el-table-column prop="quantity" label="Quantity" align="left" :width="isShow?125:200">
</el-table-column>
<template v-if="isShow">
<el-table-column prop="list_price" :label="`List Price(${comCurrency})`" width="125">
<template slot-scope="scope">
{{ transformNumber(scope.row.list_price) }}
</template>
</el-table-column>
<el-table-column prop="amount" :label="`Amount(${comCurrency})`" width="125">
<template slot-scope="scope">
{{ transformNumber(scope.row.amount) }}
</template>
</el-table-column>
<el-table-column prop="Tax" :label="`Tax(${comCurrency})`" width="125">
<template slot-scope="scope">
{{ transformNumber(scope.row.Tax) }}
</template>
</el-table-column>
<el-table-column prop="Discount" :label="`Discount(${comCurrency})`" width="125">
<template slot-scope="scope">
{{ transformNumber(scope.row.Discount) }}
</template>
</el-table-column>
<el-table-column prop="net_total" :label="`Total(${comCurrency})`" width="125">
<template slot-scope="scope">
{{ transformNumber(scope.row.net_total) }}
</template>
</el-table-column>
</template>
</el-table>
<div class="table-wrap" v-if="isShow">
<table class="total">
<tr><td>Sub Total</td><td>{{comCurrency}} {{ transformNumber(orderDetail.Sub_Total) }}</td></tr>
<tr><td>Total Taxes</td><td>{{comCurrency}} {{ transformNumber(orderDetail.Tax_Total) }}</td></tr>
<tr><td>Total Discount</td><td>{{comCurrency}} {{ transformNumber(orderDetail.Total_Including_Discount) }}</td></tr>
<tr><td>Adjustment</td><td>{{comCurrency}} {{ transformNumber(orderDetail.Total_Adjustment) }}</td></tr>
<tr><td>Grand Total</td><td>{{comCurrency}} {{ transformNumber(orderDetail.Grand_Total) }}</td></tr>
</table>
</div>
<template v-if="isShow">
<p class="notes-1">Notes</p>
<p class="notes-2">Terms & conditions</p>
<p class="notes-2">Artwork Approval</p>
<p class="notes-3">{{ orderDetail.Subject }}</p>
</template>
</section>
</template>
<el-dialog
:lock-scroll=false
:visible.sync="urlDialogShow"
center width="850px"
top="20vh">
<iframe
:src="Tracking_URL"
style="width:100%;height:500px;"
frameborder="0"></iframe>
</el-dialog>
<export-dialog :emailForm="shareForm" :visible.sync="shareDialogVisible" :title="'Client Tracking Share (no pricing displayed)'" :labelShow=false></export-dialog>
</div>
</template>
<script>
import { round } from '@/utils/price.js'
export default {
name: "OrderDetailPart",
props:{
isShow:{ // 订单分享页面隐藏元素
type:Boolean,
default: true
},
},
data() {
return {
orderDetail:{},
isLoading: true,
packageTable: [],
urlDialogShow: false,
shareDialogVisible: false,
shareForm:{
Link:''
},
Tracking_URL: '',
stepConfig:{
'Order Confirmed':1,
'Factory Confirmed':2,
'GZ WH':3,
'Transshipment':4,
'AU WH':5,
'AUWH - Client':6,
'Completed Sales Order':7
},
packageQty:0,
productQty:0,
};
},
computed:{
comCurrency(){
return this.orderDetail.Currency
},
comOrderState(){
if(this.orderDetail.Order_Stage ==='Cancelled'){
return 0;
}
if(this.orderDetail.Order_Stage !=='Completed Sales Order'){
return this.stepConfig[this.orderDetail.Order_Stage]
}else{
return this.orderDetail.shipping_isDelivered?7:6;
}
}
},
mounted() {
this.getOrderDetail();
},
methods: {
getOrderDetail() {
let path = ''
let data = {}
if (this.isShow) {
const { id } = this.$store.state.userInfo;
const { crm, id: queryId } = this.$route.query;
path = '/crmdata/orders_detail';
this.shareForm.Link = `https://www.trackship.com.au/orderShare/${id}/${crm}/${queryId}`;
data = { accounts_id: crm, id: queryId };
}else{
const { uid, aid, id } = this.$route.params;
path = '/crmdata/showOrdersDetail';
data = { user_id: uid, accounts_id: aid, id };
}
this.$axios
.post(path,data)
.then((res) => {
if (res.result === null) {
this.$router.replace('/')
return
}
this.orderDetail = res.result;
if(this.orderDetail.shipping_tracking?.length){
this.orderDetail.shipping_tracking.forEach(items=>{
// 取包裹的到达时间
if(items.Package_Status === 'Delivered' ){
!this.orderDetail.Delivered_time && this.$set(this.orderDetail,'Delivered_time',items['Delivered_Date'])
if(items['Delivered_Date'] > this.orderDetail['Delivered_time'] ){
this.$set(this.orderDetail,'Delivered_time',items['Delivered_Date'])
}
this.$set(this.orderDetail,'shipping_isDelivered',true)
}else{
this.$set(this.orderDetail,'shipping_isDelivered',false)
}
if(items.test_pkg_details?.length){
items.test_pkg_details.forEach(item=>{
this.$set(item,'Courier',items.Courier)
this.$set(item,'Tracking_No',items['Tracking_No'])
this.$set(item,'Package_Status',items['Package_Status'])
this.$set(item,'Tracking_URL',items['Tracking_URL'])
this.packageQty += +item.Quantity_to_pack
})
}
})
}
if(this.orderDetail.sales_orders_details?.length){
if (this.isShow) {
this.orderDetail.sales_orders_details.forEach(items => {
this.$set(items, 'showMore', true);
this.productQty += +items.quantity;
});
} else {
this.orderDetail.sales_orders_details = this.orderDetail.sales_orders_details.filter(item => {
return item.product_Product_Code !== "PC Setup Service" && item.product_Product_Code !== "PC Freight";
}).map(item => {
this.$set(item, 'showMore', true);
this.productQty += +item.quantity;
return item;
});
}
}
this.isLoading=false
});
},
transformNumber(value) {
return round(Number(value)).toFixed(2)
},
formatStepDesc(date, isUnix = false) {
return this.$utils.formatTime(date, 'DD/MM/YYYY',isUnix)
},
toggleShow(row){
row.showMore = !row.showMore
},
openTracking_URL(url){
this.Tracking_URL= url
this.urlDialogShow= true
}
}
};
</script>
<style lang="scss" scoped>
@import '../detail.scss';
</style>