更新

src/views/group/base/groupReport/gr-detail.vue

@@ -2,30 +2,36 @@
  * @Author: zwq
  * @Date: 2023-08-24 14:47:58
  * @LastEditors: zwq
- * @LastEditTime: 2025-01-15 10:20:20
+ * @LastEditTime: 2025-02-25 14:03:40
  * @Description:
 -->
 <template>
 	<div>
+		<search-bar
+			:formConfigs="formConfig"
+			ref="searchBarForm"
+			@headBtnClick="buttonClick" />
 		<el-table
+			id="detail"
 			:data="tableData"
 			:header-cell-style="{
 				background: '#F2F4F9',
 				color: '#606266',
 			}"
 			border
-      :span-method="arraySpanMethod"
+			:span-method="arraySpanMethod"
 			v-loading="dataListLoading"
 			style="width: 100%"
 			ref="dataList">
-			<el-table-column prop="lineName" label="产线" />
+			<el-table-column prop="lineName" label="产线" align="center" />
 			<el-table-column
 				prop="sizes"
 				width="105"
 				showOverflowtooltip
+        align="center"
 				label="规格" />
-			<el-table-column prop="process" label="产品工艺" />
-			<el-table-column prop="inputN" label="投入">
+			<el-table-column prop="process" label="产品工艺" align="center" />
+			<el-table-column prop="inputN" label="投入" align="center">
 				<el-table-column prop="inputNum" label="投入数量/片" />
 				<el-table-column prop="inputArea" label="投入面积/m²">
 					<template v-slot="scope">
@@ -39,7 +45,7 @@
 					</template>
 				</el-table-column>
 			</el-table-column>
-			<el-table-column prop="outputN" label="产出">
+			<el-table-column prop="outputN" label="产出" align="center">
 				<el-table-column prop="outputNum" label="产出数量/片" />
 				<el-table-column prop="outputArea" label="产出面积/m²">
 					<template v-slot="scope">
@@ -53,151 +59,147 @@
 					</template>
 				</el-table-column>
 			</el-table-column>
-			<el-table-column prop="lossN" label="不良">
+			<el-table-column prop="lossN" label="不良" align="center">
 				<el-table-column prop="lossNum" label="不良数量/片" />
 				<el-table-column prop="lossArea" label="不良面积/m²">
 					<template v-slot="scope">
 						<span>
 							{{
-								scope.row.lossArea != null
-									? scope.row.lossArea.toFixed(2)
-									: '-'
+								scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
 							}}
 						</span>
 					</template>
 				</el-table-column>
 			</el-table-column>
 			<el-table-column prop="lossRatio" label="不良率/%">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.lossRatio != null
-									? scope.row.lossRatio.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
-				</el-table-column>
+				<template v-slot="scope">
+					<span>
+						{{
+							scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
+						}}
+					</span>
+				</template>
+			</el-table-column>
 			<el-table-column prop="outputRatio" label="投入产出率/%">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.outputRatio != null
-									? scope.row.outputRatio.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
-				</el-table-column>
+				<template v-slot="scope">
+					<span>
+						{{
+							scope.row.outputRatio != null
+								? scope.row.outputRatio.toFixed(2)
+								: '-'
+						}}
+					</span>
+				</template>
+			</el-table-column>
 			<el-table-column prop="processingRatio" label="加工成品率/%">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.processingRatio != null
-									? scope.row.processingRatio.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
-				</el-table-column>
-			<el-table-column prop="lossD" label="不良详情">
-				<el-table-column prop="original" label="原片">
+				<template v-slot="scope">
+					<span>
+						{{
+							scope.row.processingRatio != null
+								? scope.row.processingRatio.toFixed(2)
+								: '-'
+						}}
+					</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="lossD" label="不良详情" align="center">
+				<el-table-column prop="original" label="原片" align="center">
 					<el-table-column prop="originalLossNum" label="原片不良/片" />
 					<el-table-column prop="originalLossArea" label="原片不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.originalLossArea != null
-									? scope.row.originalLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.originalLossArea != null
+										? scope.row.originalLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="edge" label="磨边">
+				<el-table-column prop="edge" label="磨边" align="center">
 					<el-table-column prop="edgeLossNum" label="磨边不良/片" />
 					<el-table-column prop="edgeLossArea" label="磨边不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.edgeLossArea != null
