Doxpame.vue

<template>
  <c-row>
    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px;">
        <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="请输入货物描述"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="12" style="padding-left: 20px;">
        <c-col :span="24" class="doxpame_top_Description">
          <span>历史修改记录</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="请输入货物描述历史信息"
            ></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"
              >红/绿条款</c-checkbox
            >
          </c-col>

          <c-col :span="16">
            <c-checkbox v-model="model[recgrp].rec.spcbenflg"
              >受益人特殊付款条款</c-checkbox
            >
          </c-col>

          <c-col :span="16" :offset="8">
            <c-checkbox v-model="model[recgrp].rec.spcrcbflg"
              >仅适用于银行的特殊付款条款</c-checkbox
            >
          </c-col>
        </c-col>

        <c-col :span="12">
          <c-checkbox  class="checkbox-left" v-model="model[amep][`${ametyp}amep`].modflg"
            >修改和替换文本</c-checkbox
          >
        </c-col>

        <c-col :span="12">
          <c-checkbox v-model="model[amep][`${ametyp}amep`].modmanflg"
            >修改和人手更新文本</c-checkbox
          >
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px;">
        <c-col :span="24" class="doxpame_top_Description">
          <span>在当前修订中添加/删除文本</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="12" style="padding-left: 20px;" class="ame_button"> 
        <c-col :span="24" class="ame_BlkTextarea_button">
          <c-button
            size="small"
            type="primary"
            icon="el-icon-more"
            @click="showGridPromptDialog('letamep.lcrgodame.buttxmsel')"
          >
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button size="small" type="primary" @click="onLcrgodamepButdif">
            显示差异
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button size="small" type="primary" @click="onLcrgodamepButadd">
            添加文本
          </c-button>
        </c-col>

        <c-col :span="24">
          <c-button
            size="small"
            icon="el-icon-delete"
            @click="onLcrgodamepButdel"
          >
            删除文本
          </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 "货物描述";
        case "lcrdoc":
          return "附加条款";
        case "adlcnd":
          return "单据要求";
        case "spcben":
          return "受益人特殊付款条款";
        case "spcrcb":
          return "仅适用于银行的特殊付款条款";
        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>