492 lines
12 KiB
Vue
492 lines
12 KiB
Vue
<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>
|