change: indent导出计价改用服务器端导出.

src/api/indent.js

@@ -136,3 +136,10 @@ export const generateOrder = (data) =>
     method: 'post',
     data,
   })
+
+export const downloadPDF = (data) =>
+  request({
+    url: '/indent/export',
+    method: 'post',
+    data,
+  })

src/pages/indent-manage/indent/components/calcPrice/index.vue

@@ -519,7 +519,7 @@ import setLCL from './components/dialogLCL.vue'
 import freight from '../freight.vue'
 import step1 from './components/step1.vue'
 import CompExportForm from '../exportForm.vue'
-import exportQuota from '../exportQuota.vue'
+import exportQuota from '../exportQuota2.vue'
 import mathjs, { savePrecision } from '@/utils/math.js'
 import { getCalcParams, saveCalcData } from '@/api/indent'
 import { $t } from '@/i18n/index'

src/pages/indent-manage/indent/components/exportQuota2.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="pdf-wrap">
+    <table
+      id="pdfTarget"
+      style="
+        width: 850px;
+        line-height: 20px;
+        font-size: 12px;
+        font-family:
+          'Source Han Sans', 'Open Sans', 'WebFont-Open Sans', Arial, sans-serif;
+      "
+    >
+      <tbody>
+        <tr>
+          <td style="vertical-align: bottom">
+            <img
+              style="position: relative; left: -10pt"
+              src="http://zohocrmapi.promocollection.com.au/static/uploads/logo/pdf_logo.png"
+              height="50px"
+            />
+          </td>
+          <td style="vertical-align: top; text-align: right">
+            <h1>Quotation</h1>
+          </td>
+        </tr>
+        <tr>
+          <td style="vertical-align: top">
+            <template v-if="city2 === 'US'">
+              <p>Promocollection, LLC</p>
+              <p>1309 COFFEEN AVE STE 1200</p>
+              <p>SHERIDAN</p>
+              <p>WY 82801</p>
+            </template>
+            <template v-else>
+              <p>FAIR OCEAN TRADING AUSTRALIA</p>
+              <p>PTY LTD</p>
+              <p>15/10 Chilvers Road,</p>
+              <p>THORNLEIGH NSW 2120,</p>
+              <p>AUSTRALIA</p>
+            </template>
+          </td>
+
+          <td style="vertical-align: top; text-align: right">
+            <table style="width: 250px; float: right">
+              <colgroup>
+                <col width="100px" />
+                <col width="150px" />
+              </colgroup>
+              <tr>
+                <td><strong>Sales Person:</strong></td>
+                <td>{{ computedCreator }}</td>
+              </tr>
+              <tr>
+                <td><strong>Order Date:</strong></td>
+                <td>{{ dayjs().format('DD MMM YYYY') }}</td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="vertical-align: top">
+            <template v-if="city2 !== 'US'">
+              <p>
+                Email:&nbsp;&nbsp;&nbsp;&nbsp;accounts@promocollection.com.au
+              </p>
+              <p>Phone Number:&nbsp;&nbsp;&nbsp;&nbsp;02 9008 1152</p>
+              <p>Fax Number:&nbsp;&nbsp;&nbsp;&nbsp;02 9008 1157</p>
+            </template>
+          </td>
+
+          <td
+            rowspan="3"
+            style="vertical-align: top; text-align: right"
+          >
+            <img
+              :src="mainPicture"
+              width="300px"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td style="vertical-align: top">
+            <p><strong>Information</strong></p>
+            <p>
+              <strong>{{ productInfo.product_name }}</strong>
+            </p>
+
+            <p v-if="productInfo.package_size">
+              <strong>Size:</strong>
+              {{ productInfo.product_size }}
+            </p>
+
+            <p v-if="productInfo.product_hd">
+              <strong>Thickness:</strong>
+              {{ productInfo.product_hd }}
+            </p>
+
+            <p v-if="productInfo.product_capacity">
+              <strong>Capacity:</strong>
+              {{ productInfo.product_capacity }}
+            </p>
+
+            <p v-if="productInfo.product_material">
+              <strong>Material:</strong>
+              {{ productInfo.product_material }}
+            </p>
+
+            <p v-if="productInfo.product_require_print">
+              <strong>Print:</strong>
+              {{ productInfo.product_require_print }}
+            </p>
+
+            <p v-if="productInfo.product_require_color">
+              <strong>Color requirements:</strong>
+              {{ productInfo.product_require_color }}
+            </p>
+
+            <p v-if="productInfo.product_color">
+              <strong>Product Colours Available:</strong>
+              {{ productInfo.product_color }}
+            </p>
+
+            <p v-if="productInfo.product_battery">
+              <strong>Whether with battery:</strong>
+              {{ productInfo.product_battery }}
+            </p>
+
+            <p v-if="productInfo.package_info">
+              <strong>Packaging:</strong>
+              {{ productInfo.package_info }}
+            </p>
+
+            <p v-if="productInfo.product_other">
+              <strong>More Details:</strong>
+              {{ productInfo.product_other }}
+            </p>
+          </td>
+        </tr>
+        <tr style="vertical-align: top">
+          <td><p></p></td>
+        </tr>
+        <tr style="vertical-align: top">
+          <td colspan="2">
+            <table style="width: 800px; border-spacing: 0">
+              <tbody>
+                <tr
+                  style="
+                    background-color: #eee;
+                    line-height: 45px;
+                    border-top: solid 1px #ccc;
+                    font-weight: bold;
+                    text-align: center;
+                  "
+                >
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 20px;
+                      height: 45px;
+                    "
+                  >
+                    #
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      text-align: left;
+                      width: 230px;
+                      height: 45px;
+                    "
+                  >
+                    Items
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 120px;
+                      height: 45px;
+                    "
+                  >
+                    Qty
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 120px;
+                      height: 45px;
+                    "
+                  >
+                    Setup cost
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 120px;
+                      height: 45px;
+                    "
+                  >
+                    Unit cost
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 120px;
+                      height: 45px;
+                    "
+                  >
+                    Local Freight
+                  </td>
+                  <td
+                    style="
+                      border-top: solid 1px #ccc;
+                      border-bottom: solid 1px #ccc;
+                      width: 120px;
+                      height: 45px;
+                    "
+                  >
+                    {{ exportForm.gst_name ? 'Total(ex-GST)($)' : 'Total($)' }}
+                  </td>
+                </tr>
+
+                <tr
+                  v-for="(row, index) in step3FormList"
+                  :key="index"
+                  style="text-align: center; line-height: 45px"
+                >
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    {{ index + 1 }}
+                  </td>
+                  <td
+                    style="
+                      border-bottom: solid 1px #ccc;
+                      text-align: left;
+                      height: 45px;
+                    "
+                  >
+                    {{ productInfo.product_name }}
+                    <br />
+                    By {{ getFreightType(row) }}&nbsp;-&nbsp;{{
+                      exportForm[`zdy_date_${row.typeNumber}_${row.number}`]
+                    }}{{
+                      exportForm[`cycle_name_${row.typeNumber}_${row.number}`]
+                    }}
+                  </td>
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    {{ row.number }} units
+                  </td>
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    ${{ row.setup_cost }}
+                    {{ exportForm.gst_name ? '+GST' : '' }}
+                  </td>
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    ${{ row.sold_unit }} {{ exportForm.gst_name ? '+GST' : '' }}
+                  </td>
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    ${{ row.add_freight_cost }}
+                    {{ exportForm.gst_name ? '+GST' : '' }}
+                  </td>
+                  <td style="border-bottom: solid 1px #ccc; height: 45px">
+                    ${{ row.sold_price }}
+                    {{ exportForm.gst_name ? '+GST' : '' }}
+                  </td>
+                </tr>
+
+                <tr>
+                  <td
+                    colspan="7"
+                    style="text-align: left; line-height: 45px"
+                  >
+                    Freight to {{ city_short[city] || city }} is included.Price
+                    based on exchange rate of {{ exportForm.exchange }}.Price is
+                    only valid for {{ exportForm.days }} days.
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+
+        <!-- <tr>
+          <td colspan="2">
+            <p style="line-height: 45px">
+              <strong style="border-bottom: dashed 2px #000; padding: 10px">
+                Notes
+              </strong>
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <p style="padding-top: 20px">{php}echo $notes;{/php}</p>
+          </td>
+        </tr> -->
+
+        <tr>
+          <td colspan="2">
+            <p style="padding-top: 20px">
+              <img
+                v-for="(item, index) in otherPicture"
+                :key="index"
+                :src="item"
+                width="250px"
+                style="padding-right: 10px"
+              />
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <p>
+              <a :href="mainPicture">{{ mainPicture }}</a>
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <p
+              v-for="p in otherPicture"
+              :key="p"
+            >
+              <a
+                :href="p"
+                target="_blank"
+              >
+                {{ p }}
+              </a>
+            </p>
+          </td>
+        </tr>
+
+        <tr>
+          <td
+            colspan="2"
+            style="text-align: center"
+          >
+            <img
+              style="margin-top: 10px"
+              src="http://zohocrmapi.promocollection.com.au/static/uploads/logo/pdf_end.png"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, computed } from 'vue'
+import jspdf from 'jspdf'
+import html2canvas from 'html2canvas'
+import dayjs from 'dayjs'
+import { downloadPDF } from '@/api/indent'
+defineComponent({
+  name: 'ComponentExportQuota2',
+})
+const {
+  city = '',
+  city2 = '',
+  productInfo = {} as any,
+  exportForm = {} as any,
+  step2FormList = [],
+  step3FormList = [],
+  creatorOptions = [],
+} = defineProps<{
+  city: string
+  city2: string
+  productInfo: object
+  exportForm: object
+  step2FormList: any[]
+  step3FormList: any[]
+  creatorOptions: any[]
+}>()
+const city_short = {
+  SYD: 'Sydney',
+  Melb: 'Melbourne',
+  Brisbane: 'Brisbane',
+  SA: 'Adelaide',
+  WA: 'Perth',
+  US: 'US',
+  '': '',
+} as any
+
+const getLogoPath = () => {
+  return new URL('/assets/logo.png', import.meta.url).href
+}
+const getFreightType = (row: any) => {
+  let result = 'Sea'
+
+  if (row.typeNumber < 2) {
+    result = 'Air'
+  }
+  if (row.typeNumber === 3) {
+    const temp: any[] = step2FormList.filter(
+      (i: any) => i.number === row.number,
+    )
+    if (
+      temp.length &&
+      temp[0].fclData?.method_fcl &&
+      ['快递', '空运'].includes(temp[0].fclData.method_fcl)
+    ) {
+      result = 'Air'
+    }
+  }
+  return result
+}
+const generatePDF = () => {
+  downloadPDF({
+    content: document.getElementById('pdfTarget')?.outerHTML,
+    title: 'test_pdf',
+    create_time: '',
+  }).then((res: any) => {
+    console.log(res, 'res pdf')
+    if (res.result?.length) {
+      window.open(import.meta.env.VITE_API_PREFIX + '/' + res.result)
+    }
+  })
+}
+// 把这个方法暴露给父组件, 否则无法在父组件被调用
+defineExpose({ generatePDF })
+const shouldSplit = (
+  nodes: HTMLElement[],
+  index: number,
+  pageHeight: number,
+) => {
+  // 计算当前这块dom是否跨越了a4大小，以此分割
+  // console.log(index, 'index start')
+  if (
+    nodes[index].offsetTop + nodes[index].clientHeight < pageHeight &&
+    nodes[index + 1] &&
+    nodes[index + 1].offsetTop + nodes[index + 1].clientHeight > pageHeight
+  ) {
+    return true
+  }
+  return false
+}
+
+const mainPicture = computed(() => {
+  if (
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length
+  ) {
+    return productInfo.product_image[0]
+  }
+  return ''
+})
+const otherPicture = computed(() => {
+  if (
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length > 1
+  ) {
+    return productInfo.product_image.slice(1)
+  }
+  return []
+})
+const computedCreator = computed(() => {
+  let result = ''
+  if (creatorOptions.length) {
+    const a: any[] = creatorOptions.filter(
+      (i: any) => i.value === exportForm.saleperson,
+    )
+    if (a.length) result = a[0].label
+  }
+  return result
+})
+</script>
+<style lang="scss" scoped>
+$subColor: #777;
+.pdf-wrap {
+  position: fixed;
+  // top: 0;
+  // left: 0;
+  // z-index: 9999;
+  // top: -9999px;
+  // right: -9999px;
+  box-sizing: border-box;
+  width: 21cm;
+  margin: 0 auto 12px;
+  box-shadow: 1px 1px 2pt 0px $subColor;
+}
+</style>