打印样式优化

This commit is contained in:
bb_pan 2025-07-13 10:16:39 +08:00
parent e91e1a7186
commit f024626e9d
3 changed files with 301 additions and 111 deletions

View File

@ -37,7 +37,7 @@
</div> </div>
</div> </div>
</div> </div>
<el-table :data="tableData" border style="width: 100%; padding: 1px 0"> <!-- <el-table :data="tableData" border style="width: 100%; padding: 1px 0">
<el-table-column label="编号" align="center" type="index" width="60px" /> <el-table-column label="编号" align="center" type="index" width="60px" />
<el-table-column <el-table-column
label="物资类型" label="物资类型"
@ -68,7 +68,41 @@
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse; padding: 1px 0">
<thead>
<tr align="center">
<th style="width: 60px">编号</th>
<th>物资类型</th>
<th>物资名称</th>
<th>规格型号</th>
<th>计量单位</th>
<th>退料数量</th>
<th>编号</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td :title="row.materialType">{{ row.materialType }}</td>
<td :title="row.materialType">{{ row.materialType }}</td>
<td :title="row.typeName">{{ row.typeName }}</td>
<td :title="row.unitName">{{ row.unitName }}</td>
<td>{{ row.preNum }}</td>
<td>
<span v-if="row.manageType == 1">无编码</span>
<span
v-if="row.manageType == 0"
style="color: rgb(2, 167, 240); cursor: pointer"
@click="checkDetail(row)"
>
查看明细
</span>
</td>
</tr>
</tbody>
</table>
<div class="order_footer"> <div class="order_footer">
<!-- <div>审核人</div> --> <!-- <div>审核人</div> -->
<div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
@ -128,13 +162,34 @@
</div> </div>
</div> </div>
</div> </div>
<el-table :data="tableSubData" border style="width: 100%; padding: 1px 0"> <!-- <el-table :data="tableSubData" border style="width: 100%; padding: 1px 0">
<el-table-column label="序号" align="center" type="index" width="60px" /> <el-table-column label="序号" align="center" type="index" width="60px" />
<el-table-column prop="materialType" label="物资类型" align="center"></el-table-column> <el-table-column prop="materialType" label="物资类型" align="center"></el-table-column>
<el-table-column prop="materialName" label="物资名称" align="center"></el-table-column> <el-table-column prop="materialName" label="物资名称" align="center"></el-table-column>
<el-table-column prop="typeName" label="规格型号" align="center"></el-table-column> <el-table-column prop="typeName" label="规格型号" align="center"></el-table-column>
<el-table-column prop="maCode" label="设备编号" align="center"></el-table-column> <el-table-column prop="maCode" label="设备编号" align="center"></el-table-column>
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse; padding: 1px 0">
<thead>
<tr align="center">
<th style="width: 60px">序号</th>
<th>物资类型</th>
<th>物资名称</th>
<th>规格型号</th>
<th>设备编号</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableSubData" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td>{{ row.materialType }}</td>
<td>{{ row.materialName }}</td>
<td>{{ row.typeName }}</td>
<td>{{ row.maCode }}</td>
</tr>
</tbody>
</table>
<div class="order_footer"> <div class="order_footer">
<div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 35%">审核人</div> <div style="width: 35%">审核人</div>

View File

