pc_shop_site/pages/home/myDetail/components/orderDetailPart.vue

<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>