erp-el-element/Dialog/printingDialog.vue

492 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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="70%"
top='5vh'
append-to-body
:close-on-click-modal = "false"
:before-close="handleClose"
>
<div class="main" id="printTest" ref="printTest">
<div class="header">
<span style="font-size: 30px; font-weight: bold">销售发货单</span>
</div>
<el-row :gutter="24">
<el-col :span="6">
<div class="body-text">
<span class="text">销售类型:</span>
<span class="text1">{{ aaa.operation_type }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">订单名称:</span>
<span class="text1"></span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">往来单位:</span>
<span class="text1">{{aaa.customer_id}}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">出仓仓库:</span>
<span class="text1"></span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">送货方式:</span>
<span class="text1"></span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">出库日期:</span>
<span class="text1">{{ date }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">收款状态:</span>
<span class="text1">{{ aaa.pay_status }}{{aaa.pay_channel ? `(${aaa.pay_channel})` : '' }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">单号:</span>
<span class="text1">{{id}}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">出库数量:</span>
<span class="text1">{{ tableData.length }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">操作员:</span>
<span class="text1">{{ aaa.salesman_id }}</span>
</div>
</el-col>
<!-- <el-col :span="6">
<div class="body-text">
<span class="text">订单备注:</span>
<span class="text1">{{ aaa.order_notes }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">客户:</span>
<span class="text1">{{ aaa.customer_id }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">快递单号:</span>
<span class="text1">{{ aaa.tracking_num }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">订单日期:</span>
<span class="text1">{{ date }}</span>
</div>
</el-col> -->
</el-row>
<!--引入表格组件-->
<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>
<table style="height: 40px;">
<tr>
<td class="text1">供应商:<span>{{ msg?msg.company:'' }}</span>>
</td>
<td class="text1">联系方式:{{msg?msg.phone:''}}</td>
<td class="text1">
发货地址:{{msg?msg.address:''}}
</td>
<td class="text1">总金额:{{ sumprice }}</td>
</tr>
<!-- <tr>
</tr> -->
</table>
</div>
<div class="footer">
<div class="fotter-top" >
<span class="footer-Toptext">{{msg?msg.company:''}},{{msg?msg.slogan:''}}。</span>
<div class="fotter-main">
<span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
<span style="margin-left:5px" class="footer-maintext">服务热线:{{msg?msg.tel:''}}</span>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="handleClose()">取 消</el-button>
<el-popover
@hide="hide"
title="扫描查看明细"
placement="top-start"
width="100"
trigger="click"
>
<div class="qrcode" ref="qrCodeUrl"></div>
<el-button class="btn" slot="reference" size="mini" style="margin:0 10px" @click="share()">分享</el-button>
</el-popover>
<el-button type="primary" size="mini" v-print="'#printTest'">确认打印</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"; //获取列表信息接口
import { op_order_details_code } from "@/api/Warehousing"; //获取二维码信息接口
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,
},
{
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,
formatter:(row)=>{
// console.log('33', row)
let obj = ''
obj = row.model_name+' '+row.rom_name+' '+row.color_name
return obj
}
},
{
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:{
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 = 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 [];
},
},
customer: {
type: Array,
default: () => {
return [];
},
},
msg: {
type:Object,
default:() => {
return {};
}
},
formLabelAlign: {
type: Object,
default: () => {
return {};
},
},
jiqidata: {
type: Array,
default: () => {
return [];
},
},
id: {
type: String,
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() { // 转发
op_order_details_code({order_op_id:this.id}).then((res) => {
// console.log('res', res)
var list = JSON.stringify(this.formLabelAlign)
var host = window.location.host;
var http = window.location.protocol
new QRCode(this.$refs.qrCodeUrl, {
// text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
text:`${http}`+'//'+`${host}/#/share?uuid=`+res.datas.uuid+'&formLabelAlign='+list,
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 {
margin-bottom: 15px;
}
.header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.text {
font-size: 20px;
font-weight: bold;
}
.text1 {
font-size: 18px;
}
.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-text{
font-family: STHeiti;
color: #fff;
font-size: 26px;
text-align: center;
}
.top-text1{
font-family: STHeiti;
color: #fff;
font-size: 12px;
}
.fotter-top{
display: flex;
background-color:#4ca48c;
height:60px;
justify-content: space-between;
align-items: center;
padding: 0 30px;
}
.footer-Toptext{
font-family: STHeiti;
color: #fff;
font-size: 24px;
}
.fotter-main{
display: flex;
// background-color:#fff;
height:30px;
justify-content: center;
}
.footer-maintext{
font-family: STHeiti;
color:#FFFFFF;
font-size: 20px;
}
.el-col-6{
width: 20%!important;
}
</style>