icore-pass/src/views/TMS/components/bmsship/addTwoSectionHandleFee.vue

<template>
  <!-- 添加二程船装卸费2-->
  <div class="addWagonLoad">
    <PageTitle>返回</PageTitle>
    <div class="form-box">
      <!-- <dil-form :formId="271" v-model="form1" ref="from1"></dil-form> -->
      <el-form v-model="form">
        <div class="searchSelect">
            <span class="text">批次</span>
            <el-input class="input" v-model="batchName" disabled> </el-input>
            <el-button class="button" type="primary" @click="ondrawer(5)">浏览</el-button>
        </div>
        <div class="searchSelect">
            <span class="text">单价</span>
            <el-input class="input" v-model="form.unitPrice"   @change="calculate"> </el-input>
        </div>
        <div class="preview-group">
          <el-form-item label="实装吨位">
              <el-input v-model="form.realTonnage" type="number"  @change="calculate"></el-input>
          </el-form-item>
          <el-form-item label="水运费用">
              <el-input v-model="form.fee" type="number" disabled></el-input>
          </el-form-item>
            <el-form-item label="开票日期">
                <el-date-picker
                  v-model="form.makeTime"
                  type="datetime"
                  placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <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/bms/uploadBmsshipOrder"
                  :before-upload="beforeUpload"
                  :multiple="false"
                  list-type="picture"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :on-error="onError(1)">
                  <el-input
                      class="shippingCertificate"
                      style="width: 270px; display: flex"
                      placeholder="上传水运单图片(必填项)"
                      v-model="form.image"
                      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>
        </div>
     </el-form>
    </div>
    <!-- 模态框 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="60%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="margin-top: 10px; margin-left: 20px; 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 == 5">
        <dilTable
          v-bind.sync="batchOption"
          @radio-change="batchChange"
        ></dilTable>
      </div>
      <div v-show="a == 6">
        <dilTable
          v-bind.sync="contractPriceOption"
          @radio-change="priceChange"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 底部按钮 -->
    <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 } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
import {BigNumber} from 'bignumber.js';
export default {
  components: { PageTitle },
  data() {
    return {
      form: {},
      portId:null,
      ports:[],
      isLoading:false,
      drawer: false,
      direction: "rtl",
      a:0,
      input:null,
      batchId:null,
      purchaseOrderId:null,
      batchName:null,
      cargoPictureUrl: "",
      batchOption: {
        requestUrl: "/api/v1/uc/getBatchOfNotice?apiId=513",
        selectionType: "radio",
        map: [],
      },
      contractPriceOption: {
        requestUrl: "/api/v1/rms/selectbmsshipContractPriceList?apiId=500",
        selectionType: "radio",
        map: [],
      }
    };
  },
  mounted() {
    //this.getPorts();
  },
  methods: {
    //右侧选中框
    ondrawer(num) {
      this.drawer = true;
      this.a = num;
      // 清空当前输入框中的数据
      this.input = "";
    },
    handleClose(done) {
      done();
    },
    onclick(a) {
        if(a==5){
            this.batchOption.requestUrl =
            "/api/v1/uc/getBatchOfNotice?apiId=513&index=" + this.input;
        }else if(a==6){
            this.contractPriceOption.requestUrl =
            "/api/v1/rms/selectbmsshipContractPriceList?apiId=500&con=" + this.input;
        }
    },
    //修改选中
    batchChange(selection) {
        console.log(selection);
        this.batchId=selection.batchId;
        this.purchaseOrderId=selection.purchaseOrderId;
        this.batchName =selection.materialName + selection.resultForeignShipName;
    },
    priceChange(selection){
        this.form.unitPriceId = selection.resultId;
        this.form.unitPrice = selection.unitPrice;
        this.calculate();
    },
    //计算水运费
    calculate(){
        console.log("能否计算水运费：",this.form.realTonnage && this.form.unitPrice);
        if(this.form.realTonnage && this.form.unitPrice){
           let fee = new BigNumber(this.form.realTonnage);
           this.$set(this.form,'fee',fee.multipliedBy(this.form.unitPrice).toNumber())
           console.log(this.form.fee);
        }
    },
    makeSure() {
      this.isLoading=true;
      let map={
        batchId:this.batchId,
        purchaseOrderId:this.purchaseOrderId,
        unitPrice:this.form.unitPrice,
        unitPriceId:this.form.unitPriceId,
        realTonnage:this.form.realTonnage,
        fee:this.form.fee,
        makeTime: sjTime(this.form.makeTime),
        image:this.form.image,
        feeType:2,
        userId:getCookie("userId")
      }
      console.log(map);
      if(map.batchId==null ||
       map.purchaseOrderId==null ||
       map.unitPrice==null ||
       map.realTonnage==null ||
       map.fee==null ||
       map.makeTime==null ||
       map.image==null || map.image==''
       ){
        this.$message.error("存在空值！");
        this.isLoading=false;
      }else{
         this.axios.post("/api/v1/bms/addPortHandlingFeeSecond",map).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.cancel();
          } else {
            this.$message.error(res.data.data);
          }
        }).then(()=>{
          this.isLoading=false;
        });
      }
       
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //查询港口id
    getPorts(){
        this.axios.post("/api/v1/rms/getPortName?index=").then(res => {
          if (res.data.code == 200) {
            this.ports=res.data.data;
            console.log(this.ports);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    beforeUpload(file) {
      this.upBool = true;
      const isLt2M = file.size < 1024 * 1024 * 0.5;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过500kb!");
      } 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.form.image = null;
          this.$message.error("上传失败");
        }
      }
    },
    handleAvatarSuccess(res, file) {
      if (res.code) {
        this.upBool = false;
        if (this.num == 1) {
          this.form.image = res.data;
        }
        this.$message.success("上传成功");
      }
    },
    upCLick(val) {
      this.num = val;
    },
  }
};
</script>
<style lang="scss">
.searchSelect {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    .text {
    width: 40px;
    }
    .input {
    width: 200px;
    }
    .button {
    margin-left: 6px;
    }
}
.button-box {
  display: flex;
  justify-content: center;
  margin: 20px;
  .el-button {
    width: 80px;
    margin: 10px;
  }
}
.form-box {
  display: flex;
  justify-content: center;
  .el-form-item {
    display: flex;
    justify-content: center;
    .el-form-item__label {
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-input {
        .el-input__inner {
          width: 250px;
        }
      }
    }
  }
}
</style>