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="377" v-model="form"></dil-form>
      </div>
      <!-- 设置装机备注 -->
      <div class="form-box">
        <label>装机备注</label>
        <el-select v-model="installremark" placeholder="装机必填">
          <el-option
            v-for="item in options6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="DueTime">
        <el-form :inline="true" style="margin-top: 0.5rem;">
          <el-form-item>
            <el-switch
              v-model="isOpenDueTime"
              active-text="打开截止日期"
              inactive-text="关闭截止日期"
            >
            </el-switch>
          </el-form-item>
          <div class="chooseDueTime">
            <el-form-item v-if="isOpenDueTime == true">
              <label
                class="el-form-item__label"
                style="width: auto; margin-left:10px;"
                >截止日期</label
              >
              <el-date-picker
                v-model="DueTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!--选择车辆类型-->
      <div class="capacity">
        <div class="capacityName">
          <el-form :inline="true" class="demo-form-inline" label-width="80px">
            <el-form-item label="选择车辆类型"> </el-form-item>
            <el-form-item>
              <el-input el-input v-model="capacityTypeName" disabled>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="ondrawer(3)" class="truckBtn"
                >浏览</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-drawer
          title="选择车辆类型"
          :visible.sync="drawer2"
          direction="rtl"
          size="40%"
          :show-close="false"
        >
          <div style="margin-left:-300px">
            <el-input
              placeholder="请输入内容"
              v-model="inputCapacityType"
              style="margin-left:20px;width: 250px"
              clearable
            >
            </el-input
            ><el-button type="primary" class="btn" @click="onclickCapacity">
              <i class="el-icon-search"></i>查询
            </el-button>
          </div>

          <!-- <el-button @click="open">取消</el-button> -->

          <div class="tablecls">
            <dilTable
              ref="options3"
              v-bind.sync="options3"
              @radio-change="selectionChange1"
              :drawer="aaadrawer"
            >
            </dilTable>
          </div>
        </el-drawer>
      </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'"
                    style="width:400px"
                  >
                    <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: 5px; 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" :disabled="disabled"
        >确认新增</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";
