icore-pass/src/views/inward/components/truckAppoint/addPlan.vue

// 新增计划
<template>
  <div class="addInwardPlan">
    <page-title>新增计划</page-title>
  <div class="carrier form">
  <el-form  class="demo-form-inline"  label-width="80px" label-position="left">
  <el-form-item label="承运商">
    <el-autocomplete
      class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入承运商名称"
      :trigger-on-focus="false"
      @select="handleSelect"
    >
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
  </template>
    </el-autocomplete>
  </el-form-item>
  <div class="truckNum">
    <el-form  class="demo-form-inline"  label-width="80px" label-position="left">
    <el-form-item label="车数">
    <el-input   v-model="planTruckNumber" placeholder="必填" class="input"></el-input>
    </el-form-item>
  </el-form>
  </div>
</el-form>
</div>
    <template>
			<div>		
			<dilTable v-bind.sync="first" @radio-change="currentRadioChange" ref="table">
            <el-table-column fixed="right" label="操作" width="120">
                <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="tableData" 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>
		</template>
    <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 {
      restaurants: [],
      state2:null,
      planTruckNumber:null,
      carrierId:null,
      requirementId:null,
      form: {},
      first:{
        requestUrl:"/api/v1/ams/getTruckRequirementList?apiId=250&requirementStatus=2",
        selectionType: "radio",
				mapList: {},
      },
      numberValidateForm: {
          planTruckNumber: null,
      },
      //记录旧的row对象(未下发)
      oldRow: "",
      //记录上一个展开的点击次数，单数为展开状态，复数为闭合状态(未下发)
      oldRowCount: 1,
      //记录旧的row对象(已下发)
      oldRow1: "",
      //记录上一个展开的点击次数，单数为展开状态，复数为闭合状态(已下发)
      oldRowCount1: 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,
        },
      ],
      tableData: [],
      tableData1: [],
    };
  },
  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) => {
        this.tableData = res.data.data
        console.log(res.data.data)
      })
    },
    handleSelect(item){
      this.carrierId = item.carrierId
      this.state2 = item.carrierName 
    },
        //搜索
    querySearch(queryString, cb) {
        this.axios.post('/api/v1/uc/getCarrierMesByLike?index='+this.state2).then((res)=>{
        if(res.data.code == "200"){
          console.log(res)
          var restaurants = res.data.data
           var results = queryString ? restaurants.filter(this.createFilter(queryString)) :restaurants;
          // 调用 callback 返回建议列表的数据
          console.log(results,"results");
          cb(results);
        }
      })
       
      },
      createFilter(queryString) {
        return (restaurants) => {
          return (restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
    currentRadioChange(selection){
        this.mapList = selection
        this.requirementId = selection.requirementId
        console.log(this.mapList)
    },
    // 新增
    makeSure() {
      console.log(typeof(this.planTruckNumber))  
      if(this.carrierId == null){
        this.$alert('请输入承运商！')
        return
      }else if(this.planTruckNumber == null){
        this.$alert('请输入车数！')
        return
      }else if(this.requirementId== null){
        this.$alert('请选择需要制定计划的需求！')
        return
      }
      let plan = {
        requirementId : this.mapList.requirementId,
        planTruckNumber: this.planTruckNumber,
        carrierId: this.carrierId
      };
      this.axios
        .post(
          "/api/v1/ams/addTruckPlan",
          plan
        )
        .then((res) => {
            console.log(res)
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功!",
            });            
            this.$router.go(-1);
          } else {
            this.$message.error("新增失败！");
          }
        });
    },
    // 返回
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.addInwardPlan{
.carrier{
  display: inline-block !important;
  margin-left: 38%;
  .el-input{
    width:250px
  }
  .input{
    margin-left: -10px;
  }
  .el-form{
    padding: 10px;  
  }
}
.truckNum {
  .el-input{
    width: 250px;
  }
}
.button-box
{
  display: flex;
  justify-content: center;
  margin-left: 25px !important;
}
}


</style>