345 lines
11 KiB
HTML
345 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>报价单</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "SimSun", "Microsoft YaHei", Arial, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header .quote-no {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
background-color: #f5f5f5;
|
|
padding: 8px 10px;
|
|
margin-bottom: 10px;
|
|
border-left: 4px solid #4caf50;
|
|
}
|
|
|
|
.info-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.info-table td {
|
|
padding: 6px 10px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.info-table .label {
|
|
width: 120px;
|
|
background-color: #f9f9f9;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.product-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.product-table th,
|
|
.product-table td {
|
|
padding: 8px 10px;
|
|
border: 1px solid #ddd;
|
|
text-align: left;
|
|
}
|
|
|
|
.product-table th {
|
|
background-color: #4caf50;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.product-table .text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.product-table .text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.product-table tbody tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.amount-summary {
|
|
width: 400px;
|
|
float: right;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.amount-summary table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.amount-summary td {
|
|
padding: 8px 10px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.amount-summary .label {
|
|
width: 150px;
|
|
background-color: #f9f9f9;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amount-summary .value {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amount-summary .final-amount {
|
|
background-color: #4caf50;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.terms {
|
|
clear: both;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.terms .content {
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
background-color: #fafafa;
|
|
min-height: 60px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 40px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #ddd;
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.signature {
|
|
margin-top: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.signature .sign-box {
|
|
width: 45%;
|
|
}
|
|
|
|
.signature .sign-line {
|
|
border-bottom: 1px solid #333;
|
|
margin-top: 40px;
|
|
padding-bottom: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 报价单头部 -->
|
|
<div class="header">
|
|
<h1>商务报价单</h1>
|
|
<div class="quote-no">
|
|
编号: <span th:text="${quoteNo}">QUO20250101001</span> | 版本:
|
|
<span th:text="${version}">V1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基本信息 -->
|
|
<div class="section">
|
|
<div class="section-title">基本信息</div>
|
|
<table class="info-table">
|
|
<tr>
|
|
<td class="label">报价主题</td>
|
|
<td colspan="3" th:text="${quoteTitle}">
|
|
华为CRM系统采购报价
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">客户名称</td>
|
|
<td th:text="${customerName}">华为技术有限公司</td>
|
|
<td class="label">报价日期</td>
|
|
<td th:text="${quoteDate}">2025-01-10</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">联系人</td>
|
|
<td th:text="${contactName}">张伟</td>
|
|
<td class="label">有效期至</td>
|
|
<td th:text="${expireDate}">2025-02-09</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">联系电话</td>
|
|
<td th:text="${contactMobile}">13800138000</td>
|
|
<td class="label">负责人</td>
|
|
<td th:text="${ownerUserName}">张三</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">联系邮箱</td>
|
|
<td colspan="3" th:text="${contactEmail}">
|
|
zhangwei@huawei.com
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 产品明细 -->
|
|
<div class="section">
|
|
<div class="section-title">产品明细</div>
|
|
<table class="product-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50px">序号</th>
|
|
<th style="width: 120px">产品编号</th>
|
|
<th>产品名称</th>
|
|
<th style="width: 100px">规格型号</th>
|
|
<th style="width: 60px">单位</th>
|
|
<th style="width: 80px">数量</th>
|
|
<th style="width: 100px">单价(元)</th>
|
|
<th style="width: 80px">折扣(%)</th>
|
|
<th style="width: 120px">小计(元)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="product, iterStat : ${productList}">
|
|
<td class="text-center" th:text="${iterStat.count}">
|
|
1
|
|
</td>
|
|
<td th:text="${product.productNo}">PRO001</td>
|
|
<td th:text="${product.productName}">CRM管理系统</td>
|
|
<td th:text="${product.model}">标准版</td>
|
|
<td class="text-center" th:text="${product.unit}">
|
|
套
|
|
</td>
|
|
<td class="text-right" th:text="${product.quantity}">
|
|
1
|
|
</td>
|
|
<td
|
|
class="text-right"
|
|
th:text="${#numbers.formatDecimal(product.price, 1, 2)}"
|
|
>
|
|
50000.00
|
|
</td>
|
|
<td
|
|
class="text-center"
|
|
th:text="${product.discount != null ? product.discount : 0}"
|
|
>
|
|
0
|
|
</td>
|
|
<td
|
|
class="text-right"
|
|
th:text="${#numbers.formatDecimal(product.subtotal, 1, 2)}"
|
|
>
|
|
50000.00
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 金额汇总 -->
|
|
<div class="amount-summary">
|
|
<table>
|
|
<tr>
|
|
<td class="label">产品总额:</td>
|
|
<td class="value" th:text="${totalAmount}">150000.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">整单折扣:</td>
|
|
<td
|
|
class="value"
|
|
th:text="${discountRate != null ? discountRate + '%' : '0%'}"
|
|
>
|
|
10%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">折扣金额:</td>
|
|
<td class="value" th:text="${discountAmount}">15000.00</td>
|
|
</tr>
|
|
<tr class="final-amount">
|
|
<td class="label">最终金额:</td>
|
|
<td class="value" th:text="${finalAmount}">135000.00</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 报价条款 -->
|
|
<div class="section terms">
|
|
<div class="section-title">付款条款</div>
|
|
<div class="content" th:text="${paymentTerms}">
|
|
合同签订后7个工作日内支付30%预付款
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section terms">
|
|
<div class="section-title">交付条款</div>
|
|
<div class="content" th:text="${deliveryTerms}">
|
|
付款到账后15个工作日内完成部署
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section terms" th:if="${remark != null and remark != ''}">
|
|
<div class="section-title">备注说明</div>
|
|
<div class="content" th:text="${remark}">备注信息</div>
|
|
</div>
|
|
|
|
<!-- 签名区域 -->
|
|
<div class="signature">
|
|
<div class="sign-box">
|
|
<div>供应商签字(盖章):</div>
|
|
<div class="sign-line"></div>
|
|
<div style="margin-top: 10px">日期: __________</div>
|
|
</div>
|
|
<div class="sign-box">
|
|
<div>客户签字(盖章):</div>
|
|
<div class="sign-line"></div>
|
|
<div style="margin-top: 10px">日期: __________</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<div class="footer">
|
|
<div>本报价单仅在有效期内有效，过期需重新确认价格</div>
|
|
<div>
|
|
如有疑问，请联系负责人:
|
|
<span th:text="${ownerUserName}">张三</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|