330 lines
10 KiB
Vue
330 lines
10 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-dialogDrag
|
||
v-loading.fullscreen.lock="fullscreenLoading"
|
||
:before-close="cancel"
|
||
:title="dialogTitle"
|
||
:visible.sync="dialogShowFlag"
|
||
append-to-body
|
||
width="1090px"
|
||
>
|
||
<div id="printcontent" style="height: 600px;overflow-y: scroll;padding: 0 20px;">
|
||
<!-- <vue-easy-print tableShow ref="printRef"> -->
|
||
<div id="checkId">
|
||
<div style="text-align: center;font-weight: 600;font-size: 16px;">
|
||
机具设备退料单
|
||
</div>
|
||
<div class="info" style="margin-top: 10px; display: flex; align-items: center;">
|
||
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||
<div>
|
||
<span>工程名称：</span><span>{{ rowObj.proName }}</span>
|
||
</div>
|
||
<div>
|
||
<span>退料时间：</span><span>{{ rowObj.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;">
|
||
<div>
|
||
<span>退料单位：</span><span>{{ rowObj.unitName }}</span>
|
||
</div>
|
||
<div>
|
||
<span>单号：</span><span>{{ rowObj.code }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-table :data="tableData" border style="width: 100%;">
|
||
<el-table-column label="编号" align="center" type="index" width="60px"/>
|
||
<el-table-column label="物资类型"
|
||
align="center"
|
||
prop="materialType"
|
||
:show-overflow-tooltip="true"
|
||
width="120px"
|
||
/>
|
||
<el-table-column
|
||
label="物资名称"
|
||
align="center"
|
||
prop="typeName"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="规格型号"
|
||
align="center"
|
||
prop="typeModel"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="计量单位"
|
||
align="center"
|
||
prop="unitName"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="退料数量"
|
||
align="center"
|
||
class-name="small-padding fixed-width"
|
||
width="200"
|
||
prop="preNum"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="编号"
|
||
align="center"
|
||
class-name="small-padding fixed-width"
|
||
width="200"
|
||
prop="num"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.manageType==1">无编码</span>
|
||
<span v-if="scope.row.manageType==0" style="color: rgb(2, 167, 240);" @click="checkDetail(scope.row)">查看明细</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="remarks" label="备注" align="center">
|
||
<template slot-scope="scope">
|
||
<span
|
||
@click="remarksClick"
|
||
style="color: #1890ff; cursor: pointer"
|
||
>{{ scope.row.remarks }}</span
|
||
>
|
||
</template>
|
||
</el-table-column> -->
|
||
</el-table>
|
||
<div class="order_footer">
|
||
<!-- <div>审核人：</div> -->
|
||
<div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<div style="width: 35%;">审核人：</div>
|
||
<div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl">
|
||
<div style="width: 80%;margin-left: 10px;">
|
||
<img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<span>退料人：</span>
|
||
</div>
|
||
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<span>制单：</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </vue-easy-print> -->
|
||
<div>
|
||
<el-button type="primary" @click="print">打印</el-button>
|
||
</div>
|
||
</div>
|
||
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
|
||
<div style="height: 500px;overflow-y: scroll;padding: 0 20px;">
|
||
<!-- <vue-easy-print tableShow ref="remarksPrintRef"> -->
|
||
<div id="checkIdTwo">
|
||
<div class="remarks_box">
|
||
<div class="remarks_box_title">退料编码明细</div>
|
||
</div>
|
||
<div class="info" style="margin-top: 10px; display: flex; align-items: center;">
|
||
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
|
||
<div>
|
||
<span>工程名称：</span><span>{{ rowObj.proName }}</span>
|
||
</div>
|
||
<div>
|
||
<span>退料时间：</span><span>{{ rowObj.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;">
|
||
<div>
|
||
<span>退料单位：</span><span>{{ rowObj.unitName }}</span>
|
||
</div>
|
||
<div>
|
||
<span>单号：</span><span>{{ rowObj.code }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-table :data="tableSubData" border style="width: 100%;">
|
||
<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>
|
||
<div class="order_footer">
|
||
<div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<div style="width: 35%;">审核人：</div>
|
||
<div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl">
|
||
<div style="width: 80%;margin-left: 10px;">
|
||
<img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<span>退料人：</span>
|
||
</div>
|
||
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
|
||
<span>制单：</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </vue-easy-print> -->
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<el-button type="primary" @click="remarksPrint">打印</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import vueEasyPrint from 'vue-easy-print';
|
||
import {
|
||
getBackApplyInfo,
|
||
updatePrintStatus,
|
||
} from '@/api/back/index.js'
|
||
// import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
|
||
export default {
|
||
components: { vueEasyPrint },
|
||
props: {
|
||
// 弹窗是否显示
|
||
isShowFlag: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 对应操作数据键值
|
||
priKey: {
|
||
type: [String, Number],
|
||
default: ""
|
||
},
|
||
//弹窗标题
|
||
dialogTitle: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
rowObj: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
},
|
||
watch: {
|
||
isShowFlag(val) {
|
||
if (val) {
|
||
this.init();
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
dialogShowFlag: {
|
||
get() {
|
||
return this.isShowFlag;
|
||
},
|
||
set(v) {
|
||
this.$emit("update:isShowFlag", v);
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
fullscreenLoading: false,
|
||
tableData: [],
|
||
tableSubData: [],
|
||
open: false,
|
||
title: "",
|
||
directAuditSignUrl: '',
|
||
};
|
||
},
|
||
methods: {
|
||
init() {
|
||
// let params = {
|
||
// id: this.rowObj.id,
|
||
// }
|
||
|
||
getBackApplyInfo(this.rowObj.id).then(res => {
|
||
console.log(res)
|
||
this.tableData = res.data.backApplyDetailsList
|
||
this.directAuditSignUrl = res.data.backApplyInfo.directAuditSignUrl
|
||
console.log('222222222',this.directAuditSignUrl)
|
||
})
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.dialogShowFlag = false;
|
||
},
|
||
print() {
|
||
// this.$refs.printRef.print();
|
||
printJS({
|
||
printable: 'checkId',
|
||
type: 'html',
|
||
targetStyles: ['*'],
|
||
maxWidth:'1400'
|
||
// 其他配置选项
|
||
});
|
||
console.log(this.rowObj)
|
||
updatePrintStatus(this.rowObj.id).then(response => {
|
||
if (response.code === 200) {
|
||
//this.$modal.msgSuccess("打印成功");
|
||
// 如果需要刷新列表
|
||
this.$emit('refresh');
|
||
}
|
||
}).catch(() => {
|
||
this.$modal.msgError("打印状态更新失败");
|
||
});
|
||
|
||
},
|
||
checkDetail(row) {
|
||
this.title = '查看'
|
||
this.tableSubData = row.maCodeList
|
||
this.open = true
|
||
},
|
||
remarksPrint() {
|
||
// this.$refs.remarksPrintRef.print();
|
||
printJS({
|
||
printable: 'checkIdTwo',
|
||
type: 'html',
|
||
targetStyles: ['*'],
|
||
maxWidth:'1400'
|
||
// 其他配置选项
|
||
});
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// .order_box {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// .order_box_one {
|
||
// width: 100%;
|
||
// display: flex;
|
||
// align-content: center;
|
||
// justify-content: space-between;
|
||
// margin-bottom: 10px;
|
||
// :last-child {
|
||
// margin-right: 20px;
|
||
// }
|
||
// }
|
||
// }
|
||
.order_footer {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.remarks_box {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
.remarks_box_title {
|
||
margin-bottom: 10px;
|
||
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
@media print {
|
||
.no-print {
|
||
display: none;
|
||
}
|
||
|
||
.print-content {
|
||
/* 打印内容的样式 */
|
||
}
|
||
}
|
||
</style>
|