![](https://img.haomeiwen.com/i3425920/1b09542fb979dc98.png)
image.png
<!--配送方的订单列表,同阳光食堂供应商端的订单列表-->
<template>
<div>
<el-dialog
:title="isShowPrint?'打印明细':'订单明细'"
:visible.sync="dialogVisible"
:width="isShowPrint?'1400px':'1400px'"
:before-close="handleClose" id="out-table">
<template v-if="!isShowPrint">
<div class="pointout">
<i class="el-icon-warning-outline"></i>
<span v-if="advanceDay==0">本订单客户当天{{ advanceHour }}之前允许修改与调整</span>
<span v-else>本订单客户在前{{ advanceDay }}天{{ advanceHour }}之前允许修改与调整</span>
</div>
<div class="info_box">
<div class="info_item">
<span class="label_span">流水号:</span>
<span>{{ infoObj.id }}</span>
</div>
<div class="info_item">
<span class="label_span">食堂联系方式:</span>
<span>{{ CadminUserName + ' ' + CadminUserMobile }}</span>
</div>
<div class="info_item">
<span class="label_span">用餐类型:</span>
<span>{{ infoObj.dinnerTarget }}</span>
</div>
<div class="info_item">
<span class="label_span">送货时间:</span>
<span>{{ infoObj.deliverDateTimes }}</span>
</div>
<div class="info_item">
<span class="label_span">采购食堂:</span>
<span>{{ infoObj.canteenName }}</span>
</div>
<div class="info_item">
<span class="label_span">送货地址:</span>
<span>{{ infoObj.canteenAddress }}</span>
</div>
<div class="info_item">
<span class="label_span">统一社会信用代码:</span>
<span>{{ infoObj.canteenLicenseNo }}</span>
</div>
<div class="info_item">
<span class="label_span">更新时间:</span>
<span>{{ infoObj.updateTimes }}</span>
</div>
<div class="info_item">
<span class="label_span">发货状态:</span>
<span>{{ infoObj.shipStatus == 0 ? '待发货' : (infoObj.shipStatus == 1 ? '已发货' : '已取消') }}</span>
</div>
<div class="info_item" v-if="infoObj.serviceRate>0">
<span class="label_span">配送服务费率:</span>
<span>{{ infoObj.serviceRate + '%' }}</span>
</div>
<div class="info_item" style="width:100%;">
<span class="label_span fl">备注:</span>
<span class="fl_width">{{ infoObj.remark }}</span>
</div>
</div>
<div class="pt_20">
<table v-loading="infoLoading" class="info_table" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:80px">图片</th>
<th style="width:320px">名称(指标说明/规格等级/品牌/保质期/净含量)</th>
<th style="width:120px">{{ infoObj.serviceRate > 0 ? '折扣价(元)' : '单价(元)' }}</th>
<th style="width:120px">数量</th>
<th style="text-align: right;width:120px">小计(元)</th>
<th style="width:150px" v-if="!noEdit">生产日期</th>
<th v-if="!noEdit" style="width:150px">过期日期</th>
<th style="width:150px" v-if="!noEdit">凭证<span class="neededtext">(红色凭证报告必传)</span></th>
<th style="width:150px">备注</th>
<th style="width:150px">仓库</th>
</tr>
</thead>
<template v-if="newInfoData.length > 0">
<tbody v-for="(item,index) in newInfoData" :key="index">
<tr>
<td :colspan="!noEdit?10:7" class="headtitle_td">
<div align="center" class="headtitle" v-if="item.length>0">{{ item[0].salesItemName }}</div>
</td>
</tr>
<tr v-for="(items,indexs) in item" class="linehight" :key="indexs">
<td width="80">
<img :src="imgUrl+items.pictureUrl" alt="" height="45">
</td>
<td width="300">
{{ items.salesSubItemName }}
({{
(items.indicatorDescription || ' ') + '/' + (items.specificationLevel || ' ') + '/' + (items.brandName || ' ')
+ '/' + (items.shelfLife == 0 ? '' :
items.shelfLife) + (items.shelfLifeUnit == 1 ? '年' : (items.shelfLifeUnit == 2 ? '月' : (items.shelfLifeUnit == 3 ? '天' : '')))
+ '/' + (items.netAmount || '') + items.netAmountUnit
}})
</td>
<td width="120">
<span v-if="items.unitPrice">{{ items.unitPrice }}</span>
</td>
<td width="120">{{ items.supplyNumber }}{{ items.itemUnit }}</td>
<td width="120" style="text-align: right;">
<span v-if="items.totalPrice">{{ items.totalPrice }}</span>
</td>
<td v-if="!noEdit">
<el-date-picker
@change="produceDateChange(index,indexs,items,items.produceDate)"
:clearable="false"
class="w_140"
v-model="items.produceDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="生产日期" :picker-options="pickerOptions2">
</el-date-picker>
</td>
<td width="110" v-if="!noEdit">
<span v-if="items.isoverdue" style="color: #F56C6C;">{{ items.isvalidDate }}</span>
<span v-else>{{ items.isvalidDate }}</span>
</td>
<td width="110" v-if="!noEdit" :class="{'mustpass':items.isNeedVoucher=='1'}">
<span class="imgpz" @click="imgclick(items)">
<div class="pzlistimg" v-for="(each,eachindex) in items.files" :key="eachindex">
<img v-if="each.type==='pdf'" src="../../../assets/img/pdf.png">
<img v-if="each.type==='PDF'" src="../../../assets/img/pdf.png">
<img v-else :src="each.url">
</div>
</span>
</td>
<td width="180">{{ items.remark }}</td>
<td width="260">
<ProductStockSelect v-model="items.stock" :product-id="items.id" ref="productStockSelect"/>
</td>
</tr>
</tbody>
</template>
<tbody v-else>
<tr>
<td colspan="8" class="no_data_td">
<div align="center" class="no_data">暂无数据</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pt-20 text-right">
<span class="fr_span"
v-if="zj">品种:{{
infoData.length
}},{{
infoObj.serviceRate > 0 ? ('商品金额:' + (parseFloat(zj) - parseFloat(infoObj.serviceTotalPrice)).toFixed(2) + '元,配送服务费:' + infoObj.serviceTotalPrice + '元,') : ''
}}总金额:{{ zj }}元</span>
</div>
</template>
<div class="pt-20 dialog_footer">
<div class="fr">
<el-button size="medium" @click="handleClose">关闭</el-button>
<!-- -->
<el-button :loading="loadBtn" type="primary" size="medium" @click="sendGoods">保存发货单
</el-button>
</div>
</div>
</el-dialog>
<File-Viewer :visible.sync="fileViewer.visible" :files="fileViewer.files"/>
</div>
</template>
<script>
import voucherApi from "@/service/api/voucher-api";
import {getWeekDayNum} from "@/utils/common";
import {canTeenAnalysisI, config} from "@/service/api/config";
import QrcodeVue from 'qrcode.vue';
import XLSX from "xlsx";
import FileSaver from 'file-saver'
import axios from "axios";
import {boundYgAccountRepository} from "@/service/boundYgAccountRepository";
import supplierOrderApi from "@/service/ygst-api/supplier-order-api";
import canteenApi from "@/service/ygst-api/canteen-api";
import supplierDeliveryApi from "@/service/ygst-api/supplier-delivery-api";
import supplierApi from "@/service/ygst-api/supplier-api";
import fileDownload from "@/utils/file-download";
import FileViewer from "@/components/common/FileViewer"
import ProductStockSelect from "../../../components/business/ProductStockSelect";
function convertFileUrlsToFiles(fileUrls) {
// 一个产品可能有多个凭证。所以 map fileUrls 后,结构是[[],[]],需要使用 flat(1),扁平化数组的深度。
return fileUrls && fileUrls.length > 0 ?
fileUrls.flat(1).map(item => {
return {url: item, type: item.substr(item.lastIndexOf(".") + 1)}
}) : [];
}
export default {
components: {
QrcodeVue,
FileViewer,
ProductStockSelect
},
data() {
return {
publicorganID:"",
CadminUserName: '',
CadminUserMobile: '',
invoiceTitle: '',//抬头
imgUrl: canTeenAnalysisI.imageURL,
dialogVisible: false,
loading: true,
formInline: {
month: '',
canteenName: '',
creditCode: '',
status: '',
dayModel: '',
target: '',
},
//限制生产日期
pickerOptions2: {
disabledDate(time) {
let _now = Date.now(),
seven = 20 * 365 * 24 * 60 * 60 * 1000,
sevenDays = _now - seven;
return time.getTime() > _now || time.getTime() < sevenDays;
//大于当前的禁止,小于20年前的禁止
}
},
dayList: [],
orderOptions: [
{label: '全部', value: '-1'},
{label: '待发货', value: '0'},
{label: '已发货', value: '1'},
{label: '取消发货', value: '2'},
],
tableData: [],
pageSize: 10,
total: 0,
infoData: [],
numbers: '',
infoObj: {},
zj: 0,
orderIndex: 0,
pageIndex: 1,
infoLoading: false,
supid: '',
newInfoData: [],
noEdit: false,
loadBtn: false,
isShowPrint: false,
accountInfo: {},
targetList: [],
advanceDay: 1,
advanceHour: '00:00:00',
dialogVisibleSend: false,
infoObjSend: {},
infoLoadingSend: false,
newInfoDatas: [],
infoDatas: [],
value: '',
size: 130,
imgurl: '',
exportExcelDialog: false, //弹窗导出
exportExceldata: '', //选择的日期
exportExcelStatus: false,
fileViewer: {
visible: false,
files: []
}
}
},
created() {
var that = this;
var d = new Date();
this.formInline.month = this.$format(d, 'yyyy-MM');
var allDays = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate();
for (var i = 1; i <= allDays; i++) {
i = i < 10 ? '0' + i : i + '';
let week = this.formInline.month + '-' + i;
let weeks = getWeekDayNum(week);
let obj = {
week: weeks,
value: i,
}
that.dayList.push(obj);
}
this.accountInfo = boundYgAccountRepository.getAccountInfo();
supplierApi.get(this.accountInfo.supplierId).then(data => {
this.advanceDay = data.allowOrderUpdateAdvanceDays;
this.advanceHour = this.$format(data.allowOrderUpdateAdvanceTime, 'hh:mm');
})
},
methods: {
// 查看
EnterFun(index, rowData, bool,tabledata) {
this.tableData= tabledata;
this.noEdit = bool;
this.orderIndex = index;
rowData.deliverDateTimes = rowData.planDate + ' ' + this.$format(rowData.supplyTime, 'hh:mm:ss');
this.infoObj = rowData;
this.getCanteenInfo(rowData.canteenId);
this.infoLoading = true;
this.dialogVisible = true;
this.infoData = [];
this.newInfoData = [];
supplierOrderApi.detail(rowData.id)
.then((data) => {
let zj = 0;
let DetailCodes = [];
data.forEach((ele, ind) => {
DetailCodes.push(ele.salesSubItemCode)
ele.produceDate = ele.productionDate == null ? ele.productionDate : ''; // 生产日期
// zj =(ele.totalPrice + parseFloat(zj)).toFixed(3);
if (ele.itemType == 0 && !this.noEdit) {
ele.produceDate = this.$format(new Date(), 'yyyy-MM-dd');
}
ele.isvalidDate = ''; // 有效期
ele.isoverdue = false;
ele.t = 'd';
ele.days = 5;
if (ele.shelfLifeUnit == 1) {
ele.t = 'y';
} else if (ele.shelfLifeUnit == 2) {
ele.t = 'm';
} else if (ele.shelfLifeUnit == 3) {
ele.t = 'd';
} else {
ele.t = 'd';
}
if (ele.shelfLife == 0) {
ele.produceDate = this.$format(new Date(), 'yyyy-MM-dd');
ele.isvalidDate = this.$format(this.DateAdd(ele.t, ele.days * 1, new Date(ele.produceDate)), 'yyyy-MM-dd');
} else {
if (ele.productionDate) {
ele.isvalidDate = this.$format(this.DateAdd(eie.t, ele.shelfLife * 1, new Date(ele.productionDate)), 'yyyy-MM-dd');
}
}
})
zj = this.infoObj.orderPrice; //zj.toString().substring(0,zj.toString().length-1);
this.zj = zj;
var arrayTwo = Object.values(data.reduce((res, item) => {
res[item.salesItemName] ? res[item.salesItemName].push(item) : res[item.salesItemName] = [item];
return res;
}, {}));
let dataInfo = [];
for (let i = 0; i < arrayTwo.length; i++) {
for (let j = 0; j < arrayTwo[i].length; j++) {
dataInfo.push(arrayTwo[i][j])
}
}
//总的数据aaaaaaa
this.infoData = dataInfo;
this.newInfoData = arrayTwo;
if(bool===false){
this.publicorganID =rowData.agencyId;
this.loadVouchers(DetailCodes.join(","), data[0].produceDate,null,null,rowData.agencyId)
}
})
.finally(() => {
this.infoLoading = false;
})
},
imgclick(item) {
if (!item.files || item.files.length <= 0) {
return;
}
this.fileViewer.files = item.files;
this.fileViewer.visible = true;
},
//查询食堂信息
getCanteenInfo(id) {
let that = this;
canteenApi.get(id).then(data => {
that.invoiceTitle = data.invoiceTitle;
that.CadminUserName = data.adminUserName;
that.CadminUserMobile = data.adminUserMobile;
})
},
// 生产日期change ttttt
produceDateChange(index, indexs, rowData, val) {
let _index = 0;
this.infoData.forEach((ele, ind) => {
if (ele.id == rowData.id) {
_index = ind;
}
})
this.infoData[_index].produceDate = val;
let t = '';
if (rowData.shelfLife == 0) {
rowData.isvalidDate = this.$format(this.DateAdd('d', 5, new Date(val)), 'yyyy-MM-dd');
} else {
if (rowData.shelfLifeUnit == 1) {
t = 'y';
} else if (rowData.shelfLifeUnit == 2) {
t = 'm';
} else if (rowData.shelfLifeUnit == 3) {
t = 'd';
} else {
t = 'd';
}
rowData.isvalidDate = this.$format(this.DateAdd(t, rowData.shelfLife * 1, new Date(val)), 'yyyy-MM-dd');
}
this.infoData[_index].isvalidDate = rowData.isvalidDate;
if (new Date(this.infoObj.planDate) > new Date(rowData.isvalidDate)) {
this.newInfoData[index][indexs].isoverdue = true;
} else {
this.newInfoData[index][indexs].isoverdue = false;
}
this.infoData[_index].isoverdue = this.newInfoData[index][indexs].isoverdue;
this.loadVouchers(rowData.salesSubItemCode, rowData.produceDate, index, indexs,this.publicorganID)
},
loadVouchers(productCodes, productionDate, Index,indexs,agencyId){
let postdata={
productCodes:productCodes,
productionDate:productionDate,
agencyId:agencyId
}
voucherApi.listByProducts(postdata)
.then(vouchers => {
if (Index != null) {// 刷新某个商品
let row = this.newInfoData[Index][indexs];
row.files = convertFileUrlsToFiles(vouchers.map(item => item.fileUrls));
} else {// 刷新所有产品
this.newInfoData.forEach(row => {
row.forEach(each => {
each.files = convertFileUrlsToFiles(vouchers.filter(item => item.productCode === each.salesSubItemCode).map(item => item.fileUrls));
});
});
}
this.$nextTick(() => {
let that=this;
that.newInfoData.forEach((ele, index) => {
ele.forEach((each, indexs) => {
that.$set(ele, indexs, each);
})
})
})
})
},
// 发货??
sendGoods() {
var that = this;
for (var i = 0; i < this.infoData.length; i++) {
if (this.infoData[i].itemType == 1) {
if (this.infoData[i].produceDate == '') {
this.$message('请选择生产日期');
return;
break;
}
}
}
let orderObj = this.tableData[this.orderIndex];
orderObj.dataType = orderObj.sourceStatus == 0 ? 1 : 3;
orderObj.orderId = orderObj.id;
let infoData = this.$clone(this.infoData);
for (var i = 0; i < infoData.length; i++) {
infoData[i].manufacturer = '';
if (infoData[i].produceDate == null || infoData[i].produceDate.length == 0) {
this.$message('请选择生产日期');
return;
break;
}
infoData[i].productionDate = infoData[i].produceDate;
infoData[i].validUntilDate = infoData[i].isvalidDate;
if (infoData[i].isoverdue) {
this.$message('商品过期,不能发货');
return;
break;
}
infoData[i].voucherList = infoData[i].files.map(item => item.url);
if (infoData[i].isNeedVoucher=='1' && infoData[i].voucherList.length==0 ) {
this.$message('红色背景报告为必传项!');
return;
break;
}
}
orderObj.orderCount = infoData.length;
orderObj.orderPrice = this.zj;
console.log(orderObj)
console.log(infoData)
return
this.$confirm('发货后将无法修改,是否确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loadBtn = true;
supplierDeliveryApi.add({
delivery: orderObj,
deliveryDetails: infoData,
})
.then(function (data) {
that.infoObj.shipStatus = 1;
that.$message({
type: 'success',
message: '保存发货单成功'
})
}
)
}).finally(() => {
that.loadBtn = false;
});
},
// 处理时间
DateAdd(interval, number, date) {
switch (interval) {
case "y" : {
date.setFullYear(date.getFullYear() + number);
return date;
break;
}
case "q" : {
date.setMonth(date.getMonth() + number * 3);
return date;
break;
}
case "m" : {
date.setMonth(date.getMonth() + number);
return date;
break;
}
case "w" : {
date.setDate(date.getDate() + number * 7);
return date;
break;
}
case "d" : {
date.setDate(date.getDate() + number);
return date;
break;
}
case "h" : {
date.setHours(date.getHours() + number);
return date;
break;
}
case "m" : {
date.setMinutes(date.getMinutes() + number);
return date;
break;
}
case "s" : {
date.setSeconds(date.getSeconds() + number);
return date;
break;
}
default : {
date.setDate(d.getDate() + number);
return date;
break;
}
}
},
// 关闭弹框
handleClose() {
this.dialogVisible = false;
this.isShowPrint = false;
this.$refs.productStockSelect.clear();
},
},
mounted() {
}
}
</script>
<style lang="less">
.big{
font-size: 40px;
color: #F56C6C;
}
.neededtext{
color: #F56C6C;
}
.mustpass{
background: rgb(253, 226, 226);
}
@media print {
html, body {
height: inherit;
}
}
.order_manage {
padding-right: 0;
width: calc(100% - 20px);
.print_dialog {
.el-dialog__body {
padding: 0;
}
.print_box {
padding: 30px 20px;
box-sizing: border-box;
}
}
.print_box {
.qrcode {
position: absolute;
top: 0;
right: 20px;
width: 130px;
height: 130px;
img {
width: 130px !important;
height: 130px !important;
}
canvas {
width: 130px !important;
height: 130px !important;
}
}
}
.footer_btn {
padding: 0 20px 30px 0;
text-align: right;
}
.pointout {
padding-bottom: 10px;
font-size: 16px;
line-height: 23px;
color: #F56C6C;
text-align: center;
}
.el-table .success-row {
background: oldlace;
}
.point {
font-size: 14px;
line-height: 23px;
color: #606266;
display: flex;
align-items: center;
span {
display: inline-block;
width: 40px;
height: 20px;
}
}
.pb_10 {
padding-bottom: 10px;
}
.day_group {
.el-radio-button {
margin-bottom: 10px;
}
}
.info_table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: #606266;
thead {
color: #606266;
font-size: 14px;
font-weight: 500;
}
td, th {
padding: 12px 10px;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
border: 1px solid #EBEEF5;
}
th {
white-space: nowrap;
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.headtitle_td {
padding: 0;
}
.headtitle {
height: 40px;
line-height: 40px;
background-color: #3a8ee6;
color: white;
}
.linehight {
td {
line-height: 23px;
}
}
.no_data_td {
padding: 0;
}
.no_data {
line-height: 60px;
width: 100%;
color: #909399;
}
}
.info_box {
overflow: hidden;
padding: 15px 15px 5px 15px;
box-sizing: border-box;
border: 1px solid #DCDFE6;
border-radius: 10px;
.info_item {
padding-bottom: 10px;
float: left;
width: 50%;
}
span {
color: #606266;
font-size: 14px;
line-height: 22px;
}
.label_span {
display: inline-block;
width: 130px;
text-align: right;
}
.fl {
float: left;
}
.fl_width {
float: left;
width: calc(100% - 130px)
}
}
.dialog_footer {
overflow: hidden;
.fl {
float: left;
line-height: 36px;
color: #5e87b0;
}
.fr {
float: right;
}
}
.w_180 {
width: 180px;
}
.w_120 {
width: 120px;
}
.w_140 {
width: 140px;
}
.fr_span {
color: #5e87b0;
font-size: 15px;
}
}
.isweek {
.el-radio-button__inner {
background-color: rgba(140, 147, 157, 0.37);
color: #fff;
}
}
.have_day {
.el-radio-button__inner {
background-color: #e6a23c;
color: #fff;
border: 1px solid #e6a23c;
}
}
.pzlistimg {
display: inline-block;
margin-left: 10px;
}
.imgpz {
width: 180px;
height: 58px;
white-space: nowrap;
overflow: auto;
// overflow-x: scroll;
display: flex;
img {
width: 40px;
height: 40px;
cursor: pointer;
}
}
</style>
网友评论