@ -137,7 +137,7 @@
{{ checkDataInfo.leaseUnit }} {{ checkDataInfo.leaseUnit }}
</div> </div>
</div> </div>
<el-table :data="printTableData" class="table" style="margin-top: 20px; width: 100%" border> <!-- <el-table :data="printTableData" class="table" style="margin-top: 20px; width: 100%" border>
<el-table-column label="机具名称" align="center" prop="typeName" /> <el-table-column label="机具名称" align="center" prop="typeName" />
<el-table-column label="规格型号" align="center" prop="typeModelName" /> <el-table-column label="规格型号" align="center" prop="typeModelName" />
<el-table-column label="单位" align="center" prop="unit" width="40px" /> <el-table-column label="单位" align="center" prop="unit" width="40px" />
@ -150,7 +150,42 @@
<el-table-column label="下次试验日期" align="center" prop="nextTestTime" width="120px" /> <el-table-column label="下次试验日期" align="center" prop="nextTestTime" width="120px" />
<el-table-column label="检验结论" align="center" prop="checkResult" /> <el-table-column label="检验结论" align="center" prop="checkResult" />
<el-table-column label="备注" align="center" prop="remark" /> <el-table-column label="备注" align="center" prop="remark" />
</el-table> </el-table> -->
<table border="1" style="width: 100%; margin-top: 20px">
<thead>
<tr align="center">
<th>机具名称</th>
<th>规格型号</th>
<th width="40px">单位</th>
<th width="40px">数量</th>
<th>设备编码</th>
<th width="80px">额定载荷KN</th>
<th width="80px">试验载荷KN</th>
<th width="80px">持荷时间min</th>
<th width="120px">试验日期</th>
<th width="120px">下次试验日期</th>
<th>检验结论</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in printTableData" :key="index" align="center">
<td :title="row.typeName">{{ row.typeName }}</td>
<td :title="row.typeModelName">{{ row.typeModelName }}</td>
<td>{{ row.unit }}</td>
<td>{{ row.num }}</td>
<td :title="row.maCode">{{ row.maCode }}</td>
<td>{{ row.ratedLoad }}</td>
<td>{{ row.testLoad }}</td>
<td>{{ row.holdingTime }}</td>
<td>{{ row.testTime }}</td>
<td>{{ row.nextTestTime }}</td>
<td>{{ row.checkResult }}</td>
<td :title="row.remark">{{ row.remark }}</td>
</tr>
</tbody>
</table>
<div class="fillIn" style="margin-top: 20px; display: flex; align-items: center; justify-content: right"> <div class="fillIn" style="margin-top: 20px; display: flex; align-items: center; justify-content: right">
<div class="item" style="width: 30%; align-items: center; position: relative"> <div class="item" style="width: 30%; align-items: center; position: relative">
@ -181,30 +216,30 @@
<!-- 领料单弹窗 --> <!-- 领料单弹窗 -->
<el-dialog :visible.sync="open" width="800px" :title="title" append-to-body> <el-dialog :visible.sync="open" width="800px" :title="title" append-to-body>
<div style="height: 500px; overflow-y: scroll; padding: 0 20px"> <div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef" > --> <vue-easy-print tableShow ref="remarksPrintRef">
<div id="checkIdTwo"> <div id="checkIdTwo">
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div> <div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div>
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap"> <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组</span> <span>领料班组</span>
{{ leaseApplyData.teamName }} {{ leaseApplyData.teamName }}
</div> </div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>工程名称</span> <span>工程名称</span>
{{ leaseApplyData.projectName }} {{ leaseApplyData.projectName }}
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>时间</span>
<span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>编号</span>
{{ leaseApplyData.code }}
</div>
</div> </div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"> <!-- <el-table :data="leaseApplyDetails" class="table" border style="width: 100%">
<span>时间</span>
<span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>编号</span>
{{ leaseApplyData.code }}
</div>
</div>
<el-table :data="leaseApplyDetails" class="table" border style="width: 100%">
<el-table-column label="序号" align="center" type="index" width="60px" /> <el-table-column label="序号" align="center" type="index" width="60px" />
<el-table-column label="类型名称" align="center" prop="maTypeName" /> <el-table-column label="类型名称" align="center" prop="maTypeName" />
<el-table-column label="规格型号" align="center" prop="typeName" /> <el-table-column label="规格型号" align="center" prop="typeName" />
@ -217,27 +252,56 @@
<span v-if="scope.row.manageType == 1">数量出库</span> <span v-if="scope.row.manageType == 1">数量出库</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse">
<thead>
<tr align="center">
<th style="width: 60px">序号</th>
<th>类型名称</th>
<th>规格型号</th>
<th>计量单位</th>
<th>预领数量</th>
<th>备注</th>
<th>出库方式</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in leaseApplyDetails" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td>{{ row.maTypeName }}</td>
<td>{{ row.typeName }}</td>
<td>{{ row.unitName }}</td>
<td>{{ row.preNum }}</td>
<td>{{ row.remark }}</td>
<td>
<span v-if="row.manageType == 0" style="color: blue; cursor: pointer" @click="codeInfo(row)">
编码出库
</span>
<span v-else-if="row.manageType == 1">数量出库</span>
</td>
</tr>
</tbody>
</table>
<div class="fillIn" style="margin-top: 30px; display: flex; justify-content: space-between"> <div class="fillIn" style="margin-top: 30px; display: flex; justify-content: space-between">
<div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 50%">发料</div> <div style="width: 50%">发料</div>
</div> </div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData --> <!-- this.leaseApplyData -->
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="width: 50px">领料</div> <div style="width: 50px">领料</div>
<img <img
v-if="this.leaseApplyData.leaseSignUrl" v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl" :src="this.leaseApplyData.leaseSignUrl"
style="width: 50px; height: 110px; transform: rotate(-90deg)" style="width: 50px; height: 110px; transform: rotate(-90deg)"
alt="" alt=""
/> />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </vue-easy-print>
<!-- </vue-easy-print> -->
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="print"> </el-button> <el-button type="primary" @click="print"> </el-button>
@ -252,12 +316,30 @@
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px"> <div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px">
领料单编号明细 领料单编号明细
</div> </div>
<el-table :data="getListViewInfo" style="padding: 1px"> <!-- <el-table :data="getListViewInfo" style="padding: 1px">
<el-table-column align="center" label="序号" type="index" width="55" /> <el-table-column align="center" label="序号" type="index" width="55" />
<el-table-column label="类型名称" align="center" prop="materialName" :show-overflow-tooltip="true" /> <el-table-column label="类型名称" align="center" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true" /> <el-table-column label="规格型号" align="center" prop="typeName" :show-overflow-tooltip="true" />
<el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" /> <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse">
<thead>
<tr align="center">
<th>序号</th>
<th>类型名称</th>
<th>规格型号</th>
<th>设备编码</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in getListViewInfo" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td :title="row.materialName">{{ row.materialName }}</td>
<td :title="row.typeName">{{ row.typeName }}</td>
<td :title="row.maCode">{{ row.maCode }}</td>
</tr>
</tbody>
</table>
</vue-easy-print> </vue-easy-print>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
@ -377,6 +459,8 @@ export default {
// //
async handleLld(row) { async handleLld(row) {
this.title = '领料单' this.title = '领料单'
this.leaseApplyDetails = []
this.leaseApplyData = {}
this.open = true this.open = true
var ids = row.id var ids = row.id
const res = await getApplyInfo(ids) const res = await getApplyInfo(ids)
@ -386,13 +470,13 @@ export default {
// //
printCheck() { printCheck() {
printJS({ // printJS({
printable: 'checkId', // printable: 'checkId',
type: 'html', // type: 'html',
targetStyles: ['*'], // targetStyles: ['*'],
maxWidth: '1400' // maxWidth: '1400'
// // //
}) // })
}, },
// //
@ -413,14 +497,14 @@ export default {
// //
print() { print() {
// this.$refs.remarksPrintRef.print(); this.$refs.remarksPrintRef.print()
printJS({ // printJS({
printable: 'checkIdTwo', // printable: 'checkIdTwo',
type: 'html', // type: 'html',
targetStyles: ['*'], // targetStyles: ['*'],
maxWidth: '1400' // maxWidth: '1400'
// // //
}) // })
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */

View File

@ -173,29 +173,29 @@
<!-- 领料单弹窗 --> <!-- 领料单弹窗 -->
<el-dialog :visible.sync="open" width="800px" :title="title" append-to-body> <el-dialog :visible.sync="open" width="800px" :title="title" append-to-body>
<div style="height: 500px; overflow-y: scroll; padding: 0 20px"> <div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef" > --> <vue-easy-print tableShow ref="remarksPrintRef">
<div id="checkIdTwo"> <div id="checkIdTwo">
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div> <div class="title" style="text-align: center; font-weight: 600; font-size: 16px">领料单</div>
<div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap"> <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组</span> <span>领料班组</span>
{{ leaseApplyData.teamName }} {{ leaseApplyData.teamName }}
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>工程名称</span>
{{ leaseApplyData.projectName }}
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>时间</span>
<span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>编号</span>
{{ leaseApplyData.code }}
</div>
</div> </div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>工程名称</span>
{{ leaseApplyData.projectName }}
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>时间</span>
<span v-if="leaseApplyData.createTime">{{ leaseApplyData.createTime.split(' ')[0] }}</span>
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>编号</span>
{{ leaseApplyData.code }}
</div>
</div>
<el-table :data="leaseApplyDetails" class="table" border style="width: 100%"> <!-- <el-table :data="leaseApplyDetails" class="table" border style="width: 100%">
<el-table-column label="序号" align="center" type="index" width="60px" /> <el-table-column label="序号" align="center" type="index" width="60px" />
<el-table-column label="类型名称" align="center" prop="maTypeName" /> <el-table-column label="类型名称" align="center" prop="maTypeName" />
<el-table-column label="规格型号" align="center" prop="typeName" /> <el-table-column label="规格型号" align="center" prop="typeName" />
@ -208,27 +208,56 @@
<span v-if="scope.row.manageType == 1">数量出库</span> <span v-if="scope.row.manageType == 1">数量出库</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse">
<thead>
<tr align="center">
<th style="width: 60px">序号</th>
<th>类型名称</th>
<th>规格型号</th>
<th>计量单位</th>
<th>预领数量</th>
<th>备注</th>
<th>出库方式</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in leaseApplyDetails" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td>{{ row.maTypeName }}</td>
<td>{{ row.typeName }}</td>
<td>{{ row.unitName }}</td>
<td>{{ row.preNum }}</td>
<td>{{ row.remark }}</td>
<td>
<span v-if="row.manageType == 0" style="color: blue; cursor: pointer" @click="codeInfo(row)">
编码出库
</span>
<span v-else-if="row.manageType == 1">数量出库</span>
</td>
</tr>
</tbody>
</table>
<div class="fillIn" style="margin-top: 30px; display: flex; justify-content: space-between"> <div class="fillIn" style="margin-top: 30px; display: flex; justify-content: space-between">
<div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 50%">发料</div> <div style="width: 50%">发料</div>
</div> </div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap"> <div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData --> <!-- this.leaseApplyData -->
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div style="width: 50px">领料</div> <div style="width: 50px">领料</div>
<img <img
v-if="this.leaseApplyData.leaseSignUrl" v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl" :src="this.leaseApplyData.leaseSignUrl"
style="width: 70px; height: 50px" style="width: 70px; height: 50px"
alt="" alt=""
/> />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </vue-easy-print>
<!-- </vue-easy-print> -->
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="print"> </el-button> <el-button type="primary" @click="print"> </el-button>
@ -243,12 +272,30 @@
<div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px"> <div class="title" style="text-align: center; font-weight: 600; font-size: 16px; margin-bottom: 20px">
领料单编号明细 领料单编号明细
</div> </div>
<el-table :data="getListViewInfo" style="padding: 1px"> <!-- <el-table :data="getListViewInfo" style="padding: 1px">
<el-table-column align="center" label="序号" type="index" width="55" /> <el-table-column align="center" label="序号" type="index" width="55" />
<el-table-column label="类型名称" align="center" prop="materialName" :show-overflow-tooltip="true" /> <el-table-column label="类型名称" align="center" prop="materialName" :show-overflow-tooltip="true" />
<el-table-column label="规格型号" align="center" prop="materialModel" :show-overflow-tooltip="true" /> <el-table-column label="规格型号" align="center" prop="materialModel" :show-overflow-tooltip="true" />
<el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" /> <el-table-column label="设备编码" align="center" prop="maCode" :show-overflow-tooltip="true" />
</el-table> </el-table> -->
<table border="1" style="width: 100%; border-collapse: collapse">
<thead>
<tr align="center">
<th>序号</th>
<th>类型名称</th>
<th>规格型号</th>
<th>设备编码</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in getListViewInfo" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td :title="row.materialName">{{ row.materialName }}</td>
<td :title="row.typeName">{{ row.typeName }}</td>
<td :title="row.maCode">{{ row.maCode }}</td>
</tr>
</tbody>
</table>
</vue-easy-print> </vue-easy-print>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
@ -405,14 +452,14 @@ export default {
// //
print() { print() {
// this.$refs.remarksPrintRef.print(); this.$refs.remarksPrintRef.print()
printJS({ // printJS({
printable: 'checkIdTwo', // printable: 'checkIdTwo',
type: 'html', // type: 'html',
targetStyles: ['*'], // targetStyles: ['*'],
maxWidth: '1400' // maxWidth: '1400'
// // //
}) // })
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
@ -444,7 +491,11 @@ export default {
pageNum: this.queryParams.pageNum, pageNum: this.queryParams.pageNum,
statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus] : [1, 2, 3, 4] statusList: this.queryParams.taskStatus ? [this.queryParams.taskStatus] : [1, 2, 3, 4]
} }
this.download('/material/material_lease_apply_info/export', { ...params }, `领料申请_${new Date().getTime()}.xlsx`) this.download(
'/material/material_lease_apply_info/export',
{ ...params },
`领料申请_${new Date().getTime()}.xlsx`
)
} }
}, },