Doxpame.vue

<template>
  <c-row>
    <c-col :span="24">
      <c-col :span="11">
        <c-col :span="24" class="doxpame_top_Description">
          <span>{{ getTitle }}</span>
        </c-col>
        <c-col>
          <el-form-item
            label=""
            label-width="0px"
            :prop="`${recgrp}.blk.${ametyp}`"
          >
            <c-input
              type="textarea"
              v-model="model[recgrp].blk[ametyp]"
              maxlength="52000"
              show-word-limit
              :rows="20"
              placeholder="请输入Description of Goods"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="11" :offset="1">
        <c-col :span="24" class="doxpame_top_Description">
          <span>History Overview</span>
        </c-col>
        <c-col :span="24">
          <el-form-item
            label=""
            label-width="0px"
            :prop="`${recgrp}.blk.${ametyp}ame`"
          >
            <c-input
              type="textarea"
              v-model="model[recgrp].blk[`${ametyp}ame`]"
              maxlength="52000"
              show-word-limit
              :rows="ametyp === 'adlcnd' ? 14 : 17"
              placeholder="请输入Description of Goods History"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24" v-if="ametyp === 'adlcnd'">
          <c-col :span="8">
            <c-checkbox v-model="model[recgrp].rec.redclsflg"
              >Red/Green Clause</c-checkbox
            >
          </c-col>

          <c-col :span="16">
            <c-checkbox v-model="model[recgrp].rec.spcbenflg"
              >Special payment conditions for beneficiary exists</c-checkbox
            >
          </c-col>

          <c-col :span="16" :offset="8">
            <c-checkbox v-model="model[recgrp].rec.spcrcbflg"
              >Special Payment Conditions for specified Bank only</c-checkbox
            >
          </c-col>
        </c-col>

        <c-col :span="24">
          <c-checkbox v-model="model[amep][`${ametyp}amep`].modflg"
            >Modify Text to Replace</c-checkbox
          >
        </c-col>

        <c-col :span="24">
          <c-checkbox v-model="model[amep][`${ametyp}amep`].modmanflg"
            >Modify field for manual update</c-checkbox
          >
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-col :span="11">
        <c-col :span="24" class="doxpame_top_Description">
          <span>Add/Delete Text in current Amendment</span>
        </c-col>
        <c-col :span="24">
          <el-form-item
            label=""
            label-width="0px"
            :prop="`${amep}.${ametyp}amep.usrblk`"
          >
            <c-input
              type="textarea"
              v-model="model[amep][`${ametyp}amep`].usrblk"
              maxlength="2000"
              show-word-limit
              :rows="8"
              placeholder="请输入Block to enter additional info for Add/Delete"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="11" :offset="1" class="ame_button">
        <c-col :span="24" class="ame_BlkTextarea_button">
          <c-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="showGridPromptDialog('letamep.lcrgodame.buttxmsel')"
          >
            ...
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button size="small" type="primary" @click="onLcrgodamepButdif">
            Show Diff
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button size="small" type="primary" @click="onLcrgodamepButadd">
            Add Text
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button
            size="small"
            icon="el-icon-delete"
            @click="onLcrgodamepButdel"
          >
            Delete text
          </c-button>
        </c-col>
      </c-col>
    </c-col>
  </c-row>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";

export default {
  inject: ["root"],
  props: {
    model: {
      type: Object,
      default: undefined,
    },
    codes: {
      type: Object,
      default: undefined,
    },
    recgrp: {
      type: String,
      default: "",
    },
    //修改字段：如货物lcrgod
    ametyp: {
      type: String,
      default: "",
    },
  },
  mixins: [commonProcess],
  data() {
    return {
      amep: `${this.recgrp.substring(0, 2)}tamep`,
    };
  },
  methods: {
    onLcrgodamepButadd() {},
    onLcrgodamepButdif() {},
    onLcrgodamepButdel() {},
  },
  computed: {
    getTitle() {
      switch (this.ametyp) {
        case "lcrgod":
          return "DESCRIPTION OF GOODS";
        case "lcrdoc":
          return "ADDITIONAL CONDITIONS";
        case "adlcnd":
          return "DOCUMENTS REQUIRED";
        case "spcben":
          return "Special Payment Conditions for Beneficiary";
        case "spcrcb":
          return "Special Payment Conditions for Bank Only";
        default:
          return "title 错误";
      }
    },
  },
  created: function () {},
};
</script>
<style>
.doxpame_top_Description {
  height: 16px;
  color: #606266;
  line-height: 16px;
  font-size: 12px;
}

.ame_BlkTextarea_button {
  margin-top: 20px;
}
.ame_button button {
  margin-bottom: 10px;
}
.ame_button button:nth-last-child(1) {
  margin-left: 10px;
}
</style>