出库并发货

<!--
 * @Author: your name
 * @Date: 2021-05-28 14:02:07
 * @LastEditTime: 2021-07-29 15:08:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shangyuan-supplychain-gypms\src\components\common\selectPrinter.vue
-->
<template>
  <div class="sendgoodspage">
    <el-dialog append-to-body title="详细信息" :visible.sync="displayshow" :before-close="closeAdd" width="1400px">
      <div class="publicstyle" v-loading="loading">

        <el-form class="infoObj_form" ref="infoObj" :model="infoObj" label-width="110px">
          <div class="info_box">
            <div class="info_item">
              <span class="label_span">订单号：</span>
              <span>{{ infoObj.orderNo }}</span>
            </div>
            <div class="info_item" v-if="infoObj.creatorType == 0">
              <span class="label_span">客户名称：</span>
              <span>{{ infoObj.customerName }}</span>
            </div>
            <div class="info_item" v-else>
              <span class="label_span">供应商名称：</span>
              <span>{{ infoObj.supplierName }}</span>
            </div>
            <div class="info_item">
              <span class="label_span">商品总数：</span>
              <span>{{ infoObj.productNum }}</span>
            </div>
            <div class="info_item">
              <span class="label_span">总价：</span>
              <span>{{ sumnumber }} 元</span>
              <!-- <span v-else>无协议价</span> -->
            </div>
            <div class="info_item">
              <span class="label_span" v-if="infoObj.supplyType == 10">配送日期：</span>
              <span class="label_span" v-else>自提日期：</span>
              <span>{{ Dateval }}</span>
            </div>
            <div class="info_item">
              <span class="label_span" v-if="infoObj.supplyType == 10">配送地址：</span>
              <span class="label_span" v-else>自提地址：</span>
              <span class="span_ss">{{ infoObj.supplyAddress }}</span>
            </div>
            <div class="info_item">
              <span class="label_span">订单状态：</span>
              <span>{{ infoObj.orderStatusDescription }}</span>
              <span class="unimpor" v-if="infoObj.canceledRemark">({{ infoObj.canceledRemark }})</span>
            </div>
            <!-- <div class="info_item">
              <span class="label_span">发货状态：</span>
              <span v-if="infoObj.ordSupplyStatus==0">待发货</span>
              <span v-if="infoObj.ordSupplyStatus==10">已发货</span>
              <span v-if="infoObj.ordSupplyStatus==20">已取消</span>
            </div> -->
            <div class="info_item">
              <span class="label_span">联系人：</span>
              <span v-if="infoObj.ordContactName">{{ infoObj.ordContactName }}({{ infoObj.ordContactPhone }})</span>
            </div>
            <div class="info_item">
              <span class="label_span">备注：</span>
              <span class="span_ss">{{ infoObj.remark }}</span>
            </div>
          </div>
          <div class="tabmain">
            <el-table :data="dialogTable" show-summary :summary-method="getSummaries">
              <el-table-column label="商品" min-width="200">
                <template slot-scope="scope">
                  <GoodsItem :imageSrc="scope.row.productInfo.image"
                             :imageIsShow="imageIsShow"
                             :name="scope.row.productInfo.name"
                             :spec="scope.row.productInfo.spec"
                             :netContent="scope.row.productInfo.netContent"
                             :netContentUnit="scope.row.productInfo.netContentUnit"
                             :level="scope.row.productInfo.level"/>
                </template>
              </el-table-column>

              <el-table-column label="数量" align="right" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.productNum }} {{ scope.row.productInfo.spec }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="supplyPrice" label="单价" align="right" width="120">
              </el-table-column>

              <el-table-column prop="dtlAmount" label="金额" align="right" width="120">
              </el-table-column>

              <el-table-column prop="remark" label="备注">
              </el-table-column>

              <el-table-column prop="" label="出库" align="left" min-width="220">
                <template slot-scope="scope">
                 <div class="outpart" v-for="(every,secondindex) in scope.row.looplist" :key="secondindex">
                  <!-- :disabled="scope.row.looplist.length>1 && every.loopNum>0 && every.loopStockId.length>0 " -->
                  <div class="loop_input">
                    <el-select
                      style="width:120px"  
                      :disabled="scope.row.looplist.length>1 && every.loopNum>0 && every.loopStockId.length>0 "
                      v-model="every.loopStockId" 
                      @change="optionsChange(
                      every.loopStockId,
                      secondindex,
                      every.Eachwarehouse,
                      scope.$index,
                       scope.row,
                      )" 
                    placeholder="请选择">
                    <el-option
                      class="warehouseoption"
                      v-for="item in every.Eachwarehouse"
                      :key="item.id"
                      :label="item.storehouseName"
                      :value="item.id">
                        <div >{{ item.storehouseName }}</div>
                        <span class="warehousename">库存数量：{{ item.stockNumber }}</span>
                        <span class="warehousename">库存批次：{{ item.batchNo }}</span>
                    </el-option>
                    </el-select>
                    <!-- @change="((val)=>{handleChange(val,scope.row,scope.$index,secondindex)})"
                    :disabled="scope.row.looplist.length>1 && every.loopNum>0 && every.loopStockId.length>0 " -->
                    <el-input 
                      style="width:60px" 
                      @change="((val)=>{handleChange(val,scope.row,scope.$index,secondindex)})"
                      v-model="every.loopNum" 
                      placeholder="数量"
                    >
                    </el-input>
                  </div>
                  <div class="loop_iocn">
                    <i v-if="secondindex>0" @click="delLoop( secondindex, scope.$index, )" class="el-icon-delete"></i>
                    <i  @click="addLoop( every.loopNum,scope.row,scope.$index,secondindex)" class="el-icon-circle-plus-outline"></i>
                  </div>
                 </div>
                </template>
              </el-table-column>

              <el-table-column prop="proddate" label="生产日期" align="left" width="150">
                <template slot-scope="scope">
                  <div class="loop_time" v-for="(every,secondindex) in scope.row.looplist" :key="secondindex">
                    {{every.looproductdate}}
                  </div>
                  
                </template>
              </el-table-column>

              <el-table-column prop="expirationdate" label="过期日期" align="left" width="120">
                <template slot-scope="scope">
                   <div class="loop_time" v-for="(every,secondindex) in scope.row.looplist" :key="secondindex">
                    {{every.loopoverduedata}}
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="" label="凭证" align="left" min-width="200">
                <template slot-scope="scope">
                    <div class="imgpz"  v-for="(every,secondindex) in scope.row.looplist" :key="secondindex" @click="imgclick(every)">
                      <div  class="pzlistimg" v-for="(imgitem, imgindex) in every.files" :key="imgindex"  >
                        <img :src="imgitem.url">
                      </div>
                    </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="addPrint">出库并发货</el-button>
      </div>
    </el-dialog>


    <FileViewer :visible.sync="fileViewer.visible" :files="fileViewer.files"/>
  </div>
