Detp.vue

<template>
  <div class="eibs-tab">
    <c-row>
      <!-- left -->
      <c-col :span="11">
        <!-- Available with -->
        <c-col :span="24">
          <el-form-item label="Available with" prop="ledgrp.rec.avbwth">
            <c-select
              v-model="model.ledgrp.rec.avbwth"
              style="width: 100%"
              placeholder="Please select Available with"
              :code="codes.avbwth"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-ptap
            :model="model"
            :argadr="{
              title: '',
              grp: 'ledgrp',
              rol: 'avb',
            }"
            :noRef="true"
            @onSeainf="onSeainf"
            @onAplpDet="onAvbpDet"
          >
          </c-ptap>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Available by" prop="ledgrp.rec.avbby">
            <c-select
              v-model="model.ledgrp.rec.avbby"
              style="width: 100%"
              placeholder="Please select Available by"
              :code="codes.avbby"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Negotiation/Deferred Payment Details"
            prop="ledgrp.blk.defdet"
          >
            <c-input
              type="textarea"
              :rows="3"
              v-model="model.ledgrp.blk.defdet"
              maxlength="35"
              show-word-limit
              placeholder="Please input Deferred Payment Details"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Drafts at"
            prop="ledgrp.blk.dftat"
            style="width: 100%"
          >
            <c-fullbox>
              <c-input
                type="textarea"
                v-model="model.ledgrp.blk.dftat"
                maxlength="50"
                show-word-limit
                placeholder="Please input Drafts at"
                disabled
              ></c-input>
              <template slot="footer">
                <c-button
                  style="margin-left: 10px; padding: 0 10px"
                  size="small"
                  type="primary"
                  disabled
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-ptap
            :model="model"
            :argadr="{
              title: 'Drawee',
              grp: 'ledgrp',
              rol: 'drw',
            }"
            :disabled="true"
            :noRef="true"
            @onSeainf="onSeainf"
            @onAplpDet="onDrwpDet"
          >
          </c-ptap>
        </c-col>
        <c-col :span="24" >
        <el-form-item label="Air-/Port of Departure" prop="ledgrp.rec.porloa">
          <c-input
            type="textarea"
            :rows="3"
            v-model="model.ledgrp.rec.porloa"
            maxlength="65"
            show-word-limit
            placeholder="Please input Air-/Port of Departure"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Air-/Port of Destination" prop="ledgrp.rec.pordis">
          <c-input
            type="textarea"
            :rows="3"
            v-model="model.ledgrp.rec.pordis"
            maxlength="65"
            show-word-limit
            placeholder="Please input Air-/Port of Destination"
          ></c-input>
        </el-form-item>
      </c-col>
      </c-col>

      <!-- right -->
      <c-col :span="11" :offset="1">
        <c-col :span="24">
          <el-form-item label="Mixed Payment" prop="ledgrp.blk.mixdet">
            <c-input
              type="textarea"
              :rows="4"
              v-model="model.ledgrp.blk.mixdet"
              maxlength="35"
              show-word-limit
              placeholder="Please input Mixed Payment"
              disabled
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Days of presentation period -->
        <c-col :span="24">
          <el-form-item label="Presentation Period" prop="ledgrp.rec.prepers18">
            <c-input
              v-model="model.ledgrp.rec.prepers18"
              placeholder="Please input Presentation Period"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label=""
            prop="ledgrp.rec.prepertxts18"
            style="width: 100%"
          >
            <c-fullbox>
              <c-input
                type="textarea"
                v-model="model.ledgrp.rec.prepertxts18"
                maxlength="50"
                show-word-limit
                placeholder="Please input Presentation period text"
              ></c-input>
              <template slot="footer">
                <c-button
                  style="margin-left: 10px; padding: 0 10px"
                  size="small"
                  type="primary"
                  disabled
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Additional Details to Charges"
            prop="ledgrp.blk.feetxt"
            style="width: 100%"
          >
            <c-fullbox>
              <c-input
                type="textarea"
                v-model="model.ledgrp.blk.feetxt"
                maxlength="50"
                show-word-limit
                placeholder="Please input Additional Details to Charges"
              ></c-input>
              <template slot="footer">
                <c-button
                  style="margin-left: 10px; padding: 0 10px"
                  size="small"
                  type="primary"
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <!-- Own Charges Borne by -->
        <c-col :span="24">
          <el-form-item label="Charges Condition" prop="ledgrp.rec.chato">
            <c-select
              v-model="model.ledgrp.rec.chato"
              style="width: 100%"
              placeholder="Please select Charges Condition"
              :code="codes.chadet"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Country or region Code" prop="ledgrp.rec.stacty">
            <c-select
              v-model="model.ledgrp.rec.stacty"
              style="width: 100%"
              placeholder="请选择Country or region Code"
              :code="codes.stacty"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="Maximum Tenor" prop="ledgrp.rec.tenmaxday">
              <c-input
                v-model="model.ledgrp.rec.tenmaxday"
                placeholder="Please input Maximum Tenor"
              ></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="4">
            <el-form-item label="Days" style="float: right"> </el-form-item>
          </c-col>
        </c-col>

        <!-- Dispatch from -->
        <c-col :span="24">
          <el-form-item label="Dispatch from" prop="ledgrp.rec.shpfro">
            <c-input
              type="textarea"
              :rows="3"
              show-word-limit
              v-model="model.ledgrp.rec.shpfro"
              maxlength="65"
              placeholder="Please input Dispatch from"
            ></c-input>
          </el-form-item>
        </c-col>

         <!-- Final Destination -->
      <c-col :span="24">
        <el-form-item label="Final Destination" prop="ledgrp.rec.shpto">
          <c-input
            type="textarea"
            :rows="3"
            v-model="model.ledgrp.rec.shpto"
            maxlength="65"
            show-word-limit
            placeholder="Please input Final Destination"
          ></c-input>
        </el-form-item>
      </c-col>

      <!-- Shipment Period -->
      <c-col :span="24">
        <el-form-item label="Shipment Period" prop="ledgrp.blk.shpper">
          <c-input
            type="textarea"
            :rows="3"
            v-model="model.ledgrp.blk.shpper"
            maxlength="65"
            show-word-limit
            placeholder="Please input Shipment Period"
          ></c-input>
        </el-form-item>
      </c-col>
      </c-col>
    </c-row>

  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Ptap from "~/views/Public/Ptap";
import Event from "~/model/Letopn/Event";

export default {
  inject: ["root"],
  components: { "c-ptap": Ptap },
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {};
  },
  methods: { ...Event },
  created: function () {},
  watch: {
    "model.ledgrp.avb.pts.adrblk": {
      handler(val, oldVal) {
        this.model.ledgrp.blk.avbwthtxt = val;
      },
      immediate: true,
    },
  },
};
</script>
<style>
</style>