icore-pass/src/views/appoint/components/ship/addDeliveryNotice.vue

<template>
  <!-- 添加发货通知 -->
  <div class="shipTransport">
    <page-title>返回</page-title>
    <!-- <div class="mofrom">
      <span class="motext">物资</span>
      <el-input class="moinput" v-model="materialName" disabled> </el-input>
      <el-button class="mobutton" type="primary" @click="ondrawer(1)"
        >浏览</el-button
      >
    </div> -->
    <!-- 货权转移送达单位 
    <div class="mofrom">
      <span class="motext">货权转移送达单位</span>
      <el-input class="moinput" v-model="cargo" disabled> </el-input>
      <el-button class="mobutton" type="primary" @click="ondrawer(2)"
        >浏览</el-button
      >
    </div>-->
    <!--大品类 -->
    <div class="mofrom">
      <span class="motext">大品类</span>
      <el-input class="moinput" v-model="materialType" disabled> </el-input>
      <el-button class="mobutton" type="primary" @click="ondrawer(4)"
        >浏览</el-button
      >
    </div>

    <!-- 货权转移送达单位 -->
    <div class="mofrom">
      <span class="motext">收货人</span>
      <el-input class="moinput" v-model="receiver" disabled> </el-input>
      <el-button class="mobutton" type="primary" @click="ondrawer(3)"
        >浏览</el-button
      >
    </div>

    <!-- 批次 -->
    <div class="mofrom">
      <span class="motext">批次</span>
      <el-input class="moinput" v-model="batchIds" disabled> </el-input>
      <el-button class="mobutton" type="primary" @click="ondrawer(5)"
        >选批次</el-button
      >
      <el-button class="mobutton" type="primary" @click="ondrawer(6)"
        >录批次</el-button
      >
    </div>
    <div class="form">
      <div class="form_box">
        <el-form>
          <div class="preview-group">
            <el-form-item label="发货港口:">
              <el-select v-model="portId" filterable>
                <el-option
                  v-for="port in ports"
                  :key="port.portId"
                  :label="port.portName"
                  :value="port.portId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <dil-form
          :formId="112"
          v-model="form1"
          ref="from1"
          @change="onchange"
        ></dil-form>
      </div>
      <!-- <div class="liulan">
        <el-button type="primary" class="btn" @click="ondrawer(4)">浏览</el-button>
      </div> -->
    </div>

    <!-- 模态框 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="margin-top: 10px; margin-left: 20px; width: 200px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick(a)"
        style="margin-bottom: 15px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-input
       v-show="a == 6"
        placeholder="请输入外轮船名"
        v-model="foreignShipName"
        style="width: 200px"
        clearable
      ></el-input>
      <el-button
      v-show="a == 6"
        type="primary"
        class="btn"
        @click="handleClose"
        style="margin-bottom: 15px"
      >确定
      </el-button>
      <!-- <div v-show="a == 4">
        <dilTable v-bind.sync="options" @radio-change="currentRadioChange6"></dilTable>
      </div> -->
      <!-- <div v-show="a == 1">
        <dilTable
          v-bind.sync="second"
          @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="second2"
          @radio-change="currentRadioChange3"
        ></dilTable>
      </div>
      <div v-show="a == 4">
        <dilTable
          v-bind.sync="second3"
          @radio-change="currentRadioChange4"
        ></dilTable>
      </div>
      <div v-show="a == 5">
        <dilTable
          v-bind.sync="second5"
          @radio-change="currentRadioChange5"
        ></dilTable>
      </div>
      <div v-show="a == 6">
        <dilTable
          v-bind.sync="second6"
          @radio-change="currentRadioChange6"
        ></dilTable>
      </div>
    </el-drawer>
    <el-form
      :inline="true"
      class="demo-form-inline"
      label-width="80px"
      style="margin-left: 450px; display: flex"
    >
      <el-form-item label="上传货权转移附件">
        <el-upload
          class="upload-demo"
          style="width: 270px"
          ref="upload1"
          accept=".pdf , .jpg, .png, .jpeg, .tif, .gif, .pcx, .tga, .exif, .fpx, .svg , .bmp"
          action="/api/v1/tms/uploadCargoPic"
          :before-upload="beforeUpload"
          :multiple="false"
          list-type="picture"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="onError(1)"
        >
          <span class="span"></span>
          <el-input
            class="shippingCertificate"
            style="width: 270px; display: flex"
            placeholder="请选择货权附件(必填项)"
            v-model="shippingCertificate"
            disabled
          >
          </el-input>
          <el-button
            size="small"
            type="primary"
            style="
              width: 115px;
              height: 35px;
              margin-left: 275px;
              margin-top: -35px;
              display: flex;
            "
            @click="upCLick(1)"
          >
            点击上传附件</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 确定和取消 -->
    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure" :loading="isLoading"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime, isNumber } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      isLoading: false,
      a: 1,
      cargoPictureUrl: "",
      shippingCertificate: "",
      portId: null,
      ports: [],
      materialType: "",
      receiver: "",
      input: "",
      drawer: false,
      direction: "rtl",
      batchId: null,
      form1: {},
      second1: {
        requestUrl: "/api/v1/tms/selectShippeByName?apiId=215",
        selectionType: "radio",
        mapList2: [],
      },
      second2: {
        requestUrl: "/api/v1/tms/getGroupList?apiId=217",
        selectionType: "radio",
        mapList3: [],
      },
      second3: {
        requestUrl: "/api/v1/rms/getMaterialTypeList?apiId=376",
        selectionType: "radio",
        mapList4: [],
      },
      second5: {
        requestUrl: "/api/v1/tms/getBatchIdByForeign?apiId=489",
        selectionType: "radio",
        mapList5: [],
      },
      second6: {
        requestUrl: "/api/v1/uc/queryMaterialByLike?apiId=244",
        selectionType: "radio",
      },
      foreignShipName:null,
      value: undefined,
      value2: undefined,
      value4: undefined,
      value5: undefined,
      value6: undefined,
      value7: undefined,
      value8: undefined,
      batchIds: null,
      portName: null,
    };
  },
  computed: {
    contactPerson() {
      return this.form1.resultContactPerson;
    },
  },
  watch: {
    contactPerson() {
      this.getPersonInfo();
    },
  },
  mounted() {
    // this.$set(this.form1, "requesterGroupId", 1); //委托单位（requesterGroupId）承运单位（carrierId）转移到提货委托
    // this.$set(this.form1, "carrierId", 11);
    this.getPorts();
  },
  methods: {
    //查询所有港口
    getPorts() {
      this.axios.post("/api/v1/rms/getPortName?index=").then((res) => {
        if (res.data.code == 200) {
          //赋值
          this.ports = res.data.data;
        } else {
          this.$message({
            type: "warning",
            message: res.data.data,
          });
        }
      });
    },

    getPersonInfo() {
      this.axios
        .post(
          "/api/v1/tms/getNoticeContactNumberByPerson?personName=" +
            this.form1.resultContactPerson
        )
        .then((res) => {
          // this.$set(this.form1, "resultContactPerson", res.data.data.personName);
          this.$set(
            this.form1,
            "resultTelephoneFax",
            res.data.data.personPhone
          );
          console.log(this.form1);
        });
    },

    upCLick(val) {
      this.num = val;
    },

    beforeUpload(file) {
      this.upBool = true;
      const isLt2M = file.size < 1024 * 1024 * 3;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过3MB!");
      } else {
        let size = file.size / 1024;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.src = _URL.createObjectURL(file);
      }
      return isLt2M;
    },

    onError(err) {
      if (this.upBool) {
        if (this.num == 1) {
          this.shippingCertificate = null;
          this.cargoPictureUrl = null;
          // this.$message.error("上传失败");
        }
      }
    },

    handleAvatarSuccess(res, file) {
      if (res.code) {
        this.upBool = false;
        if (this.num == 1) {
          this.cargoPictureUrl = res.data;
          this.shippingCertificate = file.name;
        }
        this.$message.success("上传成功");
      }
    },

    currentRadioChange() {
      console.log(1);
    },

    ondrawer(num) {
      this.drawer = true;
      this.a = num;
      // 清空当前输入框中的数据
      this.input = "";
    },

    currentRadioChange2(selection) {
      (this.second1.mapList2 = selection), (this.cargo = selection.cargoName);
    },
    currentRadioChange3(selection) {
      (this.second2.mapList3 = selection), (this.receiver = selection.pierName);
    },
    currentRadioChange4(selection) {
      (this.second3.mapList4 = selection),
        (this.materialType = selection.materialTypeName);
    },
    currentRadioChange5(selection) {
      (this.second5.mapList5 = selection),
        (this.batchIds =
          selection.foreignShipName + "" + selection.materialName);
    },
    currentRadioChange6(selection) {
      this.second5.mapList5 = selection;
      console.log("selection",selection);
    },
    checkForeignShipName(){
      if(this.foreignShipName==null || this.foreignShipName==''){
        this.$message.warning("请输入外轮船名!");
        return false;
      }
      return true;
    },
    onchange(val) {},

    onclick(a) {
      if (a == 2) {
        this.second1.requestUrl =
          "/api/v1/tms/selectShippeByName?apiId=215&con=" + this.input;
      } else if (a == 3) {
        this.second2.requestUrl =
          "/api/v1/tms/getGroupList?apiId=217&con=" + this.input;
      } else if (a == 4) {
        // console.log("aaaa");
        this.second3.requestUrl =
          "/api/v1/rms/getMaterialTypeList?apiId=376&con=" + this.input;
      } else if (a == 5) {
        this.second5.requestUrl =
          "/api/v1/tms/getBatchIdByForeign?apiId=489&con=" + this.input;
      }else if(a == 6){
          this.second6.requestUrl = 
          "/api/v1/uc/queryMaterialByLike?apiId=244&index=" + this.input;
      }
    },
    //关闭模态框窗口
    handleClose(done) {
      if(this.a==6){
        //校验外轮船名和批次
        if(!this.checkForeignShipName()){
          return;
        }else if(this.second5.mapList5.length == 0){
          this.$message.warning("请选择物资!");
          return;
        }
        this.batchIds = this.foreignShipName + "" + this.second5.mapList5.materialName;
        this.second5.mapList5.foreignShipName = this.foreignShipName;
      }
      this.drawer=false;
      done();
    },

    makeSure() {
      this.isLoading = true;
      if (this.second2.mapList3.length == 0) {
        this.$message.warning("请选择收货人");
        this.isLoading = false;
        return;
      }
      if (this.second3.mapList4.length == 0) {
        this.$message.warning("请选择物资品类");
        this.isLoading = false;
        return;
      }
      if (this.second5.mapList5.length == 0) {
        this.$message.warning("请选择批次");
        this.isLoading = false;
        return;
      }
      //判断是否为电话号码
      function isTelePhone() {
        var value2 = map.resultTelephoneFax;
        //验证是否为数字
        var patrn = /^1[3-9]\d{9}$/;
        if (patrn.exec(value2) == null || value2 == "") {
          return false;
        } else {
          return true;
        }
      }

      //电话号码赋值
      var val2 = this.value2;
      let map = {
        noticeCommerceMethod: this.form1.noticeCommerceMethod,
        noticeHandoverMethod: this.form1.noticeHandoverMethod,
        portId: this.portId,
        noticePortConstructionFee: this.form1.noticePortConstructionFee,
        noticeDeliveryTime: sjTime(this.form1.noticeDeliveryTime),
        noticePileFreeDays: this.form1.noticePileFreeDays,
        batchIds: this.second5.mapList5.batchId,
        purchaseContractUnitPrice: this.form1.purchaseContractUnitPrice,
        purchaseContractMoisture: this.form1.purchaseContractMoisture,
        portName: this.portName,
        //微元素含量
        tfeContent: this.form1.tfeContent,
        silicaContent: this.form1.silicaContent,
        aluminaContent: this.form1.aluminaContent,
        phosphorusContent: this.form1.phosphorusContent,
        manganeseContent: this.form1.manganeseContent,
        resultContactPerson: this.form1.resultContactPerson,
        resultTelephoneFax: this.form1.resultTelephoneFax,
        resultFreightForwardingInfo: this.form1.resultFreightForwardingInfo,
        resultMemo: this.form1.resultMemo,
        resultNumberOfLoans: this.form1.resultNumberOfLoans,
        cargoId: this.second1.mapList2.cargoId,
        groupId: this.second2.mapList3.id,
        foreignShipName: this.second5.mapList5.foreignShipName,
        materialId: this.second5.mapList5.materialId,
        materialTypeId: this.second3.mapList4.materialTypeId,
        isNeedPortDisCharge: this.form1.isNeedPortDisCharge,
        isNeedPortFee: this.form1.isNeedPortFee,
        isNeedBonded: this.form1.isNeedBonded,
        cargoPictureUrl: this.cargoPictureUrl,
        sulfurcontent: this.form1.sulfurcontent,
        userId: getCookie("userId"),
      };
      
      //判断放货数量是否为数字
      if (
        map.noticeCommerceMethod == null ||
        map.noticeHandoverMethod == null ||
        map.noticePortConstructionFee == null ||
        map.noticeDeliveryTime == null ||
        map.noticePileFreeDays == null ||
        map.purchaseContractUnitPrice == null ||
        map.purchaseContractMoisture == null ||
        map.tfeContent == null ||
        map.silicaContent == null ||
        map.aluminaContent == null ||
        map.phosphorusContent == null ||
        map.resultContactPerson == null ||
        map.resultTelephoneFax == null ||
        map.resultNumberOfLoans == null ||
        map.portId == null ||
        map.groupId == null ||
        map.isNeedPortDisCharge == null ||
        map.isNeedPortFee == null ||
        map.isNeedBonded == null
      ) {
        this.$message.error("存在空值！");
        this.isLoading = false;
        return;
      }
      if (!isTelePhone(val2)) {
        this.$message.warning("电话号码或传真格式不正确");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.noticePortConstructionFee != "undefined" &&
        !isNumber(map.noticePortConstructionFee)
      ) {
        this.$message.error("港建费金额得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.purchaseContractMoisture != "undefined" &&
        !isNumber(map.purchaseContractMoisture)
      ) {
        this.$message.error("合同水分得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.noticePortConstructionFee != "undefined" &&
        !isNumber(map.noticePortConstructionFee)
      ) {
        this.$message.error("港建费金额得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.noticePileFreeDays != "undefined" &&
        !isNumber(map.noticePileFreeDays)
      ) {
        this.$message.error("免堆天数得为数字");
        this.isLoading = false;
        return;
      }

      if (
        typeof map.purchaseContractUnitPrice != "undefined" &&
        !isNumber(map.purchaseContractUnitPrice)
      ) {
        this.$message.error("单价得为数字");
        this.isLoading = false;
        return;
      }
      if (typeof map.tfeContent != "undefined" && !isNumber(map.tfeContent)) {
        this.$message.error("tfe含量得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.silicaContent != "undefined" &&
        !isNumber(map.silicaContent)
      ) {
        this.$message.error("二氧化硅含量得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.aluminaContent != "undefined" &&
        !isNumber(map.aluminaContent)
      ) {
        this.$message.error("氧化铝含量得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.phosphorusContent != "undefined" &&
        !isNumber(map.phosphorusContent)
      ) {
        this.$message.error("含磷量得为数字");
        this.isLoading = false;
        return;
      }
      if (
        typeof map.resultNumberOfLoans != "undefined" &&
        !isNumber(map.resultNumberOfLoans)
      ) {
        this.$message.error("放货数量得为数字");
        this.isLoading = false;
        return;
      } else
        this.axios
          .post("/api/v1/tms/insertDeliveryNotice", map)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.cancel();
            } else {
              this.$message({
                type: "warning",
                message: res.data.data,
              });
            }
          })
          .then(() => {
            this.isLoading = false;
          });
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss">
.shipTransport {
  .form {
    display: flex;

    .form_box {
      width: 320px;
      margin-left: 35%;
      margin-top: 30px;
      margin-right: 20px;

      .el-form {
        .preview-group {
          .el-form-item {
            .el-form-item__label {
              display: inline-block;
              width: 70px !important;
            }

            .el-form-item__content {
              .el-select {
                width: 250px;
              }

              .el-input {
                width: 250px;
              }
            }
          }
        }
      }
    }
  }

  .mofrom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-right: 10px;

    .motext {
      width: 70px;
    }

    .moinput {
      width: 250px;
    }

    .mobutton {
      margin-left: 6px;
    }
  }

  .button_box {
    margin-left: 35%;
  }

  .liulan {
    margin-left: -4px;
    width: 120px;
    margin-top: 30px;

    .el-button {
      margin: auto;
    }

    .btn {
      margin-top: 0px;
    }

    .btn1 {
      margin-top: 13px;
    }

    .btn2 {
      margin-top: 67px;
    }
  }

  .button_box {
    margin-left: 45%;
  }
}
</style>