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

ruoyi-ui/src/views/bid/quotation/index.vue

@@ -38,7 +38,7 @@
         </template>
       </el-table-column>
       <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">
           <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>
@@ -50,6 +50,7 @@
     </el-table>
     <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-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
@@ -88,7 +89,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-
         <el-divider content-position="left">报价明细</el-divider>
         <el-table :data="form.items || []" border size="small">
           <el-table-column label="物料名称" min-width="150">
@@ -107,7 +107,7 @@
           </el-table-column>
           <el-table-column label="单价" width="130">
             <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>
           </el-table-column>
           <el-table-column label="金额" width="120" align="right">
@@ -121,8 +121,7 @@
             </template>
           </el-table-column>
         </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>
       <div slot="footer">
@@ -131,46 +130,96 @@
       </div>
     </el-dialog>
 
-    <!-- Detail drawer -->
-    <el-drawer :title="'报价单详情'" :visible.sync="detailOpen" size="700px">
-      <div v-if="detailData" style="padding:20px">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="报价单号">{{ detailData.quoteNo }}</el-descriptions-item>
-          <el-descriptions-item label="供应商">{{ detailData.supplierName }}</el-descriptions-item>
-          <el-descriptions-item label="RFQ">{{ detailData.rfqNo }}</el-descriptions-item>
-          <el-descriptions-item label="状态"><el-tag :type="statusType(detailData.status)">{{ statusLabel(detailData.status) }}</el-tag></el-descriptions-item>
-          <el-descriptions-item label="总金额"><span style="color:#409EFF;font-size:18px;font-weight:bold">¥{{ detailData.totalAmount }}</span></el-descriptions-item>
-          <el-descriptions-item label="交货期">{{ detailData.deliveryDays }} 天</el-descriptions-item>
-        </el-descriptions>
-        <el-divider>明细</el-divider>
-        <el-table :data="detailData.items || []" border size="small">
-          <el-table-column label="物料" prop="materialName" />
-          <el-table-column label="规格" prop="spec" />
-          <el-table-column label="数量" prop="quantity" align="right" />
-          <el-table-column label="单价" prop="unitPrice" align="right" />
-          <el-table-column label="金额" prop="totalPrice" align="right" />
-        </el-table>
+    <!-- Detail Dialog -->
+    <el-dialog title="报价单详情" :visible.sync="detailOpen" width="820px" append-to-body>
+      <div v-if="detailData">
+        <div id="quote-pdf-area" class="pdf-area">
+          <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">报价单</div>
+            </div>
+            <div class="pdf-header-no">{{ detailData.quoteNo }}</div>
+          </div>
+          <div class="pdf-divider"></div>
+          <table class="pdf-meta-table">
+            <tr>
+              <td class="meta-label">报价单号</td><td class="meta-val">{{ detailData.quoteNo }}</td>
+              <td class="meta-label">供应商</td><td class="meta-val">{{ detailData.supplierName }}</td>
+            </tr>
+            <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>
-    </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>
 </template>
+
 <script>
 import { listQuotation, getQuotation, addQuotation, updateQuotation, submitQuotation, acceptQuotation, rejectQuotation } from "@/api/bid/quotation";
 import { listRfq } from "@/api/bid/rfq";
 import { listSupplier } from "@/api/bid/supplier";
+import logoImg from "@/assets/logo/logo.png";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+
 export default {
   name: "Quotation",
   filters: { numFormat: v => v ? Number(v).toFixed(2) : "0.00" },
   data() {
     return {
       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: [],
       queryParams: { pageNum: 1, pageSize: 10, status: null },
       form: { items: [], currency: "CNY", validDays: 30 },
       rules: {
         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; });
     },
     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 || []; });
     },
     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(); });
       });
     },
+    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] || ""; },
-    statusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; },
-    calcTotal(row) {}
+    statusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; }
   }
 };
 </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>