|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div id="pdfDom" style="width: 776px; padding: 20px">
|
|
|
+ <div style="font-size: 22px; text-align: center">销售合同</div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 10px">
|
|
|
+ <div>供方:福州佰易来贸易有限公司</div>
|
|
|
+ <div style="width: 40%">合同编号:{{ formData.code }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 10px">
|
|
|
+ <div>需方:{{ formData.customerCorporationName }}</div>
|
|
|
+ <div style="width: 40%">签订时间:{{ conversionDate(formData.signingDate) }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">一、产品名称、货号、规格、颜色、数量、单价、金额。</div>
|
|
|
+ <table cellspacing="0" border="2" style="width: 100%">
|
|
|
+ <thead>
|
|
|
+ <td style="width: 40px">序号</td>
|
|
|
+ <td>产品名称</td>
|
|
|
+ <td>产品货号</td>
|
|
|
+ <td>产品规格</td>
|
|
|
+ <td style="width: 60px">颜色</td>
|
|
|
+ <td style="width: 50px">单位</td>
|
|
|
+ <td style="width: 60px">数量</td>
|
|
|
+ <td style="width: 50px">单价/元</td>
|
|
|
+ <td style="width: 70px">金额RMB/元</td>
|
|
|
+ <td>备注</td>
|
|
|
+ </thead>
|
|
|
+ <template v-if="formData.list && formData.list.length > 0">
|
|
|
+ <tr v-for="(item, index) in formData.list" :key="index">
|
|
|
+ <td>{{ index + 1 }}</td>
|
|
|
+ <td>{{ item.productName }}</td>
|
|
|
+ <td>{{ item.productCode }}</td>
|
|
|
+ <td>{{ item.productSpec }}</td>
|
|
|
+ <td>{{ item.productColour }}</td>
|
|
|
+ <td>{{ item.productUnit }}</td>
|
|
|
+ <td>{{ item.quantity }}</td>
|
|
|
+ <td>{{ item.unitPrice }}</td>
|
|
|
+ <td>{{ computeMoney(item) }}</td>
|
|
|
+ <td>{{ item.remark }}</td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+ <tr>
|
|
|
+ <td :colspan="6">合计:</td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td>{{ computeAllMoney(formData.list) }}</td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td :colspan="3">金额合计(人民币)大写:</td>
|
|
|
+ <td :colspan="7">RMB{{ numberToRMB(computeAllMoney(formData.list)) }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 二、税率:
|
|
|
+ <span style="color: red">{{ formData.taxRate ? formData.taxRate + '%' : '不含税' }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 三、运输费用:
|
|
|
+ <span style="color: red">{{ formData.freight ? formData.freight : '不含运费' }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 四、包装方式:
|
|
|
+ <span style="color: red">常规包装</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 五、支付方式:
|
|
|
+ <span style="color: red">出货前付清全款</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">六、供方收款账号如下:</div>
|
|
|
+ <div
|
|
|
+ style="display: flex; justify-content: space-between; margin-top: 10px; margin-left: 24px"
|
|
|
+ >
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>1.对公收款帐号:591909834210066</div>
|
|
|
+ <div style="margin-top: 10px">开户行:招商银行股份有限公司福州屏山支行</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>帐户名称:福州佰易来贸易有限公司</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">七、交(提)货点:{{ formData.deliveryAddress }}</div>
|
|
|
+ <div style="margin-top: 10px">八、违约责任:</div>
|
|
|
+ <div style="margin-top: 10px; margin-left: 24px">
|
|
|
+ 1.延迟交货:乙方应按照本合同约定时间完成交货,除不可抗力外(指疫情、战争、严重火灾、水灾、台风和地震以及
|
|
|
+ 其他经双方同意属不可抗力的事故),需延期交货的须向甲方提前沟通延期时间,如超出双方约定交期15天后仍未能交
|
|
|
+ 货的,则向甲方支付合同总金额0.1%/天的违约金。
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px; margin-left: 24px">
|
|
|
+ 2.延迟付款:甲方应按照本合同约定时间按时付款,除不可抗力外(指疫情、战争、严重火灾、水灾、台风和地震以及
|
|
|
+ 其他经双方同意属不可抗力的事故),如超出双方约定时间15天后仍未能付款出货的,每延迟一天履行本合同约定之义
|
|
|
+ 务的,则向乙方支付合同总额1%/天的违约金,如超出1个月仍未付款出货的,另外支付每平方20元/月(不足一月按一
|
|
|
+ 月算)的场地租金费用给乙方。如超出3个月以上的,则视为甲方自主放弃改单订,乙方有权处理所有货物。
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 九、解决合同纠纷方式:双方友好协商,协商不成后可提出诉讼,诉讼地点为厂家总部的当地人民法院。
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ 十、本合同一式两份,双方签章后生效;双方各执一份,传真、扫描件有效。
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 20px">
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div style="text-align: center">供方:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div style="text-align: center">需方:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 10px">
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>单位名称:福州佰易来贸易有限公司</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>单位名称:{{ formData.customerCorporationName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 10px">
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>
|
|
|
+ 单位地址:福建省福州市鼓楼区洪山镇洪山园路52号 单位地址:
|
|
|
+ (原工业路东侧、福三路北侧洪山园地块)华润万象城 (三期)S10#楼18层17办公
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>单位地址:{{ formData.customerCorporationAddress }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-between; margin-top: 10px">
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>法定代表人:黄凯</div>
|
|
|
+ <div style="margin-top: 10px">业务联系人:翁本娟</div>
|
|
|
+ <div style="margin-top: 10px">联系电话:15985717925</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 48%">
|
|
|
+ <div>法定代表人:{{ formData.customerLegalRepresentative }}</div>
|
|
|
+ <div style="margin-top: 10px">业务联系人:{{ formData.customerContactPerson }}</div>
|
|
|
+ <div style="margin-top: 10px">联系电话:{{ formData.customerContactNumber }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { StrAnyObj } from '@/typings'
|
|
|
+import { getDetailApi } from '@/api/business/contract/info'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ rowData: Object
|
|
|
+})
|
|
|
+const formData = ref<StrAnyObj>({})
|
|
|
+onMounted(() => {
|
|
|
+ if (props?.rowData?.id) {
|
|
|
+ getDetailApi({ id: props.rowData.id }).then((res: StrAnyObj) => {
|
|
|
+ formData.value = res
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+const conversionDate = (time) => {
|
|
|
+ // 创建一个日期对象(例如当前日期)
|
|
|
+ let date = new Date(time)
|
|
|
+ // 提取年份、月份和日期
|
|
|
+ let year = date.getFullYear()
|
|
|
+ let month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份从0开始,所以需要加1,并且用padStart填充前导零
|
|
|
+ let day = date.getDate().toString().padStart(2, '0') // 用padStart填充前导零
|
|
|
+ // 格式化日期为XXXX年X月X日
|
|
|
+ return `${year}年${month}月${day}日`
|
|
|
+}
|
|
|
+const computeMoney = (item) => {
|
|
|
+ let money = 0
|
|
|
+ if (item.quantity && item.unitPrice) {
|
|
|
+ let price = Number(item.unitPrice)
|
|
|
+ money = Number(Math.round(price * item.quantity * 100) / 100)
|
|
|
+ }
|
|
|
+ return money
|
|
|
+}
|
|
|
+const computeAllMoney = (list) => {
|
|
|
+ let money = 0
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if (list[i].quantity && list[i].unitPrice) {
|
|
|
+ let price = Number(list[i].unitPrice)
|
|
|
+ money = Number(Math.round((money + price * list[i].quantity) * 100) / 100)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return money
|
|
|
+}
|
|
|
+const numberToRMB = (num) => {
|
|
|
+ const fraction = ['角', '分']
|
|
|
+ const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
|
|
|
+ const unit = [
|
|
|
+ ['元', '万', '亿'],
|
|
|
+ ['', '拾', '佰', '仟']
|
|
|
+ ]
|
|
|
+ const head = num < 0 ? '负' : ''
|
|
|
+ num = Math.abs(num)
|
|
|
+ let s = ''
|
|
|
+ for (let i = 0; i < fraction.length; i++) {
|
|
|
+ s += (digit[Math.floor(num * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
|
|
|
+ }
|
|
|
+ s = s || '整'
|
|
|
+ num = Math.floor(num)
|
|
|
+ for (let i = 0; i < unit[0].length && num > 0; i++) {
|
|
|
+ let p = ''
|
|
|
+ for (let j = 0; j < unit[1].length && num > 0; j++) {
|
|
|
+ p = digit[num % 10] + unit[1][j] + p
|
|
|
+ num = Math.floor(num / 10)
|
|
|
+ }
|
|
|
+ s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ head +
|
|
|
+ s
|
|
|
+ .replace(/(零.)*零元/, '元')
|
|
|
+ .replace(/(零.)+/g, '零')
|
|
|
+ .replace(/^整$/, '零元整')
|
|
|
+ )
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+* {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+td {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|