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

// 新增厂内内转需求
<template>
  <div class="inwardRequirement">
    <page-title>新增需求</page-title>
    <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="form-box">
        <dil-form :formId="300" v-model="form"></dil-form>
      </div>
      <div class="materialDrawer">
         <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="选择物资">      
        </el-form-item>
        <el-form-item > 
          <el-button type="primary" @click="ondrawer(1)" class="truckBtn"
          >浏览</el-button>
        </el-form-item>
        </el-form>
      </div>
      
      <!-- 物资和装卸点以及装卸货次序 -->
          <div class="swtichTop">
    <span class="titile">点击浏览选择物资之前请选择物资单位！</span>
    <div class="switch" v-if="tableData.length > 0">
      <el-tooltip placement="top">
        <div slot="content">下面表格已有数据，不能进行更改！！！</div>
        <el-switch
          v-model="value"
          active-text="件数"
          inactive-text="重量"
          disabled
        >
        </el-switch>
      </el-tooltip>
    </div>
    <div class="switch" v-else>
      <el-tooltip placement="top">
        <div slot="content">当下面表格有数据之后，将不能进行更改！！！</div>
        <el-switch v-model="value" active-text="件数" inactive-text="重量">
        </el-switch>
      </el-tooltip>
    </div>
    </div>
    <!-- 物资表格 -->
    <div class="truckListTable">
    <div class="selectionTable">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          align="center"
          show-overflow-tooltip
        >
          <template slot="scope" v-if="item.label !== '件数'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
                <!-- 装货点 -->
               <template v-if="item.prop == 'requirementPlatformName'">
                <el-input
                  class="textinput"
                  v-model="scope.row.requirementPlatformName"
                  disabled
                ></el-input>
              </template>
                <!-- 卸货点 -->
               <template v-if="item.prop == 'truckPoint1'">
                <el-input
                  class="textinput"
                  v-model="scope.row.truckPoint1"
                  disabled
                ></el-input>
              </template>
                <!-- 装卸货优先级 -->
               <template v-if="item.prop == 'materialPriority'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.materialPriority"
                  @input="onInputPriority(scope.row.materialPriority)"
                ></el-input>
              </template>
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderMaterialNumber'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderMaterialNumber"
                  @input="onInputNumber(scope.row.orderMaterialNumber)"
                ></el-input>
              </template>
              <!-- 物资重量 -->
               <template v-if="item.prop == 'orderMaterialWeight'">
                <el-input
                  v-model.number="scope.row.orderMaterialWeight"
                  @input="onInputWeight(scope.row.orderMaterialWeight)"
                ></el-input>
              </template>           
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click="loadPoint(scope.$index)">装货点</el-button>
            <el-button type="primary" @click="unloadPoint(scope.$index)">卸货点</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
     <!-- 物资模态框 -->
    <div class="drawSty">
      <el-drawer
      title="选择物资信息"
      :visible.sync="table"
      direction="rtl"
      size="40%"
      :show-close="false"
    >
      <el-input placeholder="请输入内容" v-model="inputMaterial" clearable > </el-input
      ><el-button type="primary" class="btn" @click="onclickMaterial">
        <i class="el-icon-search"></i>查询
      </el-button>
      <!-- <el-button @click="open">取消</el-button> -->
      <el-button type="primary" @click="makeSure1">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable ref="materialTable" v-bind.sync="materialTable" @selection-change="selectionChange" :drawer="aaadrawer">
        </dilTable>
      </div>
    </el-drawer>
    </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 == 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 {
      aaadrawer:false,
      disabled:false,
      options: [],
      value: '',
      // 件数与重量的开关
      value: false,
      //物资模态框开关
      table: false,
      //物资表格表头
      tableTop: [
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "requirementPlatformName",
          label: "装货点",
          slot:true,
          width: "140",
        },
        {
          prop: "truckPoint1",
          label: "卸货点",
          slot:true,
          width: "140",
        },
        {
          prop: "orderMaterialWeight",
          label: "重量",
          slot: true,
        },
      ],
      row: {},
      //物资表格数据
      tableData: [],
      materialName: null,
      requirementPlatformName: null,
      materialNum:null,
      materialWeight:null,
      a: 1,
      index:null,
      direction: "rtl",
      input:null,
      requiremntUnitId: null,
      requirementUnloadUnitId: null,
      requirementPlatformId: null,
      truckPoint: "",
      materialId: null,
      requireUnitName:null,
      inputMaterial:null,
      shipperId:null,
      truckPoint1: "",
      drawer: false,
      selectionList1: [],
      form: {},
      materialTable: {
        requestUrl: "",
        selectionType: "select",
        mapList1: []
      },
      second1: {
        requestUrl: "/api/v1/ams/getWareHouse?apiId=251",
        selectionType: "radio",
        mapList2: []
      }
    };
  },
  watch: {
    value() {
      if (this.value) {
        console.log(this.value)
        console.log(this.tableTop.length)
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialNumber",
          label: "件数",
          slot: true,
        });
      } else {
        this.tableTop.splice(this.tableTop.length - 1, 1);
        this.tableTop.push({
          prop: "orderMaterialWeight",
          label: "重量",
          slot: true,
        });
      }
    },
    table(val){
      if(val){
        this.aaadrawer = false;
      }else{
        this.aaadrawer = true;
      }
    }
  },
  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);
        };
      },
      // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
    unloadPoint(index) {
      console.log(index)
      this.index= index
      this.a = 3
      this.drawer = true;
    },
    loadPoint(index) {
      console.log(index)
      this.index = index
      this.a = 4
      this.drawer = true;
    },
    //以上是用车单位边输边查搜索
    ondrawer(num) {   
      if(num==1){
        this.table = true
        this.materialTable.requestUrl = "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date()
      }else{
        this.drawer = true;
      }  
      this.a = num;
    },
    handleClose(done) {
      done();
    },
    //删除行
    deleteRow(index, rows) {
      console.log(index)
      console.log("这里")
      rows.splice(index, 1);
    },
     // 返回主界面
    makeSure1() {
        this.selectionList1.forEach((e) => {
          console.log(e.materialModel,e.materialSpecification)
        if(e.materialSpecification == null){
          e.materialSpecification = ''
        }
        if(e.materialModel == null){
          e.materialModel = ''
        }
        var addmap = {
          materialName: e.materialName + e.materialSpecification+e.materialModel,
          materialId: e.materialId,
        };
        this.tableData.push(addmap);
      });
      this.selectionList1 = [];
      this.table = false;
    },
    refreshTable(){
      var arr = this.tableData
      this.tableData = []
      arr.forEach((e) => {
        var addmap = {
          materialName : e.materialName,
          materialId: e.materialId,
          requirementPlatformName:e.requirementPlatformName,
          truckPoint1:e.truckPoint1,
          requirementPlatformId:e.requirementPlatformId,
          requirementUnloadUnitId:e.requirementUnloadUnitId,
          orderMaterialNumber:e.orderMaterialNumber,
          orderMaterialWeight:e.orderMaterialWeight
        };
        this.tableData.push(addmap)        
      })
    },
    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) {
      if (this.a == 2) {
        this.truckPoint = selection.wareHouseName;
        this.requiremntUnitId = selection.wareHouseId;
      } else if (this.a == 3) {
        console.log(this.tableData[this.index])
        this.tableData[this.index].requirementUnloadUnitId = selection.wareHouseId;
        this.tableData[this.index].truckPoint1 = selection.wareHouseName
        this.refreshTable()
      } else if (this.a == 4) {
        console.log(this.tableData[this.index])
        this.tableData[this.index].requirementPlatformId = selection.wareHouseId;
        this.tableData[this.index].requirementPlatformName = selection.wareHouseName;
        this.refreshTable()
      }
    },
    // 新增
    makeSure() {
      console.log(this.tableData)
      console.log(typeof(this.form.requirementEstimatedDuration))
      if(this.shipperId == null){
        this.$message.error("请选择用车单位")
        return
      }if(typeof(this.form.requirementEstimatedDuration) == 'undefined'){
        this.$message.error("请输入预计用车时长")
        return
      }if(typeof(this.form.requirementTruckTime) == 'undefined'){
        this.$message.error("请输入用车时间")
        return
      }if(typeof(this.form.requirementType) == 'undefined'){
        this.$message.error("请选择需求类型")
        return
      }if(typeof(this.form.requirementWorkType) == 'undefined'){
        this.$message.error("请输入费用类别")
        return
      }if(this.tableData.length == 0){
        this.$message.error("请点击浏览选择物资")
        return
      }
      var i=0
      this.tableData.forEach((e) =>{
        if(e.requirementPlatformId&&e.requirementUnloadUnitId){
          i++
        }  
      })
      if(i==0){
         this.$message.error("请选择装卸点")
         return
      }
      console.log(this.tableData)
      debugger
      let requiremnet = {
        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,
        requirementShipperId: this.shipperId,
        mapList:this.tableData,
        orgCode:getCookie("orgCode")
      };
      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;
    }
  .drawSty{
  .el-input{
    width: 240px;
  }
}
.materialDrawer {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 320px;
  }
  .el-select{
    width: 320px;
  }
  .el-autocomplete{
    width: 320px;
  }
  .el-form {
    padding: 10px;
  }
  .truckBtn{
    width: 320px;
  }
}
.swtichTop{
  display: flex;
  height: 40px;
  align-content: center;
  justify-content: center;
  padding-right:20px ;
  .titile{
    color: red;
    font-size: 14px;
  }
  .switch{
    margin-right: -60px
  }
}
  .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>