5 changed files with 314 additions and 36 deletions
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="产品供应合同" |
|||
:close-on-click-modal="false" |
|||
:visible.sync="visible"> |
|||
<div class="dialog_content" id="popupContent"> |
|||
<div style="width: 100%;"> |
|||
<div class="zd-row"> |
|||
<div class="zd-col-12 item_p">需方：{{ dataForm.clientId }}</div> |
|||
<div class="zd-col-12 item_p">合同编号：{{ dataForm.contractNumber }}</div> |
|||
</div> |
|||
<div class="zd-row"> |
|||
<div class="zd-col-12 item_p">供方：上海诺力智能科技有限公司</div> |
|||
<div class="zd-col-12 item_p">签订时间：</div> |
|||
</div> |
|||
<p class="tip_p">一、产品明细单</p> |
|||
<table class="det_table"> |
|||
<tr> |
|||
<th width="6.25%">序号</th> |
|||
<th width="25%">产品名称+订货代码</th> |
|||
<th width="25%">型号</th> |
|||
<th width="6.25%">数量</th> |
|||
<th width="6.25%">单位</th> |
|||
<th width="12.5%">单价(元)</th> |
|||
<th width="12.5%">总价(元)</th> |
|||
<th width="6.25%">备注</th> |
|||
</tr> |
|||
<tr v-for="(e, i) in dataForm.materData" :key="i"> |
|||
<td>{{ i+1 }}</td> |
|||
<td>{{ e.materialName }}<br/>{{ e.materialCode }}</td> |
|||
<td>{{ e.materialType }}</td> |
|||
<td>{{ e.quantity }}</td> |
|||
<td>{{ e.unit }}</td> |
|||
<td>{{ e.price }}</td> |
|||
<td>{{ e.total }}</td> |
|||
<td>{{ e.remark }}</td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="6" style="text-align: left">共计：</td> |
|||
<td>{{ dataForm.totalSum }}</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="6" style="text-align: left">共计人民币金额：（大写）{{ dataForm.totalSumChina }}</td> |
|||
<td colspan="2">含13%增值税</td> |
|||
</tr> |
|||
</table> |
|||
<p class="tip_p">二、质量要求、技术标准、供方对质量负责的条件和期限:技术标准符合行业标准。</p> |
|||
<p class="tip_p">三、售后服务:保修期6个月，人为造成的损坏不在质保范围内。</p> |
|||
<p class="tip_p">四、交货时间、地点:货期:待定;交货地:待客户通知。</p> |
|||
<p class="tip_p">五、运输方式及到达站和费用负担:由供方负担。</p> |
|||
<p class="tip_p">六、包装标准:按国内标准包装。</p> |
|||
<p class="tip_p">八、结算方式:款到发货，付款方式:电汇。</p> |
|||
<p class="tip_p">八、违约责任:按《中华人民共和国民法典》执行。</p> |
|||
<p class="tip_p">九、解决合同纠纷的方式:买卖双方首先友好协商解决，协商不成，任何一方均可向有管辖权法院起诉。</p> |
|||
<p class="tip_p">十、其它约定事项:合同扫描件有效，签字盖章之日起生效。</p> |
|||
<table class="det_table det_table_1"> |
|||
<tr> |
|||
<th width="50%">需方：</th> |
|||
<th width="50%">供方：</th> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<div>单位名称:</div> |
|||
<div>地址:</div> |
|||
<div>委托代理电话:</div> |
|||
<div>传真:</div> |
|||
<div>开户银行:</div> |
|||
<div>帐号:</div> |
|||
</td> |
|||
<td> |
|||
<div>单位名称:上海诺力智能科技有限公司(盖章)</div> |
|||
<div>地址:上海青浦区徐泾镇高光路215弄99号4号楼302室</div> |
|||
<div>委托代理电话:</div> |
|||
<div>传真:</div> |
|||
<div>开户银行:招商银行虹桥支行</div> |
|||
<div>帐号:12191702501091</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="visible = false">取消</el-button> |
|||
<el-button size="mini" type="primary" @click="addAndPrint">打印</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getLodop } from '@/utils/lodop/LodopFuncs' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
contractId: 0, |
|||
clientId: null, |
|||
contractNumber: null, |
|||
materData: [], |
|||
totalSum: null, |
|||
totalSumChina: null |
|||
}, |
|||
dataList: [{materialCode: 'S9410002000002'}, {materialCode: 'S9410002000003'}] |
|||
} |
|||
}, |
|||
methods: { |
|||
init (id) { |
|||
this.dataForm.contractId = id || 0 |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
if (this.dataForm.contractId) { |
|||
this.$http({ |
|||
url: this.$http.adornUrl(`/flow/contract/info/${this.dataForm.contractId}`), |
|||
method: 'get', |
|||
params: this.$http.adornParams() |
|||
}).then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.dataForm.contractNumber = data.contract.contractNumber |
|||
this.dataForm.clientId = data.contract.clientId |
|||
this.dataForm.materData = JSON.parse(data.contract.materialJson).material |
|||
this.dataForm.totalSum = JSON.parse(data.contract.materialJson).total |
|||
this.dataForm.totalSumChina = this.toChineseCurrency(this.dataForm.totalSum) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
toChineseCurrency (amount) { |
|||
if (amount === 0) return '零元整' |
|||
const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿'] |
|||
const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'] |
|||
const result = [] |
|||
// 将金额转换为整数部分和小数部分 |
|||
const integerPart = Math.floor(amount) // 整数部分 |
|||
const decimalPart = amount - integerPart // 小数部分 |
|||
// 处理整数部分 |
|||
let integerStr = integerPart.toString() |
|||
for (let i = 0; i < integerStr.length; i++) { |
|||
const digit = integerStr[integerStr.length - 1 - i]; |
|||
if (digit !== '0') { |
|||
result.push(digits[digit], units[i]) |
|||
} else if (!result.includes('零') && result.length > 0) { |
|||
result.push('零') |
|||
} |
|||
} |
|||
// 处理小数部分 |
|||
if (decimalPart > 0) { |
|||
const decimalStr = (decimalPart * 100).toFixed(0).padStart(2, '0') // 小数部分乘以100并转为字符串 |
|||
if (decimalStr !== '00') { |
|||
result.push('点') |
|||
for (let i = 0; i < decimalStr.length; i++) { |
|||
result.push(digits[decimalStr[i]]) |
|||
} |
|||
} |
|||
} |
|||
// 去掉多余的零 |
|||
while (result[0] === '零') { |
|||
result.shift() |
|||
} |
|||
return result.join('') + (decimalPart > 0 ? '元' : '元整') |
|||
}, |
|||
// 打印 |
|||
addAndPrint () { |
|||
const LODOP = getLodop() |
|||
LODOP.PRINT_INITA('0mm', '0mm', '213mm', '297mm', '打印合同模板') |
|||
LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4') |
|||
LODOP.ADD_PRINT_TEXT(0, 0, '0', '0', '') |
|||
// 获取弹窗内容并转换为 HTML 字符串 |
|||
const h1Content = `<h1>产品供销合同</h1>` |
|||
const popupContent = document.getElementById('popupContent').innerHTML |
|||
const printHtml = ` |
|||
<style> |
|||
h1 {font-size: 14px;line-height: 1;text-align: center;margin-bottom: 30px;} |
|||
.zd-row {width: 100%;display: flex;} |
|||
.zd-col-12 {width: 50%;} |
|||
.dialog_content {width: 100%;font-family: '黑体'} |
|||
.item_p {font-size: 14px;color: #000;line-height: 1.5;padding-bottom: 12px;} |
|||
.tip_p {font-size: 14px;line-height: 1.5;margin: 0;} |
|||
.det_table {width: 100%;table-layout: fixed;width: 100%; border-collapse: collapse;border: 1px solid #000;} |
|||
.det_table th {font-size: 12px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;} |
|||
.det_table td {font-size: 13px;color: #000;line-height: 23px;padding: 4px;border: 1px solid #000;text-align: center;} |
|||
.det_table_1 th, .det_table_1 td {text-align: left;} |
|||
</style> |
|||
${h1Content} |
|||
${popupContent} |
|||
` |
|||
// 添加弹窗内容到打印任务 |
|||
LODOP.ADD_PRINT_HTM(0, '5%', '90%', '90%', printHtml) |
|||
// LODOP.PREVIEW() |
|||
LODOP.PRINT() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.zd-row { |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
.zd-col-12 { |
|||
width: 50%; |
|||
} |
|||
.dialog_content { |
|||
width: 100%; |
|||
} |
|||
.item_p { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 1.5; |
|||
padding-bottom: 12px; |
|||
} |
|||
.tip_p { |
|||
font-size: 14px; |
|||
font-weight: 700; |
|||
color: #606266; |
|||
line-height: 1.5; |
|||
margin: 0; |
|||
} |
|||
.det_table { |
|||
width: 100%; |
|||
table-layout: fixed; |
|||
border-collapse: collapse; |
|||
border: 1px solid #EBEEF5; |
|||
margin-top: 10px; |
|||
} |
|||
.det_table th { |
|||
font-size: 13px; |
|||
line-height: 23px; |
|||
color: #515a6e; |
|||
padding: 6px 6px; |
|||
font-weight: 700; |
|||
border: 1px solid #EBEEF5; |
|||
text-align: center; |
|||
background-color: #f5f5f5; |
|||
} |
|||
.det_table td { |
|||
font-size: 12px; |
|||
line-height: 23px; |
|||
color: #606266; |
|||
padding: 6px 6px; |
|||
border: 1px solid #EBEEF5; |
|||
text-align: center; |
|||
} |
|||
.det_table_1 th, .det_table_1 td { |
|||
text-align: left; |
|||
} |
|||
</style> |
|||
Binary file not shown.
Loading…
Reference in new issue