bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

打印样式优化

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/materialsStation/toolsBack/back/component/dialogFormByCq.vue
View File

@ -37,7 +37,7 @@
</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="物资类型"
@ -68,7 +68,41 @@
</span>
</template>
</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>审核人：</div> -->
<div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
@ -128,13 +162,34 @@
</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 prop="materialType" 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="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="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 35%">审核人：</div>

200
src/views/materialsStation/toolsLease/apply/component/homeApply.vue
View File

@ -137,7 +137,7 @@
{{ checkDataInfo.leaseUnit }}
</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="typeModelName" />
<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="checkResult" />
<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="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>
<div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef" > -->
<div id="checkIdTwo">
<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="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组：</span>
{{ leaseApplyData.teamName }}
</div>
<div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>工程名称：</span>
{{ leaseApplyData.projectName }}
<vue-easy-print tableShow ref="remarksPrintRef">
<div id="checkIdTwo">
<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="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组：</span>
{{ 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 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" prop="maTypeName" />
<el-table-column label="规格型号" align="center" prop="typeName" />
@ -217,27 +252,56 @@
<span v-if="scope.row.manageType == 1">数量出库</span>
</template>
</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="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 50%">发料：</div>
</div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData -->
<div style="display: flex; align-items: center">
<div style="width: 50px">领料：</div>
<img
v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl"
style="width: 50px; height: 110px; transform: rotate(-90deg)"
alt=""
/>
<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 style="width: 50%">发料：</div>
</div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData -->
<div style="display: flex; align-items: center">
<div style="width: 50px">领料：</div>
<img
v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl"
style="width: 50px; height: 110px; transform: rotate(-90deg)"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
<!-- </vue-easy-print> -->
</vue-easy-print>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<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>
<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 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="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>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
@ -377,6 +459,8 @@ export default {
//打开领料单
async handleLld(row) {
this.title = '领料单'
this.leaseApplyDetails = []
this.leaseApplyData = {}
this.open = true
var ids = row.id
const res = await getApplyInfo(ids)
@ -386,13 +470,13 @@ export default {
//出库检验单打印
printCheck() {
printJS({
printable: 'checkId',
type: 'html',
targetStyles: ['*'],
maxWidth: '1400'
// 其他配置选项
})
// printJS({
// printable: 'checkId',
// type: 'html',
// targetStyles: ['*'],
// maxWidth: '1400'
// // 其他配置选项
// })
},
// 关闭弹窗并刷新页面
@ -413,14 +497,14 @@ export default {
//打印
print() {
// this.$refs.remarksPrintRef.print();
printJS({
printable: 'checkIdTwo',
type: 'html',
targetStyles: ['*'],
maxWidth: '1400'
// 其他配置选项
})
this.$refs.remarksPrintRef.print()
// printJS({
// printable: 'checkIdTwo',
// type: 'html',
// targetStyles: ['*'],
// maxWidth: '1400'
// // 其他配置选项
// })
},
/** 删除按钮操作 */

149
src/views/materialsStation/toolsLease/outBound/component/homeApply.vue
View File

@ -173,29 +173,29 @@
<!-- 领料单弹窗 -->
<el-dialog :visible.sync="open" width="800px" :title="title" append-to-body>
<div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef" > -->
<div id="checkIdTwo">
<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="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组：</span>
{{ leaseApplyData.teamName }}
<vue-easy-print tableShow ref="remarksPrintRef">
<div id="checkIdTwo">
<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="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<span>领料班组：</span>
{{ 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 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" prop="maTypeName" />
<el-table-column label="规格型号" align="center" prop="typeName" />
@ -208,27 +208,56 @@
<span v-if="scope.row.manageType == 1">数量出库</span>
</template>
</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="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 50%">发料：</div>
</div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData -->
<div style="display: flex; align-items: center">
<div style="width: 50px">领料：</div>
<img
v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl"
style="width: 70px; height: 50px"
alt=""
/>
<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 style="width: 50%">发料：</div>
</div>
<div class="item" style="width: 50%; display: flex; align-items: center; flex-wrap: wrap">
<!-- this.leaseApplyData -->
<div style="display: flex; align-items: center">
<div style="width: 50px">领料：</div>
<img
v-if="this.leaseApplyData.leaseSignUrl"
:src="this.leaseApplyData.leaseSignUrl"
style="width: 70px; height: 50px"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
<!-- </vue-easy-print> -->
</vue-easy-print>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
<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>
<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 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="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>
</div>
<div slot="footer" class="dialog-footer" style="text-align: center">
@ -405,14 +452,14 @@ export default {
//打印
print() {
// this.$refs.remarksPrintRef.print();
printJS({
printable: 'checkIdTwo',
type: 'html',
targetStyles: ['*'],
maxWidth: '1400'
// 其他配置选项
})
this.$refs.remarksPrintRef.print()
// printJS({
// printable: 'checkIdTwo',
// type: 'html',
// targetStyles: ['*'],
// maxWidth: '1400'
// // 其他配置选项
// })
},
/** 删除按钮操作 */
@ -444,7 +491,11 @@ export default {
pageNum: this.queryParams.pageNum,
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`
)
}
},