doctor-admin-components 1.0.14-beta.8 → 1.0.14-beta.81

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

@@ -1,188 +1,24 @@
 <template>
   <div class="app-container">
     <div class="info" id="printPdf">
-      <div class="type">
-        {{ contract.contractType == 'sale' ? 'Sales Contract' : 'Purchase Contract' }}
+      <div style="display: flex; justify-content: space-between; align-items: center">
+        <div class="type">  
+          {{ contract.contractType == 'sale' ? 'Sales Contract' : 'Purchase Contract' }}
+        </div>
+        <div class="type" style="text-align: right">Contract Date: {{ $formatDate(contract.createTime) && $formatDate(contract.createTime).split(' ')[0] }}</div>
       </div>
       <div class="title">TTYY INTERNATIONAL LIMITED</div>
       <div class="sub-title mb20">FLAT/RM 07, 12/F, CHEVALIER COMMERCIAL CENTRE 8, WANG HOI ROAD, KOWLOON BAY, KL, HONG KONG</div>
       <el-row class="mb10">
         <el-col :span="5">
-          {{ contract.contractType == 'sale' ? 'Sales Order #:' : 'Purchase Order' }}
+          {{ contract.contractType == 'sale' ? 'Sales Order#:' : 'Purchase Order#:' }}
         </el-col>
         <el-col :span="7">{{ contract.contractNo }}</el-col>
-        <el-col :span="5">{{ `Reference#: ${contract.reference}` }}</el-col>
-        <el-col :span="7"></el-col>
+        <el-col :span="7">Reference#: </el-col>
+        <el-col :span="5">{{ contract.reference }}</el-col>
       </el-row>
