添加采购订单打印

mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/indexs.vue

@@ -7,11 +7,13 @@
     <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="130px">
       <el-form-item label="项目编号" prop="projectCode">
-        <el-input v-model="queryParams.projectCode" placeholder="请输入项目编号" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.projectCode" placeholder="请输入项目编号" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="项目名称" prop="projectName">
-        <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery"
                   class="!w-240px" />
       </el-form-item>
       <el-form-item label="客户简称" prop="brief">
@@ -21,11 +23,13 @@
         <el-input v-model="queryParams.projectSubName" placeholder="请输入子项目名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
       </el-form-item>
       <el-form-item label="零件名称" prop="materialName">
-        <el-input v-model="queryParams.materialName" placeholder="请输入零件名称" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.materialName" placeholder="请输入零件名称" clearable @keyup.enter="handleQuery"
                   class="!w-240px" />
       </el-form-item>
       <el-form-item label="图号" prop="blueprintNo">
-        <el-input v-model="queryParams.blueprintNo" placeholder="请输入图号" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.blueprintNo" placeholder="请输入图号" clearable @keyup.enter="handleQuery"
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="工序" prop="procedureName">
@@ -52,7 +56,8 @@
         </el-select>
       </el-form-item>
       <el-form-item label="责任人" prop="ownerName">
-        <el-input v-model="queryParams.ownerName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery"
+        <el-input
+v-model="queryParams.ownerName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery"
                   class="!w-240px" />
       </el-form-item>
       <el-form-item label="送审日期" prop="createTime">
@@ -88,6 +93,7 @@
   <el-card class="hl-card-info">
     <template #header>
       <el-button  style="margin-left: 20px" @click="approves()" type="success"  size="large">全部审核</el-button>
+      <el-button  style="margin-left: 20px" @click="print()" type="success"  size="large">打印</el-button>
     </template>
     <el-row>
       <el-col>
@@ -132,13 +138,15 @@
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
     </el-form>
   </el-col>
   </el-row>
 </el-card>
   <Form ref="formRef" @success="getList" />
+  <Print ref="printRef" />
 </el-card>
 </template>
 
@@ -151,6 +159,8 @@ import {dateFormatter1} from "@/utils/formatTime";
 import {ref} from "vue";
 import {ElTable, ElTableColumn} from "element-plus";
 import dayjs from "dayjs";
+import Print from './print.vue'
+const printRef = ref()
 defineOptions({ name: 'PartPurchaseCheck' })
 const router = useRouter()
 const message = useMessage() // 消息弹窗
@@ -242,7 +252,50 @@ const approves = async () => {
   formLoading.value = false;
 }
 }
+const print = async () => {
+  try{
+  const list = multipleTable.value|| []; // 安全获取数据
+  // 1. 检查空数据
+  if (!list || list.length==null) {
+    message.error("请选择要打印的采购订单，请确认");
+    return;
+  }
+    formLoading.value = true;  
+  const printData = list.map((item,index)=>({
+    编号:index+1,
+    日期:item.createTime,
+    客户名: item.brief,
+    模具名: item.projectSubCode,
+    件号: item.blueprintNo,
+    零件名称: item.boomName,
+    材料: item.composition,
+    规格: item.boomSpec,
+    数量: item.purchaseAmount,
+    单价: item.unitPrice,
+    总价格: item.estimatedPrice,
+    要求日期: item.requireTime,
+    合立经手人: item.duEmpName,
+  }))
+  console.log(JSON.parse(JSON.stringify(printData)))
+  //校验责任人必须是同一人
+  const duEmpNames = printData.map(item => item.合立经手人);
+  const uniqueDuEmpNames = new Set(duEmpNames);
+  if (uniqueDuEmpNames.size !== 1) {
+    message.error("合立经手人必须是同一人，请确认");
+    return;
+  }
+  const printDataStr = JSON.parse(JSON.stringify(printData));
+  // 生成打印模板 顺序分别为 编号 日期 客户名 模具名 件号 零件名称 材料  规格 数量 单价 总价格 要求日期 
+  // 将其放在table中 调用打印 
+ printRef.value.open(printDataStr)
  
+
+} catch (error) {
+  console.error("打印失败:", error);
+} finally {
+  formLoading.value = false;
+}
+}
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (id?: number) => {

mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/print.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="" width="900px" append-to-body>
+    <div class="print-wrap">
+      <div class="header header-grid">
+        <div class="cell company">杭州合立模具有限公司</div>
+        <div class="cell title">委外加工清单及送货单</div>
+        <div class="cell audit">审核：</div>
+        <div class="cell handler">委外加工经手人：</div>
+        <div class="cell receiver">收货人：</div>
+      </div>
+
+      <table class="sheet" border="1" cellspacing="0" cellpadding="0">
+        <!-- 固定列宽，总计 100% -->
+        <colgroup>
+          <col style="width: 4%" />
+          <col style="width: 8%" />
+          <col style="width: 9%" />
+          <col style="width: 11%" />
+          <col style="width: 9%" />
+          <col style="width: 14%" />
+          <col style="width: 6%" />
+          <col style="width: 12%" />
+          <col style="width: 6%" />
+          <col style="width: 6%" />
+          <col style="width: 7%" />
+          <col style="width: 8%" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>编号</th>
+            <th>日期</th>
+            <th>客户名</th>
+            <th>模具名</th>
+            <th>件号</th>
+            <th>零件名称</th>
+            <th>材料</th>
+            <th>规格</th>
+            <th>数量</th>
+            <th>单价</th>
+            <th>总价格</th>
+            <th>要求日期</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row['编号']">
+            <td>{{ row['编号'] }}</td>
+            <td>{{ fmtDate(row['日期']) }}</td>
+            <td class="text-left">{{ row['客户名'] }}</td>
+            <td class="text-left">{{ row['模具名'] }}</td>
+            <td class="text-left">{{ row['件号'] }}</td>
+            <td class="text-left">{{ row['零件名称'] }}</td>
+            <td>{{ row['材料'] }}</td>
+            <td class="spec text-left">{{ row['规格'] }}</td>
+            <td class="num">{{ row['数量'] }}</td>
+            <td class="num">{{ row['单价'] }}</td>
+            <td class="num">{{ row['总价格'] }}</td>
+            <td>{{ fmtDate(row['要求日期']) }}</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr class="sum-row">
+            <td colspan="8" class="sum-label">合计</td>
+            <td class="num sum-value">{{ sumQuantity }}</td>
+            <td></td>
+            <td class="num sum-value">{{ sumTotal }}</td>
+            <td></td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div class="footer-sign sign-row">
+        <div>合立经手人：{{ duEmpName }}</div>
+        <div>审核人：</div>
+        <div>委外加工经手人：</div>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">关闭</el-button>
+      <el-button type="primary" @click="onPrint">打印</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import dayjs from 'dayjs'
+
+const dialogVisible = ref(false)
+const rows = ref<Record<string, any>[]>([])
+
+const nowDate = dayjs().format('YYYY-MM-DD')
+const duEmpName = computed(() => (rows.value[0] ? rows.value[0]['合立经手人'] ?? '' : ''))
+
+const sumQuantity = computed(() =>
+  rows.value.reduce((acc, cur) => acc + Number(cur['数量'] || 0), 0)
+)
+const sumTotal = computed(() =>
+  rows.value.reduce((acc, cur) => acc + Number(cur['总价格'] || 0), 0)
+)
+
+const fmtDate = (v: any) => (v ? dayjs(v).format('YYYY-MM-DD') : '')
+
+const open = (data: Record<string, any>[]) => {
+  rows.value = Array.isArray(data) ? data : []
+  dialogVisible.value = true
+}
+defineExpose({ open })
+
+// onPrint()
+const onPrint = () => {
+  const printNode = document.querySelector('.print-wrap') as HTMLElement
+  if (!printNode) return
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('style', 'width:0;height:0;position:absolute;left:-9999px;top:-9999px;')
+  document.body.appendChild(iframe)
+
+  const doc = iframe.contentWindow!.document
+
+  doc.open()
+  doc.title = ''
+  doc.write(`
+    <style>
+      /* 自定义纸张尺寸：222mm 宽 × 140mm 高 */
+      @page { size: 222mm 140mm; margin: 6mm; }
+
+      body { font-family: Arial, "Microsoft YaHei", sans-serif; color:#000; }
+      /* 打印区域尺寸以纸张减去页边距为准 */
+      .print-wrap { width: calc(222mm - 12mm); min-height: calc(140mm - 12mm); }
+
+      .header.header-grid {
+        display: grid;
+        grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
+        align-items: center;
+        column-gap: 12px;
+        margin-bottom: 8px;
+      }
+      .header.header-grid .company { font-size: 12px; text-align: left; }
+      .header.header-grid .title,
+      .header.header-grid .audit,
+      .header.header-grid .handler,
+      .header.header-grid .receiver { font-size: 12px; text-align: right; }
+
+      .sheet { width:100%; border-collapse:collapse; font-size:12px; table-layout: fixed; }
+      .sheet th, .sheet td { border:1px solid #333; padding:6px 4px; text-align:center; line-height:1.3; vertical-align: middle; }
+      .sheet thead th { background:#f5f7fa; font-weight:600; }
+      .sheet .text-left { text-align:left; padding-left:6px; }
+      .sheet .spec { word-break: break-word; white-space: normal; }
+      .sheet .num { text-align:right; padding-right:6px; }
+      .sheet tfoot .sum-label, .sheet tfoot .sum-value { font-weight:700; }
+      .sheet tfoot .sum-row td { border-top: 2px solid #000; }
+
+      .sign-row { display:flex; justify-content:space-between; margin-top:12px; font-size:12px; }
+    </style>
+  `)
+  doc.write(printNode.outerHTML)
+  doc.close()
+
+  iframe.contentWindow!.focus()
+  iframe.contentWindow!.print()
+  setTimeout(() => document.body.removeChild(iframe), 500)
+}
+</script>
+
+<style scoped lang="less">
+.print-wrap {
+  /* 预览时也按目标纸张尺寸展示，便于校对 */
+  width: 222mm;
+  min-height: 140mm;
+  background: #fff;
+}
+.header.header-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
+  align-items: center;
+  column-gap: 12px;
+}
+.header.header-grid .company {
+}
+.header.header-grid .title {
+  text-align: center;
+}
+.header.header-grid .audit,
+.header.header-grid .handler,
+.header.header-grid .receiver {
+  font-size: 12px;
+  text-align: right;
+}
+
+.sheet {
+  margin-top: 8px;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 12px;
+  width: 100%;
+  th,
+  td {
+    border: 1px solid #333;
+    padding: 6px 4px;
+    text-align: center;
+    line-height: 1.3;
+    vertical-align: middle;
+  }
+  thead th {
+    background: #f5f7fa;
+    font-weight: 600;
+  }
+  .text-left {
+    text-align: left;
+    padding-left: 6px;
+  }
+  .spec {
+    word-break: break-word;
+    white-space: normal;
+  }
+  .num {
+    text-align: right;
+    padding-right: 6px;
+  }
+  tfoot .sum-row td {
+    border-top: 2px solid #000;
+  }
+}
+.footer-sign.sign-row {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+</style>