dosb-vue/src/views/billet/shippingBill/components/printModal.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="装运单打印" :height="400" :width="800" ok-text="打印" @ok="onPrint">
    <section ref="print" style="padding: 10px 10px 0; position: relative; border: 1px solid #c5c5c5; background: beige; width: 98%" id="printContent">
      <span style="position: absolute; right: 20px; top: 10px; font-size: 16px; font-weight: bold"
        >{{ info.ccmNo }}#机 / {{ info.btype == 1 ? '冷' : '热' }}</span
      >
      <div class="ticket next-ticket">
        <div style="text-align: center">
          <p style="font-size: 24px; font-weight: 800; display: inline-block; border-bottom: 2px solid #000; margin-bottom: 16px; line-height: 30px">
            龙钢公司钢坯装运单
          </p>
        </div>
        <div class="flex" style="line-height: 24px">
          <div class="flex-1">库名：{{ info.destination }}</div>
          <div class="flex-1" style="text-align: center; font-size: 13px">{{
            dayjs(info.arrivalTime).format('YYYY 年 MM 月 DD 日 HH 时 mm 分')
          }}</div>
          <div class="flex-1" style="text-align: right; font-size: 12px">
            {{ dayjs(info.arrivalTime).format('YYYYMMDDHHmmss') }}/{{ info.carNum }}/{{ info.carAllNum }}/{{ info.shift_dictText }}/{{
              info.shiftGroup_dictText
            }}
          </div>
        </div>
        <a-descriptions style="margin-top: 6px; margin-bottom: 4px" layout="vertical" bordered :column="8" size="small">
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="序号">
            <div style="min-height: 80px; display: flex; align-items: center; justify-content: center"
              ><span>{{ info.carAllNum }}</span></div
            >
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="车号">
            {{ info.licensePlate }}
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="牌号">
            <component :is="renderDictTag(info.brandNum, 'billet_spec')" />
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="炉号">
            <div v-for="item in headDtl" :key="item.id">{{ item.heatNo }} - {{ item.billetNos.length }}</div>
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="规格">
            170 / {{ info.size }}
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="名称">
            方坯
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="支数">
            {{ info.amountTotal }}
          </a-descriptions-item>
          <a-descriptions-item style="border: 1px solid #bfbfbf; font-size: 12px; padding: 4px; text-align: center; height: 36px" label="重量">
            {{ weight > 0 ? weight.toFixed(4) : 0 }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="padding: 0 30px" size="small">
          <a-descriptions-item label="储运中心"> </a-descriptions-item>
          <a-descriptions-item label="轧钢厂"> </a-descriptions-item>
          <a-descriptions-item label="炼钢厂"> </a-descriptions-item>
        </a-descriptions>
      </div>
    </section>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import dayjs from 'dayjs';
  import { render } from '/@/utils/common/renderUtils';
  import { printJS } from '/@/hooks/web/usePrintJS';
  import { listShippingBill } from '../shippingBill.api';

  const props = defineProps({
    api: {
      type: Function as PropType<(params: any) => Promise<any>>,
      default: listShippingBill,
    },
  });

  const info = ref<any>({});
  const headDtl = ref<any[]>([]);
  const weight = ref<number>(0);
  //表单赋值
  const [registerModal, { changeLoading, changeOkLoading }] = useModalInner(async (data) => {
    const { record } = data;
    console.log(record);
    if (record) {
      info.value = record;
      getTableList();
    } else {
      info.value = {};
    }
  });

  // 渲染字典标签
  const renderDictTag = (value: string, dictCode: string) => {
    return render.renderDict(value, dictCode);
  };

  const getTableList = async () => {
    try {
      changeLoading(true);
      changeOkLoading(true);
      const { id, ccmNo, heatNo, typeConfigId } = info.value;
      const data = await props.api({
        id,
        ccmNo,
        heatNo,
        typeConfigId,
      });

      let newArr: any[] = [];
      if (Array.isArray(data)) {
        newArr = data;
      } else {
        for (let item in data) {
          if (data[item] && data[item].length > 0) {
            newArr = newArr.concat(data[item]);
          }
        }
      }
      let allWeight = 0;

      // 数据结果按组批号分组
      newArr = newArr.reduce((acc, cur) => {
        const index = acc.findIndex((item) => cur.heatNo && item.heatNo === cur.heatNo);
        if (index === -1) {
          acc.push({
            ...cur,
            billetNos: [...cur.billetNo.split(',')],
          });
        } else {
          acc[index].billetNos = acc[index].billetNos.concat(cur.billetNo.split(','));
        }

        if (cur.blankOutput) {
          allWeight += Number(cur.blankOutput);
        }
        return acc;
      }, []);

      headDtl.value = newArr;
      weight.value = allWeight;
    } catch (error) {
      console.log(error);
    } finally {
      changeLoading(false);
      changeOkLoading(false);
    }
  };

  function onPrint() {
    changeOkLoading(true);
    printJS({
      printable: '#printContent',
      type: 'html',
    });
    setTimeout(() => {
      changeOkLoading(false);
    }, 1000);
  }
</script>

<style lang="less">
  @media print {
    header,
    footer,
    .noprint {
      display: none;
    }

    @page :first {
      margin-top: 10px; /* 第一页的页眉距离顶部为0 */
      margin-bottom: 0; /* 第一页的页脚距离底部为0 */
    }
  }
</style>