工单流程卡打印优化

Ben Lin

2025-01-02 e46c5406bbbe7bf67f96c9a8ce363496eac9fbd3

工单流程卡打印优化

 src/api/tigerapi/model/mesModel.ts

@@ -542,12 +542,16 @@
export interface WoFlowCardPrintJson {
  ID: string;
  OrderNo: string;
  Status: string;
  ItemCode: string;
  ItemDesc: string;
  SapCode: string;
  Model: string;
  Qty: number;
  Remark: string;
  SoRemark: string;
  MoRemark: string;
  Customer: string;
  DemandCode: string;
  RouteStr: string;
  Items: PrintWoPickList[]
}

 src/views/components/printTemplate.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,242 @@
<template>
  <div id="print-area">
    <div class="item" v-for="(items, index) in curPrintInfo" :key="items.ID">
      <div v-if="index == 0">
        <div class="flex relative">
          <div style="position: absolute; left: 20px; height: 90px; margin: 25px 2px 2px">
            <QrCode
              :value="curOrderNo"
              :width="80"
              :height="80"
              :options="{ margin: 5 }"
              ref="qrDiyRef"
            />
          </div>
        </div>
        <div style="display: flex; flex-direction: row; height: 25px; margin: 95px 15px 2px;border-bottom: 1px solid black; /* çº¿æ¡çš„颜色和宽度 */ font-size: 12px;">
          <div style="width: 30%"></div>
          <div style="width: 18%"></div>
          <div style="width: 27%">打印人：{{ useUserStore().userInfo?.username }}</div>
          <div style="width: 25%">打印日期：{{ formatToDate(new Date()) }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
          <div style="width: 15%">产品编号:</div>
          <div style="width: 35%">{{ items.ItemCode }}</div>
          <div style="width: 15%">产品型号:</div>
          <div style="width: 35%">{{ items.Model }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin:  2px 20px;font-size: 12px;">
          <div style="width: 15%">SAP料号:</div>
          <div style="width: 35%">{{ items.SapCode }}</div>
          <div style="width: 15%">客户名称:</div>
          <div style="width: 35%">{{ items.Customer }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin:  2px 20px;font-size: 12px;">
          <div style="width: 15%">生产订单:</div>
          <div style="width: 35%">{{ items.OrderNo }}</div>
          <div style="width: 15%">需求分类:</div>
          <div style="width: 35%">{{ items.DemandCode }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin:  2px 20px;font-size: 12px;">
          <div style="width: 15%">生产数量:</div>
          <div style="width: 35%">{{ items.Qty }}</div>
          <div style="width: 15%">单据状态:</div>
          <div style="width: 35%">{{ items.Status }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin:  2px 20px;font-size: 12px;">
          <div style="width: 15%">产品描述:</div>
          <div style="width: 85%">{{ items.ItemDesc }}</div>
        </div>
        <div style="display: flex; flex-direction: row; height: 20px; margin:  15px 20px 2px;font-size: 12px;">
          <div style="width: 15%">工艺路线:</div>
          <div style="width: 85%">{{ items.RouteStr }}</div>
        </div>
      </div>
      <div class="main">
        <table class=" ">
          <tr>
            <th class="material_table_td" style="width: 7%">行号</th>
            <th class="material_table_td" style="width: 10%">SAP料号</th>
            <th class="material_table_td" style="width: 10%">料号编码</th>
            <th class="material_table_td" style="width: 17%">描述</th>
            <th class="material_table_td" style="width: 7%">备料数量</th>
            <th class="material_table_td" style="width: 13%">行备注</th>
            <th class="material_table_td" style="width: 9%">库位</th>
            <th class="material_table_td" style="width: 9%">07库位</th>
            <th class="material_table_td" style="width: 9%">发料方式</th>
            <th class="material_table_td" style="width: 9%"></th>
          </tr>
          <tr v-for="(item, indexs) in items.Items" :key="indexs">
            <!-- <td class="material_table_td">
              {{ Number(indexs) + 1 }}
            </td> -->
            <td class="instore_td">
              {{ item.LineNo }}
            </td>
            <td class="instore_td">
              {{ item.SapCode }}
            </td>
            <td class="instore_td">
              {{ item.ItemCode }}
            </td>
            <td class="instore_td">
              {{ item.ItemDesc }}
            </td>
            <td class="instore_td">
              {{ item.PickQty }}
            </td>
            <td class="instore_td">
              {{ item.LineRemark }}
            </td>
            <td class="instore_td">
              {{ item.WhCode }}
            </td>
            <td class="instore_td">
              {{ item.WhCode07 }}
            </td>
            <td class="instore_td">
              {{ item.Method }}
            </td>
            <td class="instore_td">
              {{  }}
            </td>
          </tr>
          <tr v-if="index == Number(curPrintInfo?.length) - 1 && items.Items.length < 11" v-for="n in (11-items.Items.length)" :key="n">
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
            <td class="instore_td2">&nbsp;</td>
          </tr>
          <tr v-if="index == Number(curPrintInfo?.length) - 1 && items.Items.length <= 11">
            <td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">生产订单备注：{{ items.MoRemark }}</td>
            <td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">销售订单备注：{{ items.SoRemark }}</td>
          </tr>
        </table>
      </div>
      <div class="footer flex">
        <div style="width: 40%"></div>
        <div style="width: 10%">第{{ index + 1 }}页</div>
        <div style="width: 10%">共{{ curPrintInfo?.length }}页</div>
        <div style="width: 40%"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, toRefs } from 'vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import { formatToDate } from '/@/utils/dateUtil';
  import { useUserStore } from '/@/store/modules/user';
  import { useWoFlowcardStore } from '/@/store/modules/woflowcardprint';
  import { storeToRefs } from 'pinia';

  const props = defineProps({
    tableData: { type: Object as PropType<any[]> },
    wokerorder: { type: String },
  });
  const { tableData, wokerorder } = toRefs(props);
  const useWoFlowCard = useWoFlowcardStore();
  const { curOrderNo, curPrintInfo } = storeToRefs(useWoFlowCard);
</script>
<style lang="scss" scoped>
  #print-area {
    position: absolute;
    inset: 0;
    background-color: #fff;

    .item {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-right: 10px;
      margin-left: 10px;
      font-family: SimSun, "宋体", serif;
      // background-color: bisque;
      page-break-after: always;

      .head {
        z-index: 1;
        width: 100%;
        margin: 20px;
        background-color: azure;
        font-size: 36px;
        font-weight: bold;
        line-height: 100px;
        text-align: left;
      }

      .main {
        display: flex;
        flex: 1;
        // align-items: center;
        justify-content: center;
        margin-top: 10px;
        padding: 15px;

        table {
          border-collapse: collapse;
        }

        table,
        th,
        td {
          border: solid 1px black;
        }

        tr > th {
          height: 60px;
        }

        /* è®¾ç½®æ ‡é¢˜å­—段字体大小 */
        // :deep() {
        //   .ant-table-tbody > tr > td {
        //     font-size: 3px; /* ä¿®æ”¹ä¸ºä½ æƒ³è¦çš„字体大小 */
        //     line-height: 18px;
        //   }

        //   .ant-table-thead > tr > th {
        //     line-height: 21px;
        //   }

        //   .ant-table-title {
        //     font-size: 4px; /* è®¾ç½®ä½ æƒ³è¦çš„字体大小 */
        //   }
        // }

        .instore_td {
          height: 60px;
          border: 1px solid #000;
          font-family: SimSun, "宋体", serif;
          font-size: 6px; /* ä¿®æ”¹ä¸ºä½ æƒ³è¦çš„字体大小 */
          line-height: 20px;
          text-align: center;
          word-break: break-all;
        }

        .material_table_td {
          border: 1px solid #000;
          font-size: 6px; /* ä¿®æ”¹ä¸ºä½ æƒ³è¦çš„字体大小 */
          line-height: 20px;
          text-align: center;
          word-break: break-all;
        }
      }

      .footer {
        display: flex;
        margin-bottom: 15px;
        background-color: #eee;
        font-size: 14px;
        // font-weight: bold;
        line-height: 100px;
        text-align: center;
      }
    }
  }
</style>

 src/views/tigerprojects/system/lowcode/normal/mainTable.vue

@@ -740,15 +740,17 @@
        .item {
          display: flex;
          flex-direction: column;
          page-break-after: always;
          height: 100%;

          margin-right: 10px;
          margin-left: 10px;
          font-family: SimSun, "宋体", serif;
          page-break-after: always;

          .head {
          z-index: 1;
          width: 100%;
          background-color: azure;
          font-size: 22px;
          font-size: 20px;
          font-weight: bold;
          line-height: 100px;
          text-align: center;
@@ -758,6 +760,7 @@
            display: flex;
            flex: 1;
            justify-content: center;
            margin-top: 10px;
            padding: 15px;
            
            table {
@@ -777,6 +780,16 @@
            .instore_td {
              border: 1px solid #000;
              font-size: 12px;
              line-height: 16px;
              text-align: center;
              word-break: break-all;
            }
            
            .instore_td2 {
              height: 60px;
              border: 1px solid #000;
              font-family: SimSun, "宋体", serif;
              font-size: 12px; /* ä¿®æ”¹ä¸ºä½ æƒ³è¦çš„字体大小 */
              line-height: 20px;
              text-align: center;
              word-break: break-all;
@@ -784,8 +797,9 @@

            .material_table_td {
              border: 1px solid #000;
              font-size: 14px; 
              line-height: 20px;
              font-size: 12px; 
              height: 25px;
              line-height: 18px;
              text-align: center;
              word-break: break-all;
            }