erp-el-element/Dialog/printingDialog3.vue

444 lines
10 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<el-dialog
:visible.sync="dialogVisible"
width="100%"
fullscreen='true'
:show-close='false'
append-to-body
:close-on-click-modal = "false"
style="padding:0px"
>
<div class="main" id="printTest" ref="printTest">
<div class="top">
<img style="margin-left: 20px;width:55px;height:100%" :src="msg.logo">
<div style="margin-left: 15px;display:flex;flex-direction:column">
<span class="top-text">{{msg.company}}</span>
<span class="top-text1">AppleCare Service or sales</span>
</div>
</div>
<div class="header">
<span style="font-size: 30px; font-weight: bold">入库打印单</span>
</div>
<el-row :gutter="24" style="display:flex;align-items: inherit;flex-wrap: wrap;justify-content: space-between;margin-left:0;margin-right:0;">
<el-col :span="6">
<div class="body-text">
<span class="text">入库类型:</span>
<span class="text1">{{ status(list.warehousing_type) }}</span>
</div>
</el-col>
<el-col :span="6" style="margin-left:0;margin-right:0;">
<div class="body-text">
<span class="text">客户:</span>
<span class="text1">{{ customerid(list.customer_id) }}</span>
</div>
</el-col>
<el-col :span="6" style="margin-left:0;margin-right:0;">
<div class="body-text">
<span class="text">收款状态:</span>
<span class="text1" v-if="list.pay_status==0">未结算</span>
<span class="text1" v-if="list.pay_status==1">已结算</span>
</div>
</el-col>
<el-col :span="6" style="margin-left:0;margin-right:0;">
<div class="body-text">
<span class="text">业务员:</span>
<span class="text1">{{ list.shop_name }}</span>
</div>
</el-col>
<el-col :span="6" style="margin-left:0;margin-right:0;">
<div class="body-text">
<span class="text">数量:</span>
<span class="text1">{{ tableData.length }}</span>
</div>
</el-col>
<el-col :span="6" style="margin-left:0;margin-right:0;">
<div class="body-text">
<span class="text">订单日期:</span>
<span class="text1">{{ date }}</span>
</div>
</el-col>
</el-row>
<!--引入表格组件-->
<div>
<table>
<tr>
<td class="text1">供应商:{{msg.company}}</td>
<td class="text1">联系方式:{{msg.phone}}</td>
</tr>
<tr>
<td class="text1">
发货地址:{{msg.address}}
</td>
<td class="text1">总金额:{{ sumprice }}</td>
</tr>
</table>
</div>
<el-table border :data="tableData">
<el-table-column
v-for="(item, index) in tableLabel"
:key="index"
:property="item.param"
:label="item.label"
:formatter="item.formatter"
>
</el-table-column>
</el-table>
<div class="footer">
<div class="fotter-top" >
<span class="footer-Toptext">{{msg.company}},{{msg.slogan}}</span>
</div>
<div class="fotter-main">
<span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
<span class="footer-maintext">服务热线:{{msg.tel}}</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button size="mini" @click="handleClose()"> </el-button> -->
<el-button type="primary" size="mini" style="margin:0 0px 0 10px" @click="toImg">确认打印</el-button>
</span>
</el-dialog>
</template>
<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import QRCode from 'qrcodejs2'
import {pre_print} from "@/api/machineList"; //获取列表信息接口
export default {
name: "printingDialog3",
data() {
let that = this
const style = '@page { margin: 0 } @media print { zoom:100% }'//自定义样式
return {
printobj:{
id:'#printTest',
popTitle:'打印',
style:style,
closeCallback(e){
that.$emit("update:dialogVisible", false);
}
},
tableLabel: [
{
label: "序号",
param: "Serial",
align: "center",
width: "100",
show: true,
},
{
label: "编号",
param: "serial_number",
align: "center",
renderheader: this.renderheader,
show: true,
},
{
label: "IMEI/SN",
input: true,
param: "imei1",
align: "center",
renderheader: this.renderheader,
show: true,
ortable: true,
},
{
label: "型号",
param: "phone_brand",
align: "center",
show: true,
ortable: true,
},
{
label: "机器等级(成色)",
param: "machine_grade_name",
align: "center",
renderheader: this.renderheader,
show: true,
ortable: true
},
{
label: "价格",
input: true,
param: "price",
align: "center",
width: "100",
show: true,
renderheader: this.renderheader,
ortable: true,
},
{
label: "备注",
input: true,
param: "i_remark",
align: "center",
width: "100",
show: true,
renderheader: this.renderheader,
ortable: true,
},
],
};
},
created() {
// console.log(this.tableData)
},
computed:{
status(){
return function(val){
switch(Number(val)){
case 1:return '采购';break;
case 2:return '其他';break;
case 3:return '代卖';break;
return val;
}
}
},
customerid(){
return function(val){
switch(Number(val)){
case 596:return '转转';break;
case 597:return '拍机堂';break;
case 598:return '采货侠';break;
}
return val;
}
},
date() {
var date = new Date();
return date.toLocaleDateString();
},
sumprice() {
var price = 0;
this.tableData.map((res) => {
price += Number(res.price);
});
return price;
},
aaa(){
let obj = this.tableData[0]
return obj
},
},
watch: {},
props: {
dialogVisible: {
type: Boolean,
default: () => {
return false;
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
msg: {
type: Object,
default: () => {
return {};
},
},
customer: {
type: Array,
default: () => {
return [];
},
},
list: {
type: Array,
default: () => {
return [];
},
},
formLabelAlign: {
type: Object,
default: () => {
return {};
},
},
jiqidata: {
type: Array,
default: () => {
return [];
},
},
},
methods: {
toImg() { // 转图片打印
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
html2canvas(this.$refs.printTest, {
backgroundColor: false,
useCORS: true,
allowTaint: true,
}).then((canvas) => {
const url = canvas.toDataURL()
this.img = url
printJS({
printable: url,
type: 'image',
documentTitle: '打印'
})
// console.log(url)
})
},
// handleClose() {
// this.$emit("update:dialogVisible", false);
// },
// share() { // 转发
// this.$nextTick(function () {
// pre_print().then((res) => {
// new QRCode(this.$refs.qrCodeUrl, {
// text: res.datas.url,
// width: 120,
// height: 110,
// colorDark: "#333333", //二维码颜色
// colorLight: "#ffffff", //二维码背景色
// correctLevel: QRCode.CorrectLevel.L, //容错率L/M/H
// });
// });
// });
// },
// //隐藏二维码
// hide() {
// this.$nextTick(function () {
// this.$refs.qrCodeUrl.innerHTML = "";
// });
// },
},
};
</script>
<style lang="less" scoped>
.body {
display: flex;
flex-direction: column;
}
.body-text {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.calculation {
border: 1px solid #ebeef5;
padding: 10px;
font-size: 14px;
span {
padding: 0 10px;
display: inline-block;
}
}
table,td,th {
border: 1px solid #d4d4d4;
}
table {
border-collapse: collapse;
height: 100px;
width: 100%;
}
th {
height: 65px;
}
.top{
display: flex;
background-color:#4ca48c;
height:60px
}
.top-text1{
font-family: STHeiti;
color: #fff;
font-size: 12px;
}
.fotter-top{
display: flex;
background-color:#4ca48c;
height:60px;
justify-content: center;
align-items: center;
}
.footer-Toptext{
font-family: STHeiti;
color: #fff;
font-size: 17px;
}
.fotter-main{
display: flex;
background-color:#fff;
// height:30px;
justify-content: center;
flex-wrap: wrap;
}
.main ::deep .el-col-6{
margin-left: 0;
margin-right: 0;
}
.el-col-6{
width: 120px;
}
.el-row::before{
content: none;
}
@media screen and (max-width: 500px) {
.top-text{
font-family: STHeiti;
color: #fff;
font-size: 20px;
text-align: center;
}
.text {
font-size: 18px;
font-weight: bold;
}
.text1 {
font-size: 14px;
}
::v-deep .el-dialog__body{
padding: 0px;
}
::v-deep .el-dialog__header{
padding: 0;
}
.footer-maintext{
font-family: STHeiti;
color:#4ca48c;
font-size: 14px;
}
}
@media screen and (min-width: 500px) {
.top-text{
font-family: STHeiti;
color: #fff;
font-size: 26px;
text-align: center;
}
.text {
font-size: 20px;
font-weight: bold;
}
.text1 {
font-size: 18px;
}
.footer-maintext{
font-family: STHeiti;
color:#4ca48c;
font-size: 20px;
}
}
</style>