<template>
|
<div style="margin-left: 10%;margin-top: 10px;">
|
<el-input :placeholder="$t('processCard.projectnumber')" v-model="engineerId" autocomplete="off" style="width: 300px;"/>
|
<el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('processCard.inquire') }}</el-button>
|
<el-button type="info" @click="printTable">{{ $t('processCard.printing') }}</el-button>
|
<!-- 表格 -->
|
<el-table
|
:data="tableData"
|
style="width: 100%; height: 700px;margin-top: 10px;"
|
ref="tableRef"
|
border
|
>
|
<el-table-column
|
prop="flowCardId"
|
:label="$t('processCard.flowcard')"
|
width="140"
|
align="center"
|
/>
|
<el-table-column
|
prop="layer"
|
:label="$t('processCard.layer')"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="engineerId"
|
:label="$t('processCard.project')"
|
align="center"
|
width="110"
|
/>
|
<el-table-column
|
prop="temperingLayoutId"
|
:label="$t('processCard.temperinglayout')"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="temperingFeedSequence"
|
:label="$t('processCard.temperingfeed')"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="width"
|
:label="$t('processCard.width')"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="height"
|
:label="$t('processCard.height')"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="thickness"
|
:label="$t('processCard.thickness')"
|
align="center"
|
width="52"
|
/>
|
</el-table>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue';
|
import request from "@/utils/request"
|
import { ElMessage } from 'element-plus';
|
const {t} = useI18n()
|
const engineerId = ref('')
|
// 声明响应式数据
|
const tableData = ref<any[]>([]);
|
const tableRef = ref<InstanceType<typeof import('element-plus').ElTable> | null>(null);
|
const selectReportData = async () => {
|
let postData = {
|
type: 9,
|
workingProcedure: '钢化',
|
...(engineerId.value !== '' && { engineerId: engineerId.value }),
|
};
|
const response = await request.post("/loadGlass/damage/selectDamagePrint", postData)
|
if (response.code === 200) {
|
tableData.value = response.data;
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.message);
|
}
|
};
|
const fetchData = async () => {
|
try {let postData = {
|
type: 9,
|
workingProcedure: '钢化',
|
...(engineerId.value !== '' && { engineerId: engineerId.value }),
|
};
|
const response = await request.post('/loadGlass/damage/selectDamagePrint',postData)
|
tableData.value = response.data;
|
} catch (error) {
|
ElMessage.error('获取数据失败');
|
console.error(error);
|
}
|
};
|
// 打印表格内容
|
const printTable = () => {
|
if (!tableRef.value) {
|
ElMessage.warning('表格未加载完成，请稍后再试');
|
return;
|
}
|
// 创建一个打印窗口
|
const printWindow = window.open('', '_blank');
|
if (!printWindow) {
|
ElMessage.error('无法打开打印窗口');
|
return;
|
}
|
// 写入表格HTML到打印窗口
|
printWindow.document.write(`
|
<html>
|
<head>
|
<title>玻璃拿走清单</title>
|
<style>
|
/* 根据需要添加样式 */
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
th, td {
|
border: 1px solid #ddd;
|
padding: 8px;
|
text-align: center;
|
}
|
th {
|
background-color: #f2f2f2;
|
}
|
</style>
|
</head>
|
<body>
|
<table>
|
<thead>
|
<tr>
|
<th>流程卡</th>
|
<th>层号</th>
|
<th>工程号</th>
|
<th>炉号</th>
|
<th>片序</th>
|
<th>宽</th>
|
<th>高</th>
|
<th>厚</th>
|
</tr>
|
</thead>
|
<tbody>
|
${tableData.value.map(item => `
|
<tr>
|
<td>${item.flowCardId}</td>
|
<td>${item.layer}</td>
|
<td>${item.engineerId}</td>
|
<td>${item.temperingLayoutId}</td>
|
<td>${item.temperingFeedSequence}</td>
|
<td>${item.width}</td>
|
<td>${item.height}</td>
|
<td>${item.thickness}</td>
|
</tr>
|
`).join('')}
|
</tbody>
|
</table>
|
</body>
|
</html>
|
`);
|
// 关闭文档流并打印
|
printWindow.document.close();
|
printWindow.focus(); // 确保新窗口获得焦点
|
printWindow.print();
|
printWindow.close(); // 打印完成后关闭窗口（可选）
|
};
|
// 在组件挂载后获取数据
|
onMounted(() => {
|
fetchData();
|
});
|
</script>
|
<style scoped>
|
/* 样式可以根据需求调整 */
|
</style>
|
