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

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

@@ -0,0 +1,562 @@
+<template>
+  <div class="app-container">
+    <div class="info" id="printPdf">
+      <div class="type">
+        {{
+          contract.contractType == "sale"
+            ? "Sales Contract"
+            : "Purchase Contract"
+        }}
+      </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"
+        }}</el-col>
+        <el-col :span="7">{{ contract.contractNo }}</el-col>
+        <el-col :span="5">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">{{ scope.row.weight }}MT</template>
+            </el-table-column>
+            <el-table-column
+              v-if="contract.quoteType == 'FIXED'"
+              label="Unit Price/MT"
+              align="center"
+              width="200"
+            >
+              <template slot-scope="{ row }">
+                <span v-if="contract.contractType == 'sale'">
+                  ${{ row.quotePrice }}
+                </span>
+                <span v-else>${{ row.sllerPrice }}</span>
+              </template>
+            </el-table-column>
+
+            <!-- CMX 都显示 -->
+            <el-table-column
+              v-if="contract.quoteType == 'CMX'"
+              label="Unit Price/MT"
+              align="center"
+              width="200"
+            >
+              <template slot-scope="{ row }">
+                <span v-if="contract.contractType == 'sale'">
+                  $(CMX-{{ row.quotePrice }})*2204.62
+                </span>
+                <span v-else>$(CMX-{{ row.sllerPrice }})*2204.62</span>
+              </template>
+            </el-table-column>
+            <!--  LME -->
+            <el-table-column
+              v-if="contract.quoteType == 'LME'"
+              label="Unit Price/MT"
+              align="center"
+              width="200"
+            >
+              <template slot-scope="{ row }">
+                <span v-if="contract.contractType == 'sale'">
+                  $(LME 3M *{{ row.quotePrice }}%)
+                </span>
+                <span v-else>$(LME 3M *{{ row.sllerPrice }}%)</span>
+              </template>
+            </el-table-column>
+
+            <!-- CMX 都显示 CMX Month-->
+            <el-table-column
+              v-if="contract.quoteType == 'CMX'"
+              label="CMX Month"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.cmxMonth }}
+              </template>
+            </el-table-column>
+            <el-table-column label="Service fee/MT" align="center">
+              <template slot-scope="scope"
+                >${{ scope.row.serviceFee }}</template
+              >
+            </el-table-column>
+
+            <!-- 采购合同 FIXED -->
+            <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="
+                    contract.quoteType == 'LME' &&
+                    contract.contractType == 'purchase'
+                  "
+                >
+                  {{
+                    "$(LME 3M * " +
+                    scope.row.sllerPrice +
+                    "%) - $" +
+                    Number(scope.row.serviceFee)
+                  }}
+                </span>
+                <span
+                  v-else-if="
+                    contract.quoteType == 'LME' &&
+                    contract.contractType == 'sale'
+                  "
+                >
+                  {{
+                    "$(LME 3M * " +
+                    scope.row.quotePrice +
+                    "%) + $" +
+                    Number(scope.row.serviceFee)
+                  }}
+                </span>
+                <span
+                  v-else-if="
+                    contract.quoteType == 'CMX' &&
+                    contract.contractType == 'purchase'
+                  "
+                >
+                  {{
+                    "${(CMX-" +
+                    scope.row.sllerPrice +
+                    ")*2204.62} - $" +
+                    Number(scope.row.serviceFee)
+                  }}
+                </span>
+                <span v-else>
+                  {{
+                    "${(CMX-" +
+                    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">
+            Deposit Ratio {{ contract.deposit }}%
+            {{ contract.depositDays }} Days after the contract
+            {{ contract.balance }}% balance
+            {{ contract.balancePaymentType }}paid
+            {{ contract.balanceDays }} Days
+            {{ contract.balancePaymentForm }}
+          </el-descriptions-item>
+          <el-descriptions-item label="Price Fixing Option">
+            {{ contract.livePriceDays }} Days {{ contract.livePriceForm }} cargo
+            arrives at POD in
+            {{ contract.livePriceUsertype }}
+            {{ contract.livePriceType }}'s option
+          </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 label="Destination">
+            {{ contract.destination }}
+          </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>
+      <div style="margin-left: 100px; margin-top: 20px">
+        FLAT/RM Al,11/F SUCCESS COMMBLDG NO 245-251 HENNESSY RD
+        WANCHAI,HONGKONG.
+      </div>
+    </div>
+    <div class="footer" v-if="!printModel">
+      <el-button type="primary" @click="handleExportPdf()">
+        Export ( PDF format)
+      </el-button>
+    </div>
+  </div>
+</template>
+
+  <script>
+import { exportPdf } from "../../../utils/pdf";
+
+export default {
+  name: "ContractPdf",
+  props: {
+    contract: {
+      type: Object,
+      default: {
+        buyerCompanyInfo: {
+          companyEnglishName: "",
+          address: "",
+        },
+        buyContractCompanyId: null,
+        buyContractCompany: { companyEnglishName: "", address: "" },
+        supplierContractCompanyId: null,
+        supplierContractCompany: {
+          companyEnglishName: "",
+          address: "",
+        },
+        sellerCompanyInfo: {
+          companyEnglishName: "",
+          address: "",
+        },
+        contractDetailList: [],
+      },
+    },
+    dynamicTags: {
+      type: Array,
+      default: () => [],
+    },
+    customClause: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {},
+  data() {
+    return {
+      //争议选项
+      objectionRadio: false,
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      inputVisible: false,
+      inputValue: "",
+      //是否保存卖家地址
+      saveSellerCompanyAddress: false,
+      //是否保存买家地址
+      saveBuyerCompanyAddress: false,
+      //买家地址
+      buyerCompanyAddress: null,
+      //卖家地址
+      sellerCompanyAddress: null,
+      //港口数据列表
+      portDictList: [],
+      //国家数据李北奥
+      countryDictList: [],
+      //表单
+      objectionForm: {
+        objection: "",
+      },
+      objection: "",
+      printModel: false,
+    };
+  },
+  created() {},
+  methods: {
+    //设置打印model为true
+    setPrintModel(val) {
+      this.printModel = val;
+      return Promise.resolve();
+    },
+    /** 下载合同 */
+    handleExportPdf() {
+      this.setPrintModel(true)
+        .then(() => {
+          exportPdf(".info", "contract-No-" + this.contract.contractNo);
+        })
+        .then(() => {
+          this.printModel = false;
+        });
+    },
+    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>
+.app-container {
+  padding: 0 20px;
+
+  .contract {
+    width: 1000px;
+    margin: 0 auto;
+    border: 1px solid #ebeef5;
+    height: 100vh;
+    .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;
+      }
+    }
+    .footer {
+      padding: 10px 20px;
+      text-align: right;
+    }
+  }
+}
+
+.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>