532 lines
14 KiB
Vue
532 lines
14 KiB
Vue
|
<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>
|