doctor-admin-components 1.0.14-beta.45 → 1.0.14-beta.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "doctor-admin-components",
   "version1": "1.0.11",
-  "version": "1.0.14-beta.45",
+  "version": "1.0.14-beta.47",
   "private": false,
   "main1": "lib/index.umd.min.js",
   "main": "packages/index.js",

package/packages/index.js

@@ -55,7 +55,10 @@ import {
   VDistpicker,
   ContractFileDragUpload,
   FileShow,
-  ShipmentPurchaseAmount
+  ShipmentPurchaseAmount,
+  ContractClause,
+  ContractInfo
+
 
 } from "./src";
 // 组件列表
@@ -71,7 +74,9 @@ const components = [
   VDistpicker,
   ContractFileDragUpload,
   FileShow,
-  ShipmentPurchaseAmount
+  ShipmentPurchaseAmount,
+  ContractClause,
+  ContractInfo
 ];
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
@@ -145,5 +150,7 @@ export default {
   VDistpicker,
   ContractFileDragUpload,
   FileShow,
-  ShipmentPurchaseAmount
+  ShipmentPurchaseAmount,
+  ContractClause,
+  ContractInfo
 };

package/packages/src/index.js

@@ -2,7 +2,7 @@
  * @Author: error: git config user.name && git config user.email & please set dead value or install git
  * @Date: 2022-07-25 11:24:53
  * @LastEditors: zhangpengwei@1338418459736990.onaliyun.com zhangpengwei@1338418459736990.onaliyun.com
- * @LastEditTime: 2024-08-23 16:19:29
+ * @LastEditTime: 2025-05-13 17:25:39
  * @FilePath: /zpw-com-test/src/lib-components/index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -24,6 +24,8 @@ import VDistpicker from "./views/components/RegionPicker/Distpicker.vue";
 import ContractFileDragUpload from '../src/components/FileUpload/contract-drag-new.vue';
 import FileShow from  '../src/views/biz/bizFileInfo/fileShow.vue'
 import ShipmentPurchaseAmount from '../src/views/biz/contractTracing/shipmentPurchaseAmount.vue'
+import ContractClause from '../src/views/biz/contractTracing/contractClause.vue'
+import ContractInfo from '../src/views/biz/contractTracing/info.vue'
 
 // 为组件提供 install 安装方法，供按需引入
 
