Detp.vue

<template>
  <div class="eibs-tab">
    <c-row>
      <!-- =========================================左边============================================= -->
      <c-col :span="11">
        <!-- Available with -->
        <c-col :span="24">
          <el-form-item label="指定银行" prop="ledgrp.rec.avbwth">
            <c-select
              v-model="model.ledgrp.rec.avbwth"
              style="width: 100%"
              placeholder="请选择指定银行"
              :code="codes.avbwth"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-ptap
            v-if="model.ledgrp.rec.avbwth != 'O'"
            :model="model"
            :argadr="{
              title: '',
              grp: 'ledgrp',
              rol: 'avb',
            }"
            :noRef="true"
            :onlySearch="true"
            @onSeainf="onSeainf"
            @onAplpDet="onAvbpDet"
            :disabledExtkey="!avbFlag"
          >
          </c-ptap>
        </c-col>

        <!-- 名称地址 -->
        <c-col :span="24">
          <el-form-item
            label=""
            prop="ledgrp.avb.pts.adrblk"
            v-if="model.ledgrp.rec.avbwth != 'O'"
          >
            <c-input
              type="textarea"
              :rows="3"
              v-model="model.ledgrp.avb.pts.adrblk"
              maxlength="140"
              show-word-limit
              placeholder="请输入Address Block"
              :disabled="model.ledgrp.rec.avbwth!=''"
            ></c-input>
          </el-form-item>
        </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">
          <el-form-item label="兑付方式" prop="ledgrp.rec.avbby">
            <c-select
              v-model="model.ledgrp.rec.avbby"
              style="width: 100%"
              placeholder="请选择兑付方式"
              :code="codes.avbby0"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <!-- 远期付款指示 延期付款指示-->
        <c-col :span="24">
          <el-form-item label="远期付款指示" prop="ledgrp.blk.defdet">
            <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>

        <!-- drafts at 汇票期限 -->
        <c-col :span="24">
          <el-form-item label="汇票期限" prop="ledgrp.blk.dftat">
            <c-fullbox>
              <c-input
                type="textarea"
                :rows="3"
                v-model="model.ledgrp.blk.dftat"
                maxlength="105"
                show-word-limit
                placeholder="请输入汇票期限"
                :disabled="blkDftatFlag"
              ></c-input>
              <template slot="footer">
                <!-- @click="onLcrdftatButtxmsel" -->
                <c-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="showGridPromptDialog('letp.lcrdftat.buttxmsel', null, null,{TXT: 'ledgrp.blk.dftat'}, {TXT: false},'doxpDialog')"
                  :disabled="blkDftatFlag"
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-ptap
            :model="model"
            :argadr="{
              title: '付款人',
              grp: 'ledgrp',
              rol: 'drw',
            }"
            :noRef="true"
            :onlySearch="false"
            @onSeainf="onSeainf"
            @onAplpDet="onDrwpDet"
            :disabledExtkey="blkDftatFlag"
            :disabled="blkDftatFlag"
          >
          </c-ptap>
        </c-col>

        <!-- Dispatch from   货物转运地(港) -->
        <c-col :span="24">
          <el-form-item label="货物转运地(港)" prop="ledgrp.rec.shpfro">
            <c-input
              type="textarea"
              show-word-limit
              v-model="model.ledgrp.rec.shpfro"
              maxlength="65"
              placeholder="请输入"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Air-/Port of Departure -->
        <c-col :span="24">
          <el-form-item label="始发航空站/港口" prop="ledgrp.rec.porloa">
            <c-input
              type="textarea"
              v-model="model.ledgrp.rec.porloa"
              maxlength="65"
              show-word-limit
              placeholder="请输入"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Air-/Port of Destination -->
        <c-col :span="24">
          <el-form-item label="目的航空站/港口" prop="ledgrp.rec.pordis">
            <c-input
              type="textarea"
              v-model="model.ledgrp.rec.pordis"
              maxlength="65"
              show-word-limit
              placeholder="请输入"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- 最终目的地 -->
        <c-col :span="24">
          <el-form-item label="最终目的地" prop="ledgrp.rec.shpto">
            <c-input
              type="textarea"
              v-model="model.ledgrp.rec.shpto"
              maxlength="65"
              show-word-limit
              placeholder="最终目的地"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Shipment Period -->
        <c-col :span="24">
          <el-form-item label="装运期" prop="ledgrp.blk.shpper">
            <c-input
              type="textarea"
              v-model="model.ledgrp.blk.shpper"
              maxlength="65"
              show-word-limit
              placeholder="请输入装运期"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <!-- =========================================右边============================================= -->
      <c-col :span="11" :offset="1">
        <!-- Mixed Payment Details -->
        <c-col :span="24">
          <el-form-item label="混合付款指示" prop="ledgrp.blk.mixdet">
            <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>


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

    <c-col :span="12">
      <el-form-item
        label="Days of presentation period"
        prop="ledgrp.rec.prepers18"
      >
        <c-input
          v-model="model.ledgrp.rec.prepers18"
          placeholder="请输入Days of presentation period"
        ></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="请输入Presentation period text"
        ></c-input>
      </el-form-item>
    </c-col>-->


        <!-- 交单期限 Days of presentation period-->
        <c-col :span="24">
          <el-form-item label="交单期限" prop="ledgrp.rec.prepers18">
            <c-fullbox>
              <c-input
                v-model="model.ledgrp.rec.prepers18"
                placeholder="请输入Days of presentation period"
              ></c-input>
              <template slot="footer">
                <!-- @click="onPreperButtxmsel" -->
                <c-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="showGridPromptDialog('letp.preper.buttxmsel', null, null,{TXT: 'ledgrp.rec.prepers18'}, {TXT: false},'doxpDialog')"
                  disabled
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <!-- Days of presentation period -->
        <c-col :span="24">
          <el-form-item label="" prop="ledgrp.rec.prepertxts18">
            <c-input
              v-model="model.ledgrp.rec.prepertxts18"
              placeholder="请输入交单期天数"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Additional Details to  Charges  -->
        <c-col :span="24">
          <el-form-item label="附加收费详情" prop="ledgrp.blk.feetxt">
            <c-fullbox>
              <c-input
                type="textarea"
                :rows="6"
                v-model="model.ledgrp.blk.feetxt"
                maxlength="210"
                show-word-limit
                placeholder="请输入附加收费详情"
              ></c-input>
              <template slot="footer">
                <!-- @click="onChariaButtxmsel" -->
                <c-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="showGridPromptDialog('letp.charia.buttxmsel', null, null,{TXT: 'ledgrp.blk.feetxt'}, {TXT: false},'doxpDialog')"
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

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

        <!-- country or region code -->
        <c-col :span="24">
          <el-form-item label="国家或地区代码" prop="ledgrp.rec.stacty">
            <c-select
              v-model="model.ledgrp.rec.stacty"
              style="width: 100%"
              placeholder="请选择国家或地区代码"
              :code="codes.ctytxt"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <!-- 付款期限 Maxinum Tenor-->
        <c-col :span="24">
          <el-form-item label="付款期限（天）" prop="ledgrp.rec.tenmaxday">
            <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>
            <!-- @keyup.enter.native="$event.target.blur()" :回车触发失去焦点发生的事件 -->
          </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,
    // avbwthEvent(){
    //   if (this.model.ledgrp.rec.avbwth != 'A'||this.model.ledgrp.rec.avbwth != 'O') {
    //     this.model.ledgrp.avb.pts.extkey = ''
    //     this.model.ledgrp.blk.avbwthtxt = ''
    //   }
    // },
    // avbbykeyEvent() {
    //   if (this.model.ledgrp.rec.avbby == 'P') {
    //     this.model.ledgrp.rec.tenmaxday = 0
    //     this.model.ledgrp.blk.defdet = ''
    //   }
    //   if (this.model.ledgrp.rec.avbby == 'D'||this.model.ledgrp.rec.avbby =='M') {
        
    //     this.model.ledgrp.blk.defdet = '' //汇票期限置空
    //     this.model.ledgrp.drw.pts.extkey = ''//付款人置空
    //     this.model.ledgrp.drw.pts.adrblk = ''  //名称地址置空.pts.adrblk

    //   }
    // },
  
  },
  created: function () {},
  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 == ''
        )
      },
    },
  },
  watch: {
    'model.ledgrp.avb.pts.adrblk': {
      handler(val, oldVal) {
        this.model.ledgrp.blk.avbwthtxt = val
      },
      immediate: true,
    },
  },
}
</script>
<style></style>