import { checkTel } from "@/utils/validator.js";
export default {
  components: { PageTitle },
  data() {
    return {
      aaadrawer: false,
      disabled: false,
      options6: [
        {
          value: "焦化",
          label: "焦化"
        },
        {
          value: "污粉",
          label: "污粉"
        },
        {
          value: "喷煤",
          label: "喷煤"
        },
        {
          value: "溶剂",
          label: "溶剂"
        },
        {
          value: "配料",
          label: "配料"
        },
        {
          value: "二次",
          label: "二次"
        },
        {
          value: "原料",
          label: "原料"
        },
        {
          value: "烧结矿",
          label: "烧结矿"
        },
        {
          value: "打堆、装车",
          label: "打堆、装车"
        },
        {
          value: "回收废旧物资",
          label: "回收废旧物资"
        }
      ],
      installremark: "",
      options: [],
      value: "",
      isOpenDueTime: true,
      inputCapacityType: null,
      DueTime: null,
      // 件数与重量的开关
      value: false,
      //物资模态框开关
      drawer2: 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,
      inputCapacityType: null,
      shipperId: null,
      truckPoint1: "",
      drawer: false,
      selectionList1: [],
      form: {},
      capacityTypeId: "",
      capacityTypeName: "",
      whether: "",
      materialTable: {
        requestUrl: "",
        selectionType: "select",
        mapList1: []
      },
      second1: {
        requestUrl: "",
        selectionType: "radio",
        mapList2: []
      },
      options3: {
        requestUrl: "",
        selectionType: "radio",
        mapList3: []
      },
      form: {}
    };
  },
  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;
    },
    getUnloadRequestUrl() {
      this.second1.requestUrl =
        "/api/v1/uc/getUnloadingMesByLike?apiId=374&i=" + new Date();
    },
    //以下是用车单位边输边查搜索
    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;
      console.log("selection", selection);
    },
    unloadPoint(index) {
      this.getUnloadRequestUrl();
      this.index = index;
      this.a = 3;
      this.drawer = true;
    },
    loadPoint(index) {
      this.getUnloadRequestUrl();
      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 if (num == 3) {
        this.drawer2 = true;
        this.options3.requestUrl = "/api/v1/uc/getCapacityType?apiId=460";
      } else {
        this.drawer = true;
      }
      this.a = num;
    },
    handleClose(done) {
      done();
    },
    onclickMaterial() {
      if (this.inputMaterial == null) {
        this.materialTable.requestUrl =
          "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date();
      } else {
        this.materialTable.requestUrl =
          "/api/v1/uc/queryMaterialByLike?apiId=244&index=" +
          this.inputMaterial;
        this.inputMaterial = null;
      }
    },
    onclickCapacity() {
      if (this.inputCapacityType == null) {
        this.options3.requestUrl = "/api/v1/uc/getCapacityType?apiId=460";
      } else {
        this.options3.requestUrl =
          "/api/v1/uc/getCapacityType?apiId=460&index=" +
          this.inputCapacityType;
        this.inputCapacityType = null;
      }
    },
    //删除行
    deleteRow(index, rows) {
      // console.log(index)
      // console.log("这里")
      rows.splice(index, 1);
    },
    // 返回主界面
    makeSure1() {
      console.log(this.tableData.length);
      if (this.tableData.length > 0 && this.selectionList1.length > 0) {
        this.$message.warning("一个需求只允许填写一个物资");
        return;
      }
      if (this.selectionList1.length > 1) {
        this.$message.warning("一个需求只允许填写一个物资");
        return;
      }
      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/uc/getUnloadingMesByLike?apiId=374&index=" + 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;
    },
    selectionChange1(radio) {
      console.log(radio);
      (this.capacityTypeName = radio.capacityTypeName),
        (this.capacityTypeId = radio.capacityTypeId),
        (this.whether = radio.whether);
    },
    currentRadioChange2(selection) {
      console.log(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.form.isMineral);
      // 判断当前装机是否选择了装机必填
      console.log("进来了");
      console.log(this.whether);
      console.log(this.installremark);
      if (this.whether == 2 && this.installremark == "") {
        console.log("确实进来了");
        this.$message.warning("请选择装机必填");
        return;
      }
      this.disabled = true;
      if (this.shipperId == null) {
        this.$message.error("请选择用车单位");
        this.disabled = false;
        return;
      }
      if (typeof this.form.requirementTruckTime == "undefined") {
        this.$message.error("请输入用车时间");
        this.disabled = false;
        return;
      }
      if (typeof this.form.transRange == "undefined") {
        this.$message.error("请选择运输起止范围");
        this.disabled = false;
        return;
      }
      if (typeof this.form.requirementType == "undefined") {
        this.$message.error("请选择需求类型");
        this.disabled = false;
        return;
      }
      if (this.tableData.length == 0) {
        this.$message.error("请点击浏览选择物资");
        this.disabled = false;
        return;
      }
      if (typeof this.form.requirementOverlimit != "undefined") {
        console.log(typeof this.form.remark == "undefined");
        if (typeof this.form.remark == "undefined") {
          this.$message.error("请填写超限备注");
          this.disabled = false;
          return;
        }
      }
      if (typeof this.form.Tel == "undefined") {
        this.$message.error("请填写联系电话");
        this.disabled = false;
        return;
      }
      var i = 0;
      this.tableData.forEach(e => {
        if (e.requirementPlatformId && e.requirementUnloadUnitId) {
          i++;
        }
      });
      if (i == 0) {
        this.$message.error("请选择装卸点");
        this.disabled = false;
        return;
      }
      // console.log(this.tableData)
      var DueTime;
      if (this.DueTime == null) {
        this.$message.warning("截止日期必填");
        this.disabled = false;
        return;
      }
      if (this.DueTime == null) {
        DueTime = null;
      } else {
        // 判断当前用户填写的截止日期是否大于当前时间
        let date2 = new Date();
        if (date2.getTime() > this.DueTime.getTime()) {
          this.$message.warning("截止日期必须大于当前时间！");
          this.disabled = false;
          return;
        } else {
          DueTime = sjTime(this.DueTime);
        }
      }
      if (this.form.capacityType == undefined) {
        this.form.capacityType = "";
      }
      if (this.form.typeRemarks == undefined) {
        this.form.typeRemarks = "";
      }
      let requiremnet = {
        requirementEstimatedDuration: this.form.requirementEstimatedDuration,
        requirementOverlimit:
          this.form.requirementOverlimit + this.form.remark + "米",
        requirementTruckTime: sjTime(this.form.requirementTruckTime),
        requirementType: this.form.requirementType,
        requirementWorkContent: this.form.requirementWorkContent,
        requirementWorkEnvironment: this.form.requirementWorkEnvironment,
        requirementWorkType: this.form.requirementWorkType,
        requirementShipperId: this.shipperId,
        rangeId: this.form.transRange,
        // 装机备注
        installremark: this.installremark,
        // 用车截日期
        DueTime: DueTime,
        // 用车类型Id
        capacityTypeId: this.capacityTypeId,
        mapList: this.tableData,
        orgCode: getCookie("orgCode"),
        remark: this.form.Tel + this.capacityTypeName + this.form.typeRemarks
      };
      console.log("requirement", requiremnet);
      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("新增失败！");
            this.disabled = false;
          }
        });
    },
    func(res) {
      console.log(res);
      this.isKuang = false;
    },
    // 返回
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.inwardRequirement {
  .from {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .drawSty {
    .el-input {
      width: 240px;
    }
  }
  .DueTime {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
    .chooseDueTime {
      margin-right: 70px;
    }
  }
  .capacity {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    margin-right: 10px;
  }
  .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: -30px;
    }
  }
  .requireUnit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .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-left: 10px;
    ::v-deep .el-form {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 500px;
      .el-form-item {
        .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>