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

<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
              v-if="mainPicture"
              :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.product_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>
              <span
                v-html="productInfo.product_other.replace(/\n/g, '<br>')"
              ></span>
            </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">
                    {{ formatNumber(row.number, true) }}&nbsp;units
                  </td>
                  <td style="border-bottom: solid 1px #ccc; height: 45px">
                    ${{ formatNumber(row.setup_cost)
                    }}{{ exportForm.gst_name ? '+GST' : '' }}
                  </td>
                  <td style="border-bottom: solid 1px #ccc; height: 45px">
                    ${{ formatNumber(row.sold_unit)
                    }}{{ exportForm.gst_name ? '+GST' : '' }}
                  </td>
                  <td style="border-bottom: solid 1px #ccc; height: 45px">
                    ${{ formatNumber(row.add_freight_cost)
                    }}{{ exportForm.gst_name ? '+GST' : '' }}
                  </td>
                  <td style="border-bottom: solid 1px #ccc; height: 45px">
                    ${{ formatNumber(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" v-html="exportForm.notes.replace(/\n/g, '<br>')"></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: productInfo.product_name || '_',
    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
})

// 处理数字, 保留两位小数, 即使是整数也显示两位00, 每3位用英文逗号分割
const formatNumber = (number: number, no00 = false) => {
  const num = Number(number)
  if (Number.isNaN(num)) return '0.00'
  return no00
    ? `${num}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    : num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
</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>