-									? scope.row.edgeLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.edgeLossArea != null
+										? scope.row.edgeLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="drill" label="打孔">
+				<el-table-column prop="drill" label="打孔" align="center">
 					<el-table-column prop="drillLossNum" label="打孔不良/片" />
 					<el-table-column prop="drillLossArea" label="打孔不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.drillLossArea != null
-									? scope.row.drillLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.drillLossArea != null
+										? scope.row.drillLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="coating" label="镀膜">
+				<el-table-column prop="coating" label="镀膜" align="center">
 					<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
 					<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.coatingLossArea != null
-									? scope.row.coatingLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.coatingLossArea != null
+										? scope.row.coatingLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="silk" label="丝印">
+				<el-table-column prop="silk" label="丝印" align="center">
 					<el-table-column prop="silkLossNum" label="丝印不良/片" />
 					<el-table-column prop="silkLossArea" label="丝印不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.silkLossArea != null
-									? scope.row.silkLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.silkLossArea != null
+										? scope.row.silkLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="tempering" label="钢化">
+				<el-table-column prop="tempering" label="钢化" align="center">
 					<el-table-column prop="temperingLossNum" label="钢化不良/片" />
 					<el-table-column prop="temperingLossArea" label="钢化不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.temperingLossArea != null
-									? scope.row.temperingLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.temperingLossArea != null
+										? scope.row.temperingLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
-				</el-table-column>
-				<el-table-column prop="packing" label="包装">
+				<el-table-column prop="packing" label="包装" align="center">
 					<el-table-column prop="packingLossNum" label="包装不良/片" />
 					<el-table-column prop="packingLossArea" label="包装不良/m²">
-					<template v-slot="scope">
-						<span>
-							{{
-								scope.row.packingLossArea != null
-									? scope.row.packingLossArea.toFixed(2)
-									: '-'
-							}}
-						</span>
-					</template>
-				</el-table-column>
+						<template v-slot="scope">
+							<span>
+								{{
+									scope.row.packingLossArea != null
+										? scope.row.packingLossArea.toFixed(2)
+										: '-'
+								}}
+							</span>
+						</template>
+					</el-table-column>
 				</el-table-column>
 			</el-table-column>
 		</el-table>
@@ -206,6 +208,8 @@
 
 <script>
 import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
+import * as XLSX from 'xlsx';
+import FileSaver from 'file-saver';
 
 export default {
 	components: {},
@@ -213,6 +217,15 @@ export default {
 		return {
 			tableData: [],
 			dataListLoading: false,
+			formConfig: [
+				{
+					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
+					type: 'button',
+					btnName: '导出',
+					name: 'export',
+					color: 'warning',
+				},
+			],
 		};
 	},
 	components: {},
@@ -238,25 +251,57 @@ export default {
 					item.temperingLossArea = item.tempering?.lossArea;
 					item.packingLossNum = item.packing?.lossNum;
 					item.packingLossArea = item.packing?.lossArea;
-          if(item.isSummaryReport){
-            item.lineName = '合计'
-          }
+					if (item.isSummaryReport) {
+						item.lineName = '合计';
+					}
 					return item;
 				});
 				this.dataListLoading = false;
 			});
 		},
-      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (row.isSummaryReport) {
-          if (columnIndex === 0) {
-            return [1, 3];
-          } else if (columnIndex === 1) {
-            return [0, 0];
-          }else if (columnIndex === 2) {
-            return [0, 0];
-          }
-        }
-      },
+		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+			if (row.isSummaryReport) {
+				if (columnIndex === 0) {
+					return [1, 3];
+				} else if (columnIndex === 1) {
+					return [0, 0];
+				} else if (columnIndex === 2) {
+					return [0, 0];
+				}
+			}
+		},
+
+		buttonClick(val) {
+			switch (val.btnName) {
+				case 'export':
+					this.handleExport();
+					break;
+				default:
+					console.log(val);
+			}
+		},
+		handleExport() {
+			let tables = document.querySelector('#detail').cloneNode(true);
+			let exportTable = XLSX.utils.table_to_book(tables);
+
+			var exportTableOut = XLSX.write(exportTable, {
+				bookType: 'xlsx',
+				bookSST: true,
+				type: 'array',
+			});
+			// sheetjs.xlsx为导出表格的标题名称
+			try {
+				FileSaver.saveAs(
+					new Blob([exportTableOut], {
+						type: 'application/octet-stream',
+					}),
+					'班组生产报表-详情.xlsx'
+				);
+			} catch (e) {
+				if (typeof console !== 'undefined') console.log(e, exportTableOut);
+			}
+			return exportTableOut;
+		},
 	},
 };
 </script>