123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404 |
- <script setup lang="ts">
- import { ElMessageBox } from "element-plus";
- import {
- consistencyTestData,
- moduleScreeningData,
- productAcceptanceData,
- } from "@/api/statistic/reportMockData";
- import { getQualityTableData } from "@/api/statistic/reportData";
- const detail = ref<any>({});
- const dialogVisible = ref(false);
- const tableData = ref([]);
- const openPrintDialog = (row) => {
- dialogVisible.value = true;
- console.info("openPrintDialog", row);
- getQualityTableData(row).then((data) => {
- tableData.value = data.data;
- });
- // 在这里调接口
- detail.value = row;
- };
- const handleClose = (done: () => void) => {};
- defineExpose({
- openPrintDialog: openPrintDialog,
- });
- </script>
- <template>
- <el-dialog
- v-model="dialogVisible"
- width="1000"
- append-to-body
- align-center
- :close-on-click-modal="false"
- >
- <div>
- <el-scrollbar class="scroll-container">
- <div id="print">
- <div class="tableInfo">
- <div style="page-break-after: always">
- <div
- class="title"
- style="text-align: center"
- v-if="detail.reportType == 1"
- >
- 质量日报({{ detail.generationDate }})
- </div>
- <div
- class="title"
- style="text-align: center"
- v-if="detail.reportType == 2"
- >
- 质量月报({{ detail.generationDate }})
- </div>
- <div class="tableTitle">模块筛选情况</div>
- <table v-for="(item, index) in tableData.filterList" :key="index" style="margin-top:10px">
- <thead>
- <tr>
- <th rowspan="2">序号</th>
- <th id="lineId" rowspan="2">
- <span class="left-text">筛选项目</span>
- <span class="right-text">产品型号/检验批号</span>
- <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
- <path
- d="M 0 80 L 250 80 L 0 0 Z"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- <path
- d="M 0 80 L 250 80"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- <!-- 左边 -->
- <path
- d="M 250 80 L 0 0"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- </svg>
- </th>
- <th colspan="2" v-for="(itemCheck, index) in item.checkList">{{itemCheck.materialModel}} {{itemCheck.checkCode}}</th>
- </tr>
- <tr v-for="(itemCheck, index) in item.checkList">
- <th class="vertical-text">数量</th>
- <th class="vertical-text">剔除数</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(itemOperation, index) in item.filterDetailList" :key="index" >
- <td style="text-align: center" v-for="(item, index) in itemOperation">{{ item }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div style="page-break-after: always">
- <div class="tableTitle" style="margin-top: 100px">
- 销售信息反馈
- </div>
- <table>
- <thead>
- <tr>
- <th rowspan="2">日期</th>
- <th colspan="3">返回产品</th>
- <th rowspan="2">用户</th>
- <th rowspan="2">反馈内容</th>
- <th rowspan="2">原因</th>
- <th rowspan="2">纠正措施</th>
- <th rowspan="2">备注</th>
- </tr>
- <tr>
- <th>型号</th>
- <th>批次</th>
- <th>数量</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item, index) in tableData.salesReportList" :key="index">
- <td style="text-align: center">{{ item.created }}</td>
- <td style="text-align: center">{{ item.materialModel }}</td>
- <td style="text-align: center">{{ item.checkCode }}</td>
- <td style="text-align: center">{{ item.num }}</td>
- <td style="text-align: center">{{ item.customer }}</td>
- <td style="text-align: center">{{ item.remark1 }}</td>
- <td style="text-align: center">{{ item.remark3 }}</td>
- <td style="text-align: center">{{ item.remark4 }}</td>
- <td style="text-align: center">{{ item.remark }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div style="page-break-after: always; margin-top: 50px">
- <div class="tableTitle">成品率统计</div>
- <table v-for="(item, index) in tableData.finishListList">
- <thead >
- <tr >
- <th id="lineId" rowspan="2">
- <span class="right-text">产品分类</span>
- <span class="left-text">工序</span>
- <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
- <path
- d="M 0 80 L 250 80 L 0 0 Z"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- <path
- d="M 0 80 L 250 80"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- <!-- 左边 -->
- <path
- d="M 250 80 L 0 0"
- stroke="rgba(0, 0, 0, 0.3)"
- stroke-width="1"
- fill="none"
- />
- </svg>
- </th>
- <th :colspan="index==0?3:4" v-for="(itemModel, index) in item.materialModelList">{{itemModel}}</th>
- </tr>
- <tr>
- <th class="vertical-text" v-for="(itemLine, index) in item.headLine">{{itemLine}}</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(itemLine, index) in item.lineList" :key="index">
- <td v-for="(itemOp, index) in itemLine">{{itemOp}}</td>
- </tr>
- <tr>
- <td>备注</td>
- <td :colspan="item.num * 4-1" v-html="item.remark" style="text-align: center"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tableTitle" style="margin-top: 50px">入库</div>
- <!-- <div class="info">
- <div class="text">产品型号:</div>
- <div class="text">产品批次:</div>
- <div class="text">报告日期:2025年03月23日</div>
- </div>-->
- <table>
- <thead>
- <tr>
- <th>序号</th>
- <th>产品型号</th>
- <th>批号</th>
- <th>数量</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item, index) in tableData.instockReportList" :key="index">
- <td style="text-align: center">{{ index+1 }}</td>
- <td style="text-align: center">{{ item.materialModel }}</td>
- <td style="text-align: center">{{ item.workOrderCode }}</td>
- <td style="text-align: center">{{ item.num }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </el-scrollbar>
- </div>
- <template #header>
- <div class="dialog-header">
- <div>报告预览</div>
- <el-button
- type="primary"
- size="small"
- @click="dialogVisible = false"
- v-print="'#print'"
- >
- 打印
- </el-button>
- </div>
- </template>
- </el-dialog>
- </template>
- <style scoped lang="scss">
- .dialog-header {
- display: flex;
- justify-content: start;
- align-items: center;
- gap: 20px;
- }
- .scroll-container {
- height: calc(100vh - 200px);
- }
- #lineId {
- width: 250px;
- height: 81px;
- position: relative;
- padding: 0;
- //background: #f2f2f2
- // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
- // no-repeat 100% center;
- .xiexian {
- position: absolute;
- left: 0;
- top: 0;
- }
- .left-text {
- position: absolute;
- left: 0;
- bottom: 0;
- line-height: 40px;
- width: 70%;
- text-align: start;
- padding-left: 10px;
- }
- .right-text {
- position: absolute;
- right: 0;
- top: 0;
- line-height: 40px;
- width: 70%;
- text-align: end;
- padding-right: 10px;
- }
- }
- @media print {
- #print {
- position: absolute; /* 或 absolute, fixed, 根据需要调整 */
- top: 20px; /* 调整顶部位置 */
- margin: 0; /* 重置边距 */
- width: 700px;
- }
- }
- table {
- width: 100%;
- border-collapse: collapse; /* 合并表格边框 */
- }
- th,
- td {
- border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
- //padding: 8px;
- text-align: left;
- }
- th {
- text-align: center;
- background-color: #f2f2f2; /* 设置表头的背景颜色 */
- }
- .bgColor {
- position: fixed;
- width: 100vw;
- height: 100vh;
- z-index: 99999;
- background-color: rgba(0, 0, 0, 0.3);
- top: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- left: 0;
- .body {
- width: 80%;
- height: 85vh;
- background-color: white;
- display: flex;
- flex-direction: column;
- padding: 20px;
- .header {
- width: 100%;
- height: 40px;
- display: flex;
- padding-bottom: 10px;
- justify-content: space-between;
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- }
- .box {
- height: calc(100% - 40px);
- }
- }
- }
- .tableInfo {
- width: 100%;
- height: 60px;
- .tableTitle {
- margin: 10px 0;
- font-size: 20px;
- font-weight: 600;
- letter-spacing: 20px;
- text-align: center;
- }
- .title {
- margin: 10px 0;
- font-size: 20px;
- font-weight: 600;
- }
- .info {
- display: flex;
- padding: 0 20px;
- justify-content: space-between;
- }
- }
- .slash {
- position: relative;
- }
- .slash::before {
- content: "";
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- border-left: 1px solid #444;
- transform: rotate(45deg);
- transform-origin: 0 0;
- }
- .split-line {
- border-bottom: 1px solid #444;
- padding: 4px 0;
- }
- //上下分割成两行的
- .top-and-bottom {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- border: 0;
- .content {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .middle-line {
- width: 100%;
- height: 1px;
- background-color: rgba(0, 0, 0, 0.3);
- }
- }
- .vertical-text {
- writing-mode: vertical-rl; /* 竖排从右到左 */
- text-orientation: upright; /* 保持字符直立 */
- }
- </style>
|