erp-el-element/Dialog/Accessoriesprints.vue

430 lines
11 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<el-dialog
:visible.sync="dialogVisible"
width="56%"
append-to-body
:close-on-click-modal="false"
:before-close="handleClose"
>
<div id="printTest" ref="printTest" class="main">
<div class="top">
<img crossorigin="anonymous" style="margin-left: 20px;width:55px;height:100%" src="https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com/erp_img/wumalogo.png"></img>
<div style="margin-left: 15px;display:flex;flex-direction:column">
<span class="top-text">五马伟业</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">
<el-col :span="6">
<div class="body-text">
<span class="text">入库类型:</span>
<span class="text1">{{ aaa.warehousing_type }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="body-text">
<span class="text">订单名称:</span>
<span class="text1">{{ aaa.order_name }}</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.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">{{ aaa.salesman_info }}</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.location_id }}</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>
<!--引入表格组件-->
<div>
<table>
<tr>
<td class="text1">供应商:温州新唐科技</td>
<td class="text1">联系方式:13666666666</td>
</tr>
<tr>
<td class="text1">
发货地址:浙江省温州市鹿城区龙泉巷瑞霞公寓写字楼1105
</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>
<div class="footer">
<div class="fotter-top">
<span class="footer-Toptext">五马伟业,专做二手机回收维修销售,资深验机团队,专业维修</span>
</div>
<div class="fotter-main">
<span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
<span style="margin-left:5px" class="footer-maintext">服务热线:057788858858 17757760777</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()"> </el-button>
<el-popover
title="扫描查看明细"
placement="top-start"
width="100"
trigger="click"
@hide="hide"
>
<div ref="qrCodeUrl" class="qrcode" />
<el-button slot="reference" style="margin:0 10px" @click="share()">分享</el-button>
</el-popover>
<el-button type="primary" @click="toImg">确认打印</el-button>
</span>
</el-dialog>
</template>
<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import { pre_print } from '@/api/machineList' // 获取列表信息接口
export default {
name: 'Accessoriesprint',
props: {
dialogVisible: {
type: Boolean,
default: () => {
return false
}
},
tableData: {
type: Array,
default: () => {
return []
}
},
input: {
type: Array,
default: () => {
return []
}
},
formLabelAlign: {
type: Object,
default: () => {
return {}
}
},
jiqidata: {
type: Array,
default: () => {
return []
}
}
},
data() {
const 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: 'cate_name',
align: 'center',
width: '100',
show: true,
formatter: (row) => {
let obj = ''
this.jiqidata.map((res) => {
if (row.cate_name == res.value) {
obj = res.label
} else {
return '/'
}
})
return obj
}
},
{
label: '是否原厂',
input: true,
param: 'is_original',
align: 'center',
renderheader: this.renderheader,
show: true,
ortable: true,
formatter: (row) => {
if (row.is_original == 1) {
return '原厂'
} else if (row.is_original == 2) {
return '非原厂'
}
}
},
{
label: '适用配件',
param: 'phone_list',
align: 'center',
show: true,
ortable: true,
formatter: (row) => {
let obj = ''
const a = { brand_name: '', model_name: '', color_name: '', rom_name: '' }
// {{items.brand_name}} {{items.model_name}}{{items.rom_name}} {{items.color_name}}
for (const key in a) {
obj += ' ' + row.phone_list[key]
}
return obj
}
},
{
label: '配件单价',
select: true,
param: 'pay_amount',
align: 'center',
renderheader: this.renderheader,
show: true,
ortable: true,
formatter: (row) => {
let obj = ''
if (row.pay_amount.unitprice && !row.number.number) {
obj = row.pay_amount.unitprice
} else if (row.pay_amount.unitprice && row.number.number) {
obj = '单价' + row.pay_amount.unitprice + '\n总价格' + row.pay_amount.sumprice
}
return obj
}
},
{
label: '产品名称',
input: true,
param: 'product_name',
align: 'center',
width: '100',
show: true,
renderheader: this.renderheader,
ortable: true
},
{
label: '数量',
input: true,
param: 'number',
align: 'center',
width: '100',
show: true,
renderheader: this.renderheader,
ortable: true,
formatter: (row) => {
let obj = ''
obj = row.number.number
return obj
}
}
]
}
},
computed: {
date() {
var date = new Date()
return date.toLocaleDateString()
},
sumprice() {
var price = 0
this.tableData.map((res) => {
price += Number(res.pay_amount)
})
return price
},
aaa() {
const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
for (const key in obj) {
this.input.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
}
})
}
}
})
}
return obj
}
},
watch: {},
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: '打印'
})
})
},
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;
}
.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: center;
align-items: center;
}
.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:#4ca48c;
font-size: 20px;
}
</style>