-      <div>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <div class="company">
-              <div class="company-type">Seller</div>
-              <div class="company-text">{{ contract.supplierContractCompany.companyEnglishName }}</div>
-              <div class="company-text">{{ contract.supplierContractCompany.address }}</div>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div class="company">
-              <div class="company-type">Buyer</div>
-              <div class="company-text">{{ contract.buyContractCompany.companyEnglishName }}</div>
-              <div class="company-text">{{ contract.buyContractCompany.address }}</div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-divider></el-divider>
-        <div class="item">
-          <el-table
-            :data="contract.contractDetailList"
-            :header-cell-style="{ backgroundColor: '#ffffff' }"
-            :row-style="{ border: 'none' }"
-            :summary-method="getSummaries"
-            show-summary
-          >
-            <el-table-column label="Description" align="center" prop="askName"></el-table-column>
-            <el-table-column label="Quantity" align="center" prop="weight">
-              <template slot-scope="scope">{{ CommonFormatNumber(scope.row.weight) }}MT</template>
-            </el-table-column>
-            <el-table-column label="Unit Price/MT" align="center" width="200">
-              <template slot-scope="{ row }">
-                <div v-if="contract.quoteType == 'FIXED'">
-                  <span v-if="contract.contractType == 'sale'">${{ row.quotePrice }}</span>
-                  <span v-else>${{ row.sllerPrice }}</span>
-                </div>
-                <div v-if="isCmx(contract.quoteType)">
-                  <span v-if="contract.contractType == 'sale'">{{ `$(${contract.quoteType}-${row.quotePrice})*2204.62` }}</span>
-                  <span v-else>{{ `$(${contract.quoteType}-${row.sllerPrice})*2204.62` }}</span>
-                </div>
-                <div v-if="isLme(contract.quoteType)">
-                  <div v-if="checkElementItem(row.elementContent)">
-                    {{ contract.contractType == 'sale' ? row.quotePriceFormula : row.sellerPriceFormula }}
-                  </div>
-                  <div v-else>
-                    <span v-if="contract.contractType == 'sale'">{{ ` $(${contract.quoteType} *${row.quotePrice}%) ` }}</span>
-                    <span v-else>{{ `$(${contract.quoteType} *${row.sllerPrice}%)` }}</span>
-                  </div>
-                </div>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="Service fee/MT" align="center">
-              <template slot-scope="scope">${{ scope.row.serviceFee }}</template>
-            </el-table-column>
-
-            <!--总价-->
-            <el-table-column label="Net Unit Price/MT" align="center">
-              <template slot-scope="scope">
-                <span v-if="contract.quoteType == 'FIXED' && contract.contractType == 'purchase'">{{ '$' + (scope.row.sllerPrice - Number(scope.row.serviceFee)) }}</span>
-                <span v-else-if="contract.quoteType == 'FIXED' && contract.contractType == 'sale'">
-                  {{ '$' + (Number(scope.row.quotePrice) + Number(scope.row.serviceFee)) }}
-                </span>
-                <span v-else-if="isLme(contract.quoteType) && contract.contractType == 'purchase'">
-                  <div v-if="checkElementItem(scope.row.elementContent)">
-                    {{ scope.row.sellerPriceFormula + '- $' + Number(scope.row.serviceFee) }}
-                  </div>
-                  <div v-else>
-                    {{ '$(' + contract.quoteType + ' * ' + scope.row.sllerPrice + '%) - $' + Number(scope.row.serviceFee) }}
-                  </div>
-                </span>
-                <span v-else-if="isLme(contract.quoteType) && contract.contractType == 'sale'">
-                  <div v-if="checkElementItem(scope.row.elementContent)">
-                    {{ scope.row.quotePriceFormula + '+ $' + Number(scope.row.serviceFee) }}
-                  </div>
-                  <div v-else>
-                    {{ '$(' + contract.quoteType + ' * ' + scope.row.quotePrice + '%) + $' + Number(scope.row.serviceFee) }}
-                  </div>
-                </span>
-                <span v-else-if="isCmx(contract.quoteType) && contract.contractType == 'purchase'">
-                  {{ '${(' + contract.quoteType + '-' + scope.row.sllerPrice + ')*2204.62} - $' + Number(scope.row.serviceFee) }}
-                </span>
-                <span v-else>
-                  {{ '${(' + contract.quoteType + '-' + scope.row.quotePrice + ')*2204.62} + $' + Number(scope.row.serviceFee) }}
-                </span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <el-divider></el-divider>
-
-        <el-descriptions :column="1" :labelStyle="{ fontWeight: 'bold' }">
-          <el-descriptions-item label="Service Fee">{{ contract.serviceFee }}</el-descriptions-item>
-          <el-descriptions-item label="Freight Terms">{{ contract.freightTerms }}</el-descriptions-item>
-          <el-descriptions-item label="Payment Terms">
-            <div v-if="(contract.balanceDays || contract.balanceDays == 0) && contract.balance && contract.balancePaymentType && contract.balancePaymentForm">
-              <span v-if="contract.deposit"> Deposit ratio {{ contract.deposit }}% {{ contract.depositDays }} days {{ contract.depositPaymentForm }} and </span>
-              {{ contract.balance }}% balance {{ contract.balancePaymentType }} paid {{ contract.balanceDays }} days {{ contract.balancePaymentForm }}
-              {{ contract.otherPaymentTerm }}
-            </div>
-            <div v-else>{{ contract.otherPaymentTerm }}</div>
-          </el-descriptions-item>
-          <el-descriptions-item label="Price Fixing Option">
-            <div v-if="contract.livePriceSwitch">
-              {{ contract.livePriceDays }} Days {{ contract.livePriceForm }} cargo arrives at POD in
-              {{ contract.livePriceUsertype }}
-              {{ contract.livePriceType }}'s option
-            </div>
-          </el-descriptions-item>
-
-          <el-descriptions-item label="Origin Country/Region">{{ contract.originCountry }}</el-descriptions-item>
-          <el-descriptions-item label="Loading Country/Region">{{ contract.loadingCountry }}</el-descriptions-item>
-          <el-descriptions-item v-if="contract.freightTerms != 'EXW'" label="Destination">{{ contract.destination }}</el-descriptions-item>
-          <el-descriptions-item v-else label="EXW Address">{{ contract.exw }}</el-descriptions-item>
-          <el-descriptions-item label="Special Instructions">
-            {{ contract.numberOfContainersForTwenty }}x 20' Container
-            <br />
-            {{ contract.numberOfContainersForForty }}x 40' Container
-            <br />
-            {{ contract.numberOfContainersForTwentyOrForty }}x 20'/40' Container
-            <br />
-            More or less &lt; {{ contract.toleranceFloat * 100 }}%
-            <br />
-          </el-descriptions-item>
-          <el-descriptions-item label="Latest shipment"> within {{ contract.latestShipment }} days of the contract signed date </el-descriptions-item>
-          <el-descriptions-item label="Required documents">
-            <el-tag :key="tag" v-for="tag in dynamicTags" class="mr5">{{ tag }}</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="Weight Tolerance">{{ contract.weightTolerance }}%</el-descriptions-item>
-
-          <el-descriptions-item label="Quality certificate" v-if="contract.qualityCertificateSwitch">{{ contract.qualityCertificate }}</el-descriptions-item>
-          <el-descriptions-item label="Claim" v-if="contract.claimSwitch">{{ contract.claim }}</el-descriptions-item>
-
-          <el-descriptions-item label="Arbitration" v-if="contract.arbitrationSwitch">{{ contract.arbitration }}</el-descriptions-item>
-          <el-descriptions-item label="Memo " v-if="contract.memoSwitch">{{ contract.memo }}</el-descriptions-item>
-          <el-descriptions-item v-for="(item, index) in this.customClause" :label="item.title" :key="index">{{ item.content }}</el-descriptions-item>
-        </el-descriptions>
-        <div class="sign">Please sign below and return.</div>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <div class="company-sign">
-              <el-row>
-                <el-col :span="5">
-                  <div class="company-sign-title">Seller</div>
-                </el-col>
-              </el-row>
-              <div class="company-sign-title">Company Name:</div>
-              <div class="company-sign-text">{{ contract.supplierContractCompany.companyEnglishName }}</div>
-              <div class="company-sign-title">Signature:</div>
-              <div class="company-sign-title">Date:</div>
-              <div class="company-sign-text">{{ parseTime(contract.createTime, '{m}/{d}/{y}') }}</div>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div class="company-sign">
-              <el-row>
-                <el-col :span="5">
-                  <div class="company-sign-title">Buyer</div>
-                </el-col>
-              </el-row>
-              <div class="company-sign-title">Company Name:</div>
-              <div class="company-sign-text">{{ contract.buyContractCompany.companyEnglishName }}</div>
-              <div class="company-sign-title">Signature:</div>
-              <div class="company-sign-title">Date:</div>
-              <div class="company-sign-text">{{ parseTime(contract.createTime, '{m}/{d}/{y}') }}</div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+      <info :form="contract" :dynamicTags="dynamicTags" :customClause="customClause"></info>
+      <contract-clause v-if="contract.contractClause" style="margin-top:60px" :form="contract"></contract-clause>
       <div style="margin-left: 100px; margin-top: 20px">FLAT/RM 07, 12/F, CHEVALIER COMMERCIAL CENTRE 8, WANG HOI ROAD, KOWLOON BAY, KL, HONG KONG</div>
     </div>
     <div class="footer" v-if="!printModel">
