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

// 分解计划
<template>
	<div class="desomposePlan">
		<page-title>分解计划</page-title>
        <dilTable v-bind.sync="first" ref="table">
          <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="getRequirementMaterial(scope.row)">
                    物资详情
                  </el-button>
                </template>
              </el-table-column>
              <!-- 物资详情抽屉 -->
            <el-table-column type="expand" width="1">
            <template slot-scope="props">
            <el-form label-position="center" inline class="demo-table-expand">
              <div v-if="false">{{ props }}</div>
              <div>
                <el-table :data="tableData1" border >
                  <el-table-column
                    v-for="(item, i) in tableHead"
                    :key="i"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                  ></el-table-column>
                </el-table>
              </div>
            </el-form>
          </template>
          </el-table-column> 
		    </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>
    <div class="capacityButton">
      <el-button type="primary" class="truckBtn" @click="drawerCapacity()">浏览车牌号</el-button>
    </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:150px;" clearable> </el-input>
      <el-button type="primary" class="btn" @click="onclick()"  style="margin-bottom:15px">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button type="primary" class="btn" @click="onConfirm()"  style="margin-bottom:15px">
        <i class="el-icon-plus"></i>确认
      </el-button>
   <dilTable v-bind.sync="second" @selection-change="currentRadioChange" ></dilTable>    
    </el-drawer>
		<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="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 {
      lineId:null,
      requirementId:null,
      capacityNumber:null,
      userCarrierId:null,
      lineName:null,
      linedrawer:false,
      tableData:[],
      direction: "rtl",
      input:'',
      selectRow:null, 
      drawer:false,
      planNo:"",
      requirementNo:"",
      carrierId:null,
      form: {},
      first:{
       requestUrl: "/api/v1/ams/getTruckPlanList?apiId=258&planStatus=2&planId="+this.$route.params.planId,
      },
      second:{
        requestUrl:"/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null,
        selectionType: "select",
        mapList1:[]
      },
      zero:{
        requestUrl:"/api/v1/rms/getAllLineDesk?apiId=249",
        selectionType: "radio",
        mapList0:[]
      },
      oldRow: "",
      //记录上一个展开的点击次数，单数为展开状态，复数为闭合状态(未下发)
      oldRowCount: 1,
      tableHead: [
        {
          prop: "materialName",
          label: "物资名称",
          width: 150,
        },
        {
          prop:"loadName",
          label:"装货点",
          width:150
        },
        {
          prop:"unloadName",
          label:"卸货点",
          width:150
        },
        {
          prop:"loadSequence",
          label:"装卸货次序",
          width:150
        },
        {
          prop: "materialWeight",
          label: "物资重量",
          width: 150,
        },
        {
          prop: "materialCount",
          label: "物资数量",
          width: 150,
        },
      ],
      tableData1: [],
    };
  },
  created(){
    this.userCarrierId = getCookie("userId")
    this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246"
  },
  mounted(){
      this.information()
  },
  methods: {
    getRequirementMaterial(row) {
      // 记录重复点击次数
      if (this.oldRow === row) {
        this.oldRowCount += 1;
      }
      // 切换当前详情表
      this.$refs.table.toggleRowExpansion(row);
      // 打开前关闭上一个详情表
      if (this.oldRow != "") {
        if (this.oldRow != row) {
          if (this.oldRowCount % 2 === 1) {
            this.$refs.table.toggleRowExpansion(this.oldRow);
          } else {
            this.oldRowCount = 1;
          }
        } else {
          this.oldRow = null;
          return;
        }
      }
      // 重置上一个点击对象
      this.oldRow = row;
      this.getMaterial(row.requirementId);
    },
     getMaterial(requirementId){
      console.log(requirementId)
      this.axios.post("/api/v1/ams/getRequirementMaterial/" + requirementId).then((res) => {
        console.log(res.data.data);
        this.tableData1 = res.data.data
      })
    },
    drawerCapacity(){ 
      this.drawer = true;
      //重新初始化
      this.second.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null + "&i=" + new Date();
    },
    onConfirm(){
      console.log(this.mapList1)
      this.drawer = false
      this.mapList1.forEach((e) => {
          console.log((e.capacityNumber))
          this.capacityNumber = e.capacityNumber
          this.insertEvent()
      })
    },
    drawerLine(){
      this.linedrawer = true
    },
    onclick(){
      if(this.input != ''){
        this.second.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId="+this.input +"&carrierId=" + getCookie('userId');
      }else{
        this.second.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + this.userCarrierId
      }     
    },
    currentRadioChange(selection){
      this.mapList1=selection,
      console.log(this.mapList1)
    },
    currentRadioChange1(selection){
      this.mapList0=selection
      this.lineName = this.mapList0.lineName
      this.lineId = this.mapList0.lineId
      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.data.data)
            var planRow = res.data.data.list
            this.requirementNo = planRow[0].requirementNumber,
            this.planNo = planRow[0].planNumber,
            this.carrierId = planRow[0].carrierId,
            this.requirementId = planRow[0].requirementId
            console.log(this.requirementId)
            this.axios.post("/api/v1/ams/getRequirementMaterial/" + this.requirementId).then((res) => {
                console.log(res.data.data);
                this.tableData1 = res.data.data
      })    
        });
    },
    async insertEvent (row,) {
              const $table = this.$refs.xTable
              const record = {
                requirementNo:this.requirementNo,
                planNo:this.planNo,
                capacityNumber:this.capacityNumber,
                orderMaterialList:this.tableData1,   
              }
              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(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.lineId,
          orderType:this.form.orderType,
          carrierId:this.carrierId,
          mapList:this.$refs.xTable.getInsertRecords()
      };
      console.log(BmsTrainFreight)
      debugger
      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;
  }
}
.capacityButton {
  // width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 150px;
  .truckBtn {
    width: 300px;
  }
  
}
.button-box{
  display: flex;
  justify-content: center;
  margin-left: 25px !important;
}
}

</style>