生成采购pdf

src/views/group/purchase/contract/index.vue

@@ -82,6 +82,166 @@
         </el-tab-pane>
       </el-tabs>
     </el-card>
+
+    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="800px" v-loading="loadingPrint">
+      <div style="height: calc(100vh - 174px); overflow-y: auto; overflow-x: hidden">
+        <div id="printMe">
+          <div class="con">
+            <div style="font-size: 24px; font-weight: 700; padding: 16px; text-align: center">福清市胜德体育用品有限公司</div>
+            <div style="font-size: 24px; padding: 8px 0 4px 0; text-align: center; border-bottom: 2px solid black">采购合同</div>
+            <div style="height: 8px"></div>
+            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; line-height: 24px">
+              <tr>
+                <td style="width: 50%">
+                  <span>需方：福清市胜德体育用品有限公司</span>
+                </td>
+                <td>
+                  <span>订单号：{{ pdfDetail.purchaseContract.code }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%">
+                  <span>供方：{{ pdfDetail.supplier.name }}</span>
+                </td>
+                <td>
+                  <span>日期：{{ pdfDetail.purchaseContract.createTime }}</span>
+                </td>
+              </tr>
+            </table>
+            <div style="height: 8px"></div>
+            <table cellspacing="0" cellpadding="0" border="0" class="tableOne">
+              <tr>
+                <th style="width: 30px">序号</th>
+                <th style="width: 100px">品号</th>
+                <th style="width: 280px">产品名称</th>
+                <th style="width: 45px">数量</th>
+                <!-- <th style="width: 45px">单位</th> -->
+                <th style="width: 45px">单价</th>
+                <th style="width: 60px">金额</th>
+                <th style="width: 110px">交货期</th>
+              </tr>
+              <template v-if="pdfDetail.purchaseContract.purchaseBomList && pdfDetail.purchaseContract.purchaseBomList.length > 0">
+                <tr v-for="(item, index) in pdfDetail.purchaseContract.purchaseBomList" :key="index">
+                  <td>
+                    {{ index + 1 }}
+                  </td>
+                  <td style="text-align: left; word-break: break-all">
+                    <span>{{ item.bomSpecCode }}</span>
+                  </td>
+                  <td style="text-align: left; word-break: break-all; padding: 0 4px">
+                    <span>{{ item.bomSpecName }}</span>
+                  </td>
+                  <td>
+                    <span>{{ item.purchaseQuantity }}</span>
+                  </td>
+                  <!-- <td>
+                    <span>{{ item.bomCompany }}</span>
+                  </td> -->
+                  <td>
+                    <span>{{ item.unitPrice }}</span>
+                  </td>
+                  <td>
+                    <span>{{ moneyFormat(Number(Math.round(item.purchaseQuantity * item.unitPrice)), 2) }}</span>
+                  </td>
+                  <td style="text-align: left; word-break: break-all">
+                    <span>{{ pdfDetail.purchaseContract.deliveryDate }}</span>
+                  </td>
+                </tr>
+              </template>
+              <tr>
+                <td>合计:</td>
+                <td colspan="2"></td>
+                <td>{{ computeQuantity() }}</td>
+                <!-- <td colspan="2"></td> -->
+                <td></td>
+                <td>
+                  <span>{{ moneyFormat(pdfDetail.purchaseContract.totalAmountIncludingTax, 2) }}</span>
+                </td>
+                <td style="border-right: 0"></td>
+              </tr>
+            </table>
+            <div style="height: 8px"></div>
+            <table cellspacing="0" cellpadding="0" border="0" class="tableTwo">
+              <tr>
+                <td>
+                  <div crossOrigin="anonymous" class="ql-snow" v-html="limitImg(pdfDetail.purchaseContract.contract)"></div>
+                </td>
+              </tr>
+            </table>
+            <div style="height: 32px"></div>
+            <table cellspacing="0" cellpadding="0" border="0" class="tableThree">
+              <tr>
+                <td style="width: 50%; position: relative; padding-right: 4px">
+                  <div>
+                    <span>需方（签章）：福清市胜德体育用品有限公司</span>
+                  </div>
+                  <div style="position: absolute; top: -50px; left: 20px">
+                    <!-- <img
+                      v-if="pdfDetail.company.companySeal"
+                      style="width: 160px; height: 160px"
+                      :src="pathPrefix + pdfDetail.company.companySeal"
+                      alt=""
+                      srcset="" /> -->
+                    <img
+                      style="width: 160px; height: 160px"
+                      :src="'http://www.printmat.cn:8181/file/upload/2023/02/24/20230224180954A0974981a85a2400425eb03c2c3f588a9711.png'"
+                      alt=""
+                      srcset="" />
+                  </div>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>供方（签章）：{{ pdfDetail.supplier.name }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%; padding-right: 4px">
+                  <span>税 号：91350181MA8TYY2T6D</span>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>税 号：{{ pdfDetail.supplier.dutyNumber }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%; padding-right: 4px">
+                  <span>开 户：中国工商银行股份有限公司福清高山侨乡支行</span>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>开 户：{{ pdfDetail.supplier.bank }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%; padding-right: 4px">
+                  <span>账 号：1402073809100001586</span>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>账 号：{{ pdfDetail.supplier.bankAccountNumber }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%; padding-right: 4px">
+                  <span>地 址：福建省福州市福清市三山镇横坑村金园路18号3号楼4层</span>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>地 址：{{ pdfDetail.supplier.province }} {{ pdfDetail.supplier.city }} {{ pdfDetail.supplier.detailedAddress }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td style="width: 50%; padding-right: 4px">
+                  <span>电 话：0591-22852156</span>
+                </td>
+                <td style="padding-left: 4px">
+                  <span>电 话：{{ pdfDetail.supplier.companyTelephone }}</span>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div style="text-align: center; margin: 10px">
+        <el-button @click="openPrint = false" size="large">取消</el-button>
+        <el-button type="primary" v-print="printObj" size="large">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -93,19 +253,19 @@ const { proxy } = getCurrentInstance();
 const activeName = ref("first");
 const flowStatus = ref([
   {
-    dictKey: "0",
+    dictKey: 0,
     dictValue: "未发起",
   },
   {
-    dictKey: "1",
+    dictKey: 1,
     dictValue: "进行中",
   },
   {
-    dictKey: "2",
+    dictKey: 2,
     dictValue: "已通过",
   },
   {
-    dictKey: "3",
+    dictKey: 3,
     dictValue: "已驳回",
   },
 ]);
@@ -346,7 +506,20 @@ const configTwo = computed(() => {
       },
       renderHTML(row) {
         return [
-          row.flowStatus == "0" || row.flowStatus == "3"
+          row.flowStatus == 2
+            ? {
+                attrs: {
+                  label: "打印",
+                  type: "primary",
+                  text: true,
+                },
+                el: "button",
+                click() {
+                  clickPrint(row);
+                },
+              }
+            : {},
+          row.flowStatus == 0 || row.flowStatus == 3
             ? {
                 attrs: {
                   label: "编辑",
@@ -359,7 +532,7 @@ const configTwo = computed(() => {
                 },
               }
             : {},
-          row.flowStatus == "0" || row.flowStatus == "3"
+          row.flowStatus == 0 || row.flowStatus == 3
             ? {
                 attrs: {
                   label: "删除",
@@ -377,7 +550,7 @@ const configTwo = computed(() => {
     },
   ];
 });
-const getList = async (req) => {
+const getList = (req) => {
   sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
   loading.value = true;
   proxy.post("/applyBuy/page", sourceList.value.pagination).then((res) => {
@@ -391,7 +564,7 @@ getList();
 const clickReset = () => {
   getList("");
 };
-const getListTwo = async (req, status) => {
+const getListTwo = (req, status) => {
   if (status) {
     sourceListTwo.value.pagination = {
       pageNum: sourceListTwo.value.pagination.pageNum,
@@ -482,6 +655,51 @@ const clickDelete = (row) => {
     })
     .catch(() => {});
 };
+const openPrint = ref(false);
+const printObj = ref({
+  id: "printMe",
+  popTitle: "",
+  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
+});
+const pdfDetail = ref({
+  purchaseContract: {},
+  supplier: {},
+});
+const loadingPrint = ref(false);
+const clickPrint = async (row) => {
+  pdfDetail.value = {
+    purchaseContract: {},
+    supplier: {},
+  };
+  openPrint.value = true;
+  loadingPrint.value = true;
+  let supplier = await proxy.post("/supplier/detail", { id: row.supplierId }).then((res) => {
+    pdfDetail.value.supplier = res;
+  });
+  let purchase = await proxy.post("/purchase/detail", { id: row.id }).then((res) => {
+    pdfDetail.value.purchaseContract = res;
+  });
+  loadingPrint.value = false;
+};
+const limitImg = (text) => {
+  if (text) {
+    return text.replace(/<img/g, '<img style="max-width: 98%;"');
+  } else {
+    return text;
+  }
+};
+const computeQuantity = () => {
+  let num = 0;
+  if (pdfDetail.value.purchaseContract.purchaseBomList && pdfDetail.value.purchaseContract.purchaseBomList.length > 0) {
+    for (let i = 0; i < pdfDetail.value.purchaseContract.purchaseBomList.length; i++) {
+      if (pdfDetail.value.purchaseContract.purchaseBomList[i].purchaseQuantity) {
+        num = Number(Math.round(num + pdfDetail.value.purchaseContract.purchaseBomList[i].purchaseQuantity));
+      }
+    }
+  }
+  return num;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -492,4 +710,48 @@ const clickDelete = (row) => {
   display: grid;
   place-items: center;
 }
+:deep(.el-dialog) {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+.con {
+  font-family: "Times New Roman", "SimSun" !important;
+  color: black !important;
+  font-size: 12px !important;
+  text-align: left;
+  background-color: white;
+  padding: 16px;
+}
+.tableOne {
+  border: 1px solid black;
+  line-height: 18px;
+  overflow: auto;
+  width: 100%;
+}
+.tableOne th {
+  font-weight: 700;
+  border-right: 1px solid black;
+  text-align: center;
+}
+.tableOne td {
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  text-align: center;
+}
+.tableTwo {
+  width: 100%;
+  line-height: 18px;
+  word-break: break-all;
+}
+.tableTwo td {
+  vertical-align: top;
+}
+.tableThree {
+  width: 100%;
+  line-height: 24px;
+  word-break: break-all;
+}
+.tableThree td {
+  vertical-align: top;
+}
 </style>