Detp.vue

<template>
  <div class="eibs-tab">

    <!-- =========================================part 1 ============================================= -->
      <c-col :span="24" style="padding-top: 20px" >
        <!-- 左边-->
        <c-col :span="12" style="padding-right: 20px;">
          <!-- 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=""
                      dbCode="AVBWTH"
                      @change="avbwthFlg"
              >
              </c-select>
            </el-form-item>
          </c-col>

          <c-col :span="24">
            <c-ptap
                    v-if="model.ledgrp.rec.avbwth!='O'"
                    :model="model"
                    :argadr="{title: 'Available with', grp: 'ledgrp',rol: 'avb',}"
                    :haveAdrLabel="true"
                    :isAdrblk="true"
                    bchinr="00000036"
                    :noRef="true"
                    :disabledExtkey="!avbFlag"
                    :disabled="true"
										:isLabel120="false"
                    ptytyp="B">
            </c-ptap>
          </c-col>

          <c-col :span="24">
            <el-form-item label="" prop="ledgrp.blk.avbwthtxt"
              v-if="model.ledgrp.rec.avbwth === 'O'">
              <c-input
                type="textarea"
                :rows="3"
                v-model="model.ledgrp.blk.avbwthtxt"
                maxlength="140"
                show-word-limit
                placeholder="请输入名称地址"
              ></c-input>
            </el-form-item>
          </c-col>

          <c-col :span="24">
            <!-- 信用证兑付方式  Available by-->
            <c-col :span="12">
              <el-form-item label="Available by" prop="ledgrp.rec.avbby">
                <c-select
                        v-model="model.ledgrp.rec.avbby"
                        style="width: 100%"
                        placeholder=""
                        dbCode="AVBBY0"
                        @change="avbbyChange"
                >
                </c-select>
              </el-form-item>
            </c-col>


            <!-- 付款期限 Maximum Tenor-->
            <c-col :span="12">

              <el-form-item label="Maximum Tenor Days" prop="ledgrp.rec.tenmaxday">
                <c-fullbox>
                  <c-input
                          v-model.number="model.ledgrp.rec.tenmaxday"
                          placeholder=""
                          :disabled="model.ledgrp.rec.avbby == 'P'"
                          maxlength="4"
                          @keyup.enter.native="$event.target.blur()"
                  ></c-input>
                </c-fullbox>
                <!-- @keyup.enter.native="$event.target.blur()" :回车触发失去焦点发生的事件 -->
              </el-form-item>
            </c-col>

          </c-col>


          <!-- 远期付款指示 延期付款指示-->
          <c-col :span="24" style="margin-top:10px">
            <el-form-item prop="ledgrp.blk.defdet" label="Negotiation/ Deferred Payment Details">
              <c-input
                      type="textarea"
                      :rows="3"
                      v-model="model.ledgrp.blk.defdet"
                      maxlength="140"
                      show-word-limit
                      placeholder=""
                      :disabled="defdetFlag"
              ></c-input>
            </el-form-item>
          </c-col>


          <!-- Mixed Payment Details -->
          <c-col :span="24">
            <el-form-item label=" Mixed Payment" prop="ledgrp.blk.mixdet">
              <!-- maxLength 140, view-lines 4 -->
              <c-input
                      type="textarea"
                      :rows="4"
                      v-model="model.ledgrp.blk.mixdet"
                      maxlength="140"
                      show-word-limit
                      placeholder=""
                      :disabled="model.ledgrp.rec.avbby != 'M'"
              ></c-input>
            </el-form-item>
          </c-col>


          <!-- drafts at 汇票期限 -->
          <c-col :span="24">
            <c-ptap-commons  :cols="35" :rows="3" :minRows="3" :maxRows="3" :model="model"
                             :disabled-button="blkDftatFlag"
                             :extCodes="['ledgrp','blk']"  lastModel="dftat" title="Drafts at">
            </c-ptap-commons>
          </c-col>


          <c-col :span="24">

            <c-ptap
                    :model="model"
                    :argadr="{title: 'Drawee', grp: 'ledgrp',rol: 'drw',}"
                    :haveAdrLabel="true"
                    :isAdrblk="true"
                    bchinr="00000036"
                    :noRef="true"
                    :onlySearch="false"
                    :disabledExtkey="blkDftatFlag"
                    :disabled="blkDftatFlag"
										:isLabel120="false"
                    ptytyp="B">
            </c-ptap>
          </c-col>

        </c-col>


        <!-- 右边  -->
        <c-col :span="12" style="padding-left: 20px;">
          <!-- 货物进出港地点及最终地点相关信息 -->
          <div >
            <!-- Dispatch from   货物转运地(港) -->
            <c-col :span="24">
              <el-form-item label="Place of Taking in Charge/Dispatch from .../Place of Receipt" prop="ledgrp.rec.shpfro">
                <c-input
                        type="textarea"
                        show-word-limit
                        v-model="model.ledgrp.rec.shpfro"
                        :rows="4"
                        maxlength="390"
                        placeholder=""
                ></c-input>
              </el-form-item>
            </c-col>

            <!-- Air-/Port of Departure -->
            <c-col :span="24">
              <el-form-item label="Port of Loading/Airport of Departure" prop="ledgrp.rec.porloa">
                <c-input
                        type="textarea"
                        v-model="model.ledgrp.rec.porloa"
                        :rows="4"
                        maxlength="390"
                        show-word-limit
                        placeholder=""
                ></c-input>
              </el-form-item>
            </c-col>

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

            <!-- 最终目的地 -->
            <c-col :span="24">
              <el-form-item label="Place of Final Destination/For Transportation to .../Place of Delivery" prop="ledgrp.rec.shpto">
                <c-input
                        type="textarea"
                        v-model="model.ledgrp.rec.shpto"
                        :rows="4"
                        maxlength="390"
                        show-word-limit
                        placeholder=""
                ></c-input>
              </el-form-item>
            </c-col>

            <!-- 最终目的地 -->
            <c-col :span="24">
              <el-form-item label="Instructions from Intermediary Bank" prop="ledgrp.blk.insintbnk">
                <c-input
                        type="textarea"
                        v-model="model.ledgrp.blk.insintbnk"
                        :rows="4"
                        maxlength="390"
                        show-word-limit
                        placeholder=""
                ></c-input>
              </el-form-item>
            </c-col>

          </div>

          <!-- <c-col :span="12">
        <el-form-item label="交单期限" prop="ledgrp.blk.preper">
          <c-input
            type="textarea"
            v-model="model.ledgrp.blk.preper"
            maxlength="35"
            show-word-limit
            placeholder="请输入交单期限"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item
          label="Days of 交单期限"
          prop="ledgrp.rec.prepers18"
        >
          <c-input
            v-model="model.ledgrp.rec.prepers18"
            placeholder="请输入交单期限（天）"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <c-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="onPreperButtxmsel"
        >
          ...
        </c-button>
      </c-col>

          <c-col :span="12">
        <el-form-item
          label="Presentation period text"
          prop="ledgrp.rec.prepertxts18"
        >
          <c-input
            v-model="model.ledgrp.rec.prepertxts18"
            maxlength="35"
            placeholder="请输入"
          ></c-input>
        </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="Charges Condition"
                      dbCode="CHADET"
              >
              </c-select>
            </el-form-item>
          </c-col>
          -->

        </c-col>

      </c-col>


  </div>
</template>
<script>
import event from '../event'
// import Ptap from '~/views/Public/Ptap'

export default {
  components: {
    // "c-ptap1": Ptap1,
    // 'c-ptap': Ptap,
    // "c-ptsmsg": Ptsmsg,
  },
  inject: ['root'],
  props: ['model', 'codes'],
  mixins: [event],
  data() {
    return {}
  },
  computed: {
    avbFlag: {
      get() {
        return (
          this.model.ledgrp.rec.avbwth == 'A' ||
          this.model.ledgrp.rec.avbwth == 'S' ||
          this.model.ledgrp.rec.avbwth == ''
        )
      },
    },
    defdetFlag: {
      get() {
        return (
          // this.model.ledgrp.rec.avbby == 'A' ||
          // this.model.ledgrp.rec.avbby == 'P' ||
          // this.model.ledgrp.rec.avbby == 'M' ||
          // this.model.ledgrp.rec.avbby == ''
          this.model.ledgrp.rec.avbby != 'D' &&
          this.model.ledgrp.rec.avbby != 'N'
        )
      },
    },
    blkDftatFlag: {
      get() {
        return (
          this.model.ledgrp.rec.avbby == 'D' ||
          this.model.ledgrp.rec.avbby == 'M' ||
          this.model.ledgrp.rec.avbby == ''
        )
      },
    },
  },

}
</script>
<style></style>