@@ -194,6 +30,8 @@
 <script>
 import { exportPdf } from '../../../utils/pdf'
 import { CommonFormatNumber } from '../../../utils/MycommonUtil'
+import ContractClause from './contractClause'
+import Info from './info'
 
 export default {
   name: 'ContractPdf',
@@ -228,7 +66,10 @@ export default {
       default: () => []
     }
   },
-  components: {},
+  components: {
+    ContractClause,
+    Info
+  },
   data() {
     return {
       //争议选项

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

@@ -2,7 +2,7 @@
  * @Author: zhangpengwei 15038779532@163.com
  * @Date: 2023-08-28 19:04:39
  * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
- * @LastEditTime: 2024-07-17 15:35:31
+ * @LastEditTime: 2025-01-20 14:15:12
  * @FilePath: /doctor-admin-components/packages/src/views/biz/contractTracing/contractSummary.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,42 +11,45 @@
     <el-card class="box-card">
       <el-row>
         <el-col :span="12">
-          {{ $t('contractDetail.contractNo') + ':' + (this.contract && this.contract.contractNo ? this.contract.contractNo : '') }}
+          {{ $t('contractDetail.contractNo') + ':' + (this.contract && this.contract.contractNo ?
+            this.contract.contractNo : '') }}
         </el-col>
         <el-col v-if="channel !== 'official-website'" :span="12">
           <div v-if="contract.contractSignTime && isOvertime(contract.contractSignTime, 14)">
             {{
               depositStatus == 'not_received'
                 ? '【超时未收定金】提醒：您已于【' +
-                  utc2local(contract.contractSignTime, 'YYYY-MM-DD') +
-                  '】 签订合同，定金款已超过【' +
-                  getDays(contract.contractSignTime) +
-                  '】天未收到'
+                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) +
-                  '】天，卖家仍未全部发货；'
+                contract.latestShipment +
+                '】天发货；目前距合同签订【' +
+                getDays(contract.contractSignTime) +
+                '】天，卖家仍未全部发货；'
                 : '' + '】'
             }}
           </div>
-          <div v-if="deliveryStatus == 'all_shipment' && depositStatus == 'not_received'">{{ '【已发货未收定金】提醒：卖家已全部发货，定金款仍未收到' }}</div>
+          <div v-if="deliveryStatus == 'all_shipment' && depositStatus == 'not_received'">{{
+            '【已发货未收定金】提醒：卖家已全部发货，定金款仍未收到' }}</div>
         </el-col>
       </el-row>
       <el-row v-if="channel !== 'official-website'">
-        {{ $t('contractDetail.relatedContract') + ':' + getContractNos((this.contract && this.contract.associationContractList) || []) }}
+        {{ $t('contractDetail.relatedContract') + ':' + getContractNos((this.contract &&
+          this.contract.associationContractList) ||[]) }}
       </el-row>
     </el-card>
 
@@ -101,7 +104,8 @@
               <el-form-item :label="$t('contractDetail.paymentType')">{{ dealRecord.paymentType }}</el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item v-if="dealRecord.paymentType != 'EXW'" :label="$t('contractDetail.destination')">{{ dealRecord.buyerDestination }}</el-form-item>
+              <el-form-item v-if="dealRecord.paymentType != 'EXW'" :label="$t('contractDetail.destination')">{{
+                dealRecord.buyerDestination }}</el-form-item>
               <el-form-item v-else label="EXW">{{ dealRecord.exw }}</el-form-item>
             </el-col>
           </el-row>
@@ -116,7 +120,8 @@
             </el-col>
             <!-- 买家点价 -->
             <el-col :span="6">
-              <div class="share" v-if="showPricing" style="right: 100px" @click.stop="openPriceFix">{{ $t('index.priceFix') }}</div>
+              <div class="share" v-if="showPricing" style="right: 100px" @click.stop="openPriceFix">{{
+                $t('index.priceFix') }}</div>
             </el-col>
           </el-row>
         </el-card>
@@ -151,43 +156,45 @@
               {{ $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 :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="channel === 'official-website' ? 200 : 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 prop="askName" :label="$t('contractDetail.askName')"
+              :width="channel === 'official-website' ? 200 : 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="channel === 'official-website' ? 200 : 160"></el-table-column>
+            <el-table-column prop="descriptions" :label="$t('contractDetail.description')"
+              :width="channel === 'official-website' ? 200 : 160"></el-table-column>
             <el-table-column prop="weight" :label="$t('contractDetail.weight')" width="120px">
               <template slot-scope="scope">
                 {{ CommonFormatNumber(scope.row.weight) }}
               </template>
             </el-table-column>
-            <el-table-column v-if="channel !== 'official-website'" prop="sllerPrice" :label="$t('contractDetail.sellerPrice')" width="120">
+            <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.sellerPriceFormula || scope.row.sllerPrice + '%LME' }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="quotePrice" :label="$t('contractDetail.quotePrice')" :width="channel === 'official-website' ? 180 : 120">
+            <el-table-column prop="quotePrice" :label="$t('contractDetail.quotePrice')"
+              :width="channel === 'official-website' ? 180 : 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.quotePriceFormula || scope.row.quotePrice + '%LME' }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="totalQuote" :label="$t('contractDetail.totalQuote')" :width="channel === 'official-website' ? 180 : 120"></el-table-column>
+            <el-table-column prop="totalQuote" :label="$t('contractDetail.totalQuote')"
+              :width="channel === 'official-website' ? 180 : 120"></el-table-column>
           </el-table>
         </el-card>
       </el-form>
@@ -201,7 +208,7 @@
           </el-button>
           <el-button v-if="channel !== 'official-website'" style="padding: 3px 0" type="text" @click="viceDocuments">{{
             $t('contractDetail.viewPaymentInfo')
-          }}</el-button>
+            }}</el-button>
         </div>
         <el-table :data="invoiceList" v-if="invoiceActive">
           <el-table-column :label="$t('contractDetail.invoiceNo')" align="center" prop="invoiceNo" width="165" />
