430 lines
11 KiB
Vue
430 lines
11 KiB
Vue
|
<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>
|