doctor-admin-components 1.0.14-beta.46 → 1.0.14-beta.48

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "doctor-admin-components",
   "version1": "1.0.11",
-  "version": "1.0.14-beta.46",
+  "version": "1.0.14-beta.48",
   "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/contractClause.vue

@@ -0,0 +1,284 @@
+<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>
+        <div v-if="form.quoteType != 'FIXED'">
+          The Buyer shall pay a deposit of {{form.deposit}} TTYY within {{form.depositDays}} days {{form.depositPaymentForm}}
+          The remaining {{form.balance}}% balance of the total Contract Price shall be paid by the Buyer to TTYY via Telegraphic Transfer ({{form.balanceDays}}) days no later than {{form.balancePaymentType}} days {{form.balancePaymentForm}}. 
+        </div>
+        <div v-else>
+          The Buyer shall pay a deposit of {{form.deposit}} of the total Contract Price to TTYY within {{form.depositDays}} days {{form.depositPaymentForm}}
+          The remaining {{form.balance}}% balance of the total Contract Price shall be paid by the Buyer to TTYY via Telegraphic Transfer ({{form.balancePaymentType}}) no later than {{form.balanceDays}} days {{form.balancePaymentForm}}. 
+        </div>
+        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.
+        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.
+      </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.
+        FOR PRICING the Buyer and TTYY can communicate through email, Wechat group, WhatsApp group, phone call or the pricing function button of the APP.
+        The pricing will be determined based on the local working hours of either the Seller or the Buyer who provides the price option.   
+        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.
+        The Buyer acknowledges and agrees that an extension of the Price Fixing Period shall be subject to supplier’s allowance.
+        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.
+        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.
+        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.
+        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.
+      </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>
+       <div v-if="form.quoteType != 'FIXED'">TTYY's downstream customers shall pay a deposit of {{form.deposit}} the Seller within {{form.depositDays}} days {{form.depositPaymentForm}}.</div>
+       <div> TTYY's downstream customers shall pay a deposit of {{form.deposit}} of the total Contract Price to the Seller within {{form.depositDays}} days {{form.depositPaymentForm}}.</div>
+        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.
+        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.
+        The pricing will be determined based on the local working hours of either the Seller or the Buyer who provides the price option. 
+        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['contractClause'][keys] }}</div>
+    <el-input v-else type="textarea" v-model="form['contractClause'][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>