使用vue写一个销售合同模板
时间: 2024-06-08 17:11:23 浏览: 8
好的,下面是一个简单的销售合同模板的 Vue 组件代码:
```
<template>
<div>
<h2>销售合同</h2>
<p>合同编号:{{ contractNo }}</p>
<p>签署日期:{{ signDate }}</p>
<hr />
<h3>甲方信息:</h3>
<p>公司名称:{{ partyA.companyName }}</p>
<p>法定代表人:{{ partyA.legalPerson }}</p>
<p>联系地址:{{ partyA.address }}</p>
<p>联系电话:{{ partyA.phone }}</p>
<hr />
<h3>乙方信息:</h3>
<p>公司名称:{{ partyB.companyName }}</p>
<p>法定代表人:{{ partyB.legalPerson }}</p>
<p>联系地址:{{ partyB.address }}</p>
<p>联系电话:{{ partyB.phone }}</p>
<hr />
<h3>商品信息:</h3>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in goods" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.price }}</td>
</tr>
</tbody>
</table>
<hr />
<h3>合同条款:</h3>
<ol>
<li>{{ terms[0] }}</li>
<li>{{ terms[1] }}</li>
<li>{{ terms[2] }}</li>
</ol>
</div>
</template>
<script>
export default {
props: {
contractNo: String,
signDate: String,
partyA: Object,
partyB: Object,
goods: Array,
terms: Array
}
};
</script>
```
其中,`props` 中定义了组件需要的属性,包括合同编号、签署日期、甲方信息、乙方信息、商品信息和合同条款。在模板中,我们使用了插值表达式和 v-for 指令来动态渲染数据。最终,我们得到了一个简单的销售合同模板。