Detp.vue

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

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

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

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

        <c-col :span="24">
          <el-form-item
            label="Negotiation/延期付款指示"
            prop="ltdgrp.blk.defdet"
          >
            <c-input
              type="textarea"
              :rows="3"
              v-model="model.ltdgrp.blk.defdet"
              maxlength="35"
              show-word-limit
              placeholder="Please input 延期付款指示"
              :disabled="defdetFlag"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Drafts at"
            prop="ltdgrp.blk.dftat"
          >
            <c-input
              type="textarea"
              :rows="3"
              v-model="model.ltdgrp.blk.dftat"
              maxlength="35"
              show-word-limit
              placeholder="Please input Drafts at"
              :disabled="blkDftatFlag"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <c-ptap
            :model="model"
            :argadr="{
              title: 'Drawee',
              grp: 'ltdgrp',
              rol: 'drw',
            }"
            :noRef="true"
            :onlySearch="false"
            @onSeainf="onSeainf"
            @onAplpDet="onDrwpDet"
            :disabled="blkDftatFlag"
            :disabledExtkey="blkDftatFlag"
          >
          </c-ptap>
        </c-col>
        <!-- Dispatch from -->
        <c-col :span="24">
          <el-form-item label="Dispatch from" prop="ltdgrp.rec.shpfro">
            <c-input
              type="textarea"
              show-word-limit
              v-model="model.ltdgrp.rec.shpfro"
              maxlength="65"
              placeholder="Please input Dispatch from"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="始发（航空）站" prop="ltdgrp.rec.porloa">
            <c-input
              type="textarea"
              v-model="model.ltdgrp.rec.porloa"
              maxlength="65"
              show-word-limit
              placeholder="Please input 始发（航空）站"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="终点（航空）站"
            prop="ltdgrp.rec.pordis"
          >
            <c-input
              type="textarea"
              v-model="model.ltdgrp.rec.pordis"
              maxlength="65"
              show-word-limit
              placeholder="Please input 终点（航空）站"
            ></c-input>
          </el-form-item>
        </c-col>
        <!-- 最终目的地 -->
        <c-col :span="24">
          <el-form-item label="最终目的地" prop="ltdgrp.rec.shpto">
            <c-input
              type="textarea"
              v-model="model.ltdgrp.rec.shpto"
              maxlength="65"
              show-word-limit
              placeholder="Please input 最终目的地"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Shipment Period -->
        <c-col :span="24">
          <el-form-item label="Shipment Period" prop="ltdgrp.blk.shpper">
            <c-input
              type="textarea"
              v-model="model.ltdgrp.blk.shpper"
              maxlength="65"
              show-word-limit
              placeholder="Please input Shipment Period"
            ></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 Details" prop="ltdgrp.blk.mixdet">
            <c-input
              type="textarea"
              :rows="4"
              v-model="model.ltdgrp.blk.mixdet"
              maxlength="140"
              show-word-limit
              placeholder="Please input Mixed Payment Details"
              :disabled="model.ltdgrp.rec.avbby != 'M'"
            ></c-input>
          </el-form-item>
        </c-col>

        <!-- Days of presentation period -->
        <c-col :span="24">
          <el-form-item label="Presentation Period" prop="ltdgrp.rec.prepertxts18">
            <c-fullbox>
              <c-input
                v-model.number="model.ltdgrp.rec.prepertxts18"
                placeholder="Please input Presentation Period"
              ></c-input>
              <template slot="footer">
                <c-button
                  size="small"
                  type="primary"
                  disabled
                  @click="showGridPromptDialog('lttp.detp', null, null,{TXT:
'ltdgrp.rec.prepertxts18'}, {TXT: false},'doxpDialog')"
                >
                  ...
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="" prop="ltdgrp.rec.prepertxts18">
            <c-input
              v-model="model.ltdgrp.rec.prepertxts18"
              placeholder="Please input Presentation period text"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Details of Charges"
            prop="ltdgrp.blk.feetxt"
          >
            <c-fullbox>
              <c-input
                type="textarea"
                :rows="6"
                v-model="model.ltdgrp.blk.feetxt"
                maxlength="210"
                show-word-limit
                placeholder="Please input Details of Charges"
              ></c-input>
              <template slot="footer">
                <c-button
                  size="small"
                  type="primary"
                  @click="showGridPromptDialog('lttp.charia.buttxmsel', null, null,{TXT:
'ltdgrp.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="Charges Condition" prop="ltdgrp.rec.chato">
            <c-select
              v-model="model.ltdgrp.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 Code" prop="ltdgrp.rec.stacty">
            <c-select
              v-model="model.ltdgrp.rec.stacty"
              style="width: 100%"
              placeholder="请选择Country Code"
              :code="codes.ctytxt"
            >
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
            <el-form-item label="tenor days" prop="ltdgrp.rec.tenmaxday">
              <c-input
                v-model.number="model.ltdgrp.rec.tenmaxday"
                placeholder="Please input tenor days"
                :disabled="model.ltdgrp.rec.avbby == 'P'"
                @keyup.enter.native="
                  defaultFunction(
                    'ltdgrp.rec.tenmaxday',
                    model.ltdgrp.rec.tenmaxday
                  )
                "
              ></c-input>
            </el-form-item>
        </c-col>
      </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Lttopn/Event"
import Ptap from "~/views/Public/Ptap";

export default {
    components: { "c-ptap": Ptap },
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
    data(){
        return {

        }
    },
    methods: {
    ...Event, 
    avbwthEvent(){
      if (this.model.ltdgrp.rec.avbwth != 'A'||this.model.ltdgrp.rec.avbwth != 'O') {
        this.model.ltdgrp.avb.pts.extkey = ''
        this.model.ltdgrp.blk.avbwthtxt = ''
      }
    },
    avbbykeyEvent() {
      if (this.model.ltdgrp.rec.avbby == 'P') {
        this.model.ltdgrp.rec.tenmaxday = 0;
        this.model.ltdgrp.blk.defdet = '';
      }
      if (
        this.model.ltdgrp.rec.avbby == 'D'||
        this.model.ltdgrp.rec.avbby == 'M'
      ) {
        this.model.ltdgrp.blk.defdet = ''; //汇票期限置空
        this.model.ltdgrp.drw.pts.extkey = ''; //付款人置空
        this.model.ltdgrp.drw.pts.adrblk = ''; //名称地址置空.pts.adrblk
      }
      this.executeCheck("ltdgrp.rec.avbby").then((res) => {
        if (res.respCode == SUCCESS) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
  },
  computed: {
    // avbFlag: {
    //   get() {
    //     return (
    //       this.model.ltdgrp.rec.avbwth == 'A' ||
    //       this.model.ltdgrp.rec.avbwth == 'S' 
    //     )
    //   },
    // },
    defdetFlag: {
      get() {
        return (
          this.model.ltdgrp.rec.avbby == 'A' ||
          this.model.ltdgrp.rec.avbby == 'P' ||
          this.model.ltdgrp.rec.avbby == 'M' 
          // this.model.ltdgrp.rec.avbby == ''
          // this.model.ltdgrp.rec.avbby != 'D' &&
          // this.model.ltdgrp.rec.avbby != 'N'
        )
      },
    },
    blkDftatFlag: {
      get() {
        return (
          this.model.ltdgrp.rec.avbby == 'M' ||
          this.model.ltdgrp.rec.avbby == 'D' 
        )
      },
    },
  },
  created: function () {},
  watch: {
    "model.ltdgrp.avt.pts.adrblk": {
      handler(val, oldVal) {
        this.model.ltdgrp.blk.avbwthtxt = val;
      },
      immediate: true,
    },
  },
}
</script>
<style>

</style>