新老数据每一行实时对比

<template>
  <div class="endorseText">
    <div class="endorseBox">
      <div class="viewwrap">
        <div class="viewhead">
          <div class="clearfix">
            <el-checkbox v-model="value.checkeOld" :disabled="showFlag" @change="value.checkenNew=!value.checkeOld" />
            <span>原数据</span>
          </div>
        </div>
        <div id="viewcon_old" class="viewcon disabled" @scroll="scrollviewcon('l')">
          <div id="edit_pre_old" ref="edit_pre_old" class="textarea">
            <pre v-for="(item,index) in endorsTextOldArr" :ref="'edit_pre_old'+index" :key="index" v-html="item.text" />
          </div>
        </div>
      </div>
      <div class="viewwrap">
        <div class="viewhead">
          <div class="clearfix">
            <el-checkbox v-model="value.checkenNew" :disabled="showFlag" @change="value.checkeOld=!value.checkenNew" />
            <span>新数据</span>
          </div>
          <el-button size="mini" plain :disabled="showFlag" @click="reSetNewVal()">还原</el-button>
        </div>
        <div id="viewcon_new" class="viewcon" @scroll="scrollviewcon('r')">
          <div id="edit_pre_new" ref="edit_pre_new" class="textarea">
            <pre
              v-for="(item,index) in endorsTextNewArr"
              :ref="'edit_pre_new'+index"
              :key="index"
              :class="[item.contenteditable&&!showFlag?'wright':'disable']"
              :contenteditable="item.contenteditable&&!showFlag"
              @blur="getNewVal(index)"
              v-html="item.text"
            />
          </div>

        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
export default {
  name: 'EndorseTextBlock',
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          checkeOld: false,
          checkenNew: true,
          endorsTextOld: '',
          endorsTextNew: ''
        }
      }
    }
  },
  data() {
    return {
      showFlag: false,
      endorsTextNewArr: [],
      endorsTextOldArr: [],
    };
  },
  created() { // 初始化对比
    this.endorsTextNewArr = this.getEndorsHtml(this.value.endorsTextOld);
    this.endorsTextOldArr = this.getEndorsHtml(this.value.endorsTextNew === '' ? this.value.endorsTextOld : this.value.endorsTextNew);
  },
  methods: {
    getEndorsHtml(string) {
      var NewArr = []
      const arr = string.split('&');
      arr.map((item, index) => {
        if (item.length > 0) {
          NewArr.push({ contenteditable: index % 2 === 0, text: item })
        }
      })
      return NewArr;
    },
    // 同步滚动
    scrollviewcon(type) {
      if (type === 'l') {
        document.getElementById('viewcon_new').scrollTop = document.getElementById('viewcon_old').scrollTop;
        document.getElementById('viewcon_new').scrollLeft = document.getElementById('viewcon_old').scrollLeft;
      } else {
        document.getElementById('viewcon_old').scrollTop = document.getElementById('viewcon_new').scrollTop;
        document.getElementById('viewcon_old').scrollLeft = document.getElementById('viewcon_new').scrollLeft;
      }
    },
    reSetNewVal() {
      this.endorsTextOldArr.map((item, index) => {
        this.$refs['edit_pre_new' + index][0].innerText = this.$refs['edit_pre_old' + index][0].innerText;
        this.getNewVal(index);
      })
    },
    getNewVal(index) {
      const contenteditable = this.endorsTextOldArr[index].contenteditable;
      const op = this.eq({
        valueOld: this.$refs['edit_pre_old' + index][0].innerText,
        valueNew: this.$refs['edit_pre_new' + index][0].innerText
      });
      this.$set(this.endorsTextOldArr, index, { contenteditable: contenteditable, text: op.valueOld })
      this.$set(this.endorsTextNewArr, index, { contenteditable: contenteditable, text: op.valueNew })
      this.value.endorsTextOld = this.$refs.edit_pre_old.innerText;
      this.value.endorsTextNew = this.$refs.edit_pre_new.innerText;
      this.$emit('input', this.value)
      console.log(this.value)
    },
    eq(op) {
      if (!op) {
        return op;
      }
      if (!op.valueOld_style) {
        op.valueOld_style = 'color:#ff0000;background:#FFFE55';
      }
      if (!op.valueNew_style) {
        op.valueNew_style = 'color:#ff0000;background:#FFFE55';
      }
      if (!op.eq_min) {
        op.eq_min = 3;
      }
      if (!op.eq_index) {
        op.eq_index = 5;
      }
      if (!op.valueOld || !op.valueNew) {
        return op;
      }
      var ps = {
        v1_i: 0,
        v1_new_value: '',
        v2_i: 0,
        v2_new_value: ''
      };
      while (ps.v1_i < op.valueOld.length && ps.v2_i < op.valueNew.length) {
        if (op.valueOld[ps.v1_i] === op.valueNew[ps.v2_i]) {
          ps.v1_new_value += op.valueOld[ps.v1_i].replace(/</g, '<').replace('>', '>');
          ps.v2_new_value += op.valueNew[ps.v2_i].replace(/</g, '<').replace('>', '>');
          ps.v1_i += 1;
          ps.v2_i += 1;
          if (ps.v1_i >= op.valueOld.length) {
            ps.v2_new_value += "<span style='" + op.valueNew_style + "'>" + op.valueNew.substr(ps.v2_i).replace(/</g, '<').replace('>', '>') + '</span>';
            break;
          }
          if (ps.v2_i >= op.valueNew.length) {
            ps.v1_new_value += "<s style='" + op.valueOld_style + "'>" + op.valueOld.substr(ps.v1_i).replace(/</g, '<').replace('>', '>') + '</s>';
            break;
          }
        } else {
          ps.v1_index = ps.v1_i + 1;
          ps.v1_eq_length = 0;
          ps.v1_eq_max = 0;
          ps.v1_start = ps.v1_i + 1;
          while (ps.v1_index < op.valueOld.length) {
            if (op.valueOld[ps.v1_index] === op.valueNew[ps.v2_i + ps.v1_eq_length]) {
              ps.v1_eq_length += 1;
            } else if (ps.v1_eq_length > 0) {
              if (ps.v1_eq_max < ps.v1_eq_length) {
                ps.v1_eq_max = ps.v1_eq_length;
                ps.v1_start = ps.v1_index - ps.v1_eq_length;
              }
              ps.v1_eq_length = 0;
              break;// 只寻找最近的
            }
            ps.v1_index += 1;
          }
          if (ps.v1_eq_max < ps.v1_eq_length) {
            ps.v1_eq_max = ps.v1_eq_length;
            ps.v1_start = ps.v1_index - ps.v1_eq_length;
          }

          ps.v2_index = ps.v2_i + 1;
          ps.v2_eq_length = 0;
          ps.v2_eq_max = 0;
          ps.v2_start = ps.v2_i + 1;
          while (ps.v2_index < op.valueNew.length) {
            if (op.valueNew[ps.v2_index] === op.valueOld[ps.v1_i + ps.v2_eq_length]) {
              ps.v2_eq_length += 1;
            } else if (ps.v2_eq_length > 0) {
              if (ps.v2_eq_max < ps.v2_eq_length) {
                ps.v2_eq_max = ps.v2_eq_length;
                ps.v2_start = ps.v2_index - ps.v2_eq_length;
              }
              ps.v1_eq_length = 0;
              break;// 只寻找最近的
            }
            ps.v2_index += 1;
          }
          if (ps.v2_eq_max < ps.v2_eq_length) {
            ps.v2_eq_max = ps.v2_eq_length;
            ps.v2_start = ps.v2_index - ps.v2_eq_length;
          }
          if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
            ps.v1_eq_max = 0;
          }
          if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
            ps.v2_eq_max = 0;
          }
          if ((ps.v1_eq_max === 0 && ps.v2_eq_max === 0)) {
            ps.v1_new_value += "<s style='" + op.valueOld_style + "'>" + op.valueOld[ps.v1_i].replace(/</g, '<').replace('>', '>') + '</s>';
            ps.v2_new_value += "<span style='" + op.valueNew_style + "'>" + op.valueNew[ps.v2_i].replace(/</g, '<').replace('>', '>') + '</span>';
            ps.v1_i += 1;
            ps.v2_i += 1;

            if (ps.v1_i >= op.valueOld.length) {
              ps.v2_new_value += "<span style='" + op.valueNew_style + "'>" + op.valueNew.substr(ps.v2_i).replace(/</g, '<').replace('>', '>') + '</span>';
              break;
            }
            if (ps.v2_i >= op.valueNew.length) {
              ps.v1_new_value += "<s style='" + op.valueOld_style + "'>" + op.valueOld.substr(ps.v1_i).replace(/</g, '<').replace('>', '>') + '</s>';
              break;
            }
          } else if (ps.v1_eq_max > ps.v2_eq_max) {
            ps.v1_new_value += "<s style='" + op.valueOld_style + "'>" + op.valueOld.substr(ps.v1_i, ps.v1_start - ps.v1_i).replace(/</g, '<').replace('>', '>') + '</s>';
            ps.v1_i = ps.v1_start;
          } else {
            ps.v2_new_value += "<span style='" + op.valueNew_style + "'>" + op.valueNew.substr(ps.v2_i, ps.v2_start - ps.v2_i).replace(/</g, '<').replace('>', '>') + '</span>';
            ps.v2_i = ps.v2_start;
          }
        }
      }
      op.valueOld = ps.v1_new_value;
      op.valueNew = ps.v2_new_value;
      return op;
    }

  }
};
</script>
<style lang="scss" scoped>
.endorseText {
  padding: 20px 14px 30px 14px;
  background: #56657b;
  .endorseBox {
    display: flex;
    justify-content: space-between;
    .viewwrap {
      width: 49.5%;
      min-height: 100px;
      border-radius: 4px;
      .viewhead {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        & {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .el-checkbox {
            margin-right: 14px;
          }
          button {
            height: 34px;
            margin-top: 5px;
          }
        }
      }
      .title {
        font-size: 14px;
        color: #666;
      }
      .viewcon {
        background: #fff;
        padding: 14px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        height: 320px;
        max-height: 320px;
        overflow-y: scroll;

        .textarea {
          resize: none;
          border: none;
          width: 100%;
          font-size: 12px;
          line-height: 25px;
          color: #333;
          font-weight: 400;
    //         display: flex;
    // flex-wrap: wrap;
          // background-color: #fff;

          &:focus {
            border: none;
            outline: none;
            outline-color: transparent;
          }
        }
        &.disabled{
           background: #F4F4F5;
          .textarea {
           color:#909399
           }
        }
      }
    }
  }
  pre{
    margin: 2px 0;
    padding:0px;
    border-radius:4px ;
    display: inline;
    font-size: 12px;
    &.disable{
      color: #909399;
      background: #f4f4f5;
    }
    &.wright{
      color: #333;
      background: #fff;
      // border: 1px solid #ddd;
    }
    &:focus {
      border: none;
      outline: none;
      //  border: 1px solid blue;
    }
  }
  .notes {
    font-size: 12px;
    margin-top: 20px;
    color: #fff;
    &::before {
      display: inline-block;
      content: "!";
      width: 12px;
      height: 12px;
      text-align: center;
      line-height: 12px;
      border-radius: 50%;
      margin-right: 5px;
      color: #333;
      background: #fff;
    }
  }
}
</style>