erp-el-element/Dialog/InfoDialog.vue

282 lines
6.7 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<el-dialog
:visible.sync="dialogVisible"
width="70%"
top='5vh'
append-to-body
:title="dialogform.title"
: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">供应商:{{msg.company}}</td>
<td class="text1">联系方式:{{msg.phone}}</td>
<td class="text1">
发货地址:{{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.company}},{{msg.slogan}}</span>
<div class="fotter-main">
<span class="footer-maintext">感谢您选择爱果战壕ERP,我们将竭诚为您服务!!!</span>
<span style="margin-left:5px" class="footer-maintext">服务热线:{{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>
export default {
name: "InfoDialog",
data() {
return {
};
},
watch: {},
props: {
dialogVisible: {
type: Boolean,
default: () => {
return false;
},
},
dialoginfo: {
type: Object,
default: () => {
return {};
},
},
infoform: {
type: Object,
default: () => {
return {};
},
},
},
methods: {
},
};
</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>