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

// 分解计划
<template>
	<div id="endMaintenance">
		<page-title>分解计划</page-title>
    <dilTable v-bind.sync="first" >
		</dilTable>
    <div class="lineId from">
      <span class="text">选择路线：</span>
      <el-input class="input" v-model="lineName" disabled> </el-input>
      <el-button type="primary" @click="drawerLine()">浏览</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>
     <div class="form-box">
        <dil-form :formId="318" v-model="form"></dil-form>
    </div>
    <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 PageTitle from "@/components/Page/Title";
export default {
  components: {
    PageTitle,
  },
  data() {
    return {
      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&carrierId=1&planId="+this.$route.params.planId,
      },
      second:{
        requestUrl:"/api/v1/oms/getCapacityAndDriverList?apiId=246",
        selectionType: "radio",
        mapList1:[]
      },
      zero:{
        requestUrl:"/api/v1/rms/getAllLineDesk?apiId=249",
        selectionType: "radio",
        mapList0:[]
      }
    };
  },
  mounted() {
    this.information();
  },

  methods: {
    drawerCapacity(row){ 
      this.drawer = true;
      this.selectRow = row
      console.log(row.purchaseOrderNo)
    },
    drawerLine(){
      this.linedrawer = true
    },
    onclick(){
        this.second.requestUrl = "/api/v1/oms/getCapacityAndDriverList?apiId=246&con="+this.input
    },
    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&carrierId=1&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() {
      console.log(this.$refs.xTable.getInsertRecords())
      console.log(this.form)
      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">
.el-form-item{
  display: flex;
}
.form-box,
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.lineId {
  display: flex;
  justify-content: center;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .input{
    width: 250px;
    margin-right: 20px;
  }
}
</style>