</template>


<script type="text/ecmascript-6">
import {Currenttimedate} from '../../utils/util'
import {canTeenAnalysisI} from "../../service/api/config";
import GoodsItem from '@/components/common/GoodsItem';
import FileViewer from "@/components/common/FileViewer"
import voucherApi from "@/service/api/voucher-api";

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)}
      }) : [];
}

function EachInventorySet(item) {
  return item
}

export default {
  components: {
    GoodsItem,
    FileViewer
  },
  props: {
    clickCell: {
      type: Function,
      default: function () {
      }
    }
  },
  data() {
    return {
      Deprodtime: "",
      errorimg: require('../../assets/img/nothing.png'),
      infoObj: {},
      zongjia: "",
      dialogTable: [],
      poploading: false,
      newimglist: [],
      mantext: "首页",
      displayshow: false,
      formLabelWidth: "140px",
      goodsprint: "",
      printList: [],
      markVal: "",
      publicobj: {},
      tableData: [],
      nametype: "",
      loading: true,
      sumnumber: "",
      Dateval: "",
      imageIsShow: true,
      //限制生产日期
      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年前的禁止
        }
      },
      fileViewer: {
        visible: false,
        files: []
      }
    };
  },
  mounted() {

  },
  destroyed() {

  },
  created() {
    var d = new Date();
    this.Deprodtime = this.$format(d, 'yyyy-MM-dd')
  },

  methods: {
    changeloop(Eachwarehouse,eachloop){
      let hasIds= eachloop.map(item => {
        if(item.loopStockId){
          return item.loopStockId
        }
      })
      var result = Eachwarehouse.filter(function (item) {
          return hasIds.every(function (ele) {
              return ele !== item.id
          })
      })
      return result
    },
    delLoop(secondindex,ondeindex){
      this.dialogTable[ondeindex].looplist.splice(secondindex, 1);
    },

    addLoop(val,item,oneindex,secondindex){
      let that =this;
      let row  = {
        Eachwarehouse:  this.changeloop(item.Eachwarehouse,this.dialogTable[oneindex].looplist),
        loopStockId:"",
        loopNum:"",
        looproductdate:"",
        loopoverduedata:"",
      }
      for (var i = 0; i < this.dialogTable[oneindex].looplist.length; i++) {
        if (
          this.dialogTable[oneindex].looplist[i].loopStockId == "" ||
          this.dialogTable[oneindex].looplist[i].loopStockId == null ||
          this.dialogTable[oneindex].looplist[i].loopStockId == undefined ||
          this.dialogTable[oneindex].looplist[i].loopNum == "" ||
          this.dialogTable[oneindex].looplist[i].loopNum == null 
        ) {
          this.$message("请选择仓库和填写出库数量");
          return;
          break;
        }
      }

      let sum = 0;
      this.dialogTable[oneindex].looplist.forEach(item =>{
          sum = sum + Number(item.loopNum)
      })
      if(sum> this.dialogTable[oneindex].productNum){
        this.dialogTable[oneindex].looplist[secondindex].loopNum = ""
        this.$message.error("出库数量不得大于 产品数量");
        return false
      }  
      if(Number(val)> this.dialogTable[oneindex].productNum){
        this.dialogTable[oneindex].looplist[secondindex].loopNum = ""
        this.$message.error("出库数量不得大于 产品数量");
        return false
      }
      if(this.dialogTable[oneindex].looplist[secondindex].Eachwarehouse.length==1){
        this.$message.error("没有过多的仓库了");
        return false
      }

      console.log("判斷是否一直加")
      console.log(this.dialogTable[oneindex].looplist[secondindex].Eachwarehouse)
      
      this.dialogTable[oneindex].looplist.push(row)
      this.$forceUpdate() 
    
    },
    handleChange(val,item,oneindex,secondindex){
      let that =this;
      if(Number(val)> this.dialogTable[oneindex].productNum){
        this.dialogTable[oneindex].looplist[secondindex].loopNum = ""
        this.$message.error("出库数量不得大于 产品数量");
        return false
      }
    },
    optionsChange(val,secondindex,list,oneindex,item) {
      var data= list.filter((item)=>{
        return  item.id===val
      }) 
      //this.dialogTable[oneindex].looplist[secondindex+1].Eachwarehouse = this.changeloop(item.Eachwarehouse,this.dialogTable[oneindex].looplist)

      this.dialogTable[oneindex].looplist[secondindex].looproductdate =this.$format(data[0].productionDate, 'yyyy-MM-dd');
      this.dialogTable[oneindex].looplist[secondindex].loopoverduedata =this.$format(data[0].expirationDate, 'yyyy-MM-dd');
      this.loadVouchers(
        this.dialogTable[oneindex].productInfo.id, 
        this.dialogTable[oneindex].looplist[secondindex].looproductdate,
        oneindex,
        secondindex
        )
    },
    loadVouchers(productIds, productionDate, oneindex,secondindex) {
      voucherApi.listByProducts({productIds: productIds, productionDate: productionDate})
          .then(vouchers => {
            console.log(vouchers)
            if (oneindex > -1) {// 刷新某个商品

              let row = this.dialogTable[oneindex].looplist[secondindex];
              row.files = convertFileUrlsToFiles(vouchers.map(item => item.fileUrls));

            } else {// 刷新所有产品
              this.dialogTable.forEach(row => {
                // 过滤出凭证 》过滤出对应的文件集合 》转换为一级的数组集合 》转换成页面需要的数据
                row.files = convertFileUrlsToFiles(vouchers.filter(item => item.productId === row.productInfo.id).map(item => item.fileUrls));
              });
            }
            
            // 此处不进行单个或者多个列表刷新，直接统一刷新整个数据
            this.$nextTick(() => {
              for (let i = 0; i < this.dialogTable.length; i++) {
                this.$set(this.dialogTable, i, this.dialogTable[i]);
              }
            })
            console.log(this.dialogTable)

          })
    },
    imgclick(item) {
      console.log(item)
      if (!item.files || item.files.length <= 0) {
        return;
      }
      this.fileViewer.files = item.files;
      this.fileViewer.visible = true;
    },
    seebig(item) {
      const viewer = this.$el.querySelector('.picall').$viewer
      viewer.show()
    },


    // 处理时间
    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;
        }
      }
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = "合计";
          return
        }
        if (index == 3) {
          sums[index] = this.sumnumber;
          return
        }
      });

      return sums;
    },

    //xxxxxxxxx
    addPrint() {
      console.log(this.dialogTable)
      let judgenum =true;
      let judgeid= true;
      this.dialogTable.forEach((ele, ind) => {
        if(ele.Eachwarehouse.length>0){ 
          let sum = 0;
          ele.looplist.forEach((single, index)=>{
            sum = sum + Number(single.loopNum)
            if(single.loopStockId==""){
              judgeid =false
              return false;
            }
          })
          if(sum!=ele.productNum){
            judgenum=false
            return false;
          } 
        }  
      });
      //alert(judgeid)
      if(judgeid==false){
        this.$message.error("请选择出库");
        return
      }
      if(judgenum==false){
        this.$message.error("出库数量一定要等于商品数量");
        return
      }  
      var arr = [];
      console.log(this.dialogTable)
      this.dialogTable.forEach((ele, ind) => {
        
        ele.looplist.forEach((single, index)=>{
          // if(single.loopStockId){
            let objs = {
            attachFileUrls:single.files?single.files.map(item => item.url):[],
            productionDate: single.looproductdate,
            expirationDate: single.loopoverduedata,
            shipNum: single.loopNum,
            productId: ele.productInfo.id,
            stockId:single.loopStockId
          };
          arr.push(objs);
          // }          
        })
      
      });
      let postdata = {
        orderId: this.infoObj.orderId,
        items: arr
      }
      console.log(postdata)

      this.$post(canTeenAnalysisI.OutboundAndDelivery, postdata)
      .then((res) => {
        if (res.code == 200) {
          this.$emit('fatherMethod', res.data);
          this.displayshow = false;
        } else {
          this.$message(res.message);
        }
      })

    },


    closeAdd() {
      this.displayshow = false;
    },
    // Changeshelftime(val) {
    //   let that = this;
    //   that.getqualityperioddata(val)
    // },
    getdetaile(val) {
      let that = this;
      this.imageIsShow = true;
      var postdata = val.orderId;

      this.displayshow = true;
      this.loading = true;

      this.$get(canTeenAnalysisI.orderModuleDetail + postdata)
          .then((res) => {
            if (res.code == 200) {
              let resData = res.data;

              this.infoObj = resData;
              this.sumnumber = (resData.orderAmount / 100).toFixed(2);

           
              let DetailID = [];
              resData.detailList.forEach((ele, ind) => {
                ele.supplyPrice = (ele.supplyPrice / 100).toFixed(2);
                ele.dtlAmount = (ele.dtlAmount / 100).toFixed(2);
                this.$set(ele, "proddate", "");
                this.$set(ele, "Eachwarehouse", []);
                this.$set(ele, "eachNum", '');
                this.$set(ele, "eachStockId", "");
                this.$set(ele, "expirationdate", "");
                this.$set(ele, "suresend", true);
                DetailID.push(ele.productInfo.id)
              })
              this.dialogTable = resData.detailList;
              this.loading = false;
              this.Inventory(DetailID.join(","))

            } else {
              this.$message(res.message);
            }
            this.loading = false;
          })
          .catch((err) => {
            console.log(err)
            this.dialogLoad = false;
            this.$message("请求服务器失败");
          })
    },
    // iiiii
    Inventory(ids){
     
        voucherApi.InventorCollection(ids)
        .then((resData) => {
          this.dialogTable.forEach(row => {
            row.Eachwarehouse = EachInventorySet(resData.filter(item => item.productId === row.productInfo.id));
          });
          this.dialogTable.forEach((ele, ind) => {
            this.$set(ele, "looplist", [
                {
                  Eachwarehouse:ele.Eachwarehouse,
                  loopStockId:"",
                  loopNum:"",
                  looproductdate:"",
                  loopoverduedata:"",
                }
              ]);
          })
           console.log(this.dialogTable)
        })

       
       
    },


  },
  watch: {}
};
</script>