@@ -211,34 +218,45 @@
               <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">
+          <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 v-if="channel !== 'official-website'" label="未付/未收金额" align="center" prop="remainingAmount" width="120" />
-          <el-table-column v-if="channel !== 'official-website'" label="已付/已收金额" align="center" prop="remainingAmount" width="120">
+          <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 v-if="channel !== 'official-website'" label="未付/未收金额" align="center" prop="remainingAmount"
+            width="120" />
+          <el-table-column v-if="channel !== 'official-website'" label="已付/已收金额" align="center" prop="remainingAmount"
+            width="120">
             <template slot-scope="{ row }">{{ row.amount - row.remainingAmount }}</template>
           </el-table-column>
           <el-table-column v-if="channel !== 'official-website'" label="总金额" align="center" prop="amount" width="100" />
 
           <!-- 官网 -->
-          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Payable_Amount')" align="center" prop="amount" width="140" />
-          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Amount_Paid')" align="center" prop="amount" width="100">
+          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Payable_Amount')" align="center"
+            prop="amount" width="140" />
+          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Amount_Paid')" align="center"
+            prop="amount" width="100">
             <template slot-scope="{ row }">{{ row.amount - row.remainingAmount }}</template>
           </el-table-column>
-          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Balance_Due')" align="center" prop="remainingAmount" width="100" />
+          <el-table-column v-if="channel == 'official-website'" :label="$t('contract.Balance_Due')" align="center"
+            prop="remainingAmount" 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 :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 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>
+              <el-button v-if="contract.contractType == 'sale' && row.invoiceSpecies != 'proforma'" type="text"
+                @click="handleUrge(row)">一键催款</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -267,23 +285,31 @@
                     <div class="claim-report" v-for="(claimItem, index) in row.claimList" :key="index">
                       <div style="display: flex">
                         <div class="claim-report-info-wrap">
