feat: replace detail drawers with dialogs, add PDF export
- purchaseorder: el-drawer replaced with el-dialog + PDF export - quotation: el-drawer replaced with el-dialog + PDF export - rfq: add route-based detail page (/bid/rfq/detail) with PDF export - PDF header: logo + 福安德综合报价系统 + doc type + item tables - Add jspdf 2.5.2 + html2canvas for PDF generation
This commit is contained in:
237
ruoyi-ui/src/views/bid/rfq/detail.vue
Normal file
237
ruoyi-ui/src/views/bid/rfq/detail.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="page-actions">
|
||||
<el-button icon="el-icon-back" size="small" @click="$router.back()">返回</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" size="small" :loading="pdfLoading" @click="exportPdf">导出 PDF</el-button>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading">
|
||||
<div v-if="rfq" id="rfq-pdf-area" class="pdf-area">
|
||||
<!-- PDF Header -->
|
||||
<div class="pdf-header">
|
||||
<img :src="logoSrc" class="pdf-logo" />
|
||||
<div class="pdf-header-text">
|
||||
<div class="pdf-company">福安德综合报价系统</div>
|
||||
<div class="pdf-doc-type">询价单（RFQ）</div>
|
||||
</div>
|
||||
<div class="pdf-header-no">{{ rfq.rfqNo }}</div>
|
||||
</div>
|
||||
<div class="pdf-divider"></div>
|
||||
|
||||
<!-- Meta info -->
|
||||
<table class="pdf-meta-table">
|
||||
<tr>
|
||||
<td class="meta-label">RFQ编号</td><td class="meta-val">{{ rfq.rfqNo }}</td>
|
||||
<td class="meta-label">标题</td><td class="meta-val">{{ rfq.rfqTitle }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="meta-label">截止日期</td><td class="meta-val">{{ rfq.deadline }}</td>
|
||||
<td class="meta-label">状态</td>
|
||||
<td class="meta-val"><el-tag :type="statusType(rfq.status)" size="small">{{ statusLabel(rfq.status) }}</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="meta-label">交货地址</td><td class="meta-val" colspan="3">{{ rfq.deliveryAddr }}</td>
|
||||
</tr>
|
||||
<tr v-if="rfq.remark">
|
||||
<td class="meta-label">备注</td><td class="meta-val" colspan="3">{{ rfq.remark }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Items -->
|
||||
<div class="pdf-section-title">物料明细</div>
|
||||
<table class="pdf-items-table">
|
||||
<thead>
|
||||
<tr><th>#</th><th>物料名称</th><th>规格型号</th><th>单位</th><th>数量</th><th>预期单价(元)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) in rfq.items" :key="i">
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ item.materialName }}</td>
|
||||
<td>{{ item.spec }}</td>
|
||||
<td>{{ item.unit }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.expectedPrice || '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Quotations section -->
|
||||
<div v-if="quotations.length > 0">
|
||||
<div class="pdf-section-title" style="margin-top:24px">收到报价汇总</div>
|
||||
<table class="pdf-items-table">
|
||||
<thead>
|
||||
<tr><th>报价单号</th><th>供应商</th><th>总金额</th><th>交货期(天)</th><th>状态</th><th>提交时间</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="q in quotations" :key="q.quotationId">
|
||||
<td>{{ q.quoteNo }}</td>
|
||||
<td>{{ q.supplierName }}</td>
|
||||
<td class="amount-cell">¥{{ q.totalAmount }}</td>
|
||||
<td>{{ q.deliveryDays }}</td>
|
||||
<td><el-tag size="mini" :type="qStatusType(q.status)">{{ qStatusLabel(q.status) }}</el-tag></td>
|
||||
<td>{{ q.submitTime }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pdf-footer">生成时间：{{ new Date().toLocaleString('zh-CN') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRfq } from "@/api/bid/rfq";
|
||||
import { listQuotation } from "@/api/bid/quotation";
|
||||
import logoImg from "@/assets/logo/logo.png";
|
||||
import html2canvas from "html2canvas";
|
||||
import jsPDF from "jspdf";
|
||||
|
||||
export default {
|
||||
name: "RfqDetail",
|
||||
data() {
|
||||
return {
|
||||
loading: false, pdfLoading: false,
|
||||
rfq: null, quotations: [],
|
||||
logoSrc: logoImg
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const rfqId = this.$route.query.rfqId;
|
||||
if (rfqId) this.loadDetail(rfqId);
|
||||
},
|
||||
methods: {
|
||||
loadDetail(rfqId) {
|
||||
this.loading = true;
|
||||
getRfq(rfqId).then(r => {
|
||||
this.rfq = r.data;
|
||||
this.loading = false;
|
||||
});
|
||||
listQuotation({ rfqId, pageSize: 50 }).then(r => {
|
||||
this.quotations = r.rows || [];
|
||||
});
|
||||
},
|
||||
async exportPdf() {
|
||||
this.pdfLoading = true;
|
||||
try {
|
||||
const el = document.getElementById("rfq-pdf-area");
|
||||
const canvas = await html2canvas(el, { scale: 2, useCORS: true, backgroundColor: "#ffffff" });
|
||||
const imgData = canvas.toDataURL("image/png");
|
||||
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
|
||||
const pageW = pdf.internal.pageSize.getWidth();
|
||||
const pageH = pdf.internal.pageSize.getHeight();
|
||||
const imgH = (canvas.height * pageW) / canvas.width;
|
||||
let y = 0;
|
||||
let remain = imgH;
|
||||
while (remain > 0) {
|
||||
pdf.addImage(imgData, "PNG", 0, y, pageW, imgH);
|
||||
remain -= pageH;
|
||||
if (remain > 0) { pdf.addPage(); y -= pageH; }
|
||||
}
|
||||
pdf.save("询价单_" + (this.rfq.rfqNo || "export") + ".pdf");
|
||||
} finally {
|
||||
this.pdfLoading = false;
|
||||
}
|
||||
},
|
||||
statusType(s) { return { draft:"info", published:"warning", closed:"", completed:"success" }[s] || ""; },
|
||||
statusLabel(s) { return { draft:"草稿", published:"已发布", closed:"已关闭", completed:"已完成" }[s] || s; },
|
||||
qStatusType(s) { return { draft:"info", submitted:"warning", accepted:"success", rejected:"danger" }[s] || ""; },
|
||||
qStatusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-actions {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.pdf-area {
|
||||
padding: 28px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #222;
|
||||
}
|
||||
.pdf-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.pdf-logo {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.pdf-header-text { flex: 1; }
|
||||
.pdf-company {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1171c4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.pdf-doc-type {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.pdf-header-no { font-size: 13px; color: #888; }
|
||||
.pdf-divider {
|
||||
border-top: 2px solid #1171c4;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.pdf-meta-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.pdf-meta-table td {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
.meta-label {
|
||||
background: #f5f7fa;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
width: 100px;
|
||||
}
|
||||
.meta-val { color: #303133; }
|
||||
.pdf-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1a2c4e;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 8px;
|
||||
border-left: 4px solid #1171c4;
|
||||
}
|
||||
.pdf-items-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pdf-items-table th {
|
||||
background: #1171c4;
|
||||
color: #fff;
|
||||
padding: 9px 12px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.pdf-items-table td {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.pdf-items-table tbody tr:nth-child(even) td { background: #f9fbff; }
|
||||
.amount-cell { color: #409EFF; font-weight: 600; }
|
||||
.pdf-footer {
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user