toPrintTables.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. <script setup lang="ts">
  2. import { ElMessageBox } from "element-plus";
  3. import {
  4. consistencyTestData,
  5. moduleScreeningData,
  6. productAcceptanceData,
  7. } from "@/api/statistic/reportMockData";
  8. import { getQualityTableData } from "@/api/statistic/reportData";
  9. const detail = ref<any>({});
  10. const dialogVisible = ref(false);
  11. const tableData = ref([]);
  12. const openPrintDialog = (row) => {
  13. dialogVisible.value = true;
  14. console.info("openPrintDialog", row);
  15. getQualityTableData(row).then((data) => {
  16. tableData.value = data.data;
  17. });
  18. // 在这里调接口
  19. detail.value = row;
  20. };
  21. const handleClose = (done: () => void) => {};
  22. defineExpose({
  23. openPrintDialog: openPrintDialog,
  24. });
  25. </script>
  26. <template>
  27. <el-dialog
  28. v-model="dialogVisible"
  29. width="1000"
  30. append-to-body
  31. align-center
  32. :close-on-click-modal="false"
  33. >
  34. <div>
  35. <el-scrollbar class="scroll-container">
  36. <div id="print">
  37. <div class="tableInfo">
  38. <div style="page-break-after: always">
  39. <div
  40. class="title"
  41. style="text-align: center"
  42. v-if="detail.reportType == 1"
  43. >
  44. 质量日报({{ detail.generationDate }})
  45. </div>
  46. <div
  47. class="title"
  48. style="text-align: center"
  49. v-if="detail.reportType == 2"
  50. >
  51. 质量月报({{ detail.generationDate }})
  52. </div>
  53. <div class="tableTitle">模块筛选情况</div>
  54. <table v-for="(item, index) in tableData.filterList" :key="index" style="margin-top:10px">
  55. <thead>
  56. <tr>
  57. <th rowspan="2">序号</th>
  58. <th id="lineId" rowspan="2">
  59. <span class="left-text">筛选项目</span>
  60. <span class="right-text">产品型号/检验批号</span>
  61. <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
  62. <path
  63. d="M 0 80 L 250 80 L 0 0 Z"
  64. stroke="rgba(0, 0, 0, 0.3)"
  65. stroke-width="1"
  66. fill="none"
  67. />
  68. <path
  69. d="M 0 80 L 250 80"
  70. stroke="rgba(0, 0, 0, 0.3)"
  71. stroke-width="1"
  72. fill="none"
  73. />
  74. <!-- 左边 -->
  75. <path
  76. d="M 250 80 L 0 0"
  77. stroke="rgba(0, 0, 0, 0.3)"
  78. stroke-width="1"
  79. fill="none"
  80. />
  81. </svg>
  82. </th>
  83. <th colspan="2" v-for="(itemCheck, index) in item.checkList">{{itemCheck.materialModel}} {{itemCheck.checkCode}}</th>
  84. </tr>
  85. <tr v-for="(itemCheck, index) in item.checkList">
  86. <th class="vertical-text">数量</th>
  87. <th class="vertical-text">剔除数</th>
  88. </tr>
  89. </thead>
  90. <tbody>
  91. <tr v-for="(itemOperation, index) in item.filterDetailList" :key="index" >
  92. <td style="text-align: center" v-for="(item, index) in itemOperation">{{ item }}</td>
  93. </tr>
  94. </tbody>
  95. </table>
  96. </div>
  97. <div style="page-break-after: always">
  98. <div class="tableTitle" style="margin-top: 100px">
  99. 销售信息反馈
  100. </div>
  101. <table>
  102. <thead>
  103. <tr>
  104. <th rowspan="2">日期</th>
  105. <th colspan="3">返回产品</th>
  106. <th rowspan="2">用户</th>
  107. <th rowspan="2">反馈内容</th>
  108. <th rowspan="2">原因</th>
  109. <th rowspan="2">纠正措施</th>
  110. <th rowspan="2">备注</th>
  111. </tr>
  112. <tr>
  113. <th>型号</th>
  114. <th>批次</th>
  115. <th>数量</th>
  116. </tr>
  117. </thead>
  118. <tbody>
  119. <tr v-for="(item, index) in tableData.salesReportList" :key="index">
  120. <td style="text-align: center">{{ item.created }}</td>
  121. <td style="text-align: center">{{ item.materialModel }}</td>
  122. <td style="text-align: center">{{ item.checkCode }}</td>
  123. <td style="text-align: center">{{ item.num }}</td>
  124. <td style="text-align: center">{{ item.customer }}</td>
  125. <td style="text-align: center">{{ item.remark1 }}</td>
  126. <td style="text-align: center">{{ item.remark3 }}</td>
  127. <td style="text-align: center">{{ item.remark4 }}</td>
  128. <td style="text-align: center">{{ item.remark }}</td>
  129. </tr>
  130. </tbody>
  131. </table>
  132. </div>
  133. <div style="page-break-after: always; margin-top: 50px">
  134. <div class="tableTitle">成品率统计</div>
  135. <table v-for="(item, index) in tableData.finishListList">
  136. <thead >
  137. <tr >
  138. <th id="lineId" rowspan="2">
  139. <span class="right-text">产品分类</span>
  140. <span class="left-text">工序</span>
  141. <svg xmlns="http://www.w3.org/2000/svg" class="xiexian">
  142. <path
  143. d="M 0 80 L 250 80 L 0 0 Z"
  144. stroke="rgba(0, 0, 0, 0.3)"
  145. stroke-width="1"
  146. fill="none"
  147. />
  148. <path
  149. d="M 0 80 L 250 80"
  150. stroke="rgba(0, 0, 0, 0.3)"
  151. stroke-width="1"
  152. fill="none"
  153. />
  154. <!-- 左边 -->
  155. <path
  156. d="M 250 80 L 0 0"
  157. stroke="rgba(0, 0, 0, 0.3)"
  158. stroke-width="1"
  159. fill="none"
  160. />
  161. </svg>
  162. </th>
  163. <th :colspan="index==0?3:4" v-for="(itemModel, index) in item.materialModelList">{{itemModel}}</th>
  164. </tr>
  165. <tr>
  166. <th class="vertical-text" v-for="(itemLine, index) in item.headLine">{{itemLine}}</th>
  167. </tr>
  168. </thead>
  169. <tbody>
  170. <tr v-for="(itemLine, index) in item.lineList" :key="index">
  171. <td v-for="(itemOp, index) in itemLine">{{itemOp}}</td>
  172. </tr>
  173. <tr>
  174. <td>备注</td>
  175. <td :colspan="item.num * 4-1" v-html="item.remark" style="text-align: center"></td>
  176. </tr>
  177. </tbody>
  178. </table>
  179. </div>
  180. <div class="tableTitle" style="margin-top: 50px">入库</div>
  181. <!-- <div class="info">
  182. <div class="text">产品型号:</div>
  183. <div class="text">产品批次:</div>
  184. <div class="text">报告日期:2025年03月23日</div>
  185. </div>-->
  186. <table>
  187. <thead>
  188. <tr>
  189. <th>序号</th>
  190. <th>产品型号</th>
  191. <th>批号</th>
  192. <th>数量</th>
  193. </tr>
  194. </thead>
  195. <tbody>
  196. <tr v-for="(item, index) in tableData.instockReportList" :key="index">
  197. <td style="text-align: center">{{ index+1 }}</td>
  198. <td style="text-align: center">{{ item.materialModel }}</td>
  199. <td style="text-align: center">{{ item.workOrderCode }}</td>
  200. <td style="text-align: center">{{ item.num }}</td>
  201. </tr>
  202. </tbody>
  203. </table>
  204. </div>
  205. </div>
  206. </el-scrollbar>
  207. </div>
  208. <template #header>
  209. <div class="dialog-header">
  210. <div>报告预览</div>
  211. <el-button
  212. type="primary"
  213. size="small"
  214. @click="dialogVisible = false"
  215. v-print="'#print'"
  216. >
  217. 打印
  218. </el-button>
  219. </div>
  220. </template>
  221. </el-dialog>
  222. </template>
  223. <style scoped lang="scss">
  224. .dialog-header {
  225. display: flex;
  226. justify-content: start;
  227. align-items: center;
  228. gap: 20px;
  229. }
  230. .scroll-container {
  231. height: calc(100vh - 200px);
  232. }
  233. #lineId {
  234. width: 250px;
  235. height: 81px;
  236. position: relative;
  237. padding: 0;
  238. //background: #f2f2f2
  239. // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
  240. // no-repeat 100% center;
  241. .xiexian {
  242. position: absolute;
  243. left: 0;
  244. top: 0;
  245. }
  246. .left-text {
  247. position: absolute;
  248. left: 0;
  249. bottom: 0;
  250. line-height: 40px;
  251. width: 70%;
  252. text-align: start;
  253. padding-left: 10px;
  254. }
  255. .right-text {
  256. position: absolute;
  257. right: 0;
  258. top: 0;
  259. line-height: 40px;
  260. width: 70%;
  261. text-align: end;
  262. padding-right: 10px;
  263. }
  264. }
  265. @media print {
  266. #print {
  267. position: absolute; /* 或 absolute, fixed, 根据需要调整 */
  268. top: 20px; /* 调整顶部位置 */
  269. margin: 0; /* 重置边距 */
  270. width: 700px;
  271. }
  272. }
  273. table {
  274. width: 100%;
  275. border-collapse: collapse; /* 合并表格边框 */
  276. }
  277. th,
  278. td {
  279. border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
  280. //padding: 8px;
  281. text-align: left;
  282. }
  283. th {
  284. text-align: center;
  285. background-color: #f2f2f2; /* 设置表头的背景颜色 */
  286. }
  287. .bgColor {
  288. position: fixed;
  289. width: 100vw;
  290. height: 100vh;
  291. z-index: 99999;
  292. background-color: rgba(0, 0, 0, 0.3);
  293. top: 0;
  294. display: flex;
  295. align-items: center;
  296. justify-content: center;
  297. left: 0;
  298. .body {
  299. width: 80%;
  300. height: 85vh;
  301. background-color: white;
  302. display: flex;
  303. flex-direction: column;
  304. padding: 20px;
  305. .header {
  306. width: 100%;
  307. height: 40px;
  308. display: flex;
  309. padding-bottom: 10px;
  310. justify-content: space-between;
  311. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  312. }
  313. .box {
  314. height: calc(100% - 40px);
  315. }
  316. }
  317. }
  318. .tableInfo {
  319. width: 100%;
  320. height: 60px;
  321. .tableTitle {
  322. margin: 10px 0;
  323. font-size: 20px;
  324. font-weight: 600;
  325. letter-spacing: 20px;
  326. text-align: center;
  327. }
  328. .title {
  329. margin: 10px 0;
  330. font-size: 20px;
  331. font-weight: 600;
  332. }
  333. .info {
  334. display: flex;
  335. padding: 0 20px;
  336. justify-content: space-between;
  337. }
  338. }
  339. .slash {
  340. position: relative;
  341. }
  342. .slash::before {
  343. content: "";
  344. position: absolute;
  345. left: 0;
  346. top: 0;
  347. width: 100%;
  348. height: 100%;
  349. border-left: 1px solid #444;
  350. transform: rotate(45deg);
  351. transform-origin: 0 0;
  352. }
  353. .split-line {
  354. border-bottom: 1px solid #444;
  355. padding: 4px 0;
  356. }
  357. //上下分割成两行的
  358. .top-and-bottom {
  359. display: flex;
  360. flex-direction: column;
  361. align-items: center;
  362. justify-content: space-around;
  363. border: 0;
  364. .content {
  365. display: flex;
  366. justify-content: center;
  367. align-items: center;
  368. }
  369. .middle-line {
  370. width: 100%;
  371. height: 1px;
  372. background-color: rgba(0, 0, 0, 0.3);
  373. }
  374. }
  375. .vertical-text {
  376. writing-mode: vertical-rl; /* 竖排从右到左 */
  377. text-orientation: upright; /* 保持字符直立 */
  378. }
  379. </style>