doctor-admin-components 1.0.4 → 1.0.6-beta.0

package/packages/src/views/biz/contractTracing/contractSummary.vue

@@ -0,0 +1,1012 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <el-row>
+        <el-col :span="12">
+          {{
+            $t("contractDetail.contractNo") +
+            ":" +
+            (this.contract && this.contract.contractNo
+              ? this.contract.contractNo
+              : "")
+          }}
+        </el-col>
+        <el-col :span="12">
+          <div
+            v-if="
+              contract.contractSignTime &&
+              isOvertime(contract.contractSignTime, 14)
+            "
+          >
+            {{
+              depositStatus == "not_received"
+                ? "【超时未收定金】提醒：您已于【" +
+                  utc2local(contract.contractSignTime, "YYYY-MM-DD") +
+                  "】 签订合同，定金款已超过【" +
+                  getDays(contract.contractSignTime) +
+                  "】天未收到"
+                : depositStatus == "not_paid"
+                ? "【超时未付定金】提醒：您已于【" +
+                  utc2local(contract.contractSignTime, "YYYY-MM-DD") +
+                  "】 签订合同，定金款已超过【" +
+                  getDays(contract.contractSignTime) +
+                  "】天未支付"
+                : ""
+            }}
+          </div>
+          <div
+            v-if="
+              contract.contractSignTime &&
+              isOvertime(contract.contractSignTime, contract.latestShipment)
+            "
+          >
+            {{
+              deliveryStatus != "all_shipment"
+                ? "【超时未发货】提醒：当前合同约定签订后【" +
+                  contract.latestShipment +
+                  "】天发货；目前距合同签订【" +
+                  getDays(contract.contractSignTime) +
+                  "】天，卖家仍未全部发货；"
+                : "" + "】"
+            }}
+          </div>
+          <div
+            v-if="
+              deliveryStatus == 'all_shipment' &&
+              depositStatus == 'not_received'
+            "
+          >
+            {{ "【已发货未收定金】提醒：卖家已全部发货，定金款仍未收到" }}
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        {{
+          $t("contractDetail.relatedContract") +
+          ":" +
+          getContractNos(
+            (this.contract && this.contract.associationContractList) || []
+          )
+        }}
+      </el-row>
+    </el-card>
+
+    <el-card style="margin-top: 5px">
+      <div slot="header" class="clearfix">
+        <span>{{ $t("contractDetail.dealSummary") }}</span>
+        <!-- <el-button style="float: right; padding: 3px 0" type="text"
+          >操作按钮</el-button
+        > -->
+      </div>
+      <el-form :model="dealRecord">
+        <el-card>
+          <div slot="header" class="clearfix">
+            {{ $t("contractDetail.askOverview") }}
+          </div>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.askId')">
+                {{ dealRecord.askId }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.askName')">
+                {{ dealRecord.askName }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.dealTime')">
+                {{ dealRecord.dealTime }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.loadingCountry')">
+                {{ getCountryName("loading") }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.originCountry')">
+                {{ getCountryName("country") }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.shipmentDays')">
+                {{
+                  $t("contractDetail.tip1") +
+                  "[" +
+                  dealRecord.shipmentDays +
+                  "]" +
+                  $t("contractDetail.tip2")
+                }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.tip3')">
+                {{
+                  dealRecord.originCertificateFlag
+                    ? $t("contractDetail.yes")
+                    : $t("contractDetail.no")
+                }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.tip4')">
+                {{
+                  dealRecord.customsRejectionFlag
+                    ? $t("contractDetail.yes")
+                    : $t("contractDetail.no")
+                }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.paymentType')">
+                {{ dealRecord.paymentType }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('contractDetail.destination')">
+                {{ dealRecord.buyerDestination }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item :label="$t('contractDetail.description')">
+              {{ dealRecord.descriptions }}
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item :label="$t('contractDetail.preferredQuoteMethod')">
+              {{
+                getPreferredQuoteMethodLabel(dealRecord.preferredQuoteMethod)
+              }}
+            </el-form-item>
+          </el-row>
+        </el-card>
+
+        <el-card v-if="channel !== 'official-website'" class="mt5">
+          <div slot="header" class="clearfix">
+            <span class="text item">公司信息</span>
+          </div>
+          <el-row>
+            <el-col :span="12">
+              <div class="text item">
+                {{ "卖方" }}
+              </div>
+              <el-form-item label="公司名称" prop="sellerCompanyName">
+                {{ dealRecord.sellerCompanyName }}
+              </el-form-item>
+              <el-form-item label="公司地址">
+                {{ dealRecord.sellerCompanyAddress }}
+              </el-form-item>
+              <el-form-item label="联系人">
+                {{
+                  dealRecord.contactLastname + " " + dealRecord.contactFirstname
+                }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="text item">
+                {{ "买方" }}
+              </div>
+              <el-form-item label="公司名称" prop="buyerCompanyName">
+                {{
+                  dealRecord.buyerCompanyName || dealRecord.buyerCompanyNameCn
+                }}
+              </el-form-item>
+              <el-form-item label="公司地址" prop="buyerCompanyName">
+                {{ dealRecord.buyerCompanyAddress }}
+              </el-form-item>
+              <el-form-item label="联系人">
+                {{ dealRecord.buyerLastname + " " + dealRecord.buyerFirstname }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="mt5">
+          <div slot="header" class="clearfix">
+            <span class="text item">{{
+              $t("contractDetail.commodityInfo")
+            }}</span>
+          </div>
+          <el-table
+            :data="dealRecord.dealRecordDetailList"
+            small="mini"
+            style="width: 100%"
+            :header-cell-style="{ 'text-align': 'center' }"
+            :cell-style="{ 'text-align': 'center' }"
+          >
+            <el-table-column
+              :label="$t('contractDetail.commodityPicture')"
+              width="150"
+            >
+              <template v-slot:default="scope">
+                <image-preview
+                  :src="scope.row.askCover"
+                  :width="50"
+                  :height="50"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="askName"
+              :label="$t('contractDetail.askName')"
+              width="100"
+            >
+            </el-table-column>
+            <el-table-column
+              v-if="channel !== 'official-website'"
+              :label="$t('contractDetail.categoryName')"
+              prop="categoryName"
+            >
+            </el-table-column>
+            <el-table-column
+              v-if="channel !== 'official-website'"
+              :label="$t('contractDetail.subCategory')"
+              prop="subCategoryName"
+              width="110"
+            >
+            </el-table-column>
+            <el-table-column
+              :label="$t('contractDetail.packaging')"
+              prop="packingMethod"
+              width="90"
+            />
+            <el-table-column
+              prop="descriptions"
+              :label="$t('contractDetail.description')"
+              width="160"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="weight"
+              :label="$t('contractDetail.weight')"
+              width="90px"
+            >
+            </el-table-column>
+            <el-table-column
+              v-if="channel !== 'official-website'"
+              prop="sllerPrice"
+              :label="$t('contractDetail.sellerPrice')"
+              width="120"
+            >
+              <template slot-scope="scope">
+                <span v-if="dealRecord.quoteType == 'FIXED'">
+                  {{ "$" + scope.row.sllerPrice }}
+                </span>
+                <span v-else-if="dealRecord.quoteType == 'CMX'">
+                  {{ "CMX - " + scope.row.sllerPrice }}
+                </span>
+                <span v-else>
+                  {{ scope.row.sllerPrice + "%LME" }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="quotePrice"
+              :label="$t('contractDetail.quotePrice')"
+              width="120"
+            >
+              <template slot-scope="scope">
+                <span v-if="dealRecord.quoteType == 'FIXED'">
+                  {{ "$" + scope.row.quotePrice }}
+                </span>
+                <span v-else-if="dealRecord.quoteType == 'CMX'">
+                  {{ "CMX - " + scope.row.quotePrice }}
+                </span>
+                <span v-else>
+                  {{ scope.row.quotePrice + "%LME" }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="totalQuote"
+              :label="$t('contractDetail.totalQuote')"
+              width="120"
+            >
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-form>
+
+      <el-card class="mt5">
+        <div slot="header" class="clearfix">
+          <span class="text item">{{ $t("contractDetail.invoiceInfo") }}</span>
+          <el-button
+            style="float: right; padding: 3px 0"
+            type="text"
+            @click="collectInvoice"
+            >{{ $t("contractDetail.closeInvoiceInfo") }}
+            <i class="el-icon-arrow-down"></i>
+          </el-button>
+          <el-button v-if="channel !== 'official-website'" style="padding: 3px 0" type="text" @click="viceDocuments"
+            >{{ $t("contractDetail.viewPaymentInfo") }}
+          </el-button>
+        </div>
+        <el-table :data="invoiceList" v-if="invoiceActive">
+          <el-table-column
+            :label="$t('contractDetail.invoiceNo')"
+            align="center"
+            prop="invoiceNo"
+            width="165"
+          />
+          <el-table-column
+            :label="$t('contractDetail.contractNo')"
+            align="center"
+            prop="contractNo"
+            width="155"
+          />
+          <el-table-column
+            :label="$t('contractDetail.invoiceType')"
+            align="center"
+            prop="invoiceType"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.contract_type"
+                :value="scope.row.invoiceType"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('contractDetail.invoiceSpecies')"
+            align="center"
+            prop="invoiceSpecies"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.invoice_species"
+                :value="scope.row.invoiceSpecies"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('contractDetail.invoiceDate')"
+            prop="createTime"
+            width="120"
+          ></el-table-column>
+          <el-table-column
+            :label="$t('contractDetail.issuer')"
+            align="center"
+            prop="billCompanyName"
+            width="150"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            :label="$t('contractDetail.billTo')"
+            align="center"
+            prop="receiveCompanyName"
+            width="150"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="未付/未收金额"
+            align="center"
+            prop="remainingAmount"
+            width="120"
+          />
+          <el-table-column
+            label="已付/已收金额"
+            align="center"
+            prop="remainingAmount"
+            width="120"
+          >
+            <template slot-scope="{ row }">
+              {{ row.amount - row.remainingAmount }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="总金额"
+            align="center"
+            prop="amount"
+            width="100"
+          />
+          <el-table-column
+            :label="$t('contractDetail.quoteType')"
+            align="center"
+            prop="quoteType"
+            width="120"
+          />
+
+          <el-table-column
+            :label="$t('contractDetail.paymentTerms')"
+            align="center"
+            prop="paymentTerms"
+            show-overflow-tooltip
+            width="120"
+          />
+
+          <el-table-column
+            v-if="channel !== 'official-website'"
+            :label="$t('contractDetail.remark')"
+            align="center"
+            prop="remark"
+            show-overflow-tooltip
+          />
+          <el-table-column :label="$t('contractDetail.operate')"
+            v-if="channel !== 'official-website'"
+          >
+            <template slot-scope="{ row }">
+              <el-button
+                v-if="
+                  contract.contractType == 'sale' &&
+                  row.invoiceSpecies != 'proforma'
+                "
+                type="text"
+                @click="handleUrge(row)"
+                >一键催款</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <el-card class="mt5">
+        <el-collapse v-model="shipmentActiveName" accordion>
+          <el-collapse-item name="0">
+            <template slot="title">
+              {{ $t("contractDetail.shipping") }}
+            </template>
+            <el-row v-if="channel !== 'official-website'" class="mb10">
+              <el-col :span="2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="handleShipmentStatus('shipped')"
+                  >全部发货</el-button
+                >
+              </el-col>
+              <el-col :span="2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="handleShipmentStatus('arrived_port')"
+                  >全部到港</el-button
+                >
+              </el-col>
+              <el-col :span="2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="handleShipmentStatus('delivered')"
+                  >全部到货</el-button
+                >
+              </el-col>
+            </el-row>
+            <el-table :data="shipmentList">
+              <el-table-column
+                :label="$t('contractDetail.billOfLadingNo')"
+                align="center"
+                prop="billOfLadingNo"
+                width="130"
+              >
+                <template slot-scope="scope">
+                  <el-button type="text" @click="openShipmentDetail(scope.row)">
+                    {{ scope.row.billOfLadingNo }}</el-button
+                  >
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('contractDetail.conrainerNo')"
+                align="center"
+                width="130"
+              >
+                <template slot-scope="{ row }">
+                  <div style="white-space: pre-line !important">
+                    {{ row.containerNoList.join("\n") }}
+                  </div>
+                </template></el-table-column
+              >
+              <el-table-column
+                :label="$t('contractDetail.shipmentStatus')"
+                align="center"
+                width="130"
+              >
+                <template slot-scope="scope">
+                  <dict-tag
+                    :options="dict.type.shipment_status"
+                    :value="scope.row.shipmentStatus"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('contractDetail.chargingStatus')"
+                align="center"
+                width="130"
+              >
+                <template slot-scope="scope">
+                  <dict-tag
+                    :options="dict.type.charging_status"
+                    :value="scope.row.chargingStatus"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('contractDetail.destination')"
+                align="center"
+                prop="destinationPort"
+                width="150"
+              />
+              <el-table-column
+                label="ETD"
+                align="center"
+                prop="etd"
+                width="180"
+              >
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.etd, "{y}-{m}-{d}") }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="ETA"
+                align="center"
+                prop="eta"
+                width="180"
+              >
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.eta, "{y}-{m}-{d}") }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="channel !== 'official-website'"
+                label="实际到港日"
+                align="center"
+                prop="actualArrivalDate"
+                width="180"
+              >
+                <template slot-scope="scope">
+                  <span>{{
+                    parseTime(scope.row.actualArrivalDate, "{y}-{m}-{d}")
+                  }}</span>
+                </template>
+              </el-table-column>
+
+              <el-table-column 
+                label="对应合同" 
+                align="center" 
+                width="160px"
+                v-if="channel !== 'official-website'"
+              >
+                <template slot-scope="scope">
+                  <span v-if="contract.contract == 'sale'">
+                    <el-button
+                      type="text"
+                      @click="viewContractDetail(scope.row.saleContractNo)"
+                    >
+                      {{ scope.row.saleContractNo }}
+                    </el-button>
+                  </span>
+                  <span v-else>
+                    <el-button
+                      type="text"
+                      @click="viewContractDetail(scope.row.purchaseContractNo)"
+                    >
+                      {{ scope.row.purchaseContractNo }}
+                    </el-button>
+                  </span>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('contractDetail.operate')"
+                align="center"
+                class-name="small-padding fixed-width"
+                width="150px"
+              >
+               查看物流？
+              </el-table-column>
+            </el-table>
+
+            <el-tabs v-model="activeName" type="card">
+              <el-tab-pane
+                v-for="(item, index) in shipmentList"
+                :key="index"
+                :name="index.toString()"
+                :label="item.billOfLadingNo"
+              >
+                <iframe
+                  :src="getGeekYumPage(item)"
+                  width="1100"
+                  height="600"
+                ></iframe>
+              </el-tab-pane>
+            </el-tabs>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </el-card>
+
+    <shipment-detail ref="shipmentDetail" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getBizDealRecordByAskId } from "../../../api/biz/bizDealRecord";
+import {
+  getBizContract,
+  getBizContractByNo,
+} from "../../../api/biz/bizContract";
+import {
+  listBizInvoice,
+  getInfoWithShipment,
+} from "../../../api/biz/bizInvoice";
+import {
+  listBizShipment,
+  getGeekYumToken,
+  updateAllShipmentStatus,
+} from "../../../api/biz/bizShipment";
+import { listContainerWithInvoice } from "../../../api/biz/bizContainer";
+import ShipmentDetail from "../bizShipment/detail.vue";
+
+export default {
+  name: "ContractSummary",
+  dicts: [
+    "contract_status",
+    "invoice_status",
+    "currency",
+    "invoice_species",
+    "document_type",
+    "completion_state",
+    "cmx_month",
+    "contract_type",
+    "shipment_status",
+    "charging_status",
+  ],
+  mixins: [],
+  components: { ShipmentDetail },
+  props: {
+    channel:{
+      type: String,
+      default: "",
+    }
+  },
+  data() {
+    return {
+      invoiceActive: true,
+      shipmentActiveName: "0",
+      activeName: "0",
+      contractId: null,
+      dealRecord: {},
+      contract: {},
+      invoiceList: [],
+      shipmentList: [],
+      depositStatus: null,
+      deliveryStatus: null,
+      preferredQuoteMethod: {
+        fixed: {
+          label: "FIXED",
+          labelZh: "固定价",
+        },
+        lme_seller: {
+          label: "LME(seller's option to fix)",
+          labelZh: "LME活价(卖家点价)",
+        },
+        lme_buyer: {
+          label: "LME(buyer's option to fix)",
+          labelZh: "LME活价(买家点价)",
+        },
+        cmx_buyer: {
+          label: "CMX(seller's option to fix)",
+          labelZh: "CMX活价(卖家点价))",
+        },
+        cmx_seller: {
+          label: "CMX(buyer's option to fix)",
+          labelZh: "CMX活价(买家点价)",
+        },
+      },
+      accessToken: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    const contractId = this.$route.params && this.$route.params.contractId;
+    this.contractId = contractId;
+    const deliveryStatus =
+      this.$route.query && this.$route.query.deliveryStatus;
+    this.deliveryStatus = deliveryStatus;
+    const depositStatus = this.$route.query && this.$route.query.depositStatus;
+    this.depositStatus = depositStatus;
+    this.getData();
+    this.getGeekYumToken();
+  },
+  computed: {
+    ...mapGetters(["language"]),
+    isChina() {
+      return ["zh-CN", "zh-TW","zh"].includes(this.language);
+    },
+  },
+  methods: {
+    getCountryName(type) {
+      if (type == "loading") {
+        return this.isChina
+          ? this.dealRecord?.loadingCountryNameCn
+          : this.dealRecord?.loadingCountryNameEn;
+      } else {
+        return this.isChina
+          ? this.dealRecord?.originCountryNameCn
+          : this.dealRecord?.originCountryNameEn;
+      }
+    },
+    openShipmentDetail(row) {
+      this.$refs.shipmentDetail.handleShow(row);
+    },
+    //查看合同详情
+    viewContractDetail(contractNo) {
+      getBizContractByNo(contractNo).then((res) => {
+        this.$router.push({
+          path: "/contract/tracing/detail/" + res.data.contractId,
+        });
+      });
+    },
+    //查看收付款列表
+    viceDocuments() {
+      this.$router.push({
+        name: "Documents",
+        params: { contractNo: this.contract.contractNo },
+      });
+    },
+    //收起展开发票
+    collectInvoice() {
+      this.invoiceActive = !this.invoiceActive;
+    },
+    //一键催款
+    handleUrge(invoice) {
+      const invoiceId = invoice.id;
+      getInfoWithShipment(invoiceId).then((res) => {
+        invoice = res.data;
+        const contractNo = invoice.contractNo || "待补充";
+        const invoiceNo = invoice.invoiceNo || "待补充";
+        const value = invoice.amount || "待补充";
+        const blNumber = invoice.billOfLadingNo || "待补充";
+        const containerNo = invoice.containerNoList || "待补充";
+        const eta = invoice.eta || "待补充";
+
+        const englishText = `Attention: Arrive notice. Please arrange the payment within 7 days after receiving this notice, in order to obtain telex BL and avoid unnecessary demurrage charges.
+TO: ${invoice.receiveCompanyName || "待补充"}
+Contract #: ${contractNo}
+INVOICE #: ${invoiceNo}
+Value: $${value}
+BL#: ${blNumber}
+Container#: ${containerNo}
+ETA: ${eta}
+
+温馨提示:到货通知。请贵司收到此通知后的7个工作日内安排支付货款，以便安排提单电放，避免产生不必要的滞箱费用。
+致：收货公司${invoice.receiveCompanyName || "待补充"}
+合同号：${contractNo}
+发票号：${invoiceNo}
+发票金额：$${value}
+提单号：${blNumber}
+集装箱号：${containerNo}
+预计到港：${eta}`;
+
+        // 创建临时 <textarea> 元素，将链接写入其中
+        const textArea = document.createElement("textarea");
+        textArea.value = englishText;
+
+        document.body.appendChild(textArea);
+
+        // 选中并复制链接
+        textArea.select();
+        document.execCommand("copy");
+
+        // 将 <textarea> 元素删除
+        document.body.removeChild(textArea);
+        this.$modal.msgSuccess("已复制到剪切板");
+      });
+    },
+
+    //处理装运状态
+    handleShipmentStatus(status) {
+      let statusCn =
+        status == "shipped"
+          ? "全部发货"
+          : status == "arrived_port"
+          ? "全部到港"
+          : "全部到货";
+
+      this.$prompt("", "请填写手动" + statusCn + "的原因", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputType: "textarea",
+        inputPlaceholder:
+          "请添加手动变为" +
+          statusCn +
+          "原因。填写后，可以在合同详情-备注里展示。",
+      })
+        .then(({ value }) => {
+          updateAllShipmentStatus({
+            contractId: this.contract.contractId,
+            shipmentStatus: status,
+            remark: value,
+          }).then(() => {
+            this.$message({
+              type: "success",
+              message: "变更成功",
+            });
+            this.getData();
+          });
+        })
+        .catch((e) => {
+          this.$message({
+            type: "info",
+            message: e,
+          });
+        });
+    },
+    getGeekYumPage(shipment) {
+      if (shipment.subNo) {
+        let url =
+          "https://tracking.geekyum.com/shipping/detail?bizNo=" +
+          shipment.bookingNo.toString() +
+          "&bizType=1&subNo=" +
+          shipment.subNo.toString() +
+          "&access_token=" +
+          this.accessToken;
+        url = url + (this.isChina ? "&lang=zh" : "&lang=en");
+        console.log(url);
+        return url;
+      }
+    },
+    getGeekYumToken() {
+      getGeekYumToken().then((res) => {
+        this.accessToken = res.msg;
+      });
+    },
+    getDays(date) {
+      const targetDate = new Date(date);
+      const currentDate = new Date();
+
+      // 计算时间差，返回毫秒数
+      const timeDifference = currentDate.getTime() - targetDate.getTime();
+
+      // 将毫秒数转换为天数
+      const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+      return daysDifference;
+    },
+    //是否超时
+    isOvertime(date, days) {
+      const targetDate = new Date(date);
+      const currentDate = new Date();
+
+      // 添加14天
+      targetDate.setDate(targetDate.getDate() + days);
+
+      if (targetDate < currentDate) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    getPreferredQuoteMethodLabel(val) {
+      var preferredQuote = val?.split(",");
+      if (preferredQuote) {
+        return preferredQuote
+          ?.map((i) => {
+            return this.isChina
+              ? this.preferredQuoteMethod[i]?.labelZh
+              : this.preferredQuoteMethod[i].label;
+          })
+          .join();
+      } else {
+        return "";
+      }
+    },
+    getContractNos(contractList) {
+      return contractList?.map((i) => {
+        return (
+          i.contractNo +
+          " " +
+          this.selectDictLabelMapFun(
+            this.dict.type.contract_status,
+            i.contractStatus
+          ) +
+          ";"
+        );
+      });
+    },
+    
+    /**
+     * @description: 状态设置
+     * @param {*} contract_status
+     * @param {*} contractStatus
+     * @return {*}
+     */
+    selectDictLabelMapFun(contract_status ,contractStatus) {
+      if (contractStatus == "voided") {
+        return this.$t("contractDetail.voided");
+      } else if (contractStatus == "signed") {
+        return this.$t("contractDetail.signed");
+      } else {
+        return this.$t("contractDetail.Pending_Confirmation");
+      }
+    },
+    getData() {
+      getBizContract(this.contractId)
+        .then((res) => {
+          this.contract = res.data;
+        })
+        .then(() => {
+          getBizDealRecordByAskId(this.contract.askId).then((response) => {
+            this.dealRecord = response.data;
+            this.dealRecord.dealRecordDetailList.map((item) => {
+              if (item.imageList) {
+                item.askCover = item.imageList.toString();
+              }
+            });
+          });
+          listBizInvoice({
+            contractId: this.contractId,
+          }).then((response) => {
+            this.invoiceList = response.rows;
+          });
+          var queryParams = {};
+          if (this.contract.contractType == "sale") {
+            queryParams.saleContractId = this.contractId;
+          } else {
+            queryParams.purchaseContractId = this.contractId;
+          }
+          listContainerWithInvoice(queryParams).then((res) => {
+            var shipmentList = this.processData(res.rows);
+            this.shipmentList = shipmentList;
+          });
+        });
+    },
+    //数据处理
+    processData(data) {
+      const processedData = [];
+      const shipmentIds = new Set();
+      // Iterate over the data
+      for (const item of data) {
+        const shipmentId = item.shipmentId;
+        // If shipmentId is not seen before, add it to the set and process the item
+        if (!shipmentIds.has(shipmentId)) {
+          shipmentIds.add(shipmentId);
+          // Create a new object with shipmentId and initialize containerNoList
+          const processedItem = {
+            ...item,
+            shipmentId: shipmentId,
+            containerNoList: [],
+          };
+          // Iterate over the data again to find matching shipmentId
+          for (const innerItem of data) {
+            if (innerItem.shipmentId === shipmentId) {
+              processedItem.containerNoList.push(innerItem.containerNo);
+            }
+          }
+          // Add the processed item to the result array
+          processedData.push(processedItem);
+        }
+      }
+      return processedData;
+    },
+    //获取合同信息
+    getContract(contractId) {
+      getBizContract(contractId).then((res) => {
+        this.contract = res.data;
+      });
+    },
+    getDealRecord(askId) {
+      getBizDealRecordByAskId(askId).then((response) => {
+        this.dealRecord = response.data;
+        this.dealRecord.dealRecordDetailList.map((item) => {
+          if (item.imageList) {
+            item.askCover = item.imageList.toString();
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>