数组转换二维

<!--配送方的订单列表，同阳光食堂供应商端的订单列表-->
<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>