feat(销售订单): 添加打印功能。

src/views/saleManage/saleOrder/components/printTemplateSaleOrder.vue

@@ -0,0 +1,221 @@
+<template>
+  <ele-modal
+    title="销售订单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="90%"
+  >
+    <div
+      id="printSection"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      "
+    >
+      <div>
+        <div
+          style="
+            font-size: 20px;
+            font-weight: 800;
+            padding-right: 20px;
+            width: 400px;
+            margin: 0 auto;
+          "
+          >{{ formData.partbName }}销售订单</div
+        >
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        "
+      >
+        <span style="width: 50%">客户：{{ formData.partaName }}</span>
+        <span style="width: 25%">单据日期：{{ formData.createTime }}</span>
+        <span style="width: 45%">单据编码：{{ formData.orderNo }}</span>
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        "
+      >
+        <span>项目：{{ formData.projectName }}</span>
+      </div>
+      <table
+        cellspacing="0"
+        border
+        style="
+          width: 100%;
+          table-layout: fixed;
+          word-break: break-all;
+          word-wrap: break-word;
+          font-size: 12px;
+        "
+      >
+        <tbody>
+          <tr align="center">
+            <td style="padding: 5px"> 名称 </td>
+            <td style="padding: 5px"> 规格型号 </td>
+            <td style="padding: 5px; width: 60px"> 单位</td>
+            <td style="padding: 5px; width: 110px"> 数量</td>
+            <td style="padding: 5px; width: 110px"> 单价</td>
+            <td style="padding: 5px; width: 110px"> 税率</td>
+            <td style="padding: 5px; width: 110px"> 金额</td>
+            <td style="padding: 5px"> 颜色 </td>
+            <td style="padding: 5px"> 型号 </td>
+            <td style="padding: 5px"> 备注</td>
+          </tr>
+
+          <tr align="center" v-for="(item, index) in formData.productList">
+            <td style="padding: 5px"> {{ item.productName }} </td>
+            <td style="padding: 5px">
+              {{ item.specification }}
+            </td>
+            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
+            <td style="padding: 5px"> {{ item.totalCount }}</td>
+            <td style="padding: 5px"> {{ item.singlePrice }}</td>
+            <td style="padding: 5px"> {{ item.taxRate }}{{ item.taxRate ? '%' : '' }}</td>
+            <td style="padding: 5px"> {{ item.totalPrice }}</td>
+            <td style="padding: 5px"> {{ item.colorKey }}</td>
+            <td style="padding: 5px"> {{ item.modelKey }}</td>
+            <td style="padding: 5px"> {{ item.remark }}</td>
+          </tr>
+          <tr align="center">
+            <td style="padding: 5px"> 合计 </td>
+            <td style="padding: 5px" colspan="2">  </td>
+            <td style="padding: 5px">{{ getTotalValue('totalCount', 2) }} </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px">{{ getTotalValue('totalPrice', 2) }}</td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+        "
+      >
+        <div style="flex: 1">
+          <div>业务员：{{ formData.partbLinkName }}</div>
+        </div>
+        <div style="flex: 1">
+          <div>制单人：{{ formData.createUserName }}</div>
+        </div>
+        <div style="flex: 1"> 核对人： </div>
+        <div style="flex: 1"> 发货人： </div>
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+        "
+      >
+        <div style="flex: 1">
+          <div>地址：{{ formData.partbAddress }}</div>
+        </div>
+        <div style="flex: 1">
+          <div>客户签字：</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 { getSaleOrderDetail } from '@/api/saleManage/saleorder';
+  import { mapGetters } from 'vuex';
+  export default {
+    name: 'print',
+    computed: {
+      ...mapGetters(['user'])
+    },
+    props: {
+      groupName: ''
+    },
+    data() {
+      return {
+        checked: '',
+        QRvisible: false,
+        isPrintPrice: false,
+        formData: {
+          contactName: '',
+          createTime: '',
+          docNo: '',
+          partbAddress: '',
+          partbLinkName: '',
+          productList: [],
+          totalCount: 0
+        }
+      };
+    },
+
+    methods: {
+      async open(id) {
+        this.formData = await getSaleOrderDetail(id);
+        console.log('formData~~~', this.formData);
+        this.QRvisible = true;
+
+        //包装维度
+      },
+      close() {
+        this.QRvisible = false;
+      },
+      getTotalValue(key, num) {
+        let val = this.formData?.productList?.reduce((total, item) => {
+          return (total += Number(item[key]));
+        }, 0);
+
+        return (
+          (val &&
+            parseFloat(val)
+              .toFixed(num)
+              .replace(/\.?0+$/, '')) ||
+          0
+        );
+      },
+      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/saleManage/saleOrder/index.vue

@@ -94,8 +94,17 @@
                   apiUrl="/eom/saleorder/export"
                   :params="params"
                 ></exportButton>
+                <el-button
+                  :disabled="selection?.length === 0"
+                  type="primary"
+                  size="small"
+                  icon="el-icon-printer"
+                  @click="handlePrint()"
+                  v-if="$hasPermission('eom:saleorder:print')"
+                  >打印</el-button
+                >
               </template>
-
+                
               <!-- 查看详情列 -->
               <template v-slot:relationCode="{ row }">
                 <el-link
@@ -333,6 +342,7 @@
       :add-or-edit-dialog-flag.sync="addEntrustedReceiveFlag"
       v-if="addEntrustedReceiveFlag"
     ></addEntrustedReceive>
+    <printTemplateSaleOrder :groupName="groupName" ref="printTemplateSaleOrderRef"></printTemplateSaleOrder>
   </div>
 </template>
 
@@ -378,6 +388,8 @@
   import { parameterGetByCode } from '@/api/main/index.js';
   import opportunityDetail from '@/views/saleManage/businessOpportunity/components/opportunityDetailDialog.vue';
   import quotationDetail from '@/views/saleManage/quotation/components/detailDialog.vue';
+  import printTemplateSaleOrder from './components/printTemplateSaleOrder.vue'
+  import { enterprisePage } from '@/api/contractManage/contractBook';
   export default {
     mixins: [dictMixins, tabMixins],
     components: {
@@ -405,7 +417,8 @@
       bomDialog,
       opportunityDetail,
       quotationDetail,
-      addEntrustedReceive
+      addEntrustedReceive,
+      printTemplateSaleOrder
     },
     //客户管理数据
     props: {
@@ -465,11 +478,20 @@
         isTotalCount: '0',
         columnsVersion: 1,
         timeR: null,
-        toDoReminder: {}
+        toDoReminder: {},
+        groupName: ''
       };
     },
 
     created() {
+      enterprisePage({
+        pageNum: 1,
+        size: 200
+      }).then((res) => {
+        if (res.list?.length > 0) {
+          this.groupName = res.list[0].name;
+        }
+      });
       this.requestDict('客户状态');
       parameterGetByCode({
         code: 'order_person_info'
@@ -1022,6 +1044,12 @@
       exportFn() {
         console.log(this.params);
         exportSaleorder(this.params);
+      },
+      handlePrint() {
+        console.log(this.selection[0]);
+        if (this.selection.length > 1)
+          return this.$message.warning('请选择一条');
+        this.$refs.printTemplateSaleOrderRef.open(this.selection[0].id);
       }
     }
   };