<style>
.warehouseoption{
  height: 72px!important;
}
.warehouseoption div{
  line-height: 22px!important;
}
.warehousename{
  display: block!important;
  color: #8492a6; 
  font-size: 13px;
  line-height: 22px!important;
}
.sendgoodspage .viewer-canvas {
  z-index: 999 !important;
}

.nosure {
  font-size: 12px;

  color: red;
}

</style>


<style lang="less">
.pzlistimg {
  display: inline-block;
  margin-left: 10px;
}

.imgpz {
  width: 201px;
  height: 58px;
  white-space: nowrap;
  overflow: auto;
  // overflow-x: scroll;
  display: flex;

  img {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
}

.w_140 {
  width: 140px !important;
}

.shangping {
  display: flex;
}

.producemain {
  margin-left: 20px;

  span {
    display: block;
  }
}

.scopeproduce {
  color: #909399;
  margin-top: 4px !important;
}

.unimpor {
  color: #c7c9d1 !important;
}

.tabmain {
  width: 100%;
  padding-top: 20px;
}

.tongji {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #F5F7FA;
  box-sizing: border-box;
  padding: 0px 8px;

  span {
    display: inline-block;
  }
}

.allnum {
  margin-left: 543px;
  width: 102px;

  text-align: center;
}

.publich {
  text-align: center;
}

.eltitle {
  padding: 2px 0px;
  margin: 0px;
  font-size: 14px;
}

.bgline {
  width: 100%;
  height: 1px;
  background: #e8e8e8;
  margin-top: 14px;
  margin-bottom: 4px;
}

.imgpic {
  width: 100%;
  display: flex;

  .imagli {
    display: inline-block;
    margin-right: 8px;
  }
}

.border_none {
  border: none !important
}

.prindescript {
  div {
    display: inline-block;
    color: #bbb;
  }
}

.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: 110px;
    text-align: right;
  }

  .span_ss {
    display: inline-block;
    width: calc(100% - 120px);
    vertical-align: top;
  }
}
.outpart{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.loop_input{
  display: flex;
  align-items: center;
}
.loop_iocn{
  font-size: 18px;
}
.loop_time{
  height: 36px;
  line-height: 36px;
}

</style>

``