|
@@ -0,0 +1,319 @@
|
|
|
+<template>
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="print-page" v-for="(item, index) in showData" :key="index">
|
|
|
+ <div class="print-title">
|
|
|
+ <div class="title1">广州盛世欣兴格力贸易有限公司销售发货单</div>
|
|
|
+ </div>
|
|
|
+ <div class="print-form-2">
|
|
|
+ <el-row :gutter="0">
|
|
|
+ <el-col :span="16" class="item">
|
|
|
+ <div class="label">客户名称</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.customerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">发货日期</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="nowDate" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">发货单号</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.id" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">销售类型</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.customerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">订单号</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.customerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="item">
|
|
|
+ <div class="label">使用单位</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.customerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">合同号</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.customerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="item">
|
|
|
+ <div class="label">提货人资料</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.takerName" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="item">
|
|
|
+ <div class="label">备注</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input v-model="item.remark" readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="print-table-1">
|
|
|
+ <div class="head">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4">发货单号/订单号</el-col>
|
|
|
+ <el-col :span="3">销售类型</el-col>
|
|
|
+ <el-col :span="3">文件编号</el-col>
|
|
|
+ <el-col :span="8">规格型号</el-col>
|
|
|
+ <el-col :span="3">单位</el-col>
|
|
|
+ <el-col :span="3">数量</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="body">
|
|
|
+ <div v-for="(item, index) in item.invoicePickBeans" :key="index">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4">{{ item.invoiceId || '' }}</el-col>
|
|
|
+ <el-col :span="3">{{ item.saleTypeName || '' }}</el-col>
|
|
|
+ <el-col :span="3">{{ item.fileNo || '' }}</el-col>
|
|
|
+ <el-col :span="8">{{ item.specification || '' }}</el-col>
|
|
|
+ <el-col :span="3">{{ item.unit || '' }}</el-col>
|
|
|
+ <el-col :span="3">{{ item.refundableQty || 0 }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4">{{ item.invoiceId || '' }}</el-col>
|
|
|
+ <el-col :span="2">发货日期</el-col>
|
|
|
+ <el-col :span="4">{{ item.theTime || '' }}</el-col>
|
|
|
+ <el-col :span="2">工程编号</el-col>
|
|
|
+ <el-col :span="4">{{ item.refEnginRecordNo || '' }}</el-col>
|
|
|
+ <el-col :span="2">备注</el-col>
|
|
|
+ <el-col :span="6">{{ item.remark || '' }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="foot">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="21">合计</el-col>
|
|
|
+ <el-col :span="3">{{ item.total }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="print-form-2">
|
|
|
+ <el-row :gutter="30">
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">销售公司</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">仓库</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="item">
|
|
|
+ <div class="label">经销商</div>
|
|
|
+ <div class="value">
|
|
|
+ <el-input readonly></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'PrintFoshan',
|
|
|
+ props: {
|
|
|
+ detailData: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ showData() {
|
|
|
+ var showData = [];
|
|
|
+ if(this.detailData && this.detailData.invoicePickBeans) {
|
|
|
+ for(var i=0; i<this.detailData.invoicePickBeans.length; i+=2){
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.detailData));
|
|
|
+ obj.invoicePickBeans = this.detailData.invoicePickBeans.slice(i, i+2);
|
|
|
+ let num = 0;
|
|
|
+ obj.invoicePickBeans.forEach(item => {
|
|
|
+ num = num + item.refundableQty;
|
|
|
+ });
|
|
|
+ obj.total = num;
|
|
|
+ showData.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(showData);
|
|
|
+ return showData;
|
|
|
+ },
|
|
|
+
|
|
|
+ nowDate() {
|
|
|
+ var date = new Date();
|
|
|
+ var seperator1 = "-";
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth() + 1;
|
|
|
+ var strDate = date.getDate();
|
|
|
+ if (month >= 1 && month <= 9) {
|
|
|
+ month = "0" + month;
|
|
|
+ }
|
|
|
+ if (strDate >= 0 && strDate <= 9) {
|
|
|
+ strDate = "0" + strDate;
|
|
|
+ }
|
|
|
+ var currentdate = year + seperator1 + month + seperator1 + strDate;
|
|
|
+ return currentdate;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .detail-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .print-page {
|
|
|
+ margin-bottom: 50px;
|
|
|
+ // min-height: 1020px;
|
|
|
+ page-break-after: always;
|
|
|
+ }
|
|
|
+ .print-title {
|
|
|
+ text-align: center;
|
|
|
+ .title1 {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ .title2 {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .print-form-1 {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding-right: 10px;
|
|
|
+ .label {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ input {
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .print-table-1 {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ .el-row {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-bottom: 14px;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ color: #909399;
|
|
|
+ font-weight: bold;
|
|
|
+ .el-col {
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body {
|
|
|
+ color: #333333;
|
|
|
+ .el-row {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot {
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ .el-col {
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .print-form-2 {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding-right: 10px;
|
|
|
+ .label {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ ::v-deep .el-input input {
|
|
|
+ height: 30px;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|