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:
@@ -33,9 +33,11 @@
|
|||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"fuse.js": "6.4.3",
|
"fuse.js": "6.4.3",
|
||||||
"highlight.js": "9.18.5",
|
"highlight.js": "9.18.5",
|
||||||
|
"html2canvas": "^1.4.1",
|
||||||
"js-beautify": "1.13.0",
|
"js-beautify": "1.13.0",
|
||||||
"js-cookie": "3.0.1",
|
"js-cookie": "3.0.1",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
|
"jspdf": "^2.5.2",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"quill": "2.0.2",
|
"quill": "2.0.2",
|
||||||
"screenfull": "5.0.2",
|
"screenfull": "5.0.2",
|
||||||
|
|||||||
@@ -49,6 +49,7 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
|
|
||||||
|
<!-- Edit / Create Dialog -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||||
<el-row>
|
<el-row>
|
||||||
@@ -66,7 +67,6 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form-item label="交货地址"><el-input v-model="form.deliveryAddr" /></el-form-item>
|
<el-form-item label="交货地址"><el-input v-model="form.deliveryAddr" /></el-form-item>
|
||||||
|
|
||||||
<el-divider content-position="left">采购明细</el-divider>
|
<el-divider content-position="left">采购明细</el-divider>
|
||||||
<el-table :data="form.items || []" border size="small">
|
<el-table :data="form.items || []" border size="small">
|
||||||
<el-table-column label="物料名称" min-width="150">
|
<el-table-column label="物料名称" min-width="150">
|
||||||
@@ -108,38 +108,86 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<el-drawer title="采购单详情" :visible.sync="detailOpen" size="720px">
|
<!-- Detail Dialog -->
|
||||||
<div v-if="detailData" style="padding:20px">
|
<el-dialog title="采购单详情" :visible.sync="detailOpen" width="820px" append-to-body>
|
||||||
<el-descriptions :column="2" border>
|
<div v-if="detailData">
|
||||||
<el-descriptions-item label="采购单号">{{ detailData.poNo }}</el-descriptions-item>
|
<!-- PDF print area -->
|
||||||
<el-descriptions-item label="供应商">{{ detailData.supplierName }}</el-descriptions-item>
|
<div id="po-pdf-area" class="pdf-area">
|
||||||
<el-descriptions-item label="总金额"><span style="color:#409EFF;font-size:18px;font-weight:bold">¥{{ detailData.totalAmount }}</span></el-descriptions-item>
|
<div class="pdf-header">
|
||||||
<el-descriptions-item label="状态"><el-tag :type="statusType(detailData.status)">{{ statusLabel(detailData.status) }}</el-tag></el-descriptions-item>
|
<img :src="logoSrc" class="pdf-logo" />
|
||||||
<el-descriptions-item label="交货日期">{{ detailData.deliveryDate }}</el-descriptions-item>
|
<div class="pdf-header-text">
|
||||||
<el-descriptions-item label="交货地址">{{ detailData.deliveryAddr }}</el-descriptions-item>
|
<div class="pdf-company">福安德综合报价系统</div>
|
||||||
</el-descriptions>
|
<div class="pdf-doc-type">采购单</div>
|
||||||
<el-divider>明细</el-divider>
|
</div>
|
||||||
<el-table :data="detailData.items || []" border size="small">
|
<div class="pdf-header-no">{{ detailData.poNo }}</div>
|
||||||
<el-table-column label="物料" prop="materialName" />
|
</div>
|
||||||
<el-table-column label="规格" prop="spec" />
|
<div class="pdf-divider"></div>
|
||||||
<el-table-column label="数量" prop="quantity" align="right" />
|
<table class="pdf-meta-table">
|
||||||
<el-table-column label="单价" prop="unitPrice" align="right" />
|
<tr>
|
||||||
<el-table-column label="金额" prop="totalPrice" align="right" />
|
<td class="meta-label">采购单号</td><td class="meta-val">{{ detailData.poNo }}</td>
|
||||||
</el-table>
|
<td class="meta-label">供应商</td><td class="meta-val">{{ detailData.supplierName }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="meta-label">总金额</td><td class="meta-val amount">¥{{ detailData.totalAmount }}</td>
|
||||||
|
<td class="meta-label">状态</td><td class="meta-val"><el-tag :type="statusType(detailData.status)" size="small">{{ statusLabel(detailData.status) }}</el-tag></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="meta-label">交货日期</td><td class="meta-val">{{ detailData.deliveryDate }}</td>
|
||||||
|
<td class="meta-label">交货地址</td><td class="meta-val">{{ detailData.deliveryAddr }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="detailData.remark">
|
||||||
|
<td class="meta-label">备注</td><td class="meta-val" colspan="3">{{ detailData.remark }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<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 detailData.items" :key="i">
|
||||||
|
<td>{{ item.materialName }}</td>
|
||||||
|
<td>{{ item.spec }}</td>
|
||||||
|
<td>{{ item.unit }}</td>
|
||||||
|
<td>{{ item.quantity }}</td>
|
||||||
|
<td>{{ item.unitPrice }}</td>
|
||||||
|
<td class="amount-cell">{{ item.totalPrice || ((item.quantity||0)*(item.unitPrice||0)).toFixed(2) }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5" style="text-align:right;font-weight:bold;padding:8px">合计金额</td>
|
||||||
|
<td class="amount-cell total-cell">¥{{ detailData.totalAmount }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
<div class="pdf-footer">生成时间：{{ new Date().toLocaleString('zh-CN') }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-drawer>
|
<div slot="footer">
|
||||||
|
<el-button @click="detailOpen=false">关闭</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-download" :loading="pdfLoading" @click="exportPdf">导出 PDF</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listPurchaseorder, getPurchaseorder, addPurchaseorder, updatePurchaseorder, confirmPurchaseorder, delPurchaseorder } from "@/api/bid/purchaseorder";
|
import { listPurchaseorder, getPurchaseorder, addPurchaseorder, updatePurchaseorder, confirmPurchaseorder, delPurchaseorder } from "@/api/bid/purchaseorder";
|
||||||
import { listSupplier } from "@/api/bid/supplier";
|
import { listSupplier } from "@/api/bid/supplier";
|
||||||
|
import logoImg from "@/assets/logo/logo.png";
|
||||||
|
import html2canvas from "html2canvas";
|
||||||
|
import jsPDF from "jspdf";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PurchaseOrder",
|
name: "PurchaseOrder",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false, total: 0, list: [],
|
loading: false, total: 0, list: [],
|
||||||
open: false, title: "", detailOpen: false, detailData: null,
|
open: false, title: "",
|
||||||
|
detailOpen: false, detailData: null, pdfLoading: false,
|
||||||
supplierOptions: [],
|
supplierOptions: [],
|
||||||
|
logoSrc: logoImg,
|
||||||
queryParams: { pageNum: 1, pageSize: 10, poNo: null, status: null },
|
queryParams: { pageNum: 1, pageSize: 10, poNo: null, status: null },
|
||||||
form: { items: [], currency: "CNY" },
|
form: { items: [], currency: "CNY" },
|
||||||
rules: { supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }] }
|
rules: { supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }] }
|
||||||
@@ -170,8 +218,138 @@ export default {
|
|||||||
action(this.form).then(() => { this.$modal.msgSuccess("保存成功"); this.open = false; this.getList(); });
|
action(this.form).then(() => { this.$modal.msgSuccess("保存成功"); this.open = false; this.getList(); });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
async exportPdf() {
|
||||||
|
this.pdfLoading = true;
|
||||||
|
try {
|
||||||
|
const el = document.getElementById("po-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.detailData.poNo || "export") + ".pdf");
|
||||||
|
} finally {
|
||||||
|
this.pdfLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
statusType(s) { return { draft:"info", confirmed:"success", delivered:"", closed:"", disputed:"danger" }[s] || ""; },
|
statusType(s) { return { draft:"info", confirmed:"success", delivered:"", closed:"", disputed:"danger" }[s] || ""; },
|
||||||
statusLabel(s) { return { draft:"草稿", confirmed:"已确认", delivered:"已交付", closed:"已关闭", disputed:"异议中" }[s] || s; }
|
statusLabel(s) { return { draft:"草稿", confirmed:"已确认", delivered:"已交付", closed:"已关闭", disputed:"异议中" }[s] || s; }
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pdf-area {
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
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: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
.pdf-header-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pdf-company {
|
||||||
|
font-size: 20px;
|
||||||
|
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: 16px;
|
||||||
|
}
|
||||||
|
.pdf-meta-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.pdf-meta-table td {
|
||||||
|
padding: 7px 10px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
.meta-label {
|
||||||
|
background: #f5f7fa;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
.meta-val {
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
.amount {
|
||||||
|
color: #409EFF;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.pdf-section-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a2c4e;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
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: 8px 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.pdf-items-table td {
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
padding: 7px 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pdf-items-table tbody tr:nth-child(even) td {
|
||||||
|
background: #f9fbff;
|
||||||
|
}
|
||||||
|
.amount-cell {
|
||||||
|
color: #409EFF;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.total-cell {
|
||||||
|
font-size: 15px;
|
||||||
|
background: #f0f7ff !important;
|
||||||
|
}
|
||||||
|
.pdf-footer {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #aaa;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="提交时间" prop="submitTime" width="160" />
|
<el-table-column label="提交时间" prop="submitTime" width="160" />
|
||||||
<el-table-column label="操作" align="center" width="200">
|
<el-table-column label="操作" align="center" width="220">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.status==='draft'">编辑</el-button>
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.status==='draft'">编辑</el-button>
|
||||||
<el-button size="mini" type="text" @click="handleSubmit(scope.row)" v-if="scope.row.status==='draft'" style="color:#67C23A">提交</el-button>
|
<el-button size="mini" type="text" @click="handleSubmit(scope.row)" v-if="scope.row.status==='draft'" style="color:#67C23A">提交</el-button>
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
</el-table>
|
</el-table>
|
||||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||||
|
|
||||||
|
<!-- Edit / Create Dialog -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||||
<el-row>
|
<el-row>
|
||||||
@@ -88,7 +89,6 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-divider content-position="left">报价明细</el-divider>
|
<el-divider content-position="left">报价明细</el-divider>
|
||||||
<el-table :data="form.items || []" border size="small">
|
<el-table :data="form.items || []" border size="small">
|
||||||
<el-table-column label="物料名称" min-width="150">
|
<el-table-column label="物料名称" min-width="150">
|
||||||
@@ -107,7 +107,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="单价" width="130">
|
<el-table-column label="单价" width="130">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-input-number v-model="scope.row.unitPrice" :min="0" :precision="4" size="small" style="width:120px" @change="calcTotal(scope.row)" />
|
<el-input-number v-model="scope.row.unitPrice" :min="0" :precision="4" size="small" style="width:120px" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="金额" width="120" align="right">
|
<el-table-column label="金额" width="120" align="right">
|
||||||
@@ -121,8 +121,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-button size="small" style="margin-top:8px" @click="form.items.push({ materialName:'',spec:'',unit:'',quantity:1,unitPrice:0,deliveryDays:0 })" icon="el-icon-plus">添加行</el-button>
|
<el-button size="small" style="margin-top:8px" @click="form.items.push({materialName:'',spec:'',unit:'',quantity:1,unitPrice:0})" icon="el-icon-plus">添加行</el-button>
|
||||||
|
|
||||||
<el-form-item label="备注" style="margin-top:16px"><el-input v-model="form.note" type="textarea" rows="2" /></el-form-item>
|
<el-form-item label="备注" style="margin-top:16px"><el-input v-model="form.note" type="textarea" rows="2" /></el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
@@ -131,46 +130,96 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- Detail drawer -->
|
<!-- Detail Dialog -->
|
||||||
<el-drawer :title="'报价单详情'" :visible.sync="detailOpen" size="700px">
|
<el-dialog title="报价单详情" :visible.sync="detailOpen" width="820px" append-to-body>
|
||||||
<div v-if="detailData" style="padding:20px">
|
<div v-if="detailData">
|
||||||
<el-descriptions :column="2" border>
|
<div id="quote-pdf-area" class="pdf-area">
|
||||||
<el-descriptions-item label="报价单号">{{ detailData.quoteNo }}</el-descriptions-item>
|
<div class="pdf-header">
|
||||||
<el-descriptions-item label="供应商">{{ detailData.supplierName }}</el-descriptions-item>
|
<img :src="logoSrc" class="pdf-logo" />
|
||||||
<el-descriptions-item label="RFQ">{{ detailData.rfqNo }}</el-descriptions-item>
|
<div class="pdf-header-text">
|
||||||
<el-descriptions-item label="状态"><el-tag :type="statusType(detailData.status)">{{ statusLabel(detailData.status) }}</el-tag></el-descriptions-item>
|
<div class="pdf-company">福安德综合报价系统</div>
|
||||||
<el-descriptions-item label="总金额"><span style="color:#409EFF;font-size:18px;font-weight:bold">¥{{ detailData.totalAmount }}</span></el-descriptions-item>
|
<div class="pdf-doc-type">报价单</div>
|
||||||
<el-descriptions-item label="交货期">{{ detailData.deliveryDays }} 天</el-descriptions-item>
|
</div>
|
||||||
</el-descriptions>
|
<div class="pdf-header-no">{{ detailData.quoteNo }}</div>
|
||||||
<el-divider>明细</el-divider>
|
</div>
|
||||||
<el-table :data="detailData.items || []" border size="small">
|
<div class="pdf-divider"></div>
|
||||||
<el-table-column label="物料" prop="materialName" />
|
<table class="pdf-meta-table">
|
||||||
<el-table-column label="规格" prop="spec" />
|
<tr>
|
||||||
<el-table-column label="数量" prop="quantity" align="right" />
|
<td class="meta-label">报价单号</td><td class="meta-val">{{ detailData.quoteNo }}</td>
|
||||||
<el-table-column label="单价" prop="unitPrice" align="right" />
|
<td class="meta-label">供应商</td><td class="meta-val">{{ detailData.supplierName }}</td>
|
||||||
<el-table-column label="金额" prop="totalPrice" align="right" />
|
</tr>
|
||||||
</el-table>
|
<tr>
|
||||||
|
<td class="meta-label">关联RFQ</td><td class="meta-val">{{ detailData.rfqNo }}</td>
|
||||||
|
<td class="meta-label">状态</td><td class="meta-val"><el-tag :type="statusType(detailData.status)" size="small">{{ statusLabel(detailData.status) }}</el-tag></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="meta-label">总金额</td><td class="meta-val amount">¥{{ detailData.totalAmount }}</td>
|
||||||
|
<td class="meta-label">交货期</td><td class="meta-val">{{ detailData.deliveryDays }} 天</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="meta-label">有效期</td><td class="meta-val">{{ detailData.validDays }} 天</td>
|
||||||
|
<td class="meta-label">币种</td><td class="meta-val">{{ detailData.currency }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="detailData.note">
|
||||||
|
<td class="meta-label">备注</td><td class="meta-val" colspan="3">{{ detailData.note }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<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 detailData.items" :key="i">
|
||||||
|
<td>{{ item.materialName }}</td>
|
||||||
|
<td>{{ item.spec }}</td>
|
||||||
|
<td>{{ item.unit }}</td>
|
||||||
|
<td>{{ item.quantity }}</td>
|
||||||
|
<td>{{ item.unitPrice }}</td>
|
||||||
|
<td class="amount-cell">{{ item.totalPrice || ((item.quantity||0)*(item.unitPrice||0)).toFixed(2) }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5" style="text-align:right;font-weight:bold;padding:8px">合计金额</td>
|
||||||
|
<td class="amount-cell total-cell">¥{{ detailData.totalAmount }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
<div class="pdf-footer">生成时间：{{ new Date().toLocaleString('zh-CN') }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-drawer>
|
<div slot="footer">
|
||||||
|
<el-button @click="detailOpen=false">关闭</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-download" :loading="pdfLoading" @click="exportPdf">导出 PDF</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listQuotation, getQuotation, addQuotation, updateQuotation, submitQuotation, acceptQuotation, rejectQuotation } from "@/api/bid/quotation";
|
import { listQuotation, getQuotation, addQuotation, updateQuotation, submitQuotation, acceptQuotation, rejectQuotation } from "@/api/bid/quotation";
|
||||||
import { listRfq } from "@/api/bid/rfq";
|
import { listRfq } from "@/api/bid/rfq";
|
||||||
import { listSupplier } from "@/api/bid/supplier";
|
import { listSupplier } from "@/api/bid/supplier";
|
||||||
|
import logoImg from "@/assets/logo/logo.png";
|
||||||
|
import html2canvas from "html2canvas";
|
||||||
|
import jsPDF from "jspdf";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Quotation",
|
name: "Quotation",
|
||||||
filters: { numFormat: v => v ? Number(v).toFixed(2) : "0.00" },
|
filters: { numFormat: v => v ? Number(v).toFixed(2) : "0.00" },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false, total: 0, list: [],
|
loading: false, total: 0, list: [],
|
||||||
open: false, title: "", detailOpen: false, detailData: null,
|
open: false, title: "",
|
||||||
|
detailOpen: false, detailData: null, pdfLoading: false,
|
||||||
|
logoSrc: logoImg,
|
||||||
rfqOptions: [], supplierOptions: [],
|
rfqOptions: [], supplierOptions: [],
|
||||||
queryParams: { pageNum: 1, pageSize: 10, status: null },
|
queryParams: { pageNum: 1, pageSize: 10, status: null },
|
||||||
form: { items: [], currency: "CNY", validDays: 30 },
|
form: { items: [], currency: "CNY", validDays: 30 },
|
||||||
rules: {
|
rules: {
|
||||||
rfqId: [{ required: true, message: "请选择RFQ", trigger: "change" }],
|
rfqId: [{ required: true, message: "请选择RFQ", trigger: "change" }],
|
||||||
supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }],
|
supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -181,7 +230,7 @@ export default {
|
|||||||
listQuotation(this.queryParams).then(r => { this.list = r.rows; this.total = r.total; this.loading = false; });
|
listQuotation(this.queryParams).then(r => { this.list = r.rows; this.total = r.total; this.loading = false; });
|
||||||
},
|
},
|
||||||
loadOptions() {
|
loadOptions() {
|
||||||
listRfq({ pageSize: 200, status: "published" }).then(r => { this.rfqOptions = r.rows || []; });
|
listRfq({ pageSize: 200 }).then(r => { this.rfqOptions = r.rows || []; });
|
||||||
listSupplier({ pageSize: 200 }).then(r => { this.supplierOptions = r.rows || []; });
|
listSupplier({ pageSize: 200 }).then(r => { this.supplierOptions = r.rows || []; });
|
||||||
},
|
},
|
||||||
handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
|
handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
|
||||||
@@ -202,9 +251,126 @@ export default {
|
|||||||
action(this.form).then(() => { this.$modal.msgSuccess("保存成功"); this.open = false; this.getList(); });
|
action(this.form).then(() => { this.$modal.msgSuccess("保存成功"); this.open = false; this.getList(); });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
async exportPdf() {
|
||||||
|
this.pdfLoading = true;
|
||||||
|
try {
|
||||||
|
const el = document.getElementById("quote-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.detailData.quoteNo || "export") + ".pdf");
|
||||||
|
} finally {
|
||||||
|
this.pdfLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
statusType(s) { return { draft:"info", submitted:"warning", accepted:"success", rejected:"danger" }[s] || ""; },
|
statusType(s) { return { draft:"info", submitted:"warning", accepted:"success", rejected:"danger" }[s] || ""; },
|
||||||
statusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; },
|
statusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; }
|
||||||
calcTotal(row) {}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pdf-area {
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
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: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
.pdf-header-text { flex: 1; }
|
||||||
|
.pdf-company {
|
||||||
|
font-size: 20px;
|
||||||
|
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: 16px;
|
||||||
|
}
|
||||||
|
.pdf-meta-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.pdf-meta-table td {
|
||||||
|
padding: 7px 10px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
.meta-label {
|
||||||
|
background: #f5f7fa;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 600;
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
.meta-val { color: #303133; }
|
||||||
|
.amount {
|
||||||
|
color: #409EFF;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.pdf-section-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a2c4e;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
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: 8px 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.pdf-items-table td {
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
padding: 7px 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pdf-items-table tbody tr:nth-child(even) td { background: #f9fbff; }
|
||||||
|
.amount-cell { color: #409EFF; font-weight: 600; }
|
||||||
|
.total-cell { font-size: 15px; background: #f0f7ff !important; }
|
||||||
|
.pdf-footer {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #aaa;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
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