<template>
|
<div id="goods-template" style="max-width: 800px" class="print-hide">
|
<div style="margin-top: 20px">
|
<div style="display: flex; border: 1px solid #f5f5f5">
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
width: 200px;
|
border: 1px solid #f5f5f5;
|
padding: 10px 0;
|
"
|
>
|
<qrcode-vue
|
:size="120"
|
:margin="0"
|
:auto-color="true"
|
:dot-scale="1"
|
:text="goods[0].assembleCode"
|
/>
|
</div>
|
<div style="flex: 1">
|
<div style="text-align: center; font-size: 30px; font-weight: bold">
|
{{ goods[0].assembleName }}
|
</div>
|
<div
|
style="
|
margin-top: 10px;
|
display: flex;
|
justify-content: center;
|
color: #999999;
|
"
|
>
|
<div>创建人：{{ goods[0].assembleDetails[0].createName }}</div>
|
<div>创建时间：{{ goods[0].assembleDetails[0].createTime }}</div>
|
</div>
|
<div style="color: #205fee; font-size: 22px; text-align: center">
|
{{ goods[0].assembleCode }}
|
</div>
|
</div>
|
</div>
|
<div
|
style="
|
text-align: center;
|
font-weight: bold;
|
line-height: 20px;
|
line-height: 40px;
|
"
|
>
|
装配组件清单
|
</div>
|
<el-table
|
empty-text="暂无数据"
|
:header-row-style="{
|
fontSize: '0.75rem',
|
color: '#101010',
|
fontWeight: '400',
|
height: '2.5rem',
|
}"
|
:header-cell-style="{ background: '#F4F4F4', textAlign: 'center' }"
|
:row-style="{
|
fontSize: '0.75rem',
|
color: '#101010',
|
fontWeight: '400',
|
height: '2.5rem',
|
}"
|
:cell-style="{ textAlign: 'center', padding: '0' }"
|
:data="goods[0].assembleDetails"
|
style="width: 100%; margin-top: 0.88rem"
|
>
|
<el-table
|
empty-text="暂无数据"-column prop="bindName" label="清单名称" />
|
<el-table
|
empty-text="暂无数据"-column prop="bindCode" label="清单编号" />
|
<el-table
|
empty-text="暂无数据"-column prop="goodsName" label="物料名称">
|
<template #default="scope">
|
{{ scope.row.goodsName }}
|
</template>
|
</el-table-column>
|
<el-table
|
empty-text="暂无数据"-column prop="goodsCode" label="物料编号">
|
<template #default="scope">
|
{{ scope.row.goodsCode }}
|
<!-- <div
|
:class="
|
index == scope.row.details.length - 1 ? '' : 'bottomClass'
|
"
|
v-for="(i, index) in scope.row.details"
|
:key="i.id"
|
class="cell-item"
|
>
|
{{ i.goodsCode }}
|
</div> -->
|
</template>
|
</el-table-column>
|
<el-table
|
empty-text="暂无数据"-column prop="goodsSpec" label="规格型号">
|
<!-- <template #default="scope">
|
<div
|
:class="
|
index == scope.row.details.length - 1 ? '' : 'bottomClass'
|
"
|
v-for="(i, index) in scope.row.details"
|
:key="i.id"
|
class="cell-item"
|
>
|
{{ i.goodsSpec || "-" }}
|
</div>
|
</template> -->
|
</el-table-column>
|
<el-table
|
empty-text="暂无数据"-column prop="goodsType" label="物料类型">
|
<!-- <template #default="scope">
|
<div
|
:class="
|
index == scope.row.details.length - 1 ? '' : 'bottomClass'
|
"
|
v-for="(i, index) in scope.row.details"
|
:key="i.id"
|
class="cell-item"
|
>
|
{{ i.goodsType || "-" }}
|
</div>
|
</template> -->
|
</el-table-column>
|
<el-table
|
empty-text="暂无数据"-column prop="goodsSource" label="物料来源">
|
<!-- <template #default="scope">
|
<div
|
:class="
|
index == scope.row.details.length - 1 ? '' : 'bottomClass'
|
"
|
v-for="(i, index) in scope.row.details"
|
:key="i.id"
|
class="cell-item"
|
>
|
{{ i.goodsSource || "-" }}
|
</div>
|
</template> -->
|
</el-table-column>
|
<el-table
|
empty-text="暂无数据"-column prop="goodsNum" label="清单数量">
|
<!-- <template #default="scope">
|
<div
|
:class="
|
index == scope.row.details.length - 1 ? '' : 'bottomClass'
|
"
|
v-for="(i, index) in scope.row.details"
|
:key="i.id"
|
class="cell-item"
|
>
|
{{ i.goodsNum }}
|
</div>
|
</template> -->
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 10px">备注：{{ goods[0].remark }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import printJS from "print-js";
|
import QrcodeVue from "vue-qr/src/packages/vue-qr.vue";
|
|
export default {
|
data() {
|
return {
|
//定义物料类型
|
gType: [
|
{ label: "物料", value: 1 },
|
{ label: "工具", value: 2 },
|
{ label: "辅料", value: 3 },
|
{ label: "耗材", value: 4 },
|
],
|
//定义物料来源
|
gSource: [
|
{ label: "外购", value: 1 },
|
{ label: "外协", value: 2 },
|
{ label: "自制", value: 3 },
|
{ label: "组件", value: 4 },
|
],
|
};
|
},
|
components: {
|
QrcodeVue,
|
},
|
props: {
|
goods: {
|
type: Object,
|
default: () => [],
|
},
|
},
|
created() {
|
this.goods[0].assembleDetails.forEach((item) => {
|
item.goodsType = this.gType.find((i) => i.value == item.goodsType).label;
|
item.goodsSource = this.gSource.find(
|
(i) => i.value == item.goodsSource
|
).label;
|
});
|
console.log(this.goods);
|
},
|
mounted() {
|
setTimeout(() => {
|
this.handlePrint();
|
}, 500);
|
},
|
beforeUnmount() {
|
clearTimeout();
|
},
|
methods: {
|
handlePrint() {
|
// 获取打印模板的DOM元素
|
const printElement = document.getElementById("goods-template");
|
if (printElement) {
|
// 显示打印模板，以便能够打印
|
printElement.classList.remove("print-hide");
|
// 使用vue-printjs打印模板内容
|
printJS({
|
printable: printElement,
|
type: "html",
|
scanStyles: false,
|
error: (err) => {
|
console.log("err", err);
|
},
|
});
|
// 打印完成后隐藏打印模板
|
printElement.classList.add("print-hide");
|
//向父组件发送打印完成事件
|
this.$emit("print-complete");
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.print-hide {
|
display: block;
|
/* 在屏幕上隐藏打印模板 */
|
}
|
</style>
|
