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

<template>
  <!-- 新增运输作业页面 -->
  <div class="addPurRequirement">
    <page-title>运输预约</page-title>
    <div class="purchaseOrder from">
      <span class="text">卸货厂区:</span>
      <el-select
        v-model="purchaseOrgId"
        placeholder="请选择"
        @change="onchange()"
        ref="selectlb"
      >
        <el-option
          v-for="item in purchaseOrgList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="material from">
      <span class="text">物资：</span>
      <el-input class="input" v-model="materialName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(1)">浏览</el-button>
    </div>
    <div class="forwardingUnit from">
      <span class="text">发货单位：</span>
      <el-input class="input" v-model="supplierName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(2)">浏览</el-button>
    </div>
    <div class="shipName from">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="船名:">
          <el-autocomplete
            class="inline-input"
            v-model="stateConsignee"
            :fetch-suggestions="querySearchConsignee"
            placeholder="请输入船名"
            :trigger-on-focus="false"
            @select="handleSelectConsignee"
            @input="onInputShipName"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
    </div>
    <div class="forwardingUnit from">
      <span class="text">装货点：</span>
      <el-input class="input" v-model="loadPointName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(5)">浏览</el-button>
    </div>
    <div class="forwardingUnit from">
      <span class="text">卸货点：</span>
      <el-input class="input" v-model="unloadPointName" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(4)">浏览</el-button>
    </div>
    <div class="forwardingUnit from">
      <span class="text">采购订单号：</span>
      <el-input class="input" v-model="purchaseOrderNo" disabled> </el-input>
      <el-button type="primary" @click="ondrawer(6)">浏览</el-button>
    </div>
    <div class="carrier from">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="选择承运商:">
          <el-autocomplete
            class="inline-input"
            v-model="stateCarrier"
            :fetch-suggestions="querySearchCarrier"
            placeholder="请输入承运商名称"
            :trigger-on-focus="false"
            @select="handleSelectCarrier"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.carrierName }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
      </el-form>
    </div>
    <!-- 模态窗口 -->
    <el-drawer :visible.sync="drawer" :direction="direction" size="40%">
      <div style="margin-bottom: 10px">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          style="margin-top: 10px; margin-right: 10px; width: 250px"
          clearable
        ></el-input>
        <el-button type="primary" class="btn" @click="onclick(a)">
          <i class="el-icon-search"></i>查询
        </el-button>
      </div>
      <div v-show="a == 1">
        <dilTable
          v-bind.sync="frist"
          @radio-change="currentRadioChange1"
        ></dilTable>
      </div>
      <div v-show="a == 2">
        <dilTable
          v-bind.sync="secend"
          @radio-change="currentRadioChange2"
        ></dilTable>
      </div>
      <div v-show="a == 3">
        <dilTable
          v-bind.sync="third"
          @selection-change="currentRadioChange3"
        ></dilTable>
      </div>
      <div v-show="a == 4">
        <dilTable
          v-bind.sync="unloadPoint"
          @radio-change="currentRadioChange4"
        ></dilTable>
      </div>
      <div v-show="a == 5">
        <dilTable
          v-bind.sync="loadPoint"
          @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
      <div v-show="a == 6">
        <dilTable
          v-bind.sync="purchaseOrder"
          @radio-change="currentRadioChange6"
        ></dilTable>
      </div>
    </el-drawer>
    <div class="button_box">
      <el-button @click="onClickCancel">返回</el-button>
      <el-button type="primary" @click="onClickConfirm" :disabled="disabled"
        >确认</el-button
      >
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { sjTime, isNumber, isIntegerNumber } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      disabled: false,
      //船名
      remark: null,
      rangeId: null,
      stateConsignee: null,
      consigneeId: null,
      //车辆表格数据
      selectionList: [],
      stateCarrier: null,
      purchaseOrgId: null,
      // 表单
      form1: {},
      //采购订单号
      purchaseOrderNo: "",
      //采购订单id
      purchaseOrderId: "",
      //物资名称
      materialName: "",
      //发货单位名称
      supplierName: "",
      //发货单位id
      supplierId: null,
      carrierId: null,
      //物资id
      materialId: null,
      //是否需要打开模态窗口
      drawer: false,
      //卸货点id
      unloadPointId: "",
      //卸货点名称
      unloadPointName: "",
      //装货点id
      loadPointId: null,
      loadPointName: null,
      a: 1,
      direction: "rtl",
      input: "",
      frist: {
        requestUrl: "/api/v1/uc/queryAPOMaterialByLike?apiId=244&startNum=050",
        selectionType: "radio",
        mapList1: []
      },
      secend: {
        requestUrl:
          "/api/v1/uc/getSupplierMesByMaterialId?apiId=247&materialId=",
        selectionType: "radio",
        mapList2: []
      },
      third: {
        requestUrl: "",
        selectionType: "select",
        mapList3: []
      },
      unloadPoint: {
        requestUrl: "",
        selectionType: "radio"
      },
      loadPoint: {
        requestUrl: "",
        selectionType: "radio"
      },
      purchaseOrder: {
        requestUrl: "",
        selectionType: "radio"
      },
      purchaseOrgLable: null,
      purchaseOrgList: [
        {
          value: 1,
          label: "一厂"
        },
        {
          value: 2,
          label: "二厂"
        }
      ]
    };
  },
  watch: {
    drawer(val) {
      if (!val) {
        this.input = null;
      }
    }
  },
  created() {},
  methods: {
    onClick(index) {
      this.selectionList.splice(index, 1);
    },
    onInputShipName() {
      if (this.materialId == null) {
        this.$message.warning("请先选择物资！");
        return;
      }
    },
    onBlur() {
      this.getPurchaseOrderNo();
    },
    onchange() {
      this.getPurchaseOrderNo();
      console.log(this.purchaseOrgId);
      if (this.purchaseOrgId == 1) {
        this.purchaseOrgLable = "一厂";
        this.rangeId = 2;
      } else {
        this.purchaseOrgLable = "二厂";
        this.rangeId = 3;
      }
    },
    getPurchaseOrderNo() {
      let map = {
        materialId: this.materialId,
        supplierId: this.supplierId,
        purchaseOrgId: this.purchaseOrgId
      };
      if (this.stateConsignee) {
        map.remark = this.stateConsignee;
      }
      console.log(map);
      if (this.materialId && this.supplierId && this.purchaseOrgId) {
        this.axios.post("/api/v1/oms/selectNewOrderId", map).then(res => {
          console.log(res);
          if (res.data.code == "200") {
            if (res.data.data == null) {
              this.$message({
                message: "没有匹配的采购订单号!",
                type: "warning"
              });
              this.purchaseOrderNo = null;
              this.purchaseOrderId = null;
              this.remark = null;
              this.stateConsignee = null;
              this.form1 = [];
            } else {
              console.log();
              console.log(res.data.data);
              this.stateConsignee = res.data.data.remark;
              this.purchaseOrderId = res.data.data.purchaseOrderId;
              this.purchaseOrderNo = res.data.data.purchaseOrderNo;
            }
          } else {
            this.$message.error("请求失败");
          }
        });
      }
    },
    onclick(a) {
      if (a == 1) {
        this.frist.requestUrl =
          "/api/v1/uc/queryAPOMaterialByLike?apiId=244&startNum=050&index=" +
          this.input;
      } else if (a == 2) {
        this.secend.requestUrl =
          "/api/v1/uc/getSupplierMesByMaterialId?apiId=247&materialId=" +
          this.materialId +
          "&index=" +
          this.input;
      } else if (a == 4) {
        this.unloadPoint.requestUrl =
          "/api/v1/uc/getUnloadingMesByLike?apiId=374&index=" +
          this.input +
          "&i=" +
          new Date();
      } else if (a == 5) {
        this.loadPoint.requestUrl =
          "/api/v1/uc/getUnloadingMesByLike?apiId=374&index=" +
          this.input +
          "&i=" +
          new Date();
      } else if (a == 6) {
        this.purchaseOrder.requestUrl =
          "/api/v1/ams/getPurchaseOrderList?apiId=81&sendCompId=" +
          this.supplierId +
          "&con=" +
          this.input +
          "&i=" +
          new Date();
      }
    },
    ondrawer(num) {
      this.drawer = true;
      this.a = num;
      if (num == 2) {
        this.secend.requestUrl =
          "/api/v1/uc/getSupplierMesByMaterialId?apiId=247&materialId=" +
          this.materialId +
          "&i=" +
          new Date();
      } else if (num == 4) {
        this.unloadPoint.requestUrl =
          "/api/v1/uc/getUnloadingMesByLike?apiId=374" + "&i=" + new Date();
      } else if (num == 5) {
        this.loadPoint.requestUrl =
          "/api/v1/uc/getUnloadingMesByLike?apiId=374" + "&i=" + new Date();
      } else if (num == 6) {
        this.purchaseOrder.requestUrl =
          "/api/v1/ams/getPurchaseOrderList?apiId=81&sendCompId=" +
          this.supplierId +
          "&i=" +
          new Date();
      }
    },
    //承运商弹出层
    handleSelectCarrier(item) {
      this.carrierId = item.carrierId;
      item.carrierName = this.stateCarrier;
    },
    //以下是承运商边输边查搜索
    querySearchCarrier(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getCarrierMesByLike?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.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //以上是承运商边输边查搜索
    // 返回
    onClickCancel() {
      this.$router.push("/purInwardRequirement");
    },
    //选择物资
    currentRadioChange1(selection) {
      this.materialName = selection.materialName;
      this.materialId = selection.materialId;
      this.getPurchaseOrderNo();
    },
    //选择发货单位
    currentRadioChange2(selection) {
      this.supplierName = selection.supplierName;
      this.supplierId = selection.supplierId;
      this.getPurchaseOrderNo();
    },
    //选择卸货点
    currentRadioChange4(selection) {
      this.unloadPointId = selection.warehouseId;
      this.unloadPointName = selection.warehouseName;
    },
    //选择装货点
    currentRadioChange5(selection) {
      this.loadPointId = selection.warehouseId;
      this.loadPointName = selection.warehouseName;
    },
    //选择采购订单
    currentRadioChange6(selection) {
      console.log(selection);
      if (selection.orgId == 1) {
        this.purchaseOrgLable = "一厂";
        this.purchaseOrgId = 1;
      } else {
        this.purchaseOrgLable = "二厂";
        this.purchaseOrgId = 2;
      }
      this.materialName = selection.materialName;
      this.materialId = selection.materialId;
      this.supplierId = selection.supplierId;
      this.supplierName = selection.supplierName;
      this.purchaseOrderNo = selection.purchaseOrderNo;
      this.purchaseOrderId = selection.purchaseOrderId;
      this.stateConsignee = selection.resultForeignShipName;
    },
    currentRadioChange3(selection) {
      this.selectionList = [];
      this.selectionList = selection;
    },
    //收货单位弹出层
    handleSelectConsignee(item) {
      this.supplierName = item.supplierName;
      this.supplierId = item.supplierId;
      this.purchaseOrderId = item.purchaseOrderId;
      this.purchaseOrderNo = item.purchaseOrderNo;
      item.value = this.shipName;
    },
    //以下是收货单位边输边查搜索
    querySearchConsignee(queryString, cb) {
      if (this.materialId) {
        this.axios
          .post(
            "/api/v1/uc/getShipNameMesByLike?index=" +
              queryString +
              "&materialId= " +
              parseInt(this.materialId)
          )
          .then(res => {
            if (res.data.code == "200") {
              console.log(res);
              var restaurantsConsignee = res.data.data;
              var results = queryString
                ? restaurantsConsignee.filter(
                    this.createFilterConsignee(queryString)
                  )
                : restaurantsConsignee;
              // 调用 callback 返回建议列表的数据
              cb(results);
            }
          });
      }
    },
    createFilterConsignee(queryString) {
      return restaurantsConsignee => {
        return (
          restaurantsConsignee.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //以上是返回单位边输边查搜索
    // 确认
    onClickConfirm() {
      console.log(
        this.purchaseOrgLable,
        this.materialName,
        this.supplierName,
        this.purchaseOrderNo,
        this.unloadPointName,
        this.loadPointName,
        this.stateCarrier
      );
      this.disabled = true;
      var state = 0;
      if (
        this.materialId &&
        this.supplierId &&
        this.purchaseOrderId &&
        this.unloadPointId
      ) {
        state = 1;
      } else {
        if (!this.materialId) {
          this.$message({
            message: "请选择物资!",
            type: "warning"
          });
          this.disabled = false;
        } else if (!this.supplierId) {
          this.$message({
            message: "请选择发货单位!",
            type: "warning"
          });
          this.disabled = false;
        } else if (!this.purchaseOrderId) {
          this.$message({
            message: "没有匹配的采购订单号!",
            type: "warning"
          });
          this.disabled = false;
        } else if (!this.unloadPointId) {
          this.$message({
            message: "请选择卸货地点!",
            type: "warning"
          });
          this.disabled = false;
        }
      }
      if (state == 1) {
        let map = {
          materialId: this.materialId,
          purchaseOrderId: this.purchaseOrderId,
          unloadPointId: this.unloadPointId,
          loadPointId: this.loadPointId,
          carrierId: this.carrierId,
          rangeId: this.rangeId,
          userId: getCookie("orgCode")
        };
        console.log(map, map);
        this.axios
          .post("/api/v1/ams/addPurInwardRequirement", map)
          .then(res => {
            if (res.data.code == "200") {
              this.$message({
                message: "添加成功!",
                type: "success"
              });
              this.disabled = false;
              this.onClickCancel();
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scope>
.addPurRequirement {
  .contractDetails {
    width: 100%;
  }
  .from {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .remark {
    display: flex;
    justify-content: center;
    .text {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
  .lineId {
    display: flex;
    justify-content: center;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
    }
    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
  .shipName {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      .el-form-item {
        .el-input {
          width: 250px;
        }
      }
    }
  }
  .material {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
    }
    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
  .orderType {
    display: flex;
    justify-content: center;
    .text {
      display: inline-block;
      width: 110px;
      text-align: right;
    }
    .select {
      width: 250px;
    }
    .span {
      display: inline-block;
      width: 30px;
      height: 10px;
    }
  }
  .contractTitle {
    display: flex;
    justify-content: center;
    .el-form-item {
      display: flex;
      justify-content: center;
      .el-form-item__label {
        display: flex;
        align-items: center;
      }
      .el-input {
        width: 250px;
      }
    }
  }
  .forwardingUnit {
    display: flex;
    justify-content: center;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
    }
    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
  .purchaseOrderNo {
    display: flex;
    justify-content: center;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
    }
    .input {
      width: 250px;
      margin-right: 90px;
    }
  }
  .carrier {
    display: flex;
    .el-autocomplete {
      width: 250px;
    }
  }
  .button_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
  }
}
</style>