erp-el-element/Dialog/printingDialog2.vue

532 lines
14 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog
:visible.sync="dialogVisible"
width="100%"
fullscreen='true'
:show-close='false'
append-to-body
:close-on-click-modal = "false"
>
<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.operation_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">{{ list.order_notes }}</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.tracking_num }}</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 style="margin-left:5px" 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: "printingDialog",
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: "状态",
param: "op_status",
align: "center",
width: "150",
show: true,
formatter: (row,column) => {
//           render: row => {
            if (row.op_status== 11) {
              return "待分拣";
            } else if (row.op_status == 12) {
              return "采购退货";
            } else if (row.op_status == 21) {
              return "现场维修中";
            } else if (row.op_status == 22) {
              return "寄修待回机";
            } else if (row.op_status == 23) {
              return "维修完成";
            } else if (row.op_status == 31) {
              return "销售";
            } else if (row.op_status == 32) {
              return "上架";
            } else if (row.op_status == 33) {
              return "铺货";
            } else if (row.op_status == 34) {
              return "销售退货(已收货)";
            } else if (row.op_status == 35) {
              return "下架";
            } else if (row.op_status == 36) {
              return "配件销售";
            } else if (row.op_status == 20) {
              return "待维修";
            } else if (row.op_status == 13) {
              return "质检中";
            } else if (row.op_status == 42) {
              return "销售退货(待收货)";
            } else if (row.instorage_type== 3) {
              return "代卖";
            } else if (row.op_status == 12) {
              return "采购退货";
            }
//          }
},
},
{
label: "IMEI/SN",
input: true,
param: "imei1",
align: "center",
renderheader: this.renderheader,
show: true,
ortable: true,
},
// {
// label: "条形码",
// input: true,
// param: "customer_barcode",
// align: "center",
// renderheader: this.renderheader,
// show: true,
// ortable: true,
// },
{
label: "型号",
param: "phone_brand",
align: "center",
show: true,
ortable: true,
},
{
label: "机器等级(成色)",
select: true,
param: "grade_list",
align: "center",
renderheader: this.renderheader,
show: true,
ortable: true,
formatter:(row)=>{
let obj = ''
this.jiqidata.map((res) => {
if(row.grade_list == res.value){
obj = res.label
}else{
return '/'
}
})
return obj
}
},
{
label: "价格",
input: true,
param: "price",
align: "center",
width: "100",
show: true,
renderheader: this.renderheader,
ortable: true,
},
{
label: "备注",
input: true,
param: "remark",
align: "center",
width: "100",
show: true,
renderheader: this.renderheader,
ortable: true,
},
],
};
},
computed:{
status(){
return function(val){
switch(Number(val)){
case 1:return '销售';break;
case 2:return '上架';break;
case 3:return '铺货';break;
case 4:return '销售回填价格';break;
case 5:return '下架';break;
case 6:return '销售退货';break;
case 7:return '铺货退货';break;
case 8: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]
// let obj = JSON.parse(JSON.stringify(this.formLabelAlign))
// console.log(obj,132)
// for(let key in obj){
// this.customer.map((res,index) => {
// if (res.enName == key) {
// if(Array.isArray(res.options)){
// res.options.map(r=>{
// if (obj[key] == r.value) {
// obj[key] = r.label
// }
// })
// }
// }
// })
// console.log('999', this.customer)
// }
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>