-                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_ID') }}：{{ claimItem.claimNo }}</div>
-                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_Type') }}：{{ claimTypeFun(claimItem.type) }}</div>
-                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_status') }}：{{ claimStatusFun(claimItem.status) }}</div>
+                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_ID') }}：{{ claimItem.claimNo }}
+                          </div>
+                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_Type') }}：{{
+                            claimTypeFun(claimItem.type) }}</div>
+                          <div class="claim-report-info-wrap-item">{{ $t('contract.Claim_status') }}：{{
+                            claimStatusFun(claimItem.status) }}</div>
+                        </div>
+                        <div style="width: 50px" class="view" @click.stop="viewFun(claimItem)">{{ $t('contract.View') }}
                         </div>
-                        <div style="width: 50px" class="view" @click.stop="viewFun(claimItem)">{{ $t('contract.View') }}</div>
                       </div>
                       <div class="claim-report-info-wrap">
-                        <div class="claim-report-info-wrap-item">{{ $t('contract.create_time') }}：{{ parseTime(claimItem.createTime) }}</div>
-                        <div class="claim-report-info-wrap-item">{{ $t('contract.commitTime') }}：{{ parseTime(claimItem.commitTime) }}</div>
+                        <div class="claim-report-info-wrap-item">{{ $t('contract.create_time') }}：{{
+                          parseTime(claimItem.createTime) }}</div>
+                        <div class="claim-report-info-wrap-item">{{ $t('contract.commitTime') }}：{{
+                          parseTime(claimItem.commitTime) }}</div>
                       </div>
                     </div>
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column :label="$t('contractDetail.billOfLadingNo')" align="center" prop="billOfLadingNo" width="130">
+              <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>
+                  <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">
@@ -301,7 +327,8 @@
                   <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="$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>
@@ -312,7 +339,8 @@
                   <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">
+              <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}') }}
@@ -323,39 +351,34 @@
               <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>
+                    <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>
+                    <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="300px">
+              <el-table-column :label="$t('contractDetail.operate')" align="center"
+                class-name="small-padding fixed-width" width="300px">
                 <template slot-scope="scope">
-                  <el-button
-                    v-if="channel == 'official-website'"
-                    size="mini"
-                    type="primary"
-                    style="padding-left: 5px; padding-right: 5px"
-                    @click.stop="activeNameFun(scope.$index)"
-                    >{{ $t('contract.Track_Shipment') }}</el-button
-                  >
+                  <el-button v-if="channel == 'official-website'" size="mini" type="primary"
+                    style="padding-left: 5px; padding-right: 5px" @click.stop="activeNameFun(scope.$index)">{{
+                      $t('contract.Track_Shipment') }}</el-button>
                   <!-- v-if="channel == 'official-website' && scope.row.showFallbackQuality" -->
-                  <el-button
-                    v-if="channel == 'official-website'"
-                    size="mini"
+                  <el-button v-if="channel == 'official-website'" size="mini"
                     :type="scope.row.showFallbackQuality ? 'primary' : 'info'"
-                    style="padding-left: 5px; padding-right: 5px"
-                    @click.stop="qualityFeedback(scope.row)"
-                    >{{ $t('contract.Quality_Feedback') }}</el-button
-                  >
+                    style="padding-left: 5px; padding-right: 5px" @click.stop="qualityFeedback(scope.row)">{{
+                      $t('contract.Quality_Feedback') }}</el-button>
                 </template>
               </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">
+            <el-tabs v-if="accessToken" 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>
@@ -751,7 +774,7 @@ ${invoiceNoTitleZh}：${invoiceNo}
     },
     getGeekYumToken() {
       getGeekYumToken().then((res) => {
-        this.accessToken = res.msg
+        this.accessToken = res.message
       })
     },
     getDays(date) {
@@ -925,24 +948,29 @@ ${invoiceNoTitleZh}：${invoiceNo}
   width: 1050px;
   margin-left: 20px;
 }
+
 .claim-report {
   background-color: #eee;
   padding: 10px 20px;
   margin-top: 20px;
+
   .claim-report-info-wrap {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
+
     .claim-report-info-wrap-item {
       width: 300px;
       text-align: left;
     }
   }
+
   .view {
     color: #409eff;
     cursor: pointer;
   }
 }
+
 .share {
   width: 120px;
   height: 30px;

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

@@ -12,14 +12,14 @@
       <div class="app-container-left">
         <div class="contract-number">
           <div>{{ $t('contractDetail.Contract_No') }}</div>
-          <div>{{ contract.contractNo }}</div>
+          <div style="word-wrap: break-word;">{{ contract.contractNo }}</div>
         </div>
         <div class="contract-number">
           <div>
             <span>{{$t('contractDetail.Reference_No')}}</span>
             <el-button size="mini" type="text" icon="el-icon-edit" @click="clickEditReference"></el-button>
           </div>
-          <div>{{ contract.reference  || '--' }}</div>
+          <div style="word-wrap: break-word;">{{ contract.reference  || '--' }}</div>
         </div>
         <div class="tab-root">
           <div :class="['tab', activeName == tabsItem.name ? 'active' : '']" v-for="tabsItem in saleTabsArr" :key="tabsItem.id" @click="changeTabs(tabsItem)">