icore-pass/src/views/WMS/components/billingOrder/updateBill.vue

// 采购内转需求
<template>
  <div class="admin">
    <template>
      <div class="admin1">
        <el-tabs v-model="activeName">
          <el-tab-pane label="修改提货单" name="first">
          <div class="admin2">
            <div class="carrier from">
                <el-form
                    :inline="true"
                    class="demo-form-inline"
                    label-width="80px"
                    >
                    <el-form-item label="车牌号:">
                    <el-autocomplete
                    class="inline-input"
                    v-model="capacityName"
                    :fetch-suggestions="querySearchCapacity"
                    placeholder="车牌号"
                    :trigger-on-focus="false"
                    @select="handleSelectCapacity"
                    >
                    <template slot-scope="{ item }">
                    <div class="name">{{ item.capacityNumber }}</div>
                    </template>
                    </el-autocomplete>
                    </el-form-item>
                </el-form>
            </div>
            <div></div>
            <div class="poundNo from">
                <span class="text">运输订单号:</span>
                <el-select v-model="orderId" placeholder="请选择" @change="changeOrderNo">
                <el-option
                    v-for="item in orderList"
                    :key="item.orderId"
                    :label="item.orderNumber" 
                    :value="item.orderId"
                >
                </el-option>
                </el-select>
            </div>
            <div class="material from">
                <span class="text">物资:</span>
                <el-select v-model="materialId" placeholder="请选择" @change="changeMaterial">
                <el-option
                    v-for="item in materialList"
                    :key="item.materialId"
                    :label="item.materialName" 
                    :value="item.materialId"
                >
                </el-option>
                </el-select>
            </div>
            <div class="material from"> 
                <span class="text">物资件数:</span>
                <el-input v-model="materialNum" ></el-input>
            </div>
            <div class="material from"> 
                <span class="text">发货单位:</span>
                <el-input v-model="shipperName" disabled></el-input>
            </div>
            <div class="material from"> 
                <span class="text">收货单位:</span>
                <el-input v-model="consigneeCompanyName" disabled></el-input>
            </div>
            <div class="material from"> 
                <span class="text">收货地址:</span>
                <el-input v-model="receiveAddressName" disabled></el-input>
            </div>
            <div class="material from"> 
                <span class="text">截止日期:</span>
                <el-input v-model="saleDateOfReceipt" disabled></el-input>
            </div>
        </div>
          <div class="button_box">
            <el-button type="primary" @click="onClickConfirm" :disabled = "disabled">确认</el-button>
          </div>
          </el-tab-pane>

        </el-tabs>
      </div>
    </template>
  </div>
</template>
<script>
import { isNumber } from "@/utils/sharedJsFile";
export default {
  data() {
    return {
        orderNumber:null,
        activeName:"first",
        capacityName:null,    
        stateCapacity:null,
        materialList:[],
        capacityId:null,
        materialId:null,
        disabled:false,
        orderId:null,
        orderList:[],
        materialNum:null,
        saleDateOfReceipt:null,
        consigneeCompanyName:null,
        receiveAddressName:null,
        shipperName:null
    };
  },
  methods: {    
    //运力弹出层
    handleSelectCapacity(item){
      console.log(item)
      this.capacityId = item.capacityId
      this.capacityName = item.capacityNumber
      this.axios.get("/api/v1/oms/getSteelOrderNum?capacityId=" + this.capacityId).then((res) =>{
          if(res.data.code == "200"){
              console.log(res.data.data)
              this.orderList = res.data.data
          }
      })
    },
    changeOrderNo(){
        console.log(this.orderNumber)
        this.axios.get("/api/v1/oms/getMesToSteelDepartment?orderId=" + this.orderId).then((res) => {
            this.materialList = res.data.data.materialMes
            this.saleDateOfReceipt = res.data.data.saleDateOfReceipt
            this.consigneeCompanyName = res.data.data.consigneeCompanyName
            this.receiveAddressName = res.data.data.receiveAddressName
            this.shipperName = res.data.data.shipperName
        })
    },
    changeMaterial(){
        console.log(this.materialId)
        this.materialList.forEach((e) => {
            if(e.materialId == this.materialId){
                this.materialNum = e.materialNum
                this.maxMaterialNum = e.materialNum
            }
        })
    },
    //以下是运力边输边查搜索
    querySearchCapacity(queryString, cb) {
        if(queryString.length < 3){
            return
        }
        this.axios.get('/api/v1/uc/getCapacityNumber?index='+queryString).then((res)=>{
        if(res.data.code == "200"){
          var restaurantsCarrier = res.data.data
          console.log(restaurantsCarrier,"restaurantsCarrier");
          var results = queryString ? restaurantsCarrier.filter(this.createFilterCarrier(queryString)) :restaurantsCarrier;
           // 调用 callback 返回建议列表的数据
          cb(results);
        }
        })     
      },
    createFilterCarrier(queryString) {
        return (restaurantsCarrier)  =>  {
          return (restaurantsCarrier.capacityNumber.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
    //以上是承运商边输边查搜索
    onClickConfirm(){
        if(!isNumber(this.materialNum)){
            this.$message.error("件数请输入数字")
            return
        }
        if((parseInt(this.materialNum) > parseInt(this.maxMaterialNum))){
            this.$message.error("修改后的数量不得大于提货单数量")
            return
        }
        if(this.materialNum == 0){
            this.$message.error("不能将物资数量修改为0")
            return
        }
        let updateNumMap = {
            orderId:this.orderId,
            materialId:this.materialId,
            materialNum:parseInt(this.materialNum)
        }
        this.axios.post("/api/v1/oms/updateMaterialMes",updateNumMap).then((res) => {
            console.log(res)
            if(res.data.code == '200'){
                this.$message.success("修改物资数量成功")
            }else{
                this.$message.error("新增失败请联系管理员")
            }
        })

    },
  },
};
</script>
<style lang="scss">
.admin{
  .admin1 {

      margin-top: 40px;
      margin-left: 40px;
      .switch {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20px;
          color: aqua;
      }
      .button_box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100px;
        }
      .admin2 {    
        margin-top: 40px; 
        .from {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;
        }
        .carrier{
            display: flex;
            justify-content: center;
            align-items: center;
            .el-form-item {
                text-align: right;
            }
            .el-autocomplete{
            width: 250px;
            }
        }
        .material {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-right: 100px;
        .text {
            display: inline-block;
            width: 170px;
            text-align: right;
        }
        .el-input {
            width: 250px;
        }
        }
        .poundNo {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
            display: inline-block;
            width: 170px;
            text-align: right;
                  }
            .el-input {
            width: 250px;
                    }
        }  
        .block {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-right: 100px;
            .el-input {
                width: 250px;
            }
            .text {
            display: inline-block;
            width: 170px;
            text-align: right;
            }
        }
        .truckCalFirst {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
                display: inline-block;
                width: 170px;
                text-align: right;
            }
            .el-input {
                width: 250px;
            }
        }
        .truckCalSecond {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
                display: inline-block;
                width: 170px;
                text-align: right;
            }
            .el-input {
                width: 250px;
            }
        }
        .secondWeight {
           display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
            display: inline-block;
            width: 170px;
            text-align: right;
                  }
            .el-input {
            width: 250px;
                    } 
        }
        .firstWeight {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
            display: inline-block;
            width: 170px;
            text-align: right;
                  }
            .el-input {
            width: 250px;
                    }
        }
        .netWeight {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-right: 100px;
            .text {
            display: inline-block;
            width: 170px;
            text-align: right;
                  }
            .el-input {
            width: 250px;
                    }
        }
      }      
  }
  }
</style>