Shpdet.vue

<template>
  <div class="eibs">
    <el-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <c-col :span="24">
          <el-form-item
            label="Release of Goods"
            prop="brdgrp.rec.relgodflg"
            :rules="[{ type: 'string', required: true, message: '必输项' }]">
            <c-select
              v-model="model.brdgrp.rec.relgodflg"
              style="width: 100%"
              placeholder="请选择提货担保申请人"
              dbCode="RELGOD"
              :filterKey="['A', 'C']"
              @change="onRelgodflgChange">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Release Type" prop="brdgrp.rec.reltyp">
            <c-select
              disabled
              v-model="model.brdgrp.rec.reltyp"
              dbCode="typrel"
              style="width: 100%"
              placeholder="请选择放货类型"
              :code="codes.reltyp1"
              @change="onReltypChange">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="12">
          <el-form-item label="issue date" prop="brdgrp.rec.relgoddat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.relgoddat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="Expiry Date" prop="brdgrp.rec.expdat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.expdat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"
              :disabled="this.model.brdgrp.rec.reltyp !== 'SG'"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Transport Doc. Type" prop="brdgrp.rec.trpdoctyp">
            <c-select
              v-model="model.brdgrp.rec.trpdoctyp"
              dbCode="trptyp"
              style="width: 100%"
              placeholder="请选择货物单据类型">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Transport Doc. No." prop="brdgrp.rec.trpdocnum">
            <c-input v-model="model.brdgrp.rec.trpdocnum" maxlength="40" placeholder="请输入运输单据编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="shipment date" prop="brdgrp.rec.tradat">
            <c-date-picker
              type="date"
              v-model="model.brdgrp.rec.tradat"
              style="width: 100%"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Mode of Transport" prop="brdgrp.rec.tramod">
            <c-select
              v-model="model.brdgrp.rec.tramod"
              dbCode="TRAMOD"
              style="width: 100%"
              placeholder="请选择运输模式">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Vessel Name" prop="brdgrp.blk.vesnam">
            <c-input v-model="model.brdgrp.blk.vesnam" maxlength="40" placeholder="请输入运输工具"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Port of Discharge" prop="brdgrp.blk.pordis">
            <c-input v-model="model.brdgrp.blk.pordis" maxlength="40" placeholder="请输入卸货口岸"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Place of Delivery" prop="brdgrp.blk.delplc">
            <c-input v-model="model.brdgrp.blk.delplc" maxlength="40" placeholder="请输入移交地点"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Covered Goods" prop="brdgrp.blk.roggod">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.roggod"
              maxlength="1600"
              show-word-limit
              placeholder="请输入货物描述"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Port of loading" prop="brdgrp.blk.porlod">
            <c-input v-model="model.brdgrp.blk.porlod" maxlength="40" placeholder="请输入起运口岸"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Voyage numer" prop="brdgrp.blk.voynum">
            <c-input v-model="model.brdgrp.blk.voynum" maxlength="30" placeholder="请输入航号"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </el-col>
    <el-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <c-col :span="24">
          <el-form-item label="Contract Number" prop="brtp.connum">
            <c-input v-model="model.brtp.connum" maxlength="35" placeholder="请输入合同编号"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Carrier" prop="brdgrp.blk.carnam">
            <c-input v-model="model.brdgrp.blk.carnam" maxlength="35" placeholder="请输入承运人"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="B/L Number" prop="brdgrp.rec.blnum">
            <c-input v-model="model.brdgrp.rec.blnum" maxlength="20" placeholder="请输入海运/远洋提单编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item>
            <c-checkbox
              v-model="model.brdgrp.rec.rtoaplflg"
              true-label="X"
              false-label=""
              class="checkbox-left"
              :disabled="isRtoaplflgDisabled"
              @change="onAppChange"
              >To Applicant</c-checkbox
            >
            <!-- <el-input v-model="model.brdgrp.rec.rtoaplflg"></el-input> -->
          </el-form-item>

          <!-- <c-checkbox v-model="model.brdgrp.rec.rtoaplflg">to Applicant</c-checkbox> 简化model前，，原始-->
          <!-- Release Goods to Applicant? -->
        </c-col>

        <c-col :span="24">
          <el-form-item label="Release to Address" prop="brdgrp.blk.relstoadr">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.relstoadr"
              maxlength="140"
              show-word-limit
              placeholder="请输入收货人名称及地址"
              rows="4"
              @change="onRelstoadrChange"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24" class="fieldName">
          <el-form-item label="Shipping company" style="margin-bottom: 0">
            <el-form-item label-width="0" style="margin-bottom: 10px">
              <c-ptap
                :argadr="{ title: '', grp: 'brdgrp', rol: 'shp' }"
                :haveAdrLabel="true"
                :isAdrblk="true"
                :isFieldLabelVisible="false"
                :model="model"
                bchinr="00000036"
                ptytyp="C" :isLabel120="false"></c-ptap>
            </el-form-item>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Notify Party" prop="brdgrp.blk.notpty">
            <c-input
              type="textarea"
              v-model="model.brdgrp.blk.notpty"
              maxlength="350"
              show-word-limit
              placeholder="请输入被通知人"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </el-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import event from "../event";
import commonProcess from "~/mixin/commonProcess";
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, commonProcess],
  data() {
    return {
      typ1: true,
      isRtoaplflgDisabled: false,
    };
  },
  methods: {
    onDjutypChange() {
      if (this.model.brdgrp.srm.djutyp === "D") {
        this.model.brdgrp.srm.djuusr = "";
        this.model.brdgrp.srm.djudat = "";
        this.model.brdgrp.srm.djuref = "";
      }
    },

    onAppChange() {
      if (this.model.brdgrp.rec.rtoaplflg !== "X") {
        this.model.brdgrp.blk.relstoadr = "";
      } else {
        this.model.brdgrp.blk.relstoadr = this.model.lidgrp.apl.pts.adrblk;
      }
    },
    onReltypChange() {
      if (this.model.brdgrp.rec.reltyp !== "SG") {
        this.model.brdgrp.rec.expdat = "";
      }
    },
    onRelstoadrChange() {
      this.model.brdgrp.rec.rtoaplflg = "";
      this.isRtoaplflgDisabled = true;
    },
    onRelgodflgChange() {
      if (this.model.brdgrp.rec.relgodflg != null && this.model.brdgrp.rec.relgodflg != "") {
        if (this.model.brdgrp.rec.rcvdat == null || this.model.brdgrp.rec.rcvdat == "") {
          this.model.brdgrp.rec.docsta = "J";
        } else {
          this.model.brdgrp.rec.docsta = "K";
        }
      }
    },
  },
};
</script>
<style></style>