doctor-admin-components 1.0.14-beta.7 → 1.0.14-beta.71

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

@@ -0,0 +1,356 @@
+<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>
+            <!-- 比例 -->
+            <div v-if="form && form.depositType == '1'">
+            The Buyer shall pay a deposit of {{ form.deposit}}% of the total Contract Price to TTYY within {{ form.depositDays }} days {{ depositPaymentFormKey(form.depositPaymentForm)}}.
+            </div>
+            <!-- 固定金额 -->
+            <div v-else>
+            The Buyer shall pay a deposit of {{`$${form.advanceDepositAmount}`}} 
+            TTYY within {{ form.depositDays }} days {{ depositPaymentFormKey(form.depositPaymentForm) }}.
+            </div>
+            The remaining {{ form && form.depositType == '1' && form.balance > 0 ?  `${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 {{balancePaymentFormKey(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.
+          <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.
+        </div>
+        <h3>ARTICLE 9 – FLOATING PRICE</h3>
+        <div v-if="form.quoteType && 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.
+        </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="taxes"></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 && form.depositType == '1'">
+              TTYY's downstream customers shall pay a deposit of {{ form.deposit}}% of the total Contract Price to the Seller within {{ form.depositDays }} days {{ depositPaymentFormKey(form.depositPaymentForm)}}.
+            </div>
+            <!-- 固定金额 -->
+            <div v-else>
+              TTYY's downstream customers shall pay a deposit of {{`$${form.advanceDepositAmount}`}} 
+              TTYY within {{ form.depositDays }} days {{ depositPaymentFormKey(form.depositPaymentForm) }}.
+            </div>
+        </div>
+        The remaining {{ form && form.depositType == '1' && form.balance > 0 ?  `${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 {{ balancePaymentFormKey(form.balancePaymentForm) }}.
+        <h3>AARTICLE 9 – FLOATING PRICE</h3>
+        <div v-if="form.quoteType && 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="taxes"></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',
+  dicts: ['deposit_payment_form', 'balance_payment_form'],
+  props: {
+    form: {
+      type: Object,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    TextContent
+  },
+  data() {
+    return {
+      disable: true
+    }
+  },
+  created() {
+  },
+  methods: {
+    disableEdit() {
+      this.disable = true
+    },
+    depositPaymentFormKey(value) {
+      let label = this.dict.type.deposit_payment_form.find(item => item.value == value)?.raw?.dictLabelEn
+      return label || ''
+    },
+    balancePaymentFormKey(value) {
+      let label = this.dict.type.balance_payment_form.find(item => item.value == value)?.raw?.dictLabelEn
+      return label || ''
+    }
+  }
+}
+</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

@@ -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 {
       //争议选项