icore-pass/src/views/inward/components/truckOrder/decomposePlan.vue

// 分解计划
<template>
	<div class="desomposePlan">
		<page-title>分解计划</page-title>
        <dilTable v-bind.sync="first" >
		</dilTable>
    <div class="form-box">
        <el-form :inline="true" class="demo-form-inline" :label-position="left"  label-width="80px">
          <el-form-item label="选择路线">
            <el-input v-model="lineName" placeholder="必填" disabled > </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="drawerLine()">浏览</el-button>
          </el-form-item>
        </el-form>
    </div>
     <div class="box-form">
        <dil-form :formId="318" v-model="form"></dil-form>
    </div>
     <el-drawer
      :visible.sync="linedrawer"
      :direction="direction"
      :before-close="handleClose"
      size="40%"
    >
      <el-input placeholder="请输入内容" v-model="input"  style="margin-top: 10px;margin-right: 10px;width:250px;" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
   <dilTable v-bind.sync="zero" @radio-change="currentRadioChange1" ></dilTable>    
    </el-drawer>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="30%"
    >
      <el-input placeholder="请输入内容" v-model="input"  style="margin-top:10px;margin-right: 10px;width:250px;" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
   <dilTable v-bind.sync="second" @radio-change="currentRadioChange" ></dilTable>    
    </el-drawer>
		<div style="margin-left:0.625rem">
			<vxe-toolbar>
				<template #buttons>
					<vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
				</template>
			</vxe-toolbar>
		</div>
		<vxe-table v-model="tableData" keep-source border resizable show-overflow show-footer ref="xTable"
			max-height="400" :footer-method="footerMethod" :data="tableData"
			:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
			@edit-closed="editClosedEvent"
      @edit-actived="editActivedEvent">
			<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
			<vxe-table-column field="planNo" title="运输计划号">
          <template #edit="{ row }">
              <vxe-input v-model="row.planNo" type="text" disabled></vxe-input>
        </template>
			</vxe-table-column>
			<vxe-table-column field="requirementNo" title="运输需求号" 
			 >
      <template #edit="{ row }">
      <vxe-input v-model="row.requirementNo" type="text" disabled></vxe-input>
      </template>
			</vxe-table-column>
			<vxe-table-column field="materialName" title="物资名称"
			
			>
      <template #edit="{ row }">
      <vxe-input v-model="row.materialName" type="text" disabled></vxe-input>
      </template>
			</vxe-table-column>
			<vxe-table-column field="materialWeight" title="物资重量" width="100"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.materialWeight" type="text"></vxe-input>
      </template>  
			</vxe-table-column>
      <vxe-table-column field="materialNumber" title="物资数量" width="100"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.materialNumber" type="text" ></vxe-input>
      </template>       
			</vxe-table-column>
       <vxe-table-column field="capacityNumber" title="车牌号"
				:edit-render="{}"
				>
       <template #edit="{ row }">
      <vxe-input v-model="row.capacityNumber" type="text" disabled></vxe-input>
      </template>      
			</vxe-table-column>
		    <vxe-column title="操作" width="200">
            <template #default="{ row }">
              <vxe-button status="primary" @click="drawerCapacity(row)">选择车牌</vxe-button>
              <vxe-button status="danger" @click="removeRow(row)">删除</vxe-button>
            </template>
          </vxe-column>
		</vxe-table>
		<div class="button-box">
			<el-button type="primary" @click="makeSure">确认分解</el-button>
			<el-button type="primary" @click="cancel">返回</el-button>
		</div>
	</div>
</template>

<script>
import { getCookie } from "@/utils/util.js";
import PageTitle from "@/components/Page/Title";
export default {
  components: {
    PageTitle,
  },
  data() {
    return {
      userCarrierId:null,
      lineName:null,
      linedrawer:false,
      tableData:[],
      direction: "rtl",
      input:'',
      selectRow:null,
      drawer:false,
      purchaseOrderNo:"",
      planNo:"",
      requirementNo:"",
      materialName:"",
      materialWeight:null,
      materialNumber:null,
      carrierId:null,
      form: {},
      first:{
       requestUrl: "/api/v1/ams/getTruckPlanList?apiId=258&planStatus=2&planId="+this.$route.params.planId,
      },
      second:{
        requestUrl:"/api/v1/oms/getCapacityAndDriverList?apiId=246&carrierId=" + '',
        selectionType: "radio",
        mapList1:[]
      },
      zero:{
        requestUrl:"/api/v1/rms/getAllLineDesk?apiId=249",
        selectionType: "radio",
        mapList0:[]
      }
    };
  },
  created(){
    this.userCarrierId = getCookie("userId")
    this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246"
  },
  mounted(){
      this.information()
  },
  methods: {
    drawerCapacity(row){ 
      this.drawer = true;
      this.selectRow = row
      console.log(row.purchaseOrderNo)
      console.log(this.second.requestUrl)
    },
    drawerLine(){
      this.linedrawer = true
    },
    onclick(){
      if(this.input != ''){
        this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246&con="+this.input +"&carrierId=" + getCookie('userId');
      }else{
        this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246&carrierId=" + this.userCarrierId
      }     
    },
    currentRadioChange(selection){
      this.mapList1=selection,
      this.selectRow.capacityNumber = this.mapList1.capacityNumber
    },
    currentRadioChange1(selection){
      this.mapList0=selection
      this.lineName = this.mapList0.lineName
      console.log(this.mapList0.lineId)
    },
   handleClose(done){
      done();
    },
    sumNum (list, field) {
              let count = 0
              list.forEach(item => {
                count += Number(item[field])
              })
              return count
    },
    information() {
      //查看需求详情
      this.axios
        .post(
          "/api/v1/ams/getTruckPlanList?apiId=258&planStatus=2&planId=" + this.$route.params.planId
        )
        .then((res) => {
            console.log(res)
            const planRow = res.data.data.list
            this.purchaseOrderNo = planRow[0].purchaseOrderNo,
            this.requirementNo = planRow[0].requirementNumber,
            this.planNo = planRow[0].planNumber,
            this.materialName = planRow[0].materialName,
            this.materialWeight = planRow[0].materialWeight,
            this.materialNumber = planRow[0].materialNumber,
            this.carrierId = planRow[0].carrierId
        });
    },
    async insertEvent (row) {
              const $table = this.$refs.xTable
              const record = {
                purchaseOrderNo: this.purchaseOrderNo,
                requirementNo:this.requirementNo,
                planNo:this.planNo,
                materialName:this.materialName,
                materialWeight:this.materialWeight - (this.sumNum(this.$refs.xTable.getInsertRecords(), 'materialWeight')),
                materialNumber:this.materialNumber - (this.sumNum(this.$refs.xTable.getInsertRecords(), 'materialNumber'))          
              }
              const { row: newRow } = await $table.insertAt(record, row)
              await $table.setActiveCell(newRow, 'name')
            },
    //删除行
    async removeRow (row) {
              const $table = this.$refs.xTable
              await $table.remove(row)
            },
    // 修改
    makeSure() {
      if(this.mapList0.lineId == null){
        this.$alert('没有选择运输路线，请选择！')
        console.log(this.lineId)
        return
      }else if(typeof(this.form.orderType) == 'undefined'){
        this.$alert('没有选择订单类型，请选择')
        return
      }
      for(var i=0;i<this.$refs.xTable.getInsertRecords().length;i++){
        if(this.$refs.xTable.getInsertRecords()[i].capacityNumber == null){
          this.$alert('未选择车牌，请选择车牌')
          return
        }     
      }
      let BmsTrainFreight = {
          planId:this.$route.params.planId,
          lineId:this.mapList0.lineId,
          orderType:this.form.orderType,
          carrierId:this.carrierId,
          mapList:this.$refs.xTable.getInsertRecords()
      };
      console.log(BmsTrainFreight)
      this.axios
        .post("/api/v1/oms/addInwardOrder", BmsTrainFreight)
        .then((res) => {
          if (res.data.code == 200) {
            this.$router.go(-1);
            this.$message({
              type: "success",
              message: "分解成功!",
            });
            
          } else {
            this.$message.error("分解失败！");
          }
        });
    },
    // 返回
    cancel() {
      console.log(this.sumNum(this.$refs.xTable.getInsertRecords(), 'materialWeight'))
    },
  },
};
</script>

<style lang="scss" scoped>
.desomposePlan{
  .form-box{
  display: inline-block !important;
  margin-left: 38%;
  .el-input{
    width:288px
  }
  .el-form{
    padding: 10px;
  }
}
.box-form{
  // display: flex;
  // justify-content: center;
  padding-left: 40.5%;
  margin-right: 100px;
  .el-form-item__content {
    display: flex;
  }
}
.button-box{
  display: flex;
  justify-content: center;
  margin-left: 25px !important;
}
}

</style>