5 changed files with 211 additions and 128 deletions
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="产品供应合同" |
||||
|
:close-on-click-modal="false" |
||||
|
:visible.sync="visible"> |
||||
|
<div class="dialog_content" id="popupContent"> |
||||
|
<div class="zd-row"> |
||||
|
<div class="zd-col-12 item_p">需方:kooriookami</div> |
||||
|
<div class="zd-col-12 item_p">合同编号:18100000000</div> |
||||
|
</div> |
||||
|
<div class="zd-row"> |
||||
|
<div class="zd-col-12 item_p">供方:上海诺力智能科技有限公司</div> |
||||
|
<div class="zd-col-12 item_p">签订时间:2025年1月14日</div> |
||||
|
</div> |
||||
|
<p class="tip_p">一、产品明细单</p> |
||||
|
<table class="det_table"> |
||||
|
<tr> |
||||
|
<th width="50px">物料编号</th> |
||||
|
<th width="50px">物料名称</th> |
||||
|
<th width="50px">型号</th> |
||||
|
<th width="50px">数量</th> |
||||
|
<th width="50px">单位</th> |
||||
|
<th width="50px">单价(元)</th> |
||||
|
<th width="50px">总价(元)</th> |
||||
|
<th width="50px">备注</th> |
||||
|
</tr> |
||||
|
<tr v-for="(e, i) in dataList" :key="i"> |
||||
|
<td>{{ e.materialCode }}</td> |
||||
|
<td>直角减速机</td> |
||||
|
<td>SVX85-20</td> |
||||
|
<td>1</td> |
||||
|
<td>个</td> |
||||
|
<td>1000</td> |
||||
|
<td>1000</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<div class="zd-row"> |
||||
|
<div class="zd-col-12 num_p">共计人民币金额:(大写) XXXXXXX</div> |
||||
|
<div class="zd-col-12 num_p">含13%增值税</div> |
||||
|
</div> |
||||
|
<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"> |
||||
|
<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> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="visible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> |
||||
|
<el-button type="primary" @click="addAndPrint">打印</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getLodop } from '@/utils/lodop/LodopFuncs' |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
visible: false, |
||||
|
dataList: [{materialCode: 'S9410002000002'}] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init (id) { |
||||
|
this.visible = true |
||||
|
}, |
||||
|
// 表单提交 |
||||
|
dataFormSubmit () {}, |
||||
|
// 打印 |
||||
|
addAndPrint () { |
||||
|
const LODOP = getLodop() |
||||
|
// LODOP.SET_SHOW_MODE('HIDE_DISBUTTIN_SETUP', 1)// 隐藏那些无效按钮 |
||||
|
// 设置纸张大小为 A4 |
||||
|
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4") |
||||
|
LODOP.ADD_PRINT_TEXT(0, 0, 700, 50, "产品供应合同") |
||||
|
LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 2 表示水平居中 |
||||
|
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12); // 设置字号为 12 |
||||
|
// 获取弹窗内容并转换为 HTML 字符串 |
||||
|
const popupContent = document.getElementById('popupContent').innerHTML |
||||
|
const printHtml = ` |
||||
|
<style> |
||||
|
.zd-row {width: 100%;display: flex;} |
||||
|
.zd-col-12 {width: 50%;} |
||||
|
.dialog_content {width: 100%;} |
||||
|
.det_table {width: 100%; border-collapse: collapse;border: 1px solid #000;} |
||||
|
.det_table th, .det_table td {border: 1px solid #000;font-size: 10px; line-height: 23px;} |
||||
|
</style> |
||||
|
${popupContent} |
||||
|
` |
||||
|
// 添加弹窗内容到打印任务 |
||||
|
LODOP.ADD_PRINT_HTM(50, 50, "100%", "100%", printHtml) |
||||
|
LODOP.PREVIEW()// 预览 |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</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: 16px; |
||||
|
font-weight: 700; |
||||
|
color: #606266; |
||||
|
line-height: 1.8; |
||||
|
margin: 0; |
||||
|
} |
||||
|
.num_p { |
||||
|
font-size: 14px; |
||||
|
color: #606266; |
||||
|
line-height: 1.5; |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
.det_table { |
||||
|
border-collapse: collapse; |
||||
|
border: 1px solid #EBEEF5; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.det_table th { |
||||
|
font-size: 14px; |
||||
|
line-height: 23px; |
||||
|
color: #909399; |
||||
|
font-weight: 700; |
||||
|
border: 1px solid #EBEEF5; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.det_table td { |
||||
|
font-size: 14px; |
||||
|
line-height: 23px; |
||||
|
color: #606266; |
||||
|
padding: 12px 0; |
||||
|
border: 1px solid #EBEEF5; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
@ -1,122 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="产品供应合同" |
|
||||
:close-on-click-modal="false" |
|
||||
:visible.sync="visible"> |
|
||||
<el-descriptions :column="2"> |
|
||||
<el-descriptions-item label="需方">kooriookami</el-descriptions-item> |
|
||||
<el-descriptions-item label="合同编号">18100000000</el-descriptions-item> |
|
||||
<el-descriptions-item label="供方">上海诺力智能科技有限公司</el-descriptions-item> |
|
||||
<el-descriptions-item label="签订时间">2025年1月14日</el-descriptions-item> |
|
||||
</el-descriptions> |
|
||||
<h2>一、产品明细单</h2> |
|
||||
<el-table |
|
||||
:data="dataList" |
|
||||
border |
|
||||
style="width: 100%;"> |
|
||||
<el-table-column |
|
||||
type="index" |
|
||||
width="50"/> |
|
||||
<el-table-column |
|
||||
prop="materialCode" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="物料编号"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="物料名称"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="型号"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="数量"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="单位"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="单价(元)"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="总价(元)"/> |
|
||||
<el-table-column |
|
||||
prop="materialName" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
label="备注"/> |
|
||||
</el-table> |
|
||||
<el-row> |
|
||||
<el-col :span="12">共计人民币金额:(大写) XXXXXXX</el-col> |
|
||||
<el-col :span="12">含13%增值税</el-col> |
|
||||
</el-row> |
|
||||
<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> |
|
||||
<el-descriptions direction="vertical" :column="2" border> |
|
||||
<el-descriptions-item label="需方" label-class-name="my-label"> |
|
||||
<div>单位名称:</div> |
|
||||
<div>地址:</div> |
|
||||
<div>委托代理电话:</div> |
|
||||
<div>传真:</div> |
|
||||
<div>开户银行:</div> |
|
||||
<div>帐号:</div> |
|
||||
</el-descriptions-item> |
|
||||
<el-descriptions-item label="供方" label-class-name="my-label"> |
|
||||
<div>单位名称:上海诺力智能科技有限公司(盖章)</div> |
|
||||
<div>地址:上海青浦区徐泾镇高光路215弄99号4号楼302室</div> |
|
||||
<div>委托代理电话:</div> |
|
||||
<div>传真:</div> |
|
||||
<div>开户银行:招商银行虹桥支行</div> |
|
||||
<div>帐号:12191702501091</div> |
|
||||
</el-descriptions-item> |
|
||||
</el-descriptions> |
|
||||
<span slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> |
|
||||
</span> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data () { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataList: [] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init (id) { |
|
||||
this.visible = true |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmit () {} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
>>>.my-label { |
|
||||
width: 50%; |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
Loading…
Reference in new issue