icore-pass/src/views/inward/components/truckOrder/addPurInwardOrderCon.vue

<template>
  <div class="addSaleOrderSend">
    <page-title>新增运输订单派车</page-title>
    <!-- 零星订单表的数据 -->
    <div class="saleOrder">
      <dilTable v-bind.sync="option" @func="func"></dilTable>
    </div>
    <!-- 表单选择车辆-->
    <div class="from">
      <div class="line">
        <span class="text">线路</span>
        <el-input
          v-model="lineName"
          placeholder="请选择线路"
          disabled
        ></el-input>
        <el-button type="primary" @click="onClick(1)">浏览</el-button>
      </div>
      <div class="orderType">
        <span class="text">订单类型</span>
        <el-select v-model="orderType" placeholder="请选择">
          <el-option
            v-for="item in orderTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="vehicle">
        <span class="text">车辆</span>
        <el-button type="primary" @click="onClick(2)">浏览</el-button>
        <span class="span"></span>
      </div>
    </div>
    <!-- 派车表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      :visible.sync="lineDrawer"
      :with-header="false"
      :destroy-on-close="true"
      direction="rtl"
      size="40%"
      :show-close="true"
      :wrapperClosable="false"
      close-on-press-escape
    >
      <el-input
        placeholder="请输入内容"
        v-model="lineText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="line"
          @radio-change="currentRadioChange2"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 车辆模态框 -->
    <el-drawer
      :visible.sync="truckDrawer"
      :with-header="false"
      :destroy-on-close="true"
      direction="rtl"
      size="40%"
      :show-close="true"
      :wrapperClosable="false"
      close-on-press-escape
    >
      <el-input
        placeholder="请输入内容"
        v-model="truckText"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="selectTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button
        type="primary"
        class="btn"
        @click="AddTruckClick"
        style="margin-left: 5px"
      >
        <i class="el-icon-check"></i>确定
      </el-button>
      <div class="tablecls">
        <!-- 查询所有的车辆 -->
        <dilTable
          v-bind.sync="truck"
          :isHeigth="isHeigth"
          :shiyHeigth="shiyHeigth"
          :isKuang="isKuang"
          @selection-change="currentRadioChange1"
        ></dilTable>
      </div>
    </el-drawer>
    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure" :disabled="disabled"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      shiyHeigth: 140,
      isHeigth: true,
      isKuang: false,
      planId: null,
      disabled: false,
      //线路名称
      lineId: null,
      lineName: null,
      lineText: null,
      materialId: null,
      lineDrawer: false,
      //线路的表格
      line: {
        requestUrl: "",
        selectionType: "radio"
      },
      //订单类型
      orderTypeList: [
        {
          value: 10,
          label: "采购内转(铁专线-新区)"
        },
        {
          value: 20,
          label: "采购内转(铁专线-老区)"
        },
        {
          value: 15,
          label: "拼装车皮进厂(老区专线-老区)"
        },
        {
          value: 16,
          label: "一焦化采购内转"
        },
        {
          value: 23,
          label: "厂外内转-老区"
        },
        {
          value: 24,
          label: "厂外内转-二厂"
        }
      ],
      orderType: null,
      //已经选择车辆物资信息
      selectionList: [],
      //销售订单物资信息
      option: {
        // 表格请求数据的地址
        requestUrl: "",
        // 控制显示当选列
        isPagination: false
      },
      //是否打开选择车辆的模态框
      truckDrawer: false,
      //车辆的表格
      truck: {
        requestUrl: "",
        selectionType: "select"
      },
      tableTop: [
        {
          prop: "capacityNumber",
          label: "车牌号"
        }
      ],
      truckText: null,
      //当前多选选中的车辆
      selectTruck: []
    };
  },
  created() {
    this.option.requestUrl =
      "/api/v1/ams/getPurRequirementList?apiId=431&requirementStatus=1&planStatus=3&planId=" +
      this.$route.params.planId;
    if (getCookie("orgCode") == "chengyunshang") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
        getCookie("userId");
      this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3";
    } else if (getCookie("orgCode") == "biemeierchejian") {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=929059510763524096" +
        "&con=" +
        "铁专线精煤";
      this.line.requestUrl =
        "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3" +
        "&con=" +
        "采购内转";
    } else {
      this.truck.requestUrl =
        "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" + null;
      this.line.requestUrl = "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3";
    }
  },
  methods: {
    func(res) {
      console.log(res.list[0].materialId);
      this.materialId = res.list[0].materialId;
    },
    makeSure() {
      this.disabled = true;
      if (this.lineId == null) {
        if (this.orderType == 10 || this.orderType == 20) {
          this.$message.error("未选择路线");
          this.disabled = false;
          return;
        }
      } else if (this.selectionList.length == 0) {
        this.$message.error("未选择车辆");
        this.disabled = false;
        return;
      }
      this.axios
        .post("/api/v1/oms/addPurInwardOrder", {
          materialId: this.materialId,
          lineId: this.lineId,
          orderType: this.orderType,
          orderId: this.orderId,
          planId: this.$route.params.planId,
          mapList: this.selectionList,
          orgCode: getCookie("orgCode")
        })
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success("派车成功");
            this.disabled = false;
            this.cancel();
          }
        });
    },
    //点击取消按钮的事件
    cancel() {
      this.$router.push("/purInwardTruckOrder");
    },
    //点击删除按钮删除当前点击的对象
    deleteRow(index) {
      this.selectionList.splice(index, 1);
    },
    //车辆模态框的确定事件
    AddTruckClick() {
      if (this.a == 2) {
        this.selectTruck.forEach(e => {
          this.selectionList.push({
            capacityId: e.capacityId,
            capacityNumber: e.capacityNumber
          });
        });
        this.truckDrawer = false;
      } else {
        this.lineDrawer = false;
      }
    },
    //车辆模态框框计算
    selectTruckClick() {
      if (getCookie("orgCode") == "chengyunshang") {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" +
          getCookie("userId") +
          "&index=" +
          this.truckText +
          "&i=" +
          new Date();
      } else {
        this.truck.requestUrl =
          "/api/v1/uc/getAllCapacityByCarrierLike?apiId=248&carrierSsoId=" +
          null +
          "&index=" +
          this.truckText +
          "&i=" +
          new Date();
      }
    },
    //车辆表格
    currentRadioChange1(select) {
      this.selectTruck = [];
      this.selectTruck = select;
    },
    currentRadioChange2(selection) {
      this.lineId = selection.lineId;
      if (selection.lineName == null && selection.lineDesk == null) {
        this.lineName = "";
      } else {
        this.lineName = selection.lineName + "  " + selection.lineDesk;
        this.lineId = selection.lineId;
      }
    },
    onClick(num) {
      this.a = num;
      if (num == 2) {
        if (getCookie("orgCode") == "chengyunshang") {
          this.truck.requestUrl =
            "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
            getCookie("userId") +
            "&i=" +
            new Date();
        } else if (getCookie("orgCode") == "biemeierchejian") {
          this.truck.requestUrl =
            "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=929059510763524096" +
            "&con=" +
            "铁专线精煤" +
            "&i=" +
            new Date();
        } else {
          this.truck.requestUrl =
            "/api/v1/uc/getAllCapacityByCarrierLike?apiId=429&carrierSsoId=" +
            null +
            "&i=" +
            new Date();
        }
        this.truckDrawer = true;
      } else {
        this.lineDrawer = true;
        this.line.requestUrl =
          "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&i=" + new Date();
      }
    },
    //线路表格的框计算
    selectClick() {
      this.line.requestUrl =
        "/api/v1/rms/getAllLineDesk?apiId=249&lineType=3&con=" + this.lineText;
    }
  }
};
</script>
<style lang="scss" scoped>
.addSaleOrderSend {
  .from {
    margin-top: 20px;
    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .vehicle {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .el-button {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
      .span {
        width: 70px;
      }
    }
  }
  .orderType {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-right: 130px;
    .el-select {
      padding-left: 10px;
    }
  }
  .tablecls {
    margin-top: 20px;
  }
  .button_box {
    display: flex;
    justify-content: center;
    margin: 20px;
    .el-button {
      width: 100px;
      margin-left: 20px;
    }
  }
}
</style>