Dogpame.vue

<template>
  <div class="eibs-tab">

      <el-col :span="11">
       <c-col :span="24">
        <el-form-item label="Description of Goods and/or Services" prop="lidgrp.blk.lcrgod">
            <c-input 
            :rows="12"
            :disabled="this.flag1"
            type="textarea" v-model="model.lidgrp.blk.lcrgod" maxlength="1650" show-word-limit placeholder="请输入Description of Goods" ></c-input>
        </el-form-item>
        </c-col>

         <c-col :span="22">
        <el-form-item label="Adding / Deleting Text in Current Amendment" prop="litamep.lcrgodamep.usrblk">
            <c-input 
            :disabled="this.flag2"
            :rows="22"
            type="textarea" v-model="model.litamep.lcrgodamep.usrblk" maxlength="1650" show-word-limit placeholder="请输入Block to enter additional info for Add/Delete" ></c-input>
        </el-form-item>
        </c-col>
        <c-col :span="2">
        <c-button size="small" type="primary" icon="el-icon-search"
        :disabled="this.flag2" 
        @click="showGridPromptDialog('litamep.lcrgodame.buttxmsel',null,null,{TXT: 'litamep.lcrgodamep.usrblk'}, {TXT: false},'doxpDialog')"> 
        </c-button>
        </c-col>

      </el-col>

      <el-col :span="11" :offset="1">
      <c-col :span="24">
        <el-form-item label="History Overview" prop="lidgrp.blk.lcrgodame">
            <c-input 
            :rows="12"
            disabled
            type="textarea" v-model="model.lidgrp.blk.lcrgodame" maxlength="50" show-word-limit placeholder="请输入Description of Goods Amendment History" ></c-input>
        </el-form-item>
        </c-col>

         <c-col :span="12">
	    <c-checkbox 
        @change="open"
        style=" margin: 0px 0 10px 150px;"
        v-model="model.litamep.lcrgodamep.modflg">Modify Text to Replace</c-checkbox>
       </c-col>
                  
       <c-col :span="12">
	    <c-checkbox 
        @change="open1"
        style=" margin: 0px 0 10px 125px;"
        v-model="model.litamep.lcrgodamep.modmanflg">Modify Text Internally</c-checkbox>
       </c-col>
                  
       <c-col :span="24">
        <c-button 
        style=" margin: 0px 0 10px 150px;"
        size="small" type="primary"  @click="onLcrgodamepButdif">
            Show Diff
        </c-button>
       </c-col>
                  
       <c-col :span="24">
        <c-button 
        style=" margin: 0px 0 10px 150px;"
        disabled
        size="small" type="primary"  @click="onLcrgodamepButadd">
            Add Text
        </c-button>
       </c-col>
                  
       <c-col :span="24">
        <c-button 
        style=" margin: 0px 0 10px 150px;"
        disabled
        size="small" type="primary" icon="el-icon-delete" @click="onLcrgodamepButdel">
            Delete text
        </c-button>
       </c-col>
      </el-col>                                                          
  
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Litame/Event"

export default {
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
    data(){
        return {
            flag1:true,
            flag2:false,
        }
    },
     watch:{
        "model.litamep.lcrgodamep.modflg":{
            immediate:true,
            handler(val,oldval){
                if(this.model.litamep.lcrgodamep.modflg == 'X' && this.model.litamep.lcrgodamep.modmanflg== ''){
                    this.flag1=false;
                    this.flag2=true;
                    this.model.litamep.lcrgodamep.usrblk='';
                }else if(this.model.litamep.lcrgodamep.modflg == 'X' && this.model.litamep.lcrgodamep.modmanflg== 'X'){
                    this.flag1=false;
                    this.flag2=true;
                    
                }else if(this.model.litamep.lcrgodamep.modflg == '' && this.model.litamep.lcrgodamep.modmanflg== ''){
                    this.flag1=true;
                    this.flag2=false;
                }else if(this.model.litamep.lcrgodamep.modflg == '' && this.model.litamep.lcrgodamep.modmanflg== 'X'){
                    this.flag1=false;
                    this.flag2=true;
                    this.model.litamep.lcrgodamep.usrblk='';
                }
            }
        },
        "model.litamep.lcrgodamep.modmanflg":{
            immediate:true,
            handler(val,oldval){
                 if(this.model.litamep.lcrgodamep.modflg == 'X' && this.model.litamep.lcrgodamep.modmanflg== ''){
                    this.flag1=false;
                    this.flag2=true;
                    this.model.litamep.lcrgodamep.usrblk='';
                }else if(this.model.litamep.lcrgodamep.modflg == 'X' && this.model.litamep.lcrgodamep.modmanflg== 'X'){
                    this.flag1=false;
                    this.flag2=true;
                    
                }else if(this.model.litamep.lcrgodamep.modflg == '' && this.model.litamep.lcrgodamep.modmanflg== ''){
                    this.flag1=true;
                    this.flag2=false;
                }else if(this.model.litamep.lcrgodamep.modflg == '' && this.model.litamep.lcrgodamep.modmanflg== 'X'){
                    this.flag1=false;
                    this.flag2=true;
                    this.model.litamep.lcrgodamep.usrblk='';
                }
            }
        }

    },
    methods:{...Event,
    open(val){
        if(val === '' && !(this.model.lidgrp.blk.lcrgod == '')){
          this.$confirm('Do you really want to reset your manual modifications?','提示',{
           
            cancelButtonText: 'Cannel',
            confirmButtonText: 'Ok',
            type: 'warning',
            showClose:false
          }).then(() => {
            //yes的执行在这里写
          this.model.lidgrp.blk.lcrgod='';
            this.$message({
                  type: 'success',
                  message: '删除成功!'
            });
            
          }).catch(() => {
            //No的功能在这里写
            this.model.litamep.lcrgodamep.modflg='X'
                this.$message({
                  type: 'info',
                  message: '已取消'
                });  
          });
        }else if(val == 'X' && this.model.litamep.lcrgodamep.modmanflg =='X'){
            this.$confirm('Please reset internal modification first','提示',{
            confirmButtonText: 'Ok',
            showCancelButton:false,
            type: 'warning',
            showClose:false
          }).then(() => {
            //yes的执行在这里写
          this.model.litamep.lcrgodamep.modflg='';
          this.flag1=true;
          this.flag2=false;
          })
        }
    
    },
    open1(val){
        if(val === '' && !(this.model.lidgrp.blk.lcrgod == '')){
          this.$confirm('Do you really want to reset your manual modifications?','提示',{
           
            cancelButtonText: 'Cannel',
            confirmButtonText: 'Ok',
            type: 'warning',
            showClose:false
          }).then(() => {
            //yes的执行在这里写
          this.model.lidgrp.blk.lcrgod='';
            this.$message({
                  type: 'success',
                  message: '删除成功!'
            });
            
          }).catch(() => {
            //No的功能在这里写
            this.model.litamep.lcrgodamep.modmanflg = 'X'
                this.$message({
                  type: 'info',
                  message: '已取消'
                });  
        }); 
    }else if(this.model.litamep.lcrgodamep.modflg == 'X' && this.model.litamep.lcrgodamep.modmanflg =='X'){
            this.$confirm('Please reset modification to replace first','提示',{
            confirmButtonText: 'Ok',
            cancelButtonText: '',
            showCancelButton:false,
            type: 'warning',
            showClose:false
          }).then(() => {
            //yes的执行在这里写
          this.model.litamep.lcrgodamep.modmanflg='';
          this.flag1=true;
          this.flag2=false;
          })
    }
    }
    },
    created:function(){

    }
}
</script>
<style>

</style>