|
|
@@ -0,0 +1,2390 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ v-if="loading"
|
|
|
+ v-loading="true"
|
|
|
+ class="view-window"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="position: fixed; top: 20px; right: 100px; z-index: 2"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ @click="formVisible = !formVisible"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ size="18px"
|
|
|
+ color="#fff"
|
|
|
+ >
|
|
|
+ <Switch />
|
|
|
+ </el-icon>
|
|
|
+ {{ formVisible ? 'Preview PDF' : 'Show Form' }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :disabled="!formVisible"
|
|
|
+ @click="checkForm(mainForm)"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ size="20px"
|
|
|
+ color="#fff"
|
|
|
+ >
|
|
|
+ <FolderAdd />
|
|
|
+ </el-icon>
|
|
|
+ Save & Attach
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="formVisible"
|
|
|
+ class="screen"
|
|
|
+ >
|
|
|
+ <div class="flex between page-title-wrap">
|
|
|
+ <div class="flex">
|
|
|
+ <el-icon
|
|
|
+ size="36px"
|
|
|
+ :color="variables.mainColor"
|
|
|
+ >
|
|
|
+ <ShoppingCart />
|
|
|
+ </el-icon>
|
|
|
+ <div class="page-title">New Purchase Order</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="mainForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="formRule"
|
|
|
+ label-width="120px"
|
|
|
+ >
|
|
|
+ <div class="flex start">
|
|
|
+ <div class="layout-left">
|
|
|
+ <el-form-item label="Order Type">
|
|
|
+ <el-select
|
|
|
+ v-model="form.Order_Type"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="please select order type"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in orderTypeList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Artwork Link"
|
|
|
+ prop="Artwork_Link"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.Artwork_Link"
|
|
|
+ placeholder="Please input"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="Currency">
|
|
|
+ <el-select
|
|
|
+ v-model="form.Currency"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="please select currency"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in currencyList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="layout-right flex-auto">
|
|
|
+ <div style="position: absolute; right: 0; top: 0">
|
|
|
+ <el-form-item label="Template:">
|
|
|
+ <el-select
|
|
|
+ v-model="currentCompany"
|
|
|
+ style="width: 150px"
|
|
|
+ @change="onCompanyTemplateChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="company in companyList"
|
|
|
+ :key="company.id"
|
|
|
+ :value="company.id"
|
|
|
+ :label="company.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="company-info">
|
|
|
+ <div class="company-name">{{ computedCompany.name }}</div>
|
|
|
+ <div class="flex center">
|
|
|
+ <div class="company-addr">
|
|
|
+ 地址: {{ computedCompany.addr }}
|
|
|
+ </div>
|
|
|
+ <div class="company-phone">
|
|
|
+ | 电话: {{ computedCompany.phone }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="computedCompany.fax"
|
|
|
+ class="company-fax"
|
|
|
+ >
|
|
|
+ | 传真: {{ computedCompany.phone }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pdf-title">采购合同</div>
|
|
|
+ <div class="pdf-title-bg">
|
|
|
+ <div class="left"></div>
|
|
|
+ <div class="right"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex start between form-area">
|
|
|
+ <div class="form-area-left">
|
|
|
+ <div class="">
|
|
|
+ <span style="color: #f56c6c">*</span>
|
|
|
+ 供应商(乙方) :
|
|
|
+ </div>
|
|
|
+ <div>{{ computedVendor.Primary_Contact_name }}</div>
|
|
|
+ <el-form-item
|
|
|
+ label-width="0"
|
|
|
+ prop="currentVendor"
|
|
|
+ >
|
|
|
+ <el-select-v2
|
|
|
+ v-model="form.currentVendor"
|
|
|
+ :remote-method="getSupplierLists"
|
|
|
+ remote
|
|
|
+ style="width: 100%"
|
|
|
+ :loading="vendorLoading"
|
|
|
+ :options="vendorList"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ ></el-select-v2>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="">{{ computedVendor.PDF_display }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-area-right">
|
|
|
+ <el-form-item label="采购订单 #:">
|
|
|
+ Generate once PO submitted
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="订单号 # :"
|
|
|
+ prop="saleOrderId"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.saleOrderId"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="日期:"
|
|
|
+ prop="PO_Date"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.PO_Date"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 100%"
|
|
|
+ type="date"
|
|
|
+ placeholder=""
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="付款方式 :">
|
|
|
+ <el-select
|
|
|
+ v-model="form.Payment_Terms"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in supplierPaymentTermsLists"
|
|
|
+ :key="index"
|
|
|
+ :value="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参考 :">
|
|
|
+ <el-input v-model="form.Title"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 退税版没有这几项 -->
|
|
|
+ <template
|
|
|
+ v-if="typeof computedCompany.taxReimbursement === 'undefined'"
|
|
|
+ >
|
|
|
+ <el-form-item label="收货详情 :">
|
|
|
+ <el-select
|
|
|
+ v-model="form.field9"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in addressList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="收件人 :"
|
|
|
+ prop="field7"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.field7"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="联系电话 :"
|
|
|
+ prop="field8"
|
|
|
+ >
|
|
|
+ <el-input v-model="form.field8"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item
|
|
|
+ label="工厂交货日期 :"
|
|
|
+ prop="field6"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.field6"
|
|
|
+ style="width: 100%"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="product-table-separator"></div>
|
|
|
+ <div class="product-table">
|
|
|
+ <table
|
|
|
+ border="0"
|
|
|
+ cellspacing="0"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <th class="product">Product</th>
|
|
|
+ <th class="quantity">Quantity</th>
|
|
|
+ <th class="rate">Rate</th>
|
|
|
+ <th class="requirement">Requirement</th>
|
|
|
+ <th class="amount">Amount</th>
|
|
|
+ <th class="discount">Discount</th>
|
|
|
+ <th class="action">Action</th>
|
|
|
+ </tr>
|
|
|
+ <tr
|
|
|
+ v-for="(product, index) in form.productList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <td class="product">
|
|
|
+ <el-form-item
|
|
|
+ label=""
|
|
|
+ label-width="0"
|
|
|
+ :prop="'productList.' + index + '.id'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-select-v2
|
|
|
+ v-model="product.id"
|
|
|
+ style="width: 100%; margin-bottom: 4pt"
|
|
|
+ :options="product.candidate"
|
|
|
+ :loading="productLoading"
|
|
|
+ :remote-method="(e:string) => getProductList(e, product)"
|
|
|
+ remote
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ @change="(e) => onProductSelect(e, product)"
|
|
|
+ ></el-select-v2>
|
|
|
+ </el-form-item>
|
|
|
+ <el-input
|
|
|
+ v-model="product.desc"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="Free text"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td class="quantity">
|
|
|
+ <el-form-item
|
|
|
+ label=""
|
|
|
+ label-width="0"
|
|
|
+ :prop="'productList.' + index + '.quantity'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="product.quantity"
|
|
|
+ type="number"
|
|
|
+ min="1"
|
|
|
+ @change="(e) => onInputChange(e, product, 'quantity')"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </td>
|
|
|
+ <td class="rate">
|
|
|
+ <el-form-item
|
|
|
+ label=""
|
|
|
+ label-width="0"
|
|
|
+ :prop="'productList.' + index + '.rate'"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="product.rate"
|
|
|
+ type="number"
|
|
|
+ @change="(e) => onInputChange(e, product, 'rate')"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </td>
|
|
|
+ <td class="requirement">
|
|
|
+ <el-input
|
|
|
+ v-model="product.requirement"
|
|
|
+ rows="2"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="Free text"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td class="amount">
|
|
|
+ <el-input
|
|
|
+ v-model="product.amount"
|
|
|
+ type="number"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td class="discount">
|
|
|
+ <el-input
|
|
|
+ v-model="product.discount"
|
|
|
+ type="number"
|
|
|
+ @change="(e) => onInputChange(e, product, 'discount')"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td class="action">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ @click="form.productList.splice(index, 1)"
|
|
|
+ >
|
|
|
+ Delete
|
|
|
+ </el-button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="addRow"
|
|
|
+ >
|
|
|
+ Add Row
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="flex end">
|
|
|
+ <div class="product-total-table">
|
|
|
+ <div class="total-item">
|
|
|
+ <div class="label">Sub Total</div>
|
|
|
+ <div class="value">{{ subTotal.toFixed(2) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="total-item">
|
|
|
+ <div class="label">Total Discount</div>
|
|
|
+ <div class="value">
|
|
|
+ {{ totalDiscount.toFixed(2) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="total-item">
|
|
|
+ <div class="label">Adjustment</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input
|
|
|
+ v-model="adjustment"
|
|
|
+ style="width: 100%"
|
|
|
+ type="number"
|
|
|
+ @change="(e) => formatAdjustment(e)"
|
|
|
+ @input="(e) => formatAdjustment(e)"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="total-item">
|
|
|
+ <div class="label">Grand Total</div>
|
|
|
+ <div class="value">
|
|
|
+ {{ grandTotal.toFixed(2) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="note-form-area">
|
|
|
+ <div class="sub-form-title">注意事项:</div>
|
|
|
+ <el-form-item label="印刷质量:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.field12"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品质量:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.field13"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="质量承诺:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.field10"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="箱子箱唛:">
|
|
|
+ <el-input
|
|
|
+ v-model="form.field11"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sub-form-title">服务条款</div>
|
|
|
+ <template v-if="currentCompany === 'PangeaTaxReimbursement'">
|
|
|
+ <div class="rule-item flex">
|
|
|
+ 一、合同价为含税价，税率为:
|
|
|
+ <span style="color: #f56c6c">*</span>
|
|
|
+ <el-form-item
|
|
|
+ label-width="10"
|
|
|
+ prop="field4"
|
|
|
+ :rules="{
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.field4"
|
|
|
+ size="small"
|
|
|
+ style="width: 120px"
|
|
|
+ >
|
|
|
+ <template #append>%</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="rule-item flex">
|
|
|
+ 二、运费条款:
|
|
|
+ <span style="color: #f56c6c">*</span>
|
|
|
+ <el-form-item label-width="10">
|
|
|
+ <el-select
|
|
|
+ v-model="form.field5"
|
|
|
+ size="small"
|
|
|
+ style="width: 110px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in field5_lists"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in currentServiceRule"
|
|
|
+ :key="index"
|
|
|
+ class="rule-item"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <br />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="print"
|
|
|
+ :class="{ hidden: formVisible && !loading }"
|
|
|
+ >
|
|
|
+ <div class="pdf-wrap">
|
|
|
+ <div
|
|
|
+ id="pdfElement"
|
|
|
+ ref="pdfElement"
|
|
|
+ class="preview-area"
|
|
|
+ >
|
|
|
+ <div class="company-info">
|
|
|
+ <div class="company-name">{{ computedCompany.name }}</div>
|
|
|
+ <div class="flex center">
|
|
|
+ <div class="company-addr">
|
|
|
+ 地址: {{ computedCompany.addr }}
|
|
|
+ </div>
|
|
|
+ <div class="company-phone">
|
|
|
+ | 电话: {{ computedCompany.phone }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="computedCompany.fax"
|
|
|
+ class="company-fax"
|
|
|
+ >
|
|
|
+ | 传真: {{ computedCompany.phone }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <table class="pdf-title-bg">
|
|
|
+ <tr>
|
|
|
+ <td class="left">
|
|
|
+ <div> </div>
|
|
|
+ </td>
|
|
|
+ <td class="center">
|
|
|
+ <div class="pdf-title">采购合同</div>
|
|
|
+ </td>
|
|
|
+ <td class="right">
|
|
|
+ <div> </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="form-area">
|
|
|
+ <table
|
|
|
+ border="0"
|
|
|
+ cellspacing="0"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <td class="column-vendor">供应商(乙方) :</td>
|
|
|
+ <td class="column-form-label">采购订单 #:</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ longPONumber || '' }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="column-vendor">
|
|
|
+ {{ computedVendor.Primary_Contact_name }}
|
|
|
+ </td>
|
|
|
+ <td class="column-form-label">订单号 # :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.saleOrderId }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="column-vendor">
|
|
|
+ {{ computedVendor.label }}
|
|
|
+ </td>
|
|
|
+ <td class="column-form-label">日期 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.PO_Date }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td
|
|
|
+ class="column-vendor"
|
|
|
+ rowspan="7"
|
|
|
+ >
|
|
|
+ {{ computedVendor.PDF_display }}
|
|
|
+ </td>
|
|
|
+ <td class="column-form-label">付款方式 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{
|
|
|
+ form.Payment_Terms !== '-None-' ? form.Payment_Terms : ''
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="column-form-label">参考 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.Title }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-if="typeof computedCompany.taxReimbursement === 'undefined'"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <td class="column-form-label">收货详情 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.field9 }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="column-form-label">收件人 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.field7 }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="column-form-label">联系电话 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.field8 }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td class="column-form-label">工厂交货日期 :</td>
|
|
|
+ <td class="column-form-value">
|
|
|
+ {{ form.field6 }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="product-table-separator"></div>
|
|
|
+ <div class="product-table">
|
|
|
+ <table
|
|
|
+ border="0"
|
|
|
+ cellspacing="0"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <th class="row-index">#</th>
|
|
|
+ <th>品目</th>
|
|
|
+ <th>要求</th>
|
|
|
+ <th>数量</th>
|
|
|
+ <th>价钱</th>
|
|
|
+ <th>金额</th>
|
|
|
+ </tr>
|
|
|
+ <tr
|
|
|
+ v-for="(product, index) in form.productList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <td class="row-index">{{ index + 1 }}.</td>
|
|
|
+ <td>
|
|
|
+ <div>{{ product.name }}</div>
|
|
|
+ <div class="desc">{{ product.desc }}</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ product.requirement }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ product.quantity }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ Number(product.rate).toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ Number(product.amount).toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <br /> -->
|
|
|
+ <div class="flex between start">
|
|
|
+ <div class="note-form-area">
|
|
|
+ <div class="sub-form-title">注意事项:</div>
|
|
|
+ <div class="">
|
|
|
+ <div class="label">印刷质量:</div>
|
|
|
+ <div class="value">{{ form.field12 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="label">产品质量:</div>
|
|
|
+ <div class="value">{{ form.field13 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="label">质量承诺:</div>
|
|
|
+ <div class="value">{{ form.field10 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="label">箱子箱唛:</div>
|
|
|
+ <div class="value">{{ form.field11 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="product-total-table">
|
|
|
+ <div class="total-item flex">
|
|
|
+ <div class="label">小计 </div>
|
|
|
+ <div class="value">
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ subTotal.toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="total-item flex">
|
|
|
+ <div class="label">合计 </div>
|
|
|
+ <div class="value">
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ grandTotal.toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <br />
|
|
|
+ <div class="sub-form-title">服务条款</div>
|
|
|
+ <template v-if="currentCompany === 'PangeaTaxReimbursement'">
|
|
|
+ <div class="rule-item">
|
|
|
+ 一、合同价为含税价，税率为: {{ form.field4 }} %
|
|
|
+ </div>
|
|
|
+ <div class="rule-item">二、运费条款: {{ form.field5 }}</div>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in currentServiceRule"
|
|
|
+ :key="index"
|
|
|
+ class="rule-item"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <br />
|
|
|
+ <div class="signature-area">
|
|
|
+ <div class="company-seal"></div>
|
|
|
+ <div class="first-party">
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="align-items: flex-end"
|
|
|
+ >
|
|
|
+ <div v-show="!computedCompany.label.includes('Pangea')">
|
|
|
+ 甲方(盖章):
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="sign-wrap"
|
|
|
+ :class="{ pangea: computedCompany.label.includes('Pangea') }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="computedCompany.signPath"
|
|
|
+ :src="computedCompany.signPath"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="">代表人: {{ userInfo.full_name }}</div>
|
|
|
+ <div class="">日期: {{ form.PO_Date }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="second-party">
|
|
|
+ <div class="">乙方(盖章):</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="computedCompany.taxReimbursement"
|
|
|
+ class="pdf-wrap"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id=""
|
|
|
+ ref="pdfElement2"
|
|
|
+ class="preview-area2"
|
|
|
+ >
|
|
|
+ <div class="supplier-name">
|
|
|
+ {{ computedVendor.Suppliers_Name }}
|
|
|
+ </div>
|
|
|
+ <div class="billing-addr">
|
|
|
+ {{ computedVendor.Billing_Address || '' }}
|
|
|
+ </div>
|
|
|
+ <div class="flex around contact-info">
|
|
|
+ <div class="flex">
|
|
|
+ <div>Tel No.:</div>
|
|
|
+ <div> {{ computedVendor.Phone }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex center">
|
|
|
+ <div>E-mail:</div>
|
|
|
+ <div class=""> {{ computedVendor.Email }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="base-info-area">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex start left">
|
|
|
+ <div class="base-info-label">TO:</div>
|
|
|
+ <div
|
|
|
+ v-if="currentCompany === 'AZYTaxReimbursement'"
|
|
|
+ class="base-info-value"
|
|
|
+ >
|
|
|
+ Azy Trading Pty Ltd
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else-if="currentCompany === 'FOTTaxReimbursement'"
|
|
|
+ class="base-info-value"
|
|
|
+ >
|
|
|
+ Fair Ocean Trading Australia Pty Ltd
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right flex">
|
|
|
+ <div class="base-info-label">Date:</div>
|
|
|
+ <div class="base-info-value">{{ form.PO_Date }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex start">
|
|
|
+ <div class="left flex start">
|
|
|
+ <div class="base-info-label">ADD:</div>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ v-if="currentCompany === 'AZYTaxReimbursement'"
|
|
|
+ class="base-info-value"
|
|
|
+ >
|
|
|
+ UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG
|
|
|
+ WAN, HK
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else-if="currentCompany === 'FOTTaxReimbursement'"
|
|
|
+ class="base-info-value"
|
|
|
+ >
|
|
|
+ 15/10 Chilvers Road, Thornleigh, NSW 2120
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right flex">
|
|
|
+ <div class="base-info-label">P/I. NO.</div>
|
|
|
+ <div class="base-info-value">{{ longPONumber }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex start">
|
|
|
+ <div class="left flex">
|
|
|
+ <div class="base-info-label">ATTN:</div>
|
|
|
+ <div class="base-info-value">Accounts</div>
|
|
|
+ </div>
|
|
|
+ <div class="right flex">
|
|
|
+ <div class="base-info-label">Reference:</div>
|
|
|
+ <div class="base-info-value">{{ PONumber }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex start">
|
|
|
+ <div class="flex left">
|
|
|
+ <template v-if="currentCompany === 'FOTTaxReimbursement'">
|
|
|
+ <div class="base-info-label">TEL NO:</div>
|
|
|
+ <div class="base-info-value">02 9008 1322</div>
|
|
|
+ </template>
|
|
|
+ <div v-else></div>
|
|
|
+ </div>
|
|
|
+ <div class="right flex">
|
|
|
+ <div class="base-info-label">Payment Term:</div>
|
|
|
+ <div class="base-info-value">
|
|
|
+ {{ computedVendor.Payment_Terms }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table-title">PROFORMA INVOICE</div>
|
|
|
+ <div class="product-table">
|
|
|
+ <table cellspacing="0">
|
|
|
+ <tr>
|
|
|
+ <th>ITEM</th>
|
|
|
+ <th>DESCRIPTION</th>
|
|
|
+ <th>QTY(pcs)</th>
|
|
|
+ <th>UNIT PRICE</th>
|
|
|
+ <th>TOPTAL VALUE</th>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr
|
|
|
+ v-for="(product, index) in form.productList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <td>
|
|
|
+ <div>{{ product.name }}</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="desc">{{ product.desc }}</div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ product.quantity }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ Number(product.rate).toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{
|
|
|
+ Number(product.amount).toFixed(computedDeci)
|
|
|
+ }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div class="flex end">
|
|
|
+ <div
|
|
|
+ class="flex"
|
|
|
+ style="margin-top: 10pt"
|
|
|
+ >
|
|
|
+ <div style="margin: 0 100pt 0 0">TOTAL</div>
|
|
|
+ <div>
|
|
|
+ {{ currentCurrency.country
|
|
|
+ }}{{ currentCurrency.symbol }} {{ subTotal }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <div class="bank-info-area">
|
|
|
+ <div class="flex">
|
|
|
+ <div>Bank Information</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">Beneficiary:</div>
|
|
|
+ <div class="bank-info-value">
|
|
|
+ {{ computedVendor.Suppliers_Name }}dd
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">Bank:</div>
|
|
|
+ <div class="bank-info-value">
|
|
|
+ {{ computedVendor.Bank_Branch_Name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">Bank Add:</div>
|
|
|
+ <div class="bank-info-value">{{}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">A/C No.:</div>
|
|
|
+ <div class="bank-info-value">
|
|
|
+ {{ computedVendor.Bank_Account }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">Bank Code:</div>
|
|
|
+ <div class="bank-info-value">{{}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">SWIFT CODE:</div>
|
|
|
+ <div class="bank-info-value">
|
|
|
+ {{ computedVendor.Swift_Code_IBAN }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="bank-info-label">Add:</div>
|
|
|
+ <div class="bank-info-value">{{}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ <div class="flex between start">
|
|
|
+ <div class="">
|
|
|
+ <div class="">BUYERS' SIGNATURE</div>
|
|
|
+ <div class="sign-wrap">
|
|
|
+ <img
|
|
|
+ v-if="computedCompany.signPath"
|
|
|
+ :src="computedCompany.signPath"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <div class="">SELLER'S SIGNATURE</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+export default defineComponent({
|
|
|
+ name: 'PurchaseOrderEdit',
|
|
|
+})
|
|
|
+</script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, defineComponent, ref, unref } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import {
|
|
|
+ ElButton,
|
|
|
+ ElSelectV2,
|
|
|
+ ElSelect,
|
|
|
+ ElOption,
|
|
|
+ ElIcon,
|
|
|
+ ElInput,
|
|
|
+ ElForm,
|
|
|
+ ElFormItem,
|
|
|
+ ElDatePicker,
|
|
|
+ ElMessage,
|
|
|
+ ElNotification,
|
|
|
+} from 'element-plus'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { ShoppingCart, FolderAdd, Switch } from '@element-plus/icons-vue'
|
|
|
+import axios from 'axios'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import jspdf from 'jspdf'
|
|
|
+import html2canvas from 'html2canvas'
|
|
|
+import utils from '@/utils/index'
|
|
|
+import variables from '@/assets/css/var.module.scss'
|
|
|
+import {
|
|
|
+ ServiceTypeKeyEnum,
|
|
|
+ TypeService,
|
|
|
+ ISelectItem,
|
|
|
+ IProductItem,
|
|
|
+ IUser,
|
|
|
+ ICompanyItem,
|
|
|
+ IVendorItem,
|
|
|
+ IForm,
|
|
|
+} from '@/interface'
|
|
|
+
|
|
|
+computed(() => {
|
|
|
+ return variables
|
|
|
+})
|
|
|
+const formVisible = ref(true)
|
|
|
+const loading = ref(false)
|
|
|
+// 订单ID. 例如5757019000000428205, 不是串号.
|
|
|
+const POID = ref('')
|
|
|
+// po 串号. 例如 PO2025
|
|
|
+const PONumber = ref('')
|
|
|
+// po 长串号. 例如 ZCPO2025
|
|
|
+const longPONumber = ref('')
|
|
|
+const mainForm = ref<FormInstance>()
|
|
|
+const checkForm = function (formEl: FormInstance | undefined) {
|
|
|
+ if (!formEl) return
|
|
|
+
|
|
|
+ formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ submit()
|
|
|
+ } else {
|
|
|
+ console.log('check form has not pass!', fields)
|
|
|
+ ElMessage.error('请检查表单必填项')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const submit = () => {
|
|
|
+ loading.value = true
|
|
|
+ createPurchaseOrders()
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ getPurchaseOrdersData()
|
|
|
+ .then(() => {
|
|
|
+ generatePDF()
|
|
|
+ .then(() => {
|
|
|
+ ElNotification({
|
|
|
+ type: 'success',
|
|
|
+ title: '任务已成功处理',
|
|
|
+ message: '本页面将在数秒后自动关闭',
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ window.close()
|
|
|
+ }, 5000)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // loading.value = false
|
|
|
+ const msg = '获取PO详情失败, 未能正确生成PDF'
|
|
|
+ console.log(msg)
|
|
|
+ ElNotification({ duration: 0, title: msg, type: 'error' })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // loading.value = false
|
|
|
+ const msg = '创建PO失败'
|
|
|
+ console.log(msg)
|
|
|
+
|
|
|
+ ElNotification({ duration: 0, title: msg, type: 'error' })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const pdfElement = ref()
|
|
|
+const pdfElement2 = ref()
|
|
|
+const generatePDF = (ele = pdfElement, isFirstTime = true) => {
|
|
|
+ const A4_WIDTH = 592.28
|
|
|
+ const A4_HEIGHT = 841.89
|
|
|
+ let imageWrapper = unref(ele) // 获取DOM
|
|
|
+
|
|
|
+ // let pageHeight = (imageWrapper.scrollWidth / A4_WIDTH) * A4_HEIGHT
|
|
|
+ let pageHeight = (imageWrapper.clientWidth / A4_WIDTH) * A4_HEIGHT
|
|
|
+ let lableListID = imageWrapper.querySelectorAll('div')
|
|
|
+ // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
|
|
|
+ for (let i = 0; i < lableListID.length; i++) {
|
|
|
+ let multiple = Math.ceil(
|
|
|
+ (lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight,
|
|
|
+ )
|
|
|
+ if (isSplit(lableListID, i, multiple * pageHeight)) {
|
|
|
+ let divParent = lableListID[i].parentNode // 获取该div的父节点
|
|
|
+ let newNode = document.createElement('div')
|
|
|
+ newNode.className = 'empty-div'
|
|
|
+ newNode.style.background = '#fff'
|
|
|
+ let _H =
|
|
|
+ multiple * pageHeight -
|
|
|
+ (lableListID[i].offsetTop + lableListID[i].offsetHeight)
|
|
|
+ //留白
|
|
|
+ newNode.style.height = _H + 30 + 'px'
|
|
|
+ newNode.style.width = '100%'
|
|
|
+ let next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
|
|
|
+ // 判断兄弟节点是否存在
|
|
|
+ if (next) {
|
|
|
+ // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
|
|
|
+ divParent.insertBefore(newNode, next)
|
|
|
+ } else {
|
|
|
+ // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
|
|
|
+ divParent.appendChild(newNode)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ html2canvas(imageWrapper, {
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: '#fff', //一定要设背景颜色，否则有的浏览器就会变花~，比如Edge
|
|
|
+ scale: 3, // 缩放倍率调整清晰度
|
|
|
+ }).then((canvas) => {
|
|
|
+ let pdf = new jspdf('p', 'mm', 'a4') //A4纸，纵向
|
|
|
+ let ctx = canvas.getContext('2d'),
|
|
|
+ a4ContentWidth = 190,
|
|
|
+ a4ContentHeight = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
|
|
|
+ imgHeight = Math.floor(
|
|
|
+ (a4ContentHeight / a4ContentWidth) * canvas.width,
|
|
|
+ ), //按A4显示比例换算一页图像的像素高度
|
|
|
+ renderedHeight = 0
|
|
|
+
|
|
|
+ while (renderedHeight < canvas.height) {
|
|
|
+ let page = document.createElement('canvas')
|
|
|
+ page.width = canvas.width
|
|
|
+ page.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页
|
|
|
+ //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
|
|
|
+ // @ts-ignore: Object is possibly 'null'.
|
|
|
+ page
|
|
|
+ .getContext('2d')
|
|
|
+ .putImageData(
|
|
|
+ ctx!.getImageData(
|
|
|
+ 0,
|
|
|
+ renderedHeight,
|
|
|
+ canvas.width,
|
|
|
+ Math.min(imgHeight, canvas.height - renderedHeight),
|
|
|
+ ),
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ )
|
|
|
+ // document.body.appendChild(page)
|
|
|
+ pdf.addImage(
|
|
|
+ page.toDataURL('image/jpeg', 0.2),
|
|
|
+ 'JPEG',
|
|
|
+ 10,
|
|
|
+ 10,
|
|
|
+ a4ContentWidth,
|
|
|
+ Math.min(
|
|
|
+ a4ContentHeight,
|
|
|
+ a4ContentWidth * (page.height / page.width),
|
|
|
+ ),
|
|
|
+ ) //添加图像到页面，保留10mm边距
|
|
|
+ renderedHeight += imgHeight
|
|
|
+ if (renderedHeight < canvas.height) pdf.addPage() //如果后面还有内容，添加一个空页
|
|
|
+ }
|
|
|
+ const fileName = isFirstTime ? 'attachment_file' : 'attachment_file_2'
|
|
|
+
|
|
|
+ sendPDF(pdf.output('datauristring'), fileName)
|
|
|
+ .then(() => {
|
|
|
+ // 有两个退税版模版, 需要生成两个PDF.
|
|
|
+ if (computedCompany.value.taxReimbursement === true && isFirstTime) {
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ title: '正在生成附件2 PDF',
|
|
|
+ type: 'info',
|
|
|
+ })
|
|
|
+ generatePDF(pdfElement2, false).then(() => {
|
|
|
+ resolve(true)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ resolve(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ reject(e)
|
|
|
+ })
|
|
|
+ // 本地备份一下
|
|
|
+ pdf.save(
|
|
|
+ `backup_${fileName}` + `_${dayjs().format('YYYYMMDD_HHmm')}` + '.pdf',
|
|
|
+ )
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+const isSplit = function (nodes: any, index: number, pageHeight: number) {
|
|
|
+ // 计算当前这块dom是否跨越了a4大小，以此分割
|
|
|
+ if (
|
|
|
+ nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight &&
|
|
|
+ nodes[index + 1] &&
|
|
|
+ nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
|
|
|
+ ) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+}
|
|
|
+const sendPDF = function (file: string, filename = `attachment_file`) {
|
|
|
+ const temp = file.split(',')
|
|
|
+ // @ts-ignore: Object is possibly 'null'.
|
|
|
+ const mimeType = temp[0].match(/:(.*?);/)[1]
|
|
|
+ let extName = mimeType.split('/')[1]
|
|
|
+ let bstr = window.atob(temp[1])
|
|
|
+ let n = bstr.length
|
|
|
+ let result = new Uint8Array(n)
|
|
|
+
|
|
|
+ while (n--) {
|
|
|
+ result[n] = bstr.charCodeAt(n)
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ id: POID.value,
|
|
|
+ file: new File([result], `${filename}.${extName}`, { type: mimeType }),
|
|
|
+ }
|
|
|
+ console.log(data)
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ axios
|
|
|
+ .post('/api/Purchase_orders/uploadAttachmentFile', data, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code !== 1) {
|
|
|
+ const msg = '自动创建附件失败'
|
|
|
+
|
|
|
+ ElNotification({ duration: 0, title: msg, type: 'error' })
|
|
|
+ reject(msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ title: '自动创建 PDF 成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+
|
|
|
+ resolve(true)
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ reject(e)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const createPurchaseOrders = function () {
|
|
|
+ const data = JSON.parse(JSON.stringify(unref(form)))
|
|
|
+
|
|
|
+ data.Status = 'Created'
|
|
|
+ data.Sub_Total = subTotal.value
|
|
|
+ data.Total_Taxes = 0
|
|
|
+ data.Total_Discount = totalDiscount.value
|
|
|
+ data.Adjustment = adjustment.value
|
|
|
+ data.Grand_Total = grandTotal.value
|
|
|
+ data.Subject = '这里不用填个p4'
|
|
|
+ data.Created_By = {
|
|
|
+ id: userInfo.value.users_id || route.query.user,
|
|
|
+ name: userInfo.value.full_name || '',
|
|
|
+ }
|
|
|
+ data.Vendor_Name = {
|
|
|
+ id: computedVendor.value.value,
|
|
|
+ name: computedVendor.value.label,
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(data.Related_Sales_Order, 'ddd')
|
|
|
+ data.Related_Sales_Order = {
|
|
|
+ id: form.value.saleOrderId,
|
|
|
+ name: form.value.Title,
|
|
|
+ }
|
|
|
+
|
|
|
+ data.Product_Details = data.productList.map((item: any) => {
|
|
|
+ return {
|
|
|
+ quantity: item.quantity,
|
|
|
+ Discount: item.discount || 0,
|
|
|
+ list_price: item.rate,
|
|
|
+ Tax: 0,
|
|
|
+ total: item.amount,
|
|
|
+ total_after_discount: Number(item.amount) - Number(item.discount),
|
|
|
+ net_total: Number(item.amount) - Number(item.discount),
|
|
|
+ description: item.desc,
|
|
|
+ requirement: item.requirement,
|
|
|
+ // line_tax: [],
|
|
|
+ // book: '',
|
|
|
+ // id: item.id,
|
|
|
+ product: {
|
|
|
+ // name: item.name,
|
|
|
+ id: item.id,
|
|
|
+ // Product_Code: item.Product_Code,
|
|
|
+ },
|
|
|
+ // 这两个是crm有的, 但是文档没有
|
|
|
+ List_Price_Non_Currency: item.rate,
|
|
|
+ Price_Book_Name: '',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.productList) delete data.productList
|
|
|
+ console.log(data, 'create po params')
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ axios
|
|
|
+ .post('/api/Purchase_orders/createPurchaseOrders', data, {})
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code !== 1) return
|
|
|
+ const res = response.data.result
|
|
|
+ console.log(res, 'create po')
|
|
|
+ if (res.data && res.data.length && res.data[0].code === 'SUCCESS') {
|
|
|
+ POID.value = res.data[0].details?.id || ''
|
|
|
+ resolve(res.data[0].details?.id)
|
|
|
+
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ title: '创建 Purchase Order 成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElNotification({
|
|
|
+ duration: 0,
|
|
|
+ title: '未能成功创建PO, 请稍后重试或者联系管理员',
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ reject('未能成功创建PO')
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ reject(e)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+const getPurchaseOrdersData = function () {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ axios
|
|
|
+ .post('/api/purchase_orders/getPurchaseOrdersData', {
|
|
|
+ id: POID.value,
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code !== 1) {
|
|
|
+ reject(false)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res = response.data.result[0]
|
|
|
+
|
|
|
+ longPONumber.value = res.PO_Number || ''
|
|
|
+ PONumber.value = res.Purchase_Order_Number || ''
|
|
|
+ resolve(true)
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ reject(e)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+// getPurchaseOrdersData()
|
|
|
+
|
|
|
+const currencyList = ref([
|
|
|
+ {
|
|
|
+ label: 'AUD',
|
|
|
+ symbol: '',
|
|
|
+ country: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'NZD',
|
|
|
+ symbol: '',
|
|
|
+ country: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'CNY',
|
|
|
+ symbol: '¥',
|
|
|
+ country: 'CN',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'GBP',
|
|
|
+ symbol: '',
|
|
|
+ country: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'EUR',
|
|
|
+ symbol: '',
|
|
|
+ country: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'USD',
|
|
|
+ symbol: '',
|
|
|
+ country: '',
|
|
|
+ },
|
|
|
+])
|
|
|
+const currentCurrency = computed(() => {
|
|
|
+ const temp = currencyList.value.filter((i) => i.label === form.value.Currency)
|
|
|
+ // 2是人民币
|
|
|
+ return temp.length ? temp[0] : temp[2]
|
|
|
+})
|
|
|
+
|
|
|
+let orderTypeList = ref([
|
|
|
+ {
|
|
|
+ label: '-None-',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '打样',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '大货',
|
|
|
+ },
|
|
|
+])
|
|
|
+const form = ref<IForm>({
|
|
|
+ Order_Type: '-None-',
|
|
|
+ Artwork_Link: '',
|
|
|
+ Currency: 'CNY',
|
|
|
+ // 订单号
|
|
|
+ saleOrderId: '',
|
|
|
+ // 日期
|
|
|
+ PO_Date: '',
|
|
|
+ // 付款方式
|
|
|
+ Payment_Terms: '-None-',
|
|
|
+ // 参考, so的job name
|
|
|
+ Title: '',
|
|
|
+ // 收货地址
|
|
|
+ field9: '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110',
|
|
|
+ // 收件人
|
|
|
+ field7: '',
|
|
|
+ // 联系电话
|
|
|
+ field8: '18925020659',
|
|
|
+ // 工厂交货日期
|
|
|
+ field6: '',
|
|
|
+ productList: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ id: '',
|
|
|
+ quantity: '',
|
|
|
+ rate: '',
|
|
|
+ requirement: '',
|
|
|
+ desc: '',
|
|
|
+ amount: 0,
|
|
|
+ discount: '',
|
|
|
+ candidate: [],
|
|
|
+ },
|
|
|
+ ] as IProductItem[],
|
|
|
+ // 印刷质量
|
|
|
+ field12: '',
|
|
|
+ // 产品质量
|
|
|
+ field13: '',
|
|
|
+ // 质量承诺
|
|
|
+ field10: '',
|
|
|
+ // 箱子箱唛
|
|
|
+ field11: '',
|
|
|
+ // 税率
|
|
|
+ field4: '0',
|
|
|
+ // 运费条款
|
|
|
+ field5: '供应商承担',
|
|
|
+ currentVendor: '',
|
|
|
+})
|
|
|
+
|
|
|
+const formRule = ref<FormRules>({
|
|
|
+ Artwork_Link: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ PO_Date: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ saleOrderId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ field7: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ field8: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ field6: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ currentVendor: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '必填项',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+const emptyProductItem = {
|
|
|
+ label: '',
|
|
|
+ value: '',
|
|
|
+ candidate: [],
|
|
|
+ name: '',
|
|
|
+ desc: '',
|
|
|
+ id: '',
|
|
|
+ quantity: '',
|
|
|
+ rate: '',
|
|
|
+ requirement: '',
|
|
|
+ // 未计算优惠(discount)之前的总额
|
|
|
+ amount: 0,
|
|
|
+ // 优惠额度
|
|
|
+ discount: '',
|
|
|
+}
|
|
|
+const addRow = function () {
|
|
|
+ form.value.productList.push(JSON.parse(JSON.stringify(emptyProductItem)))
|
|
|
+}
|
|
|
+const keyNeedCompute = ['quantity', 'rate']
|
|
|
+const onInputChange = function (e: any, obj: IProductItem, key: string) {
|
|
|
+ console.log(e, 'input value before enfore change')
|
|
|
+ if (typeof e === 'string') {
|
|
|
+ if (e.length) {
|
|
|
+ // 强制转换为数字类型
|
|
|
+ // obj[key] = Math.round(utils.multiply(Number(e))) / 100
|
|
|
+ obj[key] = Math.round(utils.multiply(Number(e), 1000)) / 1000
|
|
|
+ // 计算每行的总额
|
|
|
+ if (keyNeedCompute.includes(key)) {
|
|
|
+ obj.amount = utils.multiply(Number(obj.quantity), Number(obj.rate))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // obj[key] = minValue
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const onProductSelect = function (e: any, product: IProductItem) {
|
|
|
+ if (e) {
|
|
|
+ const temp = product.candidate.filter((i) => i.value === e)
|
|
|
+ if (temp.length) {
|
|
|
+ product.name = temp[0].label
|
|
|
+ product.Product_Code = temp[0].Product_Code
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ product.name = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 小计
|
|
|
+const subTotal = computed(() => {
|
|
|
+ return form.value.productList.reduce((total, current) => {
|
|
|
+ total = total + Number(current.amount)
|
|
|
+ return total
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
+// 总优惠额度
|
|
|
+const totalDiscount = computed(() => {
|
|
|
+ return form.value.productList.reduce((total, current) => {
|
|
|
+ total = total + Number(current.discount)
|
|
|
+ return total
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
+// 价格统计修正值
|
|
|
+const adjustment = ref(0)
|
|
|
+const formatAdjustment = function (string: string) {
|
|
|
+ adjustment.value = Number(string)
|
|
|
+}
|
|
|
+// 总计
|
|
|
+const grandTotal = computed(() => {
|
|
|
+ return subTotal.value - totalDiscount.value + adjustment.value
|
|
|
+})
|
|
|
+const productLoading = ref(false)
|
|
|
+const getProductList = utils.debounce(
|
|
|
+ (keyword: string, target: IProductItem) => {
|
|
|
+ productLoading.value = true
|
|
|
+ const data = {
|
|
|
+ keyword: keyword.trim(),
|
|
|
+ limit: 200,
|
|
|
+ }
|
|
|
+ axios
|
|
|
+ .post('/api/common/getProductsLists', data)
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code !== 1) return
|
|
|
+ const res = response.data.result
|
|
|
+ target.candidate = res.data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.Product_Name,
|
|
|
+ value: item.products_id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ productLoading.value = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+)
|
|
|
+
|
|
|
+const vendorList = ref<IVendorItem[]>([])
|
|
|
+const computedVendor = computed(() => {
|
|
|
+ const temp = vendorList.value.filter(
|
|
|
+ (i) => i.value === form.value.currentVendor,
|
|
|
+ )
|
|
|
+ return temp.length
|
|
|
+ ? temp[0]
|
|
|
+ : {
|
|
|
+ Primary_Contact_name: '',
|
|
|
+ PDF_display: '',
|
|
|
+ label: '',
|
|
|
+ value: '',
|
|
|
+ }
|
|
|
+})
|
|
|
+const vendorLoading = ref(false)
|
|
|
+const getSupplierLists = utils.debounce(function (string: string) {
|
|
|
+ const data = {
|
|
|
+ keyword: string.trim(),
|
|
|
+ limit: 200,
|
|
|
+ }
|
|
|
+ vendorLoading.value = true
|
|
|
+ axios
|
|
|
+ .post('/api/common/getSupplierLists', data)
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code !== 1) return
|
|
|
+ const res = response.data.result
|
|
|
+ vendorList.value = res.data.map((i: any) => {
|
|
|
+ return {
|
|
|
+ label: i.Suppliers_Name,
|
|
|
+ value: i.supplier_id,
|
|
|
+ Primary_Contact_name: i.Primary_Contact_name || '',
|
|
|
+ PDF_display: i.PDF_display || '',
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (import.meta.env.MODE !== 'production') {
|
|
|
+ vendorList.value.unshift({
|
|
|
+ Primary_Contact_name: '彭攀巅',
|
|
|
+ PDF_display: '深圳市\n广东\nCN\n支付宝\nPay@keansilicone.com\n彭攀巅',
|
|
|
+ label: '测试供应商1',
|
|
|
+ value: '5757019000000428185',
|
|
|
+ Suppliers_Name: '测试供应商1',
|
|
|
+ Email: '2850335131@qq.com',
|
|
|
+ Phone: '135 3069 5330',
|
|
|
+ Payment_Terms: 'Prepaid',
|
|
|
+ Bank_Branch_Name: '支付宝',
|
|
|
+ Bank_Account: 'Pay@keansilicone.com',
|
|
|
+ Swift_Code_IBAN: '',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ vendorLoading.value = false
|
|
|
+ })
|
|
|
+}, 1000)
|
|
|
+getSupplierLists('')
|
|
|
+
|
|
|
+const getPath = function (path: string) {
|
|
|
+ return new URL(path, import.meta.url).href
|
|
|
+}
|
|
|
+// 用于切换合同模版
|
|
|
+const companyList = ref<ICompanyItem[]>([
|
|
|
+ {
|
|
|
+ id: 'PC',
|
|
|
+ label: 'PC',
|
|
|
+ name: '澳之原贸易有限公司',
|
|
|
+ addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
|
|
|
+ phone: '020-81609790',
|
|
|
+ signPath: getPath('/assets/sign/AZY.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'Pangea',
|
|
|
+ label: 'Pangea',
|
|
|
+ name: '庞吉亚国际商务服务（广州）有限公司',
|
|
|
+ addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
|
|
|
+ phone: '020-81609790',
|
|
|
+ fax: '020-81519492',
|
|
|
+ signPath: getPath('/assets/sign/Pangea.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'PangeaTaxReimbursement',
|
|
|
+ label: 'Pangea_退税版',
|
|
|
+ name: '庞吉亚国际商务服务（广州）有限公司',
|
|
|
+ addr: '广州市越秀区八旗二马路48号内自编1号主楼自编1605、1606房',
|
|
|
+ phone: '020-81609790',
|
|
|
+ fax: '020-81519492',
|
|
|
+ // 名字叫退税版, 实际上合同没有第二份pdf. 判断是否退税版的依据是键名存在与否, 而不是这个值的真假
|
|
|
+ taxReimbursement: false,
|
|
|
+ signPath: getPath('/assets/sign/Pangea.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'AZYTaxReimbursement',
|
|
|
+ label: 'AZY_退税版',
|
|
|
+ name: '澳之原贸易有限公司',
|
|
|
+ addr: 'UNIT 12,21/F WAYSON COMM BLDG NO 28 CONNAUGHT RD WEST SHEUNG WAN,HK',
|
|
|
+ phone: '020-81609790',
|
|
|
+ taxReimbursement: true,
|
|
|
+ signPath: getPath('/assets/sign/AZY.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'FOTTaxReimbursement',
|
|
|
+ label: 'FOT_退税版',
|
|
|
+ name: 'FAIR OCEAN TRADING AUSTRALIA PTY.LTD',
|
|
|
+ addr: '15/10 Chilvers Road, Thornleigh, NSW 2120',
|
|
|
+ phone: '020-81609790',
|
|
|
+ taxReimbursement: true,
|
|
|
+ signPath: getPath('/assets/sign/FOT.png'),
|
|
|
+ },
|
|
|
+])
|
|
|
+// 切换模版后的处理
|
|
|
+const onCompanyTemplateChange = function () {
|
|
|
+ // 重置这两个字段
|
|
|
+ form.value.field5 = '供应商承担'
|
|
|
+ form.value.field4 = ''
|
|
|
+
|
|
|
+ if (typeof computedCompany.value.taxReimbursement === 'undefined') {
|
|
|
+ form.value.field7 = soOwner.value
|
|
|
+ form.value.field8 = '18925020659'
|
|
|
+ form.value.field9 = '广州市越秀区八旗二马路广东航运大厦1904室 邮编510110'
|
|
|
+ } else {
|
|
|
+ // 退税版没有这三个表单项, 直接重置值. 相应的, 非退税版要重新赋值.
|
|
|
+ form.value.field7 = ''
|
|
|
+ form.value.field8 = ''
|
|
|
+ form.value.field9 = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 合同的服务条款
|
|
|
+const serviceRule = ref<TypeService>({
|
|
|
+ PC: [
|
|
|
+ '一、本采购订单签署原件一式两份，双方各持一份。',
|
|
|
+ '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
|
|
|
+ '三、交货期限:交货期限必须严格执行。',
|
|
|
+ '四、交货地点:甲方广州公司地址,如上收货地址。',
|
|
|
+ '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
|
|
|
+ '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
|
|
|
+ '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
|
|
|
+ ],
|
|
|
+ Pangea: [
|
|
|
+ '一、本采购订单签署原件一式两份，双方各持一份。',
|
|
|
+ '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
|
|
|
+ '三、交货期限:交货期限必须严格执行。',
|
|
|
+ '四、交货地点:甲方广州公司地址,如上收货地址。',
|
|
|
+ '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
|
|
|
+ '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
|
|
|
+ '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
|
|
|
+ ],
|
|
|
+ PangeaTaxReimbursement: [
|
|
|
+ '三、本采购订单签署原件一式两份，双方各持一份。',
|
|
|
+ '四、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
|
|
|
+ '五、交货期限:交货期限必须严格执行。',
|
|
|
+ '六、交货地点: 广州市越秀区八旗二马路48号航运大厦1605、1606房',
|
|
|
+ '七、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
|
|
|
+ '八、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
|
|
|
+ '九、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
|
|
|
+ '十、我司开票资料:',
|
|
|
+ '账户名称:庞吉亚国际商务服务(广州)有限公司',
|
|
|
+ '统一社会代码:91440101MA9XUQNB4B',
|
|
|
+ '公司地址:广州市越秀区八旗二马路48号内自编1号主楼16楼自编1605、1606房 ',
|
|
|
+ '公司电话:81609790',
|
|
|
+ '基本账户:中国光大银行股份有限公司广州分行越秀支行',
|
|
|
+ '账户号码:77910180803936888',
|
|
|
+ '开户银行地址:广州市越秀区文德南路69号',
|
|
|
+ ],
|
|
|
+ AZYTaxReimbursement: [
|
|
|
+ '一、本采购订单签署原件一式两份，双方各持一份。',
|
|
|
+ '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
|
|
|
+ '三、交货期限:交货期限必须严格执行。',
|
|
|
+ '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
|
|
|
+ '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
|
|
|
+ '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
|
|
|
+ '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
|
|
|
+ ],
|
|
|
+ FOTTaxReimbursement: [
|
|
|
+ '一、本采购订单签署原件一式两份，双方各持一份。',
|
|
|
+ '二、验收标准:按乙方所寄样板及国家出口标准作为验收标准。',
|
|
|
+ '三、交货期限:交货期限必须严格执行。',
|
|
|
+ '四、收货地址:澳竣元代收，广州市越秀区八旗二马路48号航运大厦1902房。',
|
|
|
+ '五、付款方式:甲方通过银行转帐的方式付款,乙方账户信息如上。',
|
|
|
+ '六、如因未能按上述标准及期限交货而产生经济损失，将由乙方承担。',
|
|
|
+ '七、凡因执行本合同所发生的或与本合同有关的一切争议，如经友好协商不能解决时，交由广州当地法院进行判决。',
|
|
|
+ ],
|
|
|
+})
|
|
|
+const currentServiceRule = computed(() => {
|
|
|
+ return serviceRule.value[currentCompany.value as ServiceTypeKeyEnum]
|
|
|
+})
|
|
|
+
|
|
|
+const currentCompany = ref('PC')
|
|
|
+const computedCompany = computed(() => {
|
|
|
+ const result = companyList.value.filter((i) => i.id === currentCompany.value)
|
|
|
+ return result.length ? result[0] : companyList.value[0]
|
|
|
+})
|
|
|
+// 格式化输出价格的小数位数. 退税版需要显示三位小数, 其他只需要两位小数
|
|
|
+const computedDeci = computed(() => {
|
|
|
+ return typeof computedCompany.value.taxReimbursement !== 'undefined' ? 3 : 2
|
|
|
+})
|
|
|
+
|
|
|
+// 候选 收货地址
|
|
|
+let addressList = ref<ISelectItem[]>([])
|
|
|
+
|
|
|
+// 候选 运费条款. 目前只有庞吉亚退税版用到, 其他模版默认供应商承担
|
|
|
+let field5_lists = ref<ISelectItem[]>([])
|
|
|
+
|
|
|
+let supplierPaymentTermsLists = ref<ISelectItem[]>([])
|
|
|
+
|
|
|
+// 获取下拉框非动态候选数据
|
|
|
+axios
|
|
|
+ .post('/api/common/getfieldsData')
|
|
|
+ .then((response: any) => {
|
|
|
+ // console.log(response, '/common/getfieldsData')
|
|
|
+ const res = response.data.result
|
|
|
+
|
|
|
+ orderTypeList.value = res.Order_Type_lists.map((i: any) => {
|
|
|
+ return {
|
|
|
+ label: i,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ addressList.value = res.field9_lists.map((i: any) => {
|
|
|
+ return {
|
|
|
+ label: i,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ field5_lists.value = res.field5_lists
|
|
|
+ .filter((i: string) => !/^-?[Nn]one-?$/.test(i))
|
|
|
+ .map((i: any) => {
|
|
|
+ return {
|
|
|
+ label: i,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ supplierPaymentTermsLists.value = res.Supplier_Payment_Terms_lists.map(
|
|
|
+ (i: any) => {
|
|
|
+ return {
|
|
|
+ label: i,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ )
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e, '下拉框')
|
|
|
+ ElMessage.error('获取下拉框数据出错, 请联系管理员.')
|
|
|
+ })
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const productBlackList = ['4791186000046982872', '4791186000046982896']
|
|
|
+const soOwner = ref('')
|
|
|
+// 获取销售订单详情
|
|
|
+axios
|
|
|
+ .post('/api/common/getSalesOrdersData', { id: route.params.id })
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data
|
|
|
+ if (res.code !== 1) return
|
|
|
+ form.value.field7 = res.result.Owner_name || ''
|
|
|
+ soOwner.value = res.result.Owner_name || ''
|
|
|
+ form.value.Title = res.result.Sales_Order_Title_Job_Name || ''
|
|
|
+ form.value.saleOrderId = res.result.sales_orders_id || ''
|
|
|
+ form.value.PO_Date = dayjs(new Date()).format('YYYY-MM-DD')
|
|
|
+
|
|
|
+ let temp = res.result.details.filter(
|
|
|
+ (item: any) => !productBlackList.includes(item.product_id),
|
|
|
+ )
|
|
|
+
|
|
|
+ if (import.meta.env.MODE !== 'production') {
|
|
|
+ temp = [
|
|
|
+ {
|
|
|
+ product_id: '5757019000000523001',
|
|
|
+ product_name: '测试商品, 强行写的',
|
|
|
+ quantity: 3,
|
|
|
+ rate: 2,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if (!temp.length) return
|
|
|
+ form.value.productList = []
|
|
|
+ temp.forEach((item: any) => {
|
|
|
+ form.value.productList.push(
|
|
|
+ Object.assign({}, emptyProductItem, {
|
|
|
+ candidate: [
|
|
|
+ {
|
|
|
+ Product_Code: item.product_Product_Code,
|
|
|
+ label: item.product_name,
|
|
|
+ value: item.product_id,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ Product_Code: item.product_Product_Code,
|
|
|
+ id: item.product_id,
|
|
|
+ name: item.product_name,
|
|
|
+ // label: `(${item.product_Product_Code})${item.product_name}`,
|
|
|
+ label: item.product_name,
|
|
|
+ value: item.product_id,
|
|
|
+ desc: item.product_description || '',
|
|
|
+ quantity: Number(item.quantity),
|
|
|
+ }),
|
|
|
+ )
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+// 根据url传递过来的用户ID获取的用户身份信息
|
|
|
+const userInfo = ref({} as IUser)
|
|
|
+axios
|
|
|
+ .post('/api/common/getUsersData', { id: route.query.user })
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data
|
|
|
+ if (res.code !== 1) return
|
|
|
+ userInfo.value = res.result || {}
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.view-window {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: rgba(#fff, 0.3);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+.screen {
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 12pt;
|
|
|
+ line-height: 22pt;
|
|
|
+}
|
|
|
+.page-title-wrap {
|
|
|
+ padding: 12px 36px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+.page-title {
|
|
|
+ font-size: 36px;
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+.layout-left {
|
|
|
+ width: 435px;
|
|
|
+ min-width: 435px;
|
|
|
+ padding-right: 24px;
|
|
|
+}
|
|
|
+.layout-right {
|
|
|
+ position: relative;
|
|
|
+ border-left: 1px solid #eee;
|
|
|
+ padding: 0 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.rule-item {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sign-wrap {
|
|
|
+ width: 100pt;
|
|
|
+ &.pangea {
|
|
|
+ width: 180pt;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.screen {
|
|
|
+ max-width: 1600px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .company-info {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10pt;
|
|
|
+ color: $subColor;
|
|
|
+ margin-bottom: 16pt;
|
|
|
+ }
|
|
|
+ .company-name {
|
|
|
+ margin-bottom: 4pt;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 16pt;
|
|
|
+ line-height: 22pt;
|
|
|
+ }
|
|
|
+ .company-addr {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+ .company-phone {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+ .company-fax {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+ .form-area {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .form-area-left {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ .form-area-right {
|
|
|
+ width: 45%;
|
|
|
+ position: relative;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ vertical-align: top;
|
|
|
+ .label {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40%;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ width: 60%;
|
|
|
+ word-break: break-word;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-table-separator {
|
|
|
+ width: 95%;
|
|
|
+ }
|
|
|
+ .product-total-table {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ min-width: 220pt;
|
|
|
+ border-radius: 8pt;
|
|
|
+ position: relative;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ .total-item {
|
|
|
+ & > div {
|
|
|
+ display: inline-block;
|
|
|
+ height: 26pt;
|
|
|
+ line-height: 26pt;
|
|
|
+ padding: 0 8pt;
|
|
|
+ }
|
|
|
+ &:nth-of-type(n + 1) {
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ width: 50%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ width: 50%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-table {
|
|
|
+ table {
|
|
|
+ border: 1pt solid #eee;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ tr:nth-of-type(n + 3) td {
|
|
|
+ border-top: 1pt solid #eee;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ text-align: center;
|
|
|
+ background-color: $tableHeaderBgColor;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ padding: 8pt 8pt 4pt;
|
|
|
+ min-width: 30pt;
|
|
|
+ max-width: 100pt;
|
|
|
+ }
|
|
|
+ th + th,
|
|
|
+ td + td {
|
|
|
+ border-left: 1pt solid #eee;
|
|
|
+ }
|
|
|
+ .action {
|
|
|
+ text-align: center;
|
|
|
+ width: 50pt;
|
|
|
+ }
|
|
|
+ .quantity,
|
|
|
+ .rate,
|
|
|
+ .amount,
|
|
|
+ .discount {
|
|
|
+ width: 80pt;
|
|
|
+ }
|
|
|
+ .requirement {
|
|
|
+ width: 180pt;
|
|
|
+ }
|
|
|
+ .product {
|
|
|
+ width: 180pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .note-form-area {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ .rule-item {
|
|
|
+ color: $subColor;
|
|
|
+ line-height: 26pt;
|
|
|
+ }
|
|
|
+ .sub-form-title {
|
|
|
+ padding-left: 4pt;
|
|
|
+ border-left: 2pt solid #efefef;
|
|
|
+ margin-bottom: 8pt;
|
|
|
+ }
|
|
|
+}
|
|
|
+.preview-area {
|
|
|
+ font-size: 10pt;
|
|
|
+ line-height: 22pt;
|
|
|
+ color: $mainColor;
|
|
|
+ box-sizing: border-box;
|
|
|
+ * {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-info {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 9pt;
|
|
|
+ color: $subColor;
|
|
|
+ margin-bottom: 16pt;
|
|
|
+ }
|
|
|
+ .company-name {
|
|
|
+ margin-bottom: 4pt;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 16pt;
|
|
|
+ line-height: 22pt;
|
|
|
+ }
|
|
|
+ .company-addr {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+ .company-phone {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+ .company-fax {
|
|
|
+ line-height: 12pt;
|
|
|
+ height: 12pt;
|
|
|
+ }
|
|
|
+
|
|
|
+ $titleWidth: 100%;
|
|
|
+ .pdf-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28pt;
|
|
|
+ line-height: 36pt;
|
|
|
+ height: 36pt;
|
|
|
+ width: $titleWidth;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pdf-title-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 2pt;
|
|
|
+
|
|
|
+ .center {
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .right,
|
|
|
+ .left {
|
|
|
+ width: 33%;
|
|
|
+ height: 3pt;
|
|
|
+ line-height: 3pt;
|
|
|
+ & > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 2pt;
|
|
|
+ line-height: 2pt;
|
|
|
+ background-color: $bgColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-area {
|
|
|
+ padding-top: 24pt;
|
|
|
+ line-height: 14pt;
|
|
|
+ $formAreaFontSize: 10pt;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ td {
|
|
|
+ font-size: $formAreaFontSize;
|
|
|
+ padding-bottom: 8pt;
|
|
|
+ }
|
|
|
+ .column-vendor {
|
|
|
+ width: 50%;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ .column-form-label {
|
|
|
+ vertical-align: top;
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ .column-form-value {
|
|
|
+ vertical-align: top;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-table-separator {
|
|
|
+ width: 100%;
|
|
|
+ margin: 15pt auto 10pt;
|
|
|
+ height: 2pt;
|
|
|
+ background-color: $bgColor;
|
|
|
+ }
|
|
|
+ .product-table {
|
|
|
+ table {
|
|
|
+ margin: 0 auto 6pt;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 6pt;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ tr:nth-of-type(n + 1) td {
|
|
|
+ border-top: 1pt solid #eee;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ background-color: $bgColor;
|
|
|
+ min-width: 20pt;
|
|
|
+ padding: 0 2pt;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ min-width: 20pt;
|
|
|
+ max-width: 100pt;
|
|
|
+ padding: 0 2pt;
|
|
|
+ .desc {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ line-height: 16pt;
|
|
|
+ color: $subColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-index {
|
|
|
+ width: 20pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .note-form-area {
|
|
|
+ width: 40%;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: $subColor;
|
|
|
+ display: inline-block;
|
|
|
+ width: 40%;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: $subColor;
|
|
|
+ width: 60%;
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 16pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sub-form-title {
|
|
|
+ color: $subColor;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .rule-item {
|
|
|
+ color: $subColor;
|
|
|
+ line-height: 26pt;
|
|
|
+ }
|
|
|
+ .signature-area {
|
|
|
+ color: $subColor;
|
|
|
+ .first-party {
|
|
|
+ padding: 30pt 0 0;
|
|
|
+ }
|
|
|
+ .second-party {
|
|
|
+ padding: 20pt 0 40pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.preview-area2 {
|
|
|
+ .supplier-name {
|
|
|
+ font-size: 22pt;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .billing-addr {
|
|
|
+ line-height: 18pt;
|
|
|
+ min-height: 18pt;
|
|
|
+ font-size: 12pt;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .contact-info {
|
|
|
+ margin-bottom: 12pt;
|
|
|
+ min-height: 18pt;
|
|
|
+ line-height: 18pt;
|
|
|
+ font-size: 12pt;
|
|
|
+ }
|
|
|
+ .product-table {
|
|
|
+ table {
|
|
|
+ border: 1px solid $bgColor;
|
|
|
+ border-radius: 3pt;
|
|
|
+ margin: 0 auto 6pt;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 10pt;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ padding: 4pt 6pt;
|
|
|
+ &:nth-of-type(n + 2) {
|
|
|
+ border-left: 1px solid $bgColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr:nth-of-type(n + 2) {
|
|
|
+ td {
|
|
|
+ border-top: 1px solid $bgColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-title {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16pt;
|
|
|
+ margin: 12pt auto 8pt;
|
|
|
+ }
|
|
|
+ .base-info-area {
|
|
|
+ margin-top: 12pt;
|
|
|
+ font-size: 11pt;
|
|
|
+
|
|
|
+ .base-info-label {
|
|
|
+ min-width: 90pt;
|
|
|
+ width: 90pt;
|
|
|
+ font-family: serif;
|
|
|
+ }
|
|
|
+ .base-info-value {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ vertical-align: top;
|
|
|
+ flex: auto;
|
|
|
+ text-align: left;
|
|
|
+ font-family: sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ padding-right: 8pt;
|
|
|
+ .base-info-label {
|
|
|
+ min-width: 60pt;
|
|
|
+ width: 60pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ padding-left: 8pt;
|
|
|
+ }
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ width: 50%;
|
|
|
+ margin-bottom: 12pt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bank-info-area {
|
|
|
+ font-family: sans-serif;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 11pt;
|
|
|
+ margin-bottom: 10pt;
|
|
|
+ .bank-info-label {
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: serif;
|
|
|
+ width: 160pt;
|
|
|
+ max-width: 160pt;
|
|
|
+ }
|
|
|
+ .bank-info-value {
|
|
|
+ font-family: serif;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media print {
|
|
|
+ .screen {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .preview-area,
|
|
|
+ .preview-area2 {
|
|
|
+ border: none;
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen {
|
|
|
+ .print.hidden {
|
|
|
+ position: fixed;
|
|
|
+ right: -10000px;
|
|
|
+ bottom: -10000px;
|
|
|
+ }
|
|
|
+ .pdf-wrap {
|
|
|
+ position: relative;
|
|
|
+ width: 21cm;
|
|
|
+ min-height: 29.69cm;
|
|
|
+ margin: 20px auto;
|
|
|
+ box-shadow: 1px 1px 2pt 0px $subColor;
|
|
|
+ }
|
|
|
+ .preview-area,
|
|
|
+ .preview-area2 {
|
|
|
+ padding: 1cm;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
