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="capacityButton">
      <el-button type="primary" class="truckBtn" @click="drawerCapacity()">浏览车牌号</el-button>
    </div>
    <el-drawer 
      :visible.sync="drawer" 
      :with-header="false"
      :destroy-on-close="true"
      direction="rtl"
      size="40%"
      :show-close="true"
      :wrapperClosable="false"
      close-on-press-escape
    >
      <el-input
        placeholder="请输入内容"
        v-model="truckText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="onConfirm"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="second"
          :isHeigth="isHeigth" :shiyHeigth="shiyHeigth" :isKuang="isKuang"
          @selection-change="currentRadioChange"
        ></dilTable>
      </div>
    </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="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 {
      truckText:null,
      shiyHeigth:140,
      isHeigth:true,
      isKuang:false,
      lineId:null,
      requirementId:null,
      capacityNumber:null,
      userCarrierId:null,
      lineName:null,
      linedrawer:false,
      tableData:[],
      direction: "rtl",
      input:null,
      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:[]
      },
      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(){
      console.log(this.truckText,"truckText")
      if(this.truckText != null){
        this.second.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId="+this.input +"&carrierId=" + getCookie('userId') + "&index=" + this.truckText;
      }else{
        this.second.requestUrl = "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + this.userCarrierId + "&i=" + new Date()
      }     
    },
    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() {
      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:Number(this.$route.params.planId),
          orderType:11,
          carrierId:this.carrierId,
          mapList:this.$refs.xTable.getInsertRecords()
      };
      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() {
      this.$router.go(-1);
    },
  },
};
</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 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  .truckBtn {
    width: 300px;
  }
  
}
.button-box{
  display: flex;
  justify-content: center;
  margin-left: 25px !important;
}
}

</style>