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

// 新增计划
<template>
  <div class="addInwardPlan">
    <page-title>新增计划</page-title>
<div class="form-box">
<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"
      @input="oninput"
    >
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
  </template>
    </el-autocomplete>
  </el-form-item>
  <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>
</el-form>
</div>
    <template>
			<div>		
			<dilTable v-bind.sync="first" @radio-change="currentRadioChange">
			</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,
        }
    };
  },
  methods: {
    handleSelect(item){
      this.carrierId = item.carrierId
      item.carrierName = this.state2
    },
    oninput(){
      this.axios.post('/api/v1/uc/getCarrierMesByLike?index='+this.state2).then((res)=>{
        if(res.data.code == "200"){
          console.log(res)
          this.restaurants = res.data.data
        }
      })
    },
        //搜索
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        console.log(this.restaurants,"this.restaurants");
        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()) === 0);
        };
      },
    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{
    .form-box{
  display: inline-block;
  margin-left: 38%;
  .el-input{
    width:288px
  }
  .input{
    margin-left: -10px;
  }
  .el-form{
    padding: 10px;  
  }
}
.button-box
{
  margin-left: 25px !important;
}
}


</style>