文档打印
点击查看代码
javascript
import { FormItemControlType } from "@nbicc/common-components";
import { ref, watch } from "vue";
import NPrint from "../../src/components/n-print/NPrint.vue";
const nPrintRef = ref();
const data = ref({ size: "A4" });
const fields = ref([]);
const pages = ref(0);
setTimeout(() => (pages.value = 3), 1000);
watch(
() => ({ size: data.value.size }),
({ size }) => {
const _fields = [
[
{ name: "size", label: "尺寸", type: FormItemControlType.SELECT, initialValue: "custom" },
{
options: [
{ label: "自定义", value: "custom" },
{ label: "A5", value: "A5" },
{ label: "A4", value: "A4" },
{ label: "A3", value: "A3" },
{ label: "B5", value: "B5" },
{ label: "B4", value: "B4" },
{ label: "JIS-B5", value: "JIS-B5" },
{ label: "JIS-B4", value: "JIS-B4" },
{ label: "letter", value: "letter" },
{ label: "legal", value: "legal" },
{ label: "ledger", value: "ledger" }
]
}
]
];
if (size === "custom") {
_fields.push(
[
{
name: "width",
label: "宽度",
type: FormItemControlType.INPUT_NUMBER,
initialValue: 80
},
{ addonAfter: "mm", min: 20 }
],
[
{
name: "height",
label: "高度",
type: FormItemControlType.INPUT_NUMBER,
initialValue: 61
},
{ addonAfter: "mm", min: 20 }
]
);
}
_fields.push(
[
{
name: "margin",
label: "外边距",
type: FormItemControlType.INPUT_NUMBER,
initialValue: 1
},
{ addonAfter: "mm" }
],
[
{
name: "padding",
label: "内边距",
type: FormItemControlType.INPUT_NUMBER,
initialValue: 1
},
{ addonAfter: "mm" }
],
[
{
name: "orientation",
label: "方向",
type: FormItemControlType.RADIO_GROUP,
initialValue: "portrait"
},
{
options: [
{ label: "纵向", value: "portrait" },
{ label: "横向", value: "landscape" }
]
}
],
[
{
name: "pagingMode",
label: "分页模式",
type: FormItemControlType.RADIO_GROUP,
initialValue: "auto"
},
{
options: [
{ label: "自动", value: "auto" },
{ label: "裁剪", value: "clip" },
{ label: "紧凑", value: "compact" }
]
}
],
[{ name: "title", label: "标题", type: FormItemControlType.INPUT, initialValue: "打印测试" }]
);
fields.value = _fields;
},
{ immediate: true }
);
function handleClose() {
console.log("打印窗口关闭");
}html
<template>
<n-form v-model:data="data" :fields="fields" :field-layout="{ span: 12 }" />
<a-space>
<n-button type="primary" @click="nPrintRef.print()">通过 ref 实例接口打印</n-button>
</a-space>
<NPrint
ref="nPrintRef"
:size="data.size === 'custom' ? [`${data.width}mm`, `${data.height}mm`] : data.size"
:margin="`${data.margin}mm`"
:padding="`${data.padding}mm`"
:orientation="data.orientation"
:paging-mode="data.pagingMode"
:title="data.title"
@close="handleClose"
>
<template #toolbar="{ print }">
<n-button type="primary" @click="print">通过 slot 打印</n-button>
</template>
<template v-for="index in 2" :key="index">
<n-print-page>
<div class="print-box">
<table class="table-contain" style="table-layout: fixed">
<thead>
<tr>
<td>
<span>中科数动</span>
</td>
<td
colspan="6"
style="
font-size: 32px;
text-align: center;
letter-spacing: 10px;
line-height: 50px;
"
>
生产任务单 {{ index }}-1
</td>
<td>
<div id="qrcode-0" title="TF2306300001">
<canvas width="100" height="100" style="display: none"></canvas>
<img
alt="Scan me!"
style="display: block"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABTBJREFUeF7tXduSqzAMK///0T3DabsTArElYSh0tK8EJ7Fs+ZLQnR6Px/Nx4N/zuV/8NE1/K6yQNwtrZbbbj+SP3qlU37zT/RoLVlShQANSCLkB4ZS58JBq5c1LaWUe4fLqmkde168xWr86dwtRP58BSYzGgHAevvBA5tXbeQhDL9VWFNEGo/SIGlAqRfdWpa8hZVVNoPCsAXmbEmo1vZWiVoRatwExIENbQY2tilG+SlnMJj4a6ymwomiM1mFAEl4zIADxo1bUi7KHrHtqX6WsEdYKUJndoNmeWqkza44M2IB0SBqQDdNmrC3zjFEygHonSsfMmu0hXb8qAvGyHoJaXhao0WJTPRhCLThb52i/qnxUf5ft9hqQF4SXab8bkA1AUDdjxqEuH1XcZz5jYgijB3TsqWfq6GaZarwaLHSNqILZcQZkx4khq2xkvAG5GiBPtKeAwJuMQemgirLa5aAd3YJt7hIxGZDlzZhd2ix42YAQVXyBvlMREiBM36ZdQURF0TiUeqLdHj03w/xhZqhQlgFZQ29AUudfDrCHbCjsaKX8BGW1t99Rt2NSSPQSgjKuB4BJl5W4pPbbsnUu1mJAxt+KUIpsvmHJ2DQE1oBcGJAM2c9zNBbM41EajOaubiDOc41kot2EbG8qBUu9LAPyMh80pqDj/huK8kmbATkJEAbJEcUwmc4oW2MAR1PdiIqOoEtUZj8OPsJFq3MDkkfiSJcGJNGfmlDYQ5LOwG0oq20uMhX4yALUtBFNE1ecW/CjAkfPzeh10X5nXjQg41omMpqs+jcgQZGYhWfUsxhDh4M6GqSYlLWiikfXlVnm5zmaTfaFoUrVctqLbtyArItGJqGwh3SWZg/JiHrHc4a7L0lZ7d5Vfq+yMBQH9O4wKo8ZpwZ1+DzEgDBw6GmvAeH0DI8+xEMqKnW033NE6hl5tRJDmE4ACggl04DEDoEaGxNzQ5kGxID8aWBkVUym9nOUhd46QV03sjfm8KqVcwRXj+TDEZ34riSKIXLrxICsoVJroPITQ6ZfhVIKep5fFTxv4SEo3TDpJOpZqKKr5j6TEqm0F70GFLmn6gVKbDAgb20bkDV/KAY1SwlZwx6C96QY6onoHy4M0ZRPPR1jDmpGa1HnRlNPNWGJ2kLMmku+MUTTPwPygi3SlwHpTPsnPETNstBaQE2JVc+N9oNSKUr/Kyqt/gq3oj0S8TEaLDNqULNGA0J89MMEz8sCoqS9aMbSWylj3RW0gVIWSp0qDTHvwR/soL2mKroxIAmMBoSxc32sPaTTnXo4pkOwfFOqQ9TJmaA7oqyK4nKWPWpfqPIZIEO2UdJeA7LWgAF56wQtGqPMUMnGmEyTSXTgGKJ6RcVmo7RUTTbQ/aDrV+l4BSxah6AbiKxB5WcDomp/4z3UwtApGVAZXh/Nj67fHgLEkNsDogZIlFJQKzoiLqBNT8YD0X1H3t/PV/IFFbowA5KnywZkxw1E1BBLPIThXzXwjapxNMBHFXdWJ6Dtd2YtJfsZ3e01ICoUr/fUeHzqf2ljLrmh6kDvRqHxC503G2dAiF946y2YYYMMiM/zWwDCBLfqjatKR1Nw5rZKKPPMGGJA8vhyagwxIBcHRA3ISN+pT4kjY5D5PvitrvD+bvCjy1/1EAOyUbl/M4YYEAOyyVy3oCw07WRaFKjMM4q4UetETV+ZLnGUgp/aXDQgLw0YkA1LuIWHoBbMjFP5uZ1DDf7VHV20amdaMyuKPPOSAwOkAVG1lbxnD4ljhj1kh+GdQVn/ALWu4vuLU6FVAAAAAElFTkSuQmCC"
/>
</div>
</td>
</tr>
<tr>
<td colspan="2">任务单号: <span>TF2306300001</span></td>
<td colspan="2">销售单号:20230612</td>
<td colspan="2">计划单号:PF2306180006</td>
<td colspan="2">分配时间:2023-06-30 12:00:00</td>
</tr>
<tr class="table-top">
<th style="font-weight: 500">产品编号</th>
<th style="font-weight: 500">产品名称</th>
<th style="font-weight: 500">规格型号</th>
<th class="carrige-color" style="font-weight: 500">颜色</th>
<th class="carrige-unit" style="font-weight: 500">单位</th>
<th class="carrige-num" style="font-weight: 500">任务数量</th>
<th class="carrige-stime" style="font-weight: 500">任务开始时间</th>
<th class="carrige-etime" style="font-weight: 500">任务完成时间</th>
</tr>
</thead>
<tbody>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
</tbody>
<tr>
<th colspan="8" class="table-middle">
<div class="top">备注:</div>
<div class="bottom"></div>
</th>
</tr>
<tr class="table-bottom">
<th colspan="2" class="bottom-item">
<div>
<div style="width: 100px">车间产线：</div>
<div class="seat">车间02/产线02</div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">开工时间：</div>
<div class="seat"></div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">产线长签字:</div>
<div class="seat"></div>
</div>
</th>
</tr>
</table>
</div>
</n-print-page>
<n-print-page>
<div class="print-box">
<table class="table-contain" style="table-layout: fixed">
<thead>
<tr>
<td>
<span>中科数动</span>
</td>
<td
colspan="6"
style="
font-size: 32px;
text-align: center;
letter-spacing: 10px;
line-height: 50px;
"
>
生产任务单 {{ index }}-2
</td>
<td>
<div id="qrcode-0" title="TF2306300001">
<canvas width="100" height="100" style="display: none"></canvas>
<img
alt="Scan me!"
style="display: block"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABTBJREFUeF7tXduSqzAMK///0T3DabsTArElYSh0tK8EJ7Fs+ZLQnR6Px/Nx4N/zuV/8NE1/K6yQNwtrZbbbj+SP3qlU37zT/RoLVlShQANSCLkB4ZS58JBq5c1LaWUe4fLqmkde168xWr86dwtRP58BSYzGgHAevvBA5tXbeQhDL9VWFNEGo/SIGlAqRfdWpa8hZVVNoPCsAXmbEmo1vZWiVoRatwExIENbQY2tilG+SlnMJj4a6ymwomiM1mFAEl4zIADxo1bUi7KHrHtqX6WsEdYKUJndoNmeWqkza44M2IB0SBqQDdNmrC3zjFEygHonSsfMmu0hXb8qAvGyHoJaXhao0WJTPRhCLThb52i/qnxUf5ft9hqQF4SXab8bkA1AUDdjxqEuH1XcZz5jYgijB3TsqWfq6GaZarwaLHSNqILZcQZkx4khq2xkvAG5GiBPtKeAwJuMQemgirLa5aAd3YJt7hIxGZDlzZhd2ix42YAQVXyBvlMREiBM36ZdQURF0TiUeqLdHj03w/xhZqhQlgFZQ29AUudfDrCHbCjsaKX8BGW1t99Rt2NSSPQSgjKuB4BJl5W4pPbbsnUu1mJAxt+KUIpsvmHJ2DQE1oBcGJAM2c9zNBbM41EajOaubiDOc41kot2EbG8qBUu9LAPyMh80pqDj/huK8kmbATkJEAbJEcUwmc4oW2MAR1PdiIqOoEtUZj8OPsJFq3MDkkfiSJcGJNGfmlDYQ5LOwG0oq20uMhX4yALUtBFNE1ecW/CjAkfPzeh10X5nXjQg41omMpqs+jcgQZGYhWfUsxhDh4M6GqSYlLWiikfXlVnm5zmaTfaFoUrVctqLbtyArItGJqGwh3SWZg/JiHrHc4a7L0lZ7d5Vfq+yMBQH9O4wKo8ZpwZ1+DzEgDBw6GmvAeH0DI8+xEMqKnW033NE6hl5tRJDmE4ACggl04DEDoEaGxNzQ5kGxID8aWBkVUym9nOUhd46QV03sjfm8KqVcwRXj+TDEZ34riSKIXLrxICsoVJroPITQ6ZfhVIKep5fFTxv4SEo3TDpJOpZqKKr5j6TEqm0F70GFLmn6gVKbDAgb20bkDV/KAY1SwlZwx6C96QY6onoHy4M0ZRPPR1jDmpGa1HnRlNPNWGJ2kLMmku+MUTTPwPygi3SlwHpTPsnPETNstBaQE2JVc+N9oNSKUr/Kyqt/gq3oj0S8TEaLDNqULNGA0J89MMEz8sCoqS9aMbSWylj3RW0gVIWSp0qDTHvwR/soL2mKroxIAmMBoSxc32sPaTTnXo4pkOwfFOqQ9TJmaA7oqyK4nKWPWpfqPIZIEO2UdJeA7LWgAF56wQtGqPMUMnGmEyTSXTgGKJ6RcVmo7RUTTbQ/aDrV+l4BSxah6AbiKxB5WcDomp/4z3UwtApGVAZXh/Nj67fHgLEkNsDogZIlFJQKzoiLqBNT8YD0X1H3t/PV/IFFbowA5KnywZkxw1E1BBLPIThXzXwjapxNMBHFXdWJ6Dtd2YtJfsZ3e01ICoUr/fUeHzqf2ljLrmh6kDvRqHxC503G2dAiF946y2YYYMMiM/zWwDCBLfqjatKR1Nw5rZKKPPMGGJA8vhyagwxIBcHRA3ISN+pT4kjY5D5PvitrvD+bvCjy1/1EAOyUbl/M4YYEAOyyVy3oCw07WRaFKjMM4q4UetETV+ZLnGUgp/aXDQgLw0YkA1LuIWHoBbMjFP5uZ1DDf7VHV20amdaMyuKPPOSAwOkAVG1lbxnD4ljhj1kh+GdQVn/ALWu4vuLU6FVAAAAAElFTkSuQmCC"
/>
</div>
</td>
</tr>
<tr>
<td colspan="2">任务单号: <span>TF2306300001</span></td>
<td colspan="2">销售单号:20230612</td>
<td colspan="2">计划单号:PF2306180006</td>
<td colspan="2">分配时间:2023-06-30 12:00:00</td>
</tr>
<tr class="table-top">
<th style="font-weight: 500">产品编号</th>
<th style="font-weight: 500">产品名称</th>
<th style="font-weight: 500">规格型号</th>
<th class="carrige-color" style="font-weight: 500">颜色</th>
<th class="carrige-unit" style="font-weight: 500">单位</th>
<th class="carrige-num" style="font-weight: 500">任务数量</th>
<th class="carrige-stime" style="font-weight: 500">任务开始时间</th>
<th class="carrige-etime" style="font-weight: 500">任务完成时间</th>
</tr>
</thead>
<tbody>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
</tbody>
<tr>
<th colspan="8" class="table-middle">
<div class="top">备注:</div>
<div class="bottom"></div>
</th>
</tr>
<tr class="table-bottom">
<th colspan="2" class="bottom-item">
<div>
<div style="width: 100px">车间产线：</div>
<div class="seat">车间02/产线02</div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">开工时间：</div>
<div class="seat"></div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">产线长签字:</div>
<div class="seat"></div>
</div>
</th>
</tr>
</table>
</div>
</n-print-page>
<n-print-page>
<div class="print-box">
<table class="table-contain" style="table-layout: fixed">
<thead>
<tr>
<td>
<span>中科数动</span>
</td>
<td
colspan="6"
style="
font-size: 32px;
text-align: center;
letter-spacing: 10px;
line-height: 50px;
"
>
生产任务单 {{ index }}-3
</td>
<td>
<div id="qrcode-0" title="TF2306300001">
<canvas width="100" height="100" style="display: none"></canvas>
<img
alt="Scan me!"
style="display: block"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABTBJREFUeF7tXduSqzAMK///0T3DabsTArElYSh0tK8EJ7Fs+ZLQnR6Px/Nx4N/zuV/8NE1/K6yQNwtrZbbbj+SP3qlU37zT/RoLVlShQANSCLkB4ZS58JBq5c1LaWUe4fLqmkde168xWr86dwtRP58BSYzGgHAevvBA5tXbeQhDL9VWFNEGo/SIGlAqRfdWpa8hZVVNoPCsAXmbEmo1vZWiVoRatwExIENbQY2tilG+SlnMJj4a6ymwomiM1mFAEl4zIADxo1bUi7KHrHtqX6WsEdYKUJndoNmeWqkza44M2IB0SBqQDdNmrC3zjFEygHonSsfMmu0hXb8qAvGyHoJaXhao0WJTPRhCLThb52i/qnxUf5ft9hqQF4SXab8bkA1AUDdjxqEuH1XcZz5jYgijB3TsqWfq6GaZarwaLHSNqILZcQZkx4khq2xkvAG5GiBPtKeAwJuMQemgirLa5aAd3YJt7hIxGZDlzZhd2ix42YAQVXyBvlMREiBM36ZdQURF0TiUeqLdHj03w/xhZqhQlgFZQ29AUudfDrCHbCjsaKX8BGW1t99Rt2NSSPQSgjKuB4BJl5W4pPbbsnUu1mJAxt+KUIpsvmHJ2DQE1oBcGJAM2c9zNBbM41EajOaubiDOc41kot2EbG8qBUu9LAPyMh80pqDj/huK8kmbATkJEAbJEcUwmc4oW2MAR1PdiIqOoEtUZj8OPsJFq3MDkkfiSJcGJNGfmlDYQ5LOwG0oq20uMhX4yALUtBFNE1ecW/CjAkfPzeh10X5nXjQg41omMpqs+jcgQZGYhWfUsxhDh4M6GqSYlLWiikfXlVnm5zmaTfaFoUrVctqLbtyArItGJqGwh3SWZg/JiHrHc4a7L0lZ7d5Vfq+yMBQH9O4wKo8ZpwZ1+DzEgDBw6GmvAeH0DI8+xEMqKnW033NE6hl5tRJDmE4ACggl04DEDoEaGxNzQ5kGxID8aWBkVUym9nOUhd46QV03sjfm8KqVcwRXj+TDEZ34riSKIXLrxICsoVJroPITQ6ZfhVIKep5fFTxv4SEo3TDpJOpZqKKr5j6TEqm0F70GFLmn6gVKbDAgb20bkDV/KAY1SwlZwx6C96QY6onoHy4M0ZRPPR1jDmpGa1HnRlNPNWGJ2kLMmku+MUTTPwPygi3SlwHpTPsnPETNstBaQE2JVc+N9oNSKUr/Kyqt/gq3oj0S8TEaLDNqULNGA0J89MMEz8sCoqS9aMbSWylj3RW0gVIWSp0qDTHvwR/soL2mKroxIAmMBoSxc32sPaTTnXo4pkOwfFOqQ9TJmaA7oqyK4nKWPWpfqPIZIEO2UdJeA7LWgAF56wQtGqPMUMnGmEyTSXTgGKJ6RcVmo7RUTTbQ/aDrV+l4BSxah6AbiKxB5WcDomp/4z3UwtApGVAZXh/Nj67fHgLEkNsDogZIlFJQKzoiLqBNT8YD0X1H3t/PV/IFFbowA5KnywZkxw1E1BBLPIThXzXwjapxNMBHFXdWJ6Dtd2YtJfsZ3e01ICoUr/fUeHzqf2ljLrmh6kDvRqHxC503G2dAiF946y2YYYMMiM/zWwDCBLfqjatKR1Nw5rZKKPPMGGJA8vhyagwxIBcHRA3ISN+pT4kjY5D5PvitrvD+bvCjy1/1EAOyUbl/M4YYEAOyyVy3oCw07WRaFKjMM4q4UetETV+ZLnGUgp/aXDQgLw0YkA1LuIWHoBbMjFP5uZ1DDf7VHV20amdaMyuKPPOSAwOkAVG1lbxnD4ljhj1kh+GdQVn/ALWu4vuLU6FVAAAAAElFTkSuQmCC"
/>
</div>
</td>
</tr>
<tr>
<td colspan="2">任务单号: <span>TF2306300001</span></td>
<td colspan="2">销售单号:20230612</td>
<td colspan="2">计划单号:PF2306180006</td>
<td colspan="2">分配时间:2023-06-30 12:00:00</td>
</tr>
<tr class="table-top">
<th style="font-weight: 500">产品编号</th>
<th style="font-weight: 500">产品名称</th>
<th style="font-weight: 500">规格型号</th>
<th class="carrige-color" style="font-weight: 500">颜色</th>
<th class="carrige-unit" style="font-weight: 500">单位</th>
<th class="carrige-num" style="font-weight: 500">任务数量</th>
<th class="carrige-stime" style="font-weight: 500">任务开始时间</th>
<th class="carrige-etime" style="font-weight: 500">任务完成时间</th>
</tr>
</thead>
<tbody>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00518</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
<tr class="table-top-content">
<th class="carrige-code"><span>yang_pd00519</span></th>
<th class="carrige-name"><span>保温杯</span></th>
<th class="carrige-type"><span>YH001</span></th>
<th class="carrige-color"></th>
<th class="carrige-unit">个</th>
<th class="carrige-num">68</th>
<th class="carrige-stime">2023-06-21 00:00:00</th>
<th class="carrige-etime">2023-06-21 23:59:59</th>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="8" class="table-middle">
<div class="top">备注:</div>
<div class="bottom"></div>
</th>
</tr>
<tr class="table-bottom">
<th colspan="2" class="bottom-item">
<div>
<div style="width: 100px">车间产线：</div>
<div class="seat">车间02/产线02</div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">开工时间：</div>
<div class="seat"></div>
</div>
</th>
<th colspan="3" class="bottom-item">
<div>
<div style="width: 100px">产线长签字:</div>
<div class="seat"></div>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</n-print-page>
</template>
</NPrint>
</template>
<style lang="less" scoped>
.left {
text-align: left;
}
.page-container {
width: 100%;
height: 100%;
.page-bar {
padding-bottom: 20px;
.right-col-custom-style {
display: flex;
align-items: center;
}
.operation-text {
line-height: 2em;
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
font-weight: 400;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
:deep(.ant-table-thead > tr > th) {
font-weight: bold;
}
:deep(.ant-card-grid) {
box-shadow: 1px 0 0 0 #7d7d7d, 0 1px 0 0 #7d7d7d, 1px 1px 0 0 #7d7d7d, 1px 0 0 0 #7d7d7d inset,
0 1px 0 0 #7d7d7d inset;
}
}
// #replenish-box-drawer-container {
// .replenish-box-drawer-page {
// }
// }
.container1 {
display: flex;
align-items: center;
// margin-bottom: 60px;
min-width: 430px;
// width: 430px;
height: 330px;
font-size: 12px;
}
.container_right {
// margin: auto;
width: 50px;
height: 50px;
margin-right: 10px;
/* margin-top: 20px; */
// margin-bottom: 10px;
}
.container_left {
// width: 100%;
// height: 260px;
// background: #4dffc191;
height: 330px;
min-height: 330px;
border-left: 1px solid #333333;
border-top: 1px solid #333333;
box-sizing: border-box;
margin-right: 10px;
}
.carrige {
display: flex;
height: 16.7%;
}
.carrige div {
border-bottom: 1px solid #333333;
border-right: 1px solid #333333;
width: 50%;
display: flex;
/* flex-direction: column; */
align-items: center;
padding: 2px;
}
// ----------------------------------------------------------------------------
.boxPrintContainer {
display: flex;
margin-top: 10px;
// height: 36%;
// width: 430px;
// height: 300px;
align-items: center;
table {
// width: 325px;
font-size: 12px;
tr {
height: 10px;
}
td {
height: 10px;
}
}
.container_left {
width: 370px;
// height: 80%;
/* background: #4dffc191; */
border-left: 1px solid #333333;
border-top: 1px solid #333333;
box-sizing: border-box;
}
.carrige {
display: flex;
// height: 16.7%;
}
.carrige div {
border-bottom: 1px solid #333333;
border-right: 1px solid #333333;
width: calc(100% - 90px);
display: flex;
min-width: 84px;
/* flex-direction: column; */
word-break: break-all;
align-items: center;
padding: 8px;
font-size: 12px;
}
.carrige div:nth-child(odd) {
width: 90px;
text-align: center;
justify-content: center;
min-width: 90px;
}
.container_right {
width: 50px;
height: 100%;
/* background-color: chocolate; */
// margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 10px;
/* display: flex;
justify-content: center;
align-items: center; */
}
.container_right div {
/* height: 82px;
width: 82px; */
/* background: chartreuse; */
}
.right_title {
margin-bottom: 10px;
width: 80px;
text-align: center;
margin: 0 auto;
}
}
// -------------------------------------------------------
.container {
width: 240mm;
// background-color: chartreuse;
// height: 297mm;
// background-color: #4086d9;
}
.table-contain {
width: 100%;
}
.flex-attr {
display: flex;
justify-content: space-between;
}
.header-left {
width: 85%;
// background-color: rgba(210, 105, 30, 0.418);
}
.header-right {
margin: auto;
width: 110px;
height: 110px;
/* margin-top: 20px; */
margin-bottom: 10px;
// background-color: cornflowerblue;
div {
margin-top: 10px;
}
}
.header-left-top {
height: 70px;
// background-color: rgba(126, 210, 30, 0.418);
}
.header-left-top > div:first-child {
width: 46%;
// background-color: cornflowerblue;
font-size: 24px;
color: #4086d9;
margin-left: 5px;
span {
margin-left: 4px;
}
}
.header-left-top > div:last-child {
flex: 1;
// background-color: rgb(100, 237, 152);
font-size: 32px;
text-decoration: underline;
letter-spacing: 10px;
height: 50px;
line-height: 50px;
}
.header-left-bottom {
// background-color: crimson;
margin-top: 30px;
margin-left: 8px;
div {
width: 200px;
// background-color: aliceblue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.print-box {
width: 100%;
height: 100%;
// background-color: rgba(0, 255, 255, 0.179);
//margin-top: 5px;
}
// .table-container {
// width: 210mm;
// margin: auto;
// background-color: yellow;
// height: 288px;
// border-left: 0.5mm solid #000;
// border-bottom: 0.5mm solid #000;
// margin-top: 10px;
// // box-sizing: border-box;
// }
// .table-top {
// width: 100%;
// display: flex;
// // box-sizing: border-box;
// }
.table-top-content {
height: 100px;
}
.table-middle {
height: 120px;
.top {
height: 30px;
line-height: 30px;
// background-color: #52d940;
text-align: left;
padding-left: 10px;
}
.bottom {
height: 90px;
// background-color: #d94540;
// padding-top: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
border: 0;
word-break: break-all;
word-wrap: break-word;
// padding-left: 2px;
}
}
.carrige-code {
width: 140px;
span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
border: 0;
word-break: break-all;
word-wrap: break-word;
}
}
.carrige-name {
width: 43mm;
span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
border: 0;
}
}
.carrige-type {
width: 43mm;
span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
border: 0;
}
}
.carrige-color {
width: 19mm;
}
.carrige-unit {
width: 18mm;
}
.carrige-num {
width: 20mm;
}
.carrige-stime {
width: 28mm;
}
.carrige-etime {
width: 28mm;
}
table,
td,
th {
border: 1px solid #9b9b9b;
border-collapse: collapse;
font-size: 14px;
font-weight: 400;
}
table > .table-top {
height: 30px;
}
.table-bottom {
height: 30px;
}
.bottom-item {
padding-left: 4px;
}
.bottom-item > div {
display: flex;
}
.seat {
// background-color: aquamarine;
flex: 1;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 500;
}
</style>