feat(采购需求管理): 添加打印采购申请单功能

src/views/purchasingManage/purchaseNeedManage/components/print-template-tr.vue

@@ -0,0 +1,228 @@
+<template>
+  <ele-modal
+    title="采购申请单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="80%"
+  >
+    <div
+      id="printSection"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      "
+    >
+      <div
+        style="
+          text-align: center;
+          font-size: 18px;
+          font-weight: 800;
+          margin-bottom: 20px;
+        ">
+          {{ groupName }}采购申请单
+      </div>
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          min-width: 800px; 
+          margin-bottom: 10px;
+          font-size: 13px;
+        "
+      >
+        <span style="flex: 1; white-space: nowrap; padding-right: 10px"
+          >申请部门：{{ formData.departmentName || '' }}</span
+        >
+        <span style="flex: 1; white-space: nowrap; padding: 0 10px"
+          >申请序号：{{ formData.applyNo || '' }}</span
+        >
+        <span style="flex: 1; white-space: nowrap; padding-left: 10px"
+          >申请日期：{{ formData.applyYear || '' }}</span
+        >
+      </div>
+      <div
+        style="
+          display: flex;
+          width: 100%;
+          min-width: 800px; 
+          font-size: 13px;
+          border: 1px solid #000;
+          border-bottom: none;
+        "
+      >
+        <div style="flex: 1; margin-right: 20px; padding: 10px; border-right: 1px solid #000;">
+          <span>采购方式：</span>
+          <span v-if="formData.purchaseMethod === 'self'">□自行采购</span>
+          <span v-else>□自行采购</span>
+          <span v-if="formData.purchaseMethod === 'department'">□采购部门采购</span>
+          <span v-else>□采购部门采购</span>
+        </div>
+        <div style="flex: 1; margin-right: 20px; padding: 10px;">
+          <span>采购类别：</span>
+          <span v-if="formData.purchaseCategory === 'administrative'">□行政用品采购</span>
+          <span v-else>□行政用品采购</span>
+          <span v-if="formData.purchaseCategory === 'nonAdministrative'">□非行政用品采购</span>
+          <span v-else>□非行政用品采购</span>
+        </div>
+      </div>
+      <div
+        style="
+          display: flex;
+          width: 100%;
+          min-width: 800px; 
+          font-size: 13px;
+          border: 1px solid #000;
+          border-bottom: none;
+          padding: 10px;
+        "
+      >
+        <div style="flex: 1;">
+          <span>价格区间：</span>
+          <span v-if="formData.priceRange === 'below3000'">□总金额3000元以下</span>
+          <span v-else>□总金额3000元以下</span>
+          <span v-if="formData.priceRange === 'above3000'">□总金额3000及元以上</span>
+          <span v-else>□总金额3000及元以上</span>
+        </div>
+      </div>
+      <table
+          cellspacing="0"
+          border
+          style="
+            width: 100%;
+            table-layout: fixed;
+            word-break: break-all;
+            word-wrap: break-word;
+            font-size: 12px;
+            margin-bottom: 10px;
+            border-collapse: collapse;
+          "
+        >
+          <thead>
+            <tr>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 50px;">序号</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">物料编码</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">物料名称</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">规格型号</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 60px;">单位</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 80px;">数量</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">用途</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">期望交付日期</th>
+              <th style="padding: 8px; border: 1px solid #000; text-align: center;">备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in formData?.materialList || []">
+              <td style="padding: 8px; border: 1px solid #000; text-align: center;">{{ index + 1 }}</td>
+              <td style="padding: 8px; border: 1px solid #000;">{{ item.materialCode || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000;">{{ item.materialName || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000;">{{ item.specificationModel || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000; text-align: center;">{{ item.unit || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000; text-align: center;">{{ item.quantity || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000;">{{ item.purpose || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000; text-align: center;">{{ item.expectedDeliveryDate || '' }}</td>
+              <td style="padding: 8px; border: 1px solid #000;">{{ item.remark || '' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      <div style="display: flex; justify-content: space-between; width: 100%; font-size: 13px; margin-top: 10px;">
+          <div style="flex: 1;">
+            <div style="margin-bottom: 40px;">编制/日期：{{formData.creatorName || ''}}/{{ formData.createDate || '' }}</div>
+          </div>
+          <div style="flex: 1;">
+            <div style="margin-bottom: 40px;">审核/日期：{{formData.auditorName || ''}}/{{ formData.auditDate || '' }}</div>
+          </div>
+          <div style="flex: 1;">
+            <div style="margin-bottom: 40px;">批准/日期：{{formData.approverName || ''}}/{{ formData.approveDate || '' }}</div>
+          </div>
+        </div>
+    </div>
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+import { getDetail } from '@/api/purchasingManage/purchaseNeedManage';
+import { mapGetters } from 'vuex';
+export default {
+  name: 'PurchaseApplyPrint',
+  computed: {
+    ...mapGetters(['user'])
+  },
+  props: {
+    // 可以根据需要添加props
+    groupName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      QRvisible: false,
+      formData: {}
+    };
+  },
+
+  methods: {
+    // 处理日期格式，将日期拆分为年月日
+    formatDate(dateStr) {
+      if (!dateStr) return { year: '', month: '', day: '' };
+      const date = new Date(dateStr);
+      return {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate()
+      };
+    },
+    
+    async open(id) {
+      try {
+        const response = await getDetail(id);
+        this.formData = response;
+        
+        // 处理申请日期
+        if (this.formData.applyDate) {
+          const dateObj = this.formatDate(this.formData.applyDate);
+          this.formData.applyYear = dateObj.year;
+          this.formData.applyMonth = dateObj.month;
+          this.formData.applyDay = dateObj.day;
+        }
+        
+        this.QRvisible = true;
+      } catch (error) {
+        console.error('获取采购申请单详情失败:', error);
+        this.$message.error('获取采购申请单详情失败');
+      }
+    },
+    
+    close() {
+      this.QRvisible = false;
+    },
+    
+    print() {
+      const printSection = document.getElementById('printSection');
+      // 创建打印任务
+      const printWindow = window.open('', '_blank');
+      printWindow.document.open();
+      printWindow.document.write('<html><head><title>打印预览</title>');
+      printWindow.document.write(
+        '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+      );
+      printWindow.document.write('</head><body>');
+      printWindow.document.write(printSection.innerHTML);
+      printWindow.document.write('</body></html>');
+      printWindow.document.close();
+      printWindow.onload = function () {
+        printWindow.print();
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss"></style>

src/views/purchasingManage/purchaseNeedManage/index.vue

@@ -40,6 +40,16 @@
             >
               批量删除
             </el-button>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-print"
+              class="ele-btn-icon"
+              v-if="$hasPermission('eom:purchaserequirement:print')"
+              @click="handlePrint('printTemplateTrRef')"
+            >
+              打印申请单
+            </el-button>
           </template>
 
           <!-- 查看详情列 -->
@@ -111,6 +121,8 @@
     <add-plan-dialog ref="addPlanRef" @done="reload"></add-plan-dialog>
 
     <detail-dialog ref="contactDetailDialogRef"></detail-dialog>
+    <!-- 打印申请单弹窗 -->
+    <print-template-tr ref="printTemplateTrRef" :group-name="groupName"></print-template-tr>
     <!-- 多选删除弹窗 -->
     <pop-modal
       :visible.sync="delVisible"
@@ -144,6 +156,8 @@
   import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
   import tabMixins from '@/mixins/tableColumnsMixin';
   import { reviewStatus } from '@/enum/dict';
+  import printTemplateTr from './components/print-template-tr.vue';
+  import { enterprisePage } from '@/api/contractManage/contractBook';
   
   export default {
     mixins: [dictMixins,tabMixins],
@@ -153,7 +167,8 @@
       popModal,
       addDialog,
       detailDialog,
-      addPlanDialog
+      addPlanDialog,
+      printTemplateTr
     },
     data() {
       return {
@@ -161,6 +176,7 @@
         delVisible: false, //批量删除弹框状态
         loading: false, // 加载状态
         processSubmitDialogFlag: false,
+        groupName: '',
         columns: [
           {
             width: 45,
@@ -270,6 +286,16 @@
         cacheKeyUrl:'eos-d8f2c206-purchaseNeedManage',
       };
     },
+    created() {
+      enterprisePage({
+        pageNum: 1,
+        size: 200
+      }).then((res) => {
+        if (res.list?.length > 0) {
+          this.groupName = res.list[0].name;
+        }
+      });
+    },
     methods: {
       /* 表格数据源 */
       datasource({ page, limit, where, order }) {
@@ -350,7 +376,13 @@
         });
       
       },
-
+      //打印申请单
+      handlePrint(name) {
+        if (this.selection.length === 0) {
+          return this.$message.warning('请选择一条数据');
+        };
+        this.$refs[name].open(this.selection[0].id);
+      },
     }
   };
 </script>