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

// 新增厂内内转需求
<template>
  <div class="inwardRequirement">
    <page-title>新增需求</page-title>
    <div>
      <div class="material form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="物资">
            <el-input v-model="materialName" disabled> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ondrawer(1)">浏览</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="materialWeight form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="物资重量">
            <el-input v-model="materialWeight"> </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="materialNum form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="物资数量">
            <el-input v-model="materialNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 用车单位 -->
      <div class="requireUnit form">
       <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="用车单位">
         <el-autocomplete
          class="inline-input"
          v-model="requireUnitName"
          :fetch-suggestions="querySearchCarrier"
          placeholder="请输入用车单位名称"
          :trigger-on-focus="false"
          @select="handleSelectCarrier"
        >
        <template slot-scope="{ item }">
          <div class="name">{{ item.shipperName }}</div>
        </template>
        </el-autocomplete>
        </el-form-item>
    </el-form>
    </div>
      <div class="unloadPoint form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="卸车点">
            <el-input v-model="truckPoint1" disabled> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ondrawer(3)">浏览</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="loadPoint form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="装车点">
            <el-input v-model="requirementPlatformName" disabled> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ondrawer(4)">浏览</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-box">
        <dil-form :formId="300" 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-left: 10px; width: 250px"
          clearable
        >
        </el-input>
        <el-button
          type="primary"
          class="btn"
          @click="onclick(a)"
          style="margin-bottom: 15px"
        >
          <i class="el-icon-search"></i>查询
        </el-button>
        <div v-show="a == 1">
          <dilTable
            v-bind.sync="materialTable"
            @radio-change="currentRadioChange1"
          ></dilTable>
        </div>
        <div v-show="a == 2">
          <dilTable
            v-bind.sync="second1"
            @radio-change="currentRadioChange2"
          ></dilTable>
        </div>
        <div v-show="a == 3">
          <dilTable
            v-bind.sync="second1"
            @radio-change="currentRadioChange2"
          ></dilTable>
        </div>
        <div v-show="a == 4">
          <dilTable
            v-bind.sync="second1"
            @radio-change="currentRadioChange2"
          ></dilTable>
        </div>
      </el-drawer>
    </div>
    <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";
import { sjTime } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      materialName: null,
      requirementPlatformName: null,
      materialNum:null,
      materialWeight:null,
      a: 1,
      direction: "rtl",
      input:null,
      requiremntUnitId: null,
      requirementUnloadUnitId: null,
      requirementPlatformId: null,
      truckPoint: "",
      materialId: null,
      requireUnitName:null,
      shipperId:null,
      truckPoint1: "",
      drawer: false,
      form: {},
      materialTable: {
        requestUrl: "",
        selectionType: "radio",
        mapList1: []
      },
      second1: {
        requestUrl: "/api/v1/ams/getWareHouse?apiId=251",
        selectionType: "radio",
        mapList2: []
      }
    };
  },
  methods: {
     //用车单位弹出层
    handleSelectCarrier(item){    
      this.shipperId = item.shipperId
      this.requireUnitName = item.shipperName 
    },
    //以下是用车单位边输边查搜索
    querySearchCarrier(queryString, cb) {
        this.axios.post('/api/v1/uc/getRequireUnitName?index='+queryString).then((res)=>{
        if(res.data.code == "200"){
          var restaurantsCarrier = res.data.data
          console.log(restaurantsCarrier,"restaurantsCarrier");
          var results = queryString ? restaurantsCarrier.filter(this.createFilterCarrier(queryString)) :restaurantsCarrier;
           // 调用 callback 返回建议列表的数据
          cb(results);
        }
        })     
      },
    createFilterCarrier(queryString) {
        return (restaurantsCarrier)  =>  {
          return (restaurantsCarrier.shipperName.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
    //以上是用车单位边输边查搜索
    ondrawer(num) {
      if(num==1){
        this.materialTable.requestUrl = "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date()
      }
      this.drawer = true;
      this.a = num;
    },
    handleClose(done) {
      done();
    },
    onclick(a) {
      if(this.input != null){
        if (a == 1) {
        this.materialTable.requestUrl =
          "/api/v1/uc/queryMaterialByLike?apiId=244&index=" + this.input;
          this.input = null
        } else {
        this.second1.requestUrl =
          "/api/v1/ams/getWareHouse?apiId=251&con=" + this.input;
          this.input = null
      }
      }else{
        this.materialTable.requestUrl = "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date()
      }
    },
    currentRadioChange1(selection) {
      this.mapList1 = selection;
      console.log(selection)
      if(selection.materialSpecification==null||selection.materialModel==null){
        this.materialName = this.mapList1.materialName
      }else{
        this.materialName = this.mapList1.materialName + selection.materialSpecification + '(' + selection.materialModel + ')';
      }
      
      this.materialId = selection.materialId;
    },
    currentRadioChange2(selection) {
      this.mapList2 = selection;
      if (this.a == 2) {
        this.truckPoint = selection.wareHouseName;
        this.requiremntUnitId = selection.wareHouseId;
      } else if (this.a == 3) {
        this.requirementUnloadUnitId = selection.wareHouseId;
        this.truckPoint1 = selection.wareHouseName;
      } else if (this.a == 4) {
        this.requirementPlatformId = selection.wareHouseId;
        this.requirementPlatformName = selection.wareHouseName;
      }
    },
    // 新增
    makeSure() {
      let requiremnet = {
        materialId: this.materialId,
        materialWeight: Number(this.materialWeight),
        materialNumber: Number(this.materialNum),
        requirementEstimatedDuration: this.form.requirementEstimatedDuration,
        requirementOverlimit: this.form.requirementOverlimit,
        requirementTruckTime: sjTime(this.form.requirementTruckTime),
        requirementType: this.form.requirementType,
        requirementWorkContent: this.form.requirementWorkContent,
        requirementWorkEnvironment: this.form.requirementWorkEnvironment,
        requirementWorkType: this.form.requirementWorkType,
        requirementUnloadUnitId: this.requirementUnloadUnitId,
        requirementPlatformId: this.requirementPlatformId,
        requirementShipperId: this.shipperId,
        orgCode:getCookie("orgCode")
      };
      console.log(requiremnet);
      debugger
      this.axios
        .post("/api/v1/ams/addTruckRequirement", requiremnet)
        .then(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">
.inwardRequirement {
  .from {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
    }
  .material {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
      }
    .input {
      width: 250px;
      margin-right: 20px;
      }
    }
    .materialWeight,
    .materialNum {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-right: 100px;
      .text {
        display: inline-block;
        width: 170px;
        text-align: right;
        .input {
          width: 250px;
          margin-right: 20px;
        }
      }
    }
    .requireUnit {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-right: 127px;
      .text {
        display: inline-block;
        width: 170px;
        text-align: right;
        .input {
          width: 250px;
          margin-right: 90px;
        }
      }
    }
    .loadPoint,
    .unloadPoint {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-right: 10px;
      .text {
        display: inline-block;
        width: 170px;
        text-align: right;
        .input {
          width: 250px;
          margin-right: 90px;
        }
      }
    }
  .form-box {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 212px;
    .el-form-item {
      display: flex;
      .el-form-item__label {
        width: 170px !important;
      }
      .el-input {
        width: 210px !important;
      }
    }
  }
  .button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-right: 90px;
  }
}
</style>