Dorpame.vue

<template>
  <div class="eibs-tab">
    <!-- 左边 -->
    <c-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item label="Documents Required(46B)" prop="ledgrp.blk.lcrdoc">
          <c-fullbox>
            <c-input
                    type="textarea"
                    maxlength="52000"
                    v-model="model.ledgrp.blk.lcrdoc"
                    :rows="20"
                    show-word-limit
                    @change="handleLcrdocChanged"
                    :disabled="isLcrdocDisabled"></c-input>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-ptap-commons  :cols="65" :rows="800" :minRows="12" :maxRows="12" :model="model"
                         :disabledButton="isUsrblkDisabled"
                         :isRules='false'
                         :extCodes="['letamep','lcrdocamep']"
                         lastModel="lcrdoc"
                         title="Adding/Deleting Text in Current Amendment">
        </c-ptap-commons>

      </c-col>
    </c-col>
    <!-- 右边 -->
    <c-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <el-form-item label="Historic Overview" prop="oldledgrp.blk.lcrdocame">
          <c-fullbox>
            <c-input
                    disabled
                    type="textarea"
                    maxlength="52000"
                    v-model="model.oldledgrp.blk.lcrdocame"
                    :rows="20"
                    show-word-limit
                    placeholder="历史修改信息"></c-input>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="24" class="">
          <el-form-item label=" " prop="letamep.lcrdocamep.modflg" label-width="180px" style="float: left">
            <c-checkbox
                    v-model="model.letamep.lcrdocamep.modflg"
                    class="checkbox-left"
                    true-label="X"
                    false-label=""
                    :disabled="this.model.letamep.lcrdocamep.modmanflg == 'X'"
                    @change="onModflgChange"
            >Modify Text to Replace</c-checkbox
            >
          </el-form-item>
        </c-col>
        <c-col :span="24" class="">
          <el-form-item label=" " prop="letamep.lcrdocamep.modmanflg" label-width="180px" style="float: left">
            <c-checkbox
                    v-model="model.letamep.lcrdocamep.modmanflg"
                    class="checkbox-left"
                    true-label="X"
                    false-label=""
                    :disabled="this.model.letamep.lcrdocamep.modflg == 'X'"
                    @change="onModmanflgChange"
            >Modify Text Internally</c-checkbox
            >
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="160px" style="float: left">
          <text-diff
                  :leftText="model.oldledgrp.blk.lcrdoc"
                  :rightText="model.ledgrp.blk.lcrdoc"
                  :isShowScale="false"
                  :disabled="model.ledgrp.blk.lcrdoc === model.oldledgrp.blk.lcrdoc" />
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="180px" style="float: left">
          <c-button
                  type="primary"
                  @click="onAddClick"
                  :disabled="this.model.letamep.lcrdocamep.lcrdoc == null || this.model.letamep.lcrdocamep.lcrdoc == ''">
            Add
          </c-button>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="180px" style="float: left">
          <c-button
                  type="primary"
                  @click="onDeleteClick"
                  :disabled="this.model.letamep.lcrdocamep.lcrdoc == null || this.model.letamep.lcrdocamep.lcrdoc == ''">
            Delete
          </c-button>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
  import event from "../event";
  import moment from 'moment';
  import TextDiff from "~/components/business/TextDiff";
  import commonDepend from "~/mixin/commonDepend";
  export default {
    components: { TextDiff },
    inject: ["root"],
    props: ["model", "codes"],
    mixins: [event,commonDepend],
    data() {
      return {
        isLcrdocDisabled: true,
        isUsrblkDisabled: false,
      };
    },
    methods: {
      onAddClick() {
        if (this.model.letamep.lcrdocamep.lcrdoc != null && this.model.letamep.lcrdocamep.lcrdoc != "") {
          this.model.ledgrp.blk.lcrdoc = this.model.ledgrp.blk.lcrdoc + "\n" + this.model.letamep.lcrdocamep.lcrdoc;

          this.model.ledgrp.blk.lcrdocame = this.model.ledgrp.blk.lcrdocame+"\n"
                  +"*** Amendment "+this.model.letamep.amenbr+ " Date:"+ moment(new Date()).format("MM/DD/YY")+":"+"\n"
                  +"/ADD/"+"\n"
                  +this.model.letamep.lcrdocamep.lcrdoc+"\n";

          //设置lcrdoc被修改过
          this.setLcrdocModified();

          this.setDocAddRep();

          this.model.letamep.lcrdocamep.lcrdoc = "";



        }
      },
      onDeleteClick() {
        if (this.model.ledgrp.blk.lcrdoc != null && this.model.ledgrp.blk.lcrdoc != "") {
          let lcrdoc = this.model.ledgrp.blk.lcrdoc;
          let realMatchText = this.specialCharactersProcess(this.model.letamep.lcrdocamep.lcrdoc);
          // 使用正则表达式，匹配usrblk文本框中的内容
          // 正则表达式，开启匹配多行 flag: 'g'，开启多行模式 flag:'m'
          let usrblkRegExp = new RegExp("^"+realMatchText+"$","gm");
          let matchArray = lcrdoc.match(usrblkRegExp);
          // 未找到匹配字符串
          if(matchArray == null || matchArray.length<=0){
            this.$alert('Text to delete not found in original text and thus cannot be deleted', "提示", {
              confirmButtonText: "OK",
            });
            return;
          }

          // 匹配到多个 字符串
          if(matchArray!=null&&matchArray.length>1){
            this.$alert('Text to delete found more than once in original text and thus cannot be deleted. \n'+
                    'Please extend portion to delete or use modify to replace.', "提示", {
              confirmButtonText: "OK",
            });
            return;
          }

          // 匹配到正好1个字符串
          if(matchArray!=null&&matchArray.length==1){
            this.model.ledgrp.blk.lcrdoc = this.model.ledgrp.blk.lcrdoc.replace(usrblkRegExp,"");

            this.model.ledgrp.blk.lcrdocame = this.model.ledgrp.blk.lcrdocame+"\n"
                    +"*** Amendment "+this.model.letamep.amenbr+ " Date:"+ moment(new Date()).format("MM/DD/YY")+":"+"\n"
                    +"/DEL/"+"\n"
                    +this.model.letamep.lcrdocamep.lcrdoc+"\n";

            //设置lcrdoc被修改过
            this.setLcrdocModified();

            this.setDocDelRep();

            this.model.letamep.lcrdocamep.lcrdoc = "";
            return;
          }
        }
      },
      onModflgChange() {
        if (this.model.letamep.lcrdocamep.modflg == "X") {
          
          // 如果blk.lcrdoc的值被修改过，则给出提示
          if(this.isLcrdocModified()){
            this.$confirm('Do you really want to change to modification of the complete text?\n' +
                    'The information about single added and deleted lines will be lost.', '提示', {
              confirmButtonText: 'OK',
              cancelButtonText: 'Cancel',
              type: 'warning',
              showClose: false
            }).then(() => {//yes的执行在这里写
              this.model.letamep.lcrdocamep.modflg ="X"

              this.isLcrdocDisabled = false;
              this.isUsrblkDisabled = true;
              this.model.letamep.lcrdocamep.lcrdoc = "";
              this.model.ledgrp.blk.lcrdoc = this.model.oldledgrp.blk.lcrdoc;
              // 值恢复，删除lcrdoc的modify记录
              this.resetLcrdocNotModified();


            }).catch(() => {//No的功能在这里写
              this.model.letamep.lcrdocamep.modflg = ""

              this.isLcrdocDisabled = true;
              this.isUsrblkDisabled = false;
            });
          }else{
            this.isLcrdocDisabled = false;
            this.isUsrblkDisabled = true;
            this.model.letamep.lcrdocamep.lcrdoc = "";
          }
        } else {

          // 如果blk.lcrdoc的值被修改过，则给出reset提示
          if(this.isLcrdocModified()){
            this.$confirm('Do you really want to reset your manual modifications?', '提示', {
              confirmButtonText: 'OK',
              cancelButtonText: 'Cancel',
              type: 'warning',
              showClose: false
            }).then(() => {//yes的执行在这里写，执行reset，将blk.lcrdoc恢复到原值
              this.model.letamep.lcrdocamep.modflg = ""

              this.isLcrdocDisabled = true;
              this.isUsrblkDisabled = false;
              this.model.letamep.lcrdocamep.lcrdoc = "";
              this.model.ledgrp.blk.lcrdoc = this.model.oldledgrp.blk.lcrdoc;
              // 值恢复，删除lcrdoc的modify记录
              this.resetLcrdocNotModified();

            }).catch(() => {//No的功能在这里写，不执行rest，将modflg的继续选中
              this.model.letamep.lcrdocamep.modflg = "X"

            });

          }else{
            this.isLcrdocDisabled = true;
            this.isUsrblkDisabled = false;
          }
        }
      },
      onModmanflgChange() {
        if (this.model.letamep.lcrdocamep.modmanflg == "X") {
          this.isLcrdocDisabled = false;
          this.isUsrblkDisabled = true;
          this.model.letamep.lcrdocamep.lcrdoc = "";
        } else {
          this.isLcrdocDisabled = true;
          this.isUsrblkDisabled = false;
        }
      },

      setLcrdocModified(){
        this.customAddModify(this.model.ledgrp.blk,"lcrdoc");
      },

      resetLcrdocNotModified(){

        // 清空add/delete内容
        this.model.docAddDelRep = "";

        this.customRemoveModify(this.model.ledgrp.blk,"lcrdoc");
      },

      isLcrdocModified(){
        if(!this.model.ledgrp.blk.modifySet){
          return false;
        }else{
          if (this.model.ledgrp.blk.modifySet.includes("lcrdoc")) {
            return true;
          }
        }
        return false;
      },

      setDocAddRep(){
        if (this.model.docAddDelRep === "") {
          this.model.docAddDelRep = "/ADD/\n" + this.model.letamep.lcrdocamep.lcrdoc;
        } else {
          this.model.docAddDelRep = this.model.docAddDelRep + "\n/ADD/\n" + this.model.letamep.lcrdocamep.lcrdoc;
        }
      },

      setDocDelRep(){
        if (this.model.docAddDelRep === "") {
          this.model.docAddDelRep = "/DELETE/\n" + this.model.letamep.lcrdocamep.lcrdoc;
        } else {
          this.model.docAddDelRep = this.model.docAddDelRep + "\n/DELETE/\n" + this.model.letamep.lcrdocamep.lcrdoc;
        }
      },
      
      handleLcrdocChanged(){
        // 设置修改标记
        this.setLcrdocModified();


        let changedText = "*** Amendment "+this.model.letamep.amenbr+ " Date:"+ moment(new Date()).format("MM/DD/YY")+":"+"\n";

        if(this.model.letamep.lcrdocamep.modflg==='X'){
          changedText = changedText+"/REPALL/"+"\n";
        }else{
          changedText = changedText+"Documents Required changed as follows:"
        }

        changedText = changedText+this.model.ledgrp.blk.lcrdoc+"\n";

        this.model.ledgrp.blk.lcrdocame = this.model.ledgrp.blk.lcrdocame+"\n"+changedText;


      },


    },
  };
</script>
<style></style>