钢化模块打印更改方式，打印完整版

wangfei

2024-12-23 e49d6f1841cf33eeb0515504449960d4e7ca3280

 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>