| UI-Project/config.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/router/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/utils/constants.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/PurchaseReturn/purchaseReturn.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| UI-Project/src/views/PurchaseReturn/purchaseprint.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
UI-Project/config.js
@@ -1,10 +1,12 @@ export default { // serverUrl: "10.153.19.150:88/api", serverUrl: "10.153.19.44:801/api", // serverUrl: "192.168.1.199:88/api", serverUrl: "127.0.0.1:88/api", // serverUrl: "127.0.0.1:88/api", // serverUrl2: "10.153.19.150:88" serverUrl2: "10.153.19.44:801" // serverUrl2: "192.168.1.199:88" serverUrl2: "127.0.0.1:88" // serverUrl2: "127.0.0.1:88" //serverUrl:"res.abeim.cn" } UI-Project/src/router/index.js
@@ -185,6 +185,11 @@ name: 'purchaseStorage', component: () => import('../views/PurchaseReturn/purchaseStorage.vue') }, { path: '/PurchaseReturn/purchaseprint', name: 'purchaseprint', component: () => import('../views/PurchaseReturn/purchaseprint.vue') }, ] }, /*----------- 下片台 ----------------*/ UI-Project/src/utils/constants.js
@@ -1,4 +1,5 @@ // export const WebSocketHost = "192.168.1.199"; // export const WebSocketHost = "10.153.19.150"; export const WebSocketHost = "127.0.0.1"; export const host = "88"; export const WebSocketHost = "10.153.19.44"; // export const WebSocketHost = "127.0.0.1"; export const host = "801"; UI-Project/src/views/PurchaseReturn/purchaseReturn.vue
@@ -6,7 +6,6 @@ import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService'; import {useI18n} from 'vue-i18n' import {useRouter} from 'vue-router' const {t} = useI18n() let language = ref(localStorage.getItem('lang') || 'zh') const dialogFormVisible = ref(false) @@ -17,7 +16,6 @@ const blind2 = ref(false) const blinda = ref(false) const blindb = ref(false) const dialogVisible = ref(false) const width = ref(); const height = ref(); const currentRect = ref(null); @@ -68,32 +66,6 @@ ElMessage.error(response.message); } }; const printing = async () => { let postData = { type: 9, workingProcedure: '钢化', ...(engineerId.value !== '' && { engineerId: engineerId.value }), }; console.log(engineerId.value); const response = await request.post("/loadGlass/damage/selectDamagePrintDetails", postData) if (response.code === 200) { dialogVisible.value = true; tableData.value = response.data; await nextTick(); // 延时 2 秒后打印（时间可以根据需要调整） setTimeout(() => { window.print(); }, 2000); } else { ElMessage.error(response.message); } }; const printTable = () => { // 这里可以添加一些CSS样式来优化打印效果 // 例如，可以添加一个隐藏的打印样式表 window.print(); }; const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; const handleMessage = (data) => { // 进炉中右 @@ -466,6 +438,11 @@ return '#4682B4'; } } // 定义导航到新页面的方法 const navigateToPrintPage = () => { // 使用路由实例的 push 方法导航到新页面 router.push('/PurchaseReturn/purchaseprint'); }; function showDialog1(rect) { const index = adjustedRects1.value.findIndex(r => r.glassId === rect.glassId); if (index !== -1) { @@ -957,9 +934,8 @@ <div style="display: flex; flex-direction: row; align-items: center; margin-top: 5px;margin-left: 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" style="margin-left: 10px;" @click="printing()">{{ $t('processCard.printing') }}</el-button> <el-button type="info" style="margin-left: 10px;" @click="navigateToPrintPage">{{ $t('processCard.printing') }}</el-button> </div> <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading"> <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> <el-table @@ -1025,30 +1001,6 @@ {{ $t('order.takeon') }} </el-button> --> </el-dialog> <el-dialog v-model="dialogVisible" width="100%" top="0vh" :show-close="false" > <div class="custom-title" style="text-align: center; margin-bottom: 20px;"> {{ $t('processCard.glasstakeout') }} </div> <el-table :data="tableData" style="width: 100%;height: 760px" > <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="52"/> <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="52"/> <el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center" width="52"/> <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> </el-dialog> </div> </div> </template> @@ -1135,5 +1087,21 @@ .custom-title { font-size: 20px; font-weight: bold; } } /* @media print { .el-table { page-break-inside: avoid; } } */ @media print { body { margin: 0; padding: 0; } .el-table { width: 100%; break-inside: avoid; /* 避免表格在打印时被拆分 */ } /* 根据需要添加更多样式 */ } </style> UI-Project/src/views/PurchaseReturn/purchaseprint.vue
New file @@ -0,0 +1,178 @@ <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>