@@ -69,7 +71,12 @@ FileShow.install = function (Vue) {
 ShipmentPurchaseAmount.install = function (Vue) {
   Vue.component(ShipmentPurchaseAmount.name, ShipmentPurchaseAmount);
 };
-
+ContractClause.install = function (Vue) {
+  Vue.component(ContractClause.name, ContractClause);
+};
+ContractInfo.install = function (Vue) {
+  Vue.component(ContractInfo.name, ContractInfo);
+};
 
 // 导出组件
 export {
@@ -83,5 +90,7 @@ export {
   VDistpicker,
   ContractFileDragUpload,
   FileShow,
-  ShipmentPurchaseAmount
+  ShipmentPurchaseAmount,
+  ContractClause,
+  ContractInfo
 };

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

@@ -12,7 +12,7 @@
       v-for="(bankData, i) in bankList"
       :key="i"
       class="bank-container"
-      :class="{ 'bank-container-select': !disableSelect && sellectIndex == i, 'bank-container-unselect': disableSelect || sellectIndex != i }"
+      :class="{ 'bank-container-select': sellectIndex == i, 'bank-container-unselect': sellectIndex != i }"
       @click="clickSelct(i)"
     >
       <el-row style="padding-bottom: 20px">
@@ -168,9 +168,10 @@ export default {
       }
     },
     handleCaclSelectIndex() {
-      if (!this.disableSelect && this.accountId) {
+      if (this.accountId) {
         this.sellectIndex = this.bankList.findIndex((item) => item.accountId == this.accountId)
-        if (this.sellectIndex == -1) {
+        console.log('---sellectIndex:', this.sellectIndex)
+        if (this.sellectIndex == -1 && !this.disableSelect) {
           console.log('pre accountId invalide')
           this.$emit('selectBank', null)
         }

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

@@ -0,0 +1,301 @@
+<template>
+  <div>
+    <h3 style="text-align: center">Additional Agreement</h3>
+    <div style="text-align: right;padding-right: 20px" v-if="editable">
+      <el-button type="text" @click="disable = !disable">{{ disable ? 'Edit' : 'View' }}</el-button>
+    </div>
+    <div v-if="form">
+      <div v-if="form.contractType == 'sale'">
+        <h3>ARTICLE 1 – DEFINITIONS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="definitions"></text-content>
+      </div>
+      <h3>ARTICLE 2 – Annexure of Inquiry Page Content</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="annexure"></text-content>
+      </div>
+      <h3>ARTICLE 3 – ACCEPTANCE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="acceptance"></text-content>
+      </div>
+      <h3>ARTICLE 4 – INCONSISTENT COMMODITY NAMES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="inconsistent"></text-content>
+      </div>
+      <h3>ARTICLE 5 – QUALITY, CUSTOMS REJECTION</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="quality"></text-content>
+      </div>
+      <h3>ARTICLE 6 – CLAIM</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="claim"></text-content>
+      </div>
+      <h3>ARTICLE 7 – LOADING REQUIREMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="loadingRequirement"></text-content>
+      </div>
+      <h3>ARTICLE 8 – PAYMENT</h3>
+      <div>
+        The Buyer shall pay a deposit of {{ form.depositAmount != null ? '$' + form.depositAMount : form.deposit + '% of the total Contract Price to' }} TTYY within
+        {{ form.depositDays }} days {{ form.depositPaymentForm }}<br />
+        The remaining {{ form.balance }}% balance of the total Contract Price shall be paid by the Buyer to TTYY via Telegraphic Transfer ({{ form.balanceDays }}) no
+        later than {{ form.balancePaymentType }} days {{ form.balancePaymentForm }}. <br />
+        The Buyer shall ensure that all payments are made free and clear of any deductions, charges, fees, or withholdings imposed by any governmental or regulatory
+        authority. If any such deductions or withholdings are required by law, the Buyer shall increase the amount payable to TTYY so that, after any such deductions or
+        withholdings, TTYY receives an amount equal to the Contract Price.<br />
+        If the Buyer fails to make any payment within the stipulated time frames, TTYY shall be entitled to charge interest on the overdue amount at a rate of 0.05% per
+        day from the due date until the date of actual payment.<br />
+      </div>
+      <h3>ARTICLE 9 – FLOATING PRICE</h3>
+      <div v-if="form.quoteType != 'FIXED'">
+        Price Period: The {{ form.livePriceUsertype }} has the pricing authority option from container loaded date until {{ form.livePriceDays }} days
+        {{ form.livePriceForm }} it arrives at the port.<br />
+        FOR PRICING the Buyer and TTYY can communicate through email, Wechat group, WhatsApp group, phone call or the pricing function button of the APP.<br />
+        The pricing will be determined based on the local working hours of either the Seller or the Buyer who provides the price option. <br />
+        If the Buyer is unable to fix the price within the agreed Price Fixing Period, the Buyer may request an extension. The request for extension must be submitted in
+        writing to TTYY before the expiration of the initial Price Fixing Period.<br />
+        The Buyer acknowledges and agrees that an extension of the Price Fixing Period shall be subject to supplier’s allowance.<br />
+        The Buyer shall make a prompt payment (within two working days) to the Seller, amounting to 110% of the provisional pricing formula based on the LME/CME reference
+        price on the day and at the time the Buyer declared the exercise of the Extension Option.<br />
+        TTYY’s supplier reserves the right to approve or deny any request for an extension of the Price Fixing Period in its sole discretion. The granting of an extension
+        does not constitute a waiver of TTYY's rights under this Contract.<br />
+        If the Buyer fails to fix the price within the Price Fixing Period, including any extended period granted by TTYY, TTYY shall have the right to determine the
+        contract price based on the Market Closing Price of the Price Fixing Deadline.<br />
+        Any extension of the Price Fixing Period shall be the final extension, and no further extensions shall be granted unless otherwise agreed upon in writing by the
+        parties. <br />
+      </div>
+      <h3>ARTICLE 10 – MARGIN CALL</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="saleMarginCall"></text-content>
+      </div>
+      <h3>ARTICLE 11 – PRICE ADJUSTMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="priceAdjustment"></text-content>
+      </div>
+      <h3>ARTICLE 12 - PACKING, DELIVERY, SHIPPING & RISK OF LOSS</h3>
+      <div>
+        The delivery terms shall be set forth on the first page of the Contract. The Contract includes standard commercial packaging for the goods. When special or export
+        packaging is required or requested, the cost of the special packaging will be separately invoiced. <br /><br />
+
+        If the Buyer pays the deposit late (if the delay is within{{ form.latestShipment }}days of the original contract deposit, the contract will be extended; if the
+        delay exceeds{{ form.latestShipment }}days, the delivery time cannot be guaranteed), the goods will be shipped within{{ form.latestShipment }}days from the date
+        of deposit payment.<br /><br />
+
+        To be arranged by the Seller within {{ form.latestShipment }} days from the date of signature of this Agreement. (For sake of clarity, within the above deadline,
+        the Seller shall be obliged to arrange for the loading of the Material in the containers, not for the loading onboard the vessel (which will be reflected in the
+        Shipped on Board date of BL). Seller has no control over shipping delays caused by the carrier and can therefore be responsible only for the date by which the
+        material is loaded in the container, not for the date of loading onboard the vessel or for the sailing date. If container sailing is delayed due to delays by the
+        shipping lines, by customs, and/or by causes of force majeure, if by the expiry of the above deadline, the Material has not yet been loaded into the respective
+        containers, In the event that the Buyer does not exercise its cancellation notice to the seller 3 days’ before deadline as per above, this Agreement shall be
+        automatically extended for additional 45 days. In any case, the Buyer shall not be entitled to cancel this Agreement once the Material is loaded into the
+        containers and notice thereof has been given by the Seller to the Buyer.
+      </div>
+      <h3>ARTICLE 13 - AS IS; NO WARRANTY</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="saleNoWarranty"></text-content>
+      </div>
+      <h3>ARTICLE 14 - TAXES, DUTIES, FEES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="saleTaxes"></text-content>
+      </div>
+      <h3>ARTICLE 15 - LICENSES/PERMITS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="licenses"></text-content>
+      </div>
+      <h3>ARTICLE 16 - COMPLIANCE WITH LAWS AND STATUTORY REGULATIONS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="complianceWithLaws"></text-content>
+      </div>
+      <h3>ARTICLE 17 - CANCELLATION AND TERMINATION</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="cancellation"></text-content>
+      </div>
+      <h3>ARTICLE 18 - LIMITATION OF LIABILITY</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="limitation"></text-content>
+      </div>
+      <h3>ARTICLE 19 – DISPUTES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="disputes"></text-content>
+      </div>
+      <h3>ARTICLE 20 - LAW GOVERNING CONTRACT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="lawGoverning"></text-content>
+      </div>
+      <h3>ARTICLE 21 – SEVERABILITY</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="severability"></text-content>
+      </div>
+      <h3>ARTICLE 22 – ASSIGNMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="assignment"></text-content>
+      </div>
+      <h3>ARTICLE 23 – WAIVER</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="waiver"></text-content>
+      </div>
+      <h3>ARTICLE 24 – NONDISCLOSURE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="saleNoNdisclosure"></text-content>
+      </div>
+      <h3>ARTICLE 25 - EXCUSABLE DELAYS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="excusable"></text-content>
+      </div>
+      <h3>ARTICLE 26 – LANGUAGE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="language"></text-content>
+      </div>
+      <h3>ARTICLE 27 – MISCELLANEOUS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="miscellaneous"></text-content>
+      </div>
+    </div>
+    <div v-else>
+      <h3>ARTICLE 1 – DEFINITIONS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="definitions"></text-content>
+      </div>
+      <h3>ARTICLE 2 – Annexure of Inquiry Page Content</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="annexure"></text-content>
+      </div>
+      <h3>ARTICLE 3 – ACCEPTANCE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="acceptance"></text-content>
+      </div>
+      <h3>ARTICLE 4 – INCONSISTENT COMMODITY NAMES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="inconsistent"></text-content>
+      </div>
+      <h3>ARTICLE 5 – QUALITY, CUSTOMS REJECTION</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="quality"></text-content>
+      </div>
+      <h3>ARTICLE 6 – CLAIM</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="claim"></text-content>
+      </div>
+      <h3>ARTICLE 7 – LOADING REQUIREMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="loadingRequirement"></text-content>
+      </div>
+      <h3>ARTICLE 8 – PAYMENT</h3>
+      <div>
+        TTYY's downstream customers shall pay a deposit of {{ form.deposit }} the Seller within {{ form.depositDays }} days {{ form.depositPaymentForm }}.<br />
+        The remaining {{ form.balance }}% balance of the total Contract Price shall be paid to the Seller via Telegraphic Transfer ({{ form.balancePaymentType }}) no
+        later than {{ form.balanceDays }} days {{ form.balancePaymentForm }}.
+      </div>
+      <h3>AARTICLE 9 – FLOATING PRICE</h3>
+      <div v-if="form.quoteType != 'FIXED'">
+        Price Period: The {{ form.livePriceUserType }} has the pricing option from container loaded date until {{ form.livePriceDays }} days {{ form.livePriceForm }} it
+        arrives at the port.<br />
+        FOR PRICING the Seller and TTYY can communicate through email, Wechat group, WhatsApp group,Make a phone call or the pricing function button of the APP.<br />
+        The pricing will be determined based on the local working hours of either the Seller or the Buyer who provides the price option. <br />
+        If one party is unable to fix the price within the agreed Price Fixing Period, it is permitted to apply for an extension pricing period application.The other
+        party have the right to evaluate and offer extension pricing period or not.
+      </div>
+      <h3>ARTICLE 10 – PRICE ADJUSTMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="priceAdjustment"></text-content>
+      </div>
+      <h3>ARTICLE 11 – PACKING, DELIVERY, SHIPPING & RISK OF LOSS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="purchasePacking"></text-content>
+      </div>
+      <h3>ARTICLE 12 - SHIPMENT PERIOD</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="purchaseShipmentPeriod"></text-content>
+      </div>
+      <h3>ARTICLE 13 - TAXES, DUTIES, FEES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="saleTaxes"></text-content>
+      </div>
+      <h3>ARTICLE 14 - LICENSES/PERMITS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="licenses"></text-content>
+      </div>
+      <h3>ARTICLE 15 - COMPLIANCE WITH LAWS AND STATUTORY REGULATIONS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="complianceWithLaws"></text-content>
+      </div>
+      <h3>AARTICLE 16 - CANCELLATION AND TERMINATION</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="cancellation"></text-content>
+      </div>
+      <h3>ARTICLE 17 - LIMITATION OF LIABILITY</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="limitation"></text-content>
+      </div>
+      <h3>ARTICLE 18 – DISPUTES</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="disputes"></text-content>
+      </div>
+      <h3>ARTICLE 19 - LAW GOVERNING CONTRACT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="lawGoverning"></text-content>
+      </div>
+      <h3>ARTICLE 20 – SEVERABILITY</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="severability"></text-content>
+      </div>
+      <h3>ARTICLE 21 – ASSIGNMENT</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="assignment"></text-content>
+      </div>
+      <h3>ARTICLE 22 – WAIVER</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="waiver"></text-content>
+      </div>
+      <h3>ARTICLE 23 - EXCUSABLE DELAYS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="excusable"></text-content>
+      </div>
+      <h3>ARTICLE 24 – INSURANCE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="purchaseInsurance"></text-content>
+      </div>
+      <h3>ARTICLE 25 – LANGUAGE</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="language"></text-content>
+      </div>
+      <h3>ARTICLE 26 – MISCELLANEOUS</h3>
+      <div>
+        <text-content :form="form" :disable="disable" keys="miscellaneous"></text-content>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+<script>
+import TextContent from './contractClauseComponenrts/TextContent'
+export default {
+  name: 'ContractClause',
+  props: {
+    form: {
+      type: Object,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    TextContent
+  },
+  data() {
+    return {
+      disable: true
+    }
+  },
+  created() {
+  },
+  methods: {
+    disableEdit() {
+      this.disable = true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/packages/src/views/biz/contractTracing/contractClauseComponenrts/TextContent.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="text-content-text" v-if="disable">{{ form[keys] }}</div>
+    <el-input v-else type="textarea" v-model="form[keys]" :autosize="{ minRows: 3}"></el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextContent',
+  props: {
+    form: {
+      type: Object,
+      default: () => {}
+    },
+    disable: {
+      type: Boolean,
+      default: true
+    },
+    keys: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      
+    };
+  },
+
+  mounted() {
+    
+  },
+
+  methods: {
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.text-content-text {
+  white-space: pre-wrap;
+  word-break:break-word;
+}
+
+.contract-textarea {
+  width: 100%;
+  height: max-content;
+}
+
+</style>

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

@@ -14,170 +14,8 @@
         <el-col :span="5">Reference#: {{ contract.reference }}</el-col>
         <el-col :span="7"></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">
-            {{ contract.paymentTermFullText }}
-          </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 style="margin-top:60px" :form="contract.contractClause"></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">
@@ -189,6 +27,8 @@
 <script>
 import { exportPdf } from '../../../utils/pdf'
 import { CommonFormatNumber } from '../../../utils/MycommonUtil'
+import ContractClause from './contractClause'
+import Info from './info'
 
 export default {
   name: 'ContractPdf',
@@ -223,7 +63,10 @@ export default {
       default: () => []
     }
   },
-  components: {},
+  components: {
+    ContractClause,
+    Info
+  },
   data() {
     return {
       //争议选项

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

@@ -0,0 +1,346 @@
+<template>
+  <div v-if="form">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="company">
+          <div class="company-type">Seller</div>
+          <div class="company-text">{{ form.supplierContractCompany.companyEnglishName }}</div>
+          <div class="company-text">{{ form.supplierContractCompany.address }}</div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="company">
+          <div class="company-type">Buyer</div>
+          <div class="company-text">{{ form.buyContractCompany.companyEnglishName }}</div>
+          <div class="company-text">{{ form.buyContractCompany.address }}</div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-divider></el-divider>
+    <div class="item">
+      <el-table
+        :data="form.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="Commodity Name" align="center" prop="askAliasName"></el-table-column>
+        <el-table-column label="Quantity" align="center" prop="weight">
+          <template slot-scope="scope">{{ 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="form.quoteType == 'FIXED'">
+              <span v-if="form.contractType == 'sale'">${{ row.quotePrice }}</span> <span v-else>${{ row.sllerPrice }}</span>
+            </div>
+            <div v-if="isCmx(form.quoteType)">
+              <span v-if="form.contractType == 'sale'">{{ `$(${form.quoteType}-${row.quotePrice})*2204.62` }}</span>
+              <span v-else>{{ `$(${form.quoteType}-${row.sllerPrice})*2204.62` }}</span>
+            </div>
+            <div v-if="isLme(form.quoteType)">
+              <div v-if="checkElementItem(row.elementContent)">
+                {{ form.contractType == 'sale' ? row.quotePriceFormula : row.sellerPriceFormula }}
+              </div>
+              <div v-else>
+                <span v-if="form.contractType == 'sale'">{{ ` $(${form.quoteType} *${row.quotePrice}%) ` }}</span>
+                <span v-else>{{ `$(${form.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="form.quoteType == 'FIXED' && form.contractType == 'purchase'">{{ '$' + (scope.row.sllerPrice - Number(scope.row.serviceFee)) }}</span>
+            <span v-else-if="form.quoteType == 'FIXED' && form.contractType == 'sale'">
+              {{ '$' + (Number(scope.row.quotePrice) + Number(scope.row.serviceFee)) }}
+            </span>
+            <span v-else-if="isLme(form.quoteType) && form.contractType == 'purchase'">
+              <div v-if="checkElementItem(scope.row.elementContent)">
+                {{ scope.row.sellerPriceFormula + '- $' + Number(scope.row.serviceFee) }}
+              </div>
+              <div v-else>
+                {{ '$(' + form.quoteType + ' * ' + scope.row.sllerPrice + '%) - $' + Number(scope.row.serviceFee) }}
+              </div>
+            </span>
+            <span v-else-if="isLme(form.quoteType) && form.contractType == 'sale'">
+              <div v-if="checkElementItem(scope.row.elementContent)">
+                {{ scope.row.quotePriceFormula + '+ $' + Number(scope.row.serviceFee) }}
+              </div>
+              <div v-else>
+                {{ '$(' + form.quoteType + ' * ' + scope.row.quotePrice + '%) + $' + Number(scope.row.serviceFee) }}
+              </div>
+            </span>
+            <span v-else-if="isCmx(form.quoteType) && form.contractType == 'purchase'">
+              {{ '${(' + form.quoteType + '-' + scope.row.sllerPrice + ')*2204.62} - $' + Number(scope.row.serviceFee) }}
+            </span>
+            <span v-else>
+              {{ '${(' + form.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="Freight Terms">{{ form.freightTerms }}</el-descriptions-item>
+      <el-descriptions-item label="Payment Terms">
+        <div>{{ form.paymentTermFullText }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="Price Fixing Option" v-if="form.livePriceSwitch">
+        {{ form.livePriceDays }} Days {{ form.livePriceForm }} cargo arrives at POD in
+        {{ form.livePriceUsertype }}
+        {{ form.livePriceType }}'s option
+      </el-descriptions-item>
+
+      <el-descriptions-item label="Origin Country/Region">{{ form.originCountry }}</el-descriptions-item>
+      <el-descriptions-item label="Loading Country/Region">{{ form.loadingCountry }}</el-descriptions-item>
+      <el-descriptions-item v-if="form.freightTerms != 'EXW'" label="Destination">{{ form.destination }}</el-descriptions-item>
+      <el-descriptions-item v-else label="EXW Address">{{ form.exw }}</el-descriptions-item>
+      <el-descriptions-item label="Containers">
+        {{ form.numberOfContainersForTwenty }}x 20' Container
+        <br />
+        {{ form.numberOfContainersForForty }}x 40' Container
+        <br />
+        {{ form.numberOfContainersForTwentyOrForty }}x 20'/40' Container
+        <br />
+      </el-descriptions-item>
+      <el-descriptions-item label="Latest shipment"
+        >The goods shall be fully loaded within {{ form.latestShipment }} days as of the date when the contract is signed</el-descriptions-item
+      >
+      <el-descriptions-item label="Required documents" v-if="isMobile">
+        <div style="display: flex; flex-direction: column">
+          <el-tag :key="tag" v-for="tag in dynamicTags" class="mr5" style="margin-top: 5px">{{ tag }}</el-tag>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="Required documents" v-else>
+        <div style="display: flex; flex-wrap: wrap">
+          <el-tag :key="tag" v-for="tag in dynamicTags" class="mr5" style="margin-top: 5px">{{ tag }}</el-tag>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="Shipment Quantity Tolerance"> ± {{ form.weightTolerance * 100 }}%</el-descriptions-item>
+      <el-descriptions-item label="Shortage Tolerance"> &lt;{{ form.toleranceFloat }}% or {{ form.weightToleranceWeight }} kg</el-descriptions-item>
+      <el-descriptions-item label="Packing Type"> {{ form.packingMethod ? form.packingMethod.replace(',', '/') : '' }}</el-descriptions-item>
+      <el-descriptions-item label="Partial Shipment"> {{ form.partialShipment }}</el-descriptions-item>
+      <el-descriptions-item label="Transshipment"> {{ form.transshipment }}</el-descriptions-item>
+      <el-descriptions-item label="Quality" v-if="form.qualityCertificateSwitch">{{ form.qualityCertificate }}</el-descriptions-item>
+      <el-descriptions-item label="Claim" v-if="form.claimSwitch">{{ form.claim }}</el-descriptions-item>
+      <el-descriptions-item label="Timeline of document submission" v-if="form.arbitrationSwitch">{{ form.arbitration }}</el-descriptions-item>
+      <el-descriptions-item label="Specification" v-if="form.memoSwitch">{{ form.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="isMobile ? 8 : 5">
+              <div class="company-sign-title">Seller</div>
+            </el-col>
+            <slot name="seller" />
+          </el-row>
+          <div class="company-sign-title">Company Name:</div>
+          <div class="company-sign-text">{{ form.supplierContractCompany.companyEnglishName }}</div>
+          <div class="company-sign-title">Signature:</div>
+          <div class="company-sign-title">Date:</div>
+          <div class="company-sign-text">{{ parseTime(form.createTime, '{m}/{d}/{y}') }}</div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="company-sign">
+          <el-row>
+            <el-col :span="isMobile ? 8 : 5">
+              <div class="company-sign-title">Buyer</div>
+            </el-col>
+            <slot name="buyer" />
+          </el-row>
+          <div class="company-sign-title">Company Name:</div>
+          <div class="company-sign-text">{{ form.buyContractCompany.companyEnglishName }}</div>
+          <div class="company-sign-title">Signature:</div>
+          <div class="company-sign-title">Date:</div>
+          <div class="company-sign-text">{{ parseTime(form.createTime, '{m}/{d}/{y}') }}</div>
+        </div>
+      </el-col>
+    </el-row>
+    <slot name="select-contract-company"></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ContractInfo',
+  props: {
+    form: {
+      type: Object,
+      default: null
+    },
+    dynamicTags: {
+      type: Array,
+      default: () => []
+    },
+    customClause: {
+      type: Array,
+      default: () => []
+    },
+    printModel: {
+      type: Boolean,
+      default: false
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { },
+  data() {
+    return {}
+  },
+  methods: {
+    //确认公司
+    confirmCompany(company, type) {
+      company.email = company.email && company.email.length > 0 ? company.email[0] : ''
+      company.phoneNumber = company.phoneNumber && company.phoneNumber.length > 0 ? company.phoneNumber[0] : ''
+      if (type == 'seller') {
+        this.$set(this.form, 'supplierContractCompany', company)
+        this.form.supplierContractCompanyId = company.contractCompanyId
+        this.form.supplierCompanyId = company.companyId
+      } else if (type == 'buyer') {
+        this.$set(this.form, 'buyContractCompany', company)
+        this.form.buyContractCompanyId = company.contractCompanyId
+        this.form.buyCompanyId = company.companyId
+      }
+    },
+    //选择合同公司
+    selectContractCompany(companyId, type) {
+      this.$refs.selectContractCompany.handleShow(companyId, type)
+    },
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = 'Total'
+          return
+        }
+        const values = data.map((item) => Number(item[column.property]))
+        if (!values.every((value) => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          if (index === 1) {
+            sums[index] += 'MT'
+          } else {
+            sums[index] += ''
+          }
+        } else {
+          sums[index] = ''
+        }
+      })
+
+      return sums
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.info {
+  border: 1px solid #606676;
+  padding: 20px;
+
+  .type {
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .title {
+    text-align: center;
+    font-size: 26px;
+    font-weight: bold;
+  }
+
+  .sub-title {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .company {
+    margin-top: 20px;
+    padding: 10px 20px;
+    border: 1px solid #000;
+    font-size: 10px;
+    height: 130px;
+
+    &-type {
+      font-size: 13px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    &-text {
+      margin-bottom: 10px;
+    }
+  }
+
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    // 去掉所有的横线
+    ::v-deep.el-table__cell {
+      border-bottom: none;
+    }
+
+    // 只去除表格的最最底部的横线
+    ::v-deep .el-table--border::after,
+    ::v-deep .el-table--group::after,
+    ::v-deep .el-table::before {
+      background-color: transparent;
+    }
+  }
+
+  .sign {
+    height: 230px;
+    display: flex;
+    align-items: center;
+  }
+
+  .company-sign {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 10px;
+    height: 130px;
+    margin-bottom: 20px;
+
+    &-title {
+      font-size: 13px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    &-text {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.company-sign-text {
+  color: #606266;
+  font-size: 14px;
+}
+</style>