xiaoshi_system/src/views/project/patentCollection/components/mixins/index.js

export const projectData = {
  props: {
    // 视图数据源
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 分页信息
    queryParams: {
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 10
        }
      }
    },
    // 栏位
    column: {
      type: Array,
      default: () => {
        return []
      }
    },
    //专利号
    projectId: {
      default: 0
    },
    //选择专利
    refresh: {
      default: false
    },

    patentNoList: {
      type: Array,
      default: () => {
        return []
      }
    },
    outside: {
      default: false
    },
  },

  data() {
    return {
    }
  },

  mounted() {

  },
  methods: {
    // 点击专利号
    handleClick(row, index) {
      var location = (index + 1) + ((this.queryParams.current - 1) * this.queryParams.size)
      this.$emit('clickPatentNo', row, location)
    },
    changeSelect(patent) {
      const index1 = this.patentNoList.indexOf(patent.patentNo)
      if (index1 === -1) {
        if (this.projectId) {
          this.patentNoList.push(patent.patentNo)
        } else {
          this.patentNoList.push(patent.appNo)
        }

      } else {
        this.patentNoList.splice(index1, 1)
      }
      this.$emit('addSelect', patent.patentNo)
    }
  },
}
import { mapGetters } from "vuex"
export const handleData = {
  // mixins: [highlight],
  props: {
  },
  data() {
    return {
      //专利类型
      patentType: {
        1: '发明',
        8: '发明',
        2: '实用新型',
        9: '实用新型',
        3: '外观',
      },
      // 专利状态
      simpleStatus: {
        1: '有效',
        2: '无效',
        3: '审中',
      },
      // 法律状态(暂定)
      legalStatus: {
        1: '有效',
        2: '无效',
        3: '审中',
      },
    }
  },
  computed: {
    ...mapGetters(['highlight'])
  },
  mounted() {

  },
  methods: {
    getView(row, key, type, prop, data) {


      var obj = {
        type: type ? type : 'String',
        value: key
      }
      if (row) {
        const change2 = row.change2
        const change = row.change
        switch (key) {
          case "title":
            // prop = !change ? "content" : "contentOut"
            // obj.type = 'Object'
            var arr = row.title
            if (!arr) {
              text = ''
              break
            }
            if (!change) {
              var obj = arr.find(item => {
                return item.if_origin
              })
              var text = ''
              if (obj) {
                text = obj.text_content
              }
            } else {
              var obj = arr.find(item => {
                return !item.if_origin && item.language == 'CN'
              })
              var text = ''
              if (obj) {
                text = obj.text_content
              }
            }
            break
          case "abstractStr":
            // prop = !change2 ? "content" : "contentOut"
            // obj.type = 'Object'
            var arr = row.abstractStr
            if (!arr) {
              text = ''
              break
            }
            if (!change2) {
              var obj = arr.find(item => {
                return item.if_origin
              })
              var text = ''
              if (obj) {
                text = obj.text_content
              }
            } else {
              var obj = arr.find(item => {
                return !item.if_origin && item.language == 'CN'
              })
              var text = ''
              if (obj) {
                text = obj.text_content
              }
            }
            break;
          case "mipc"://ipc
          case 'inventor'://发明人
          case 'applicant'://申请人
          case 'rightHolder'://权利人
            let ipcArr = []
            for (let k in row[key]) {
              ipcArr.push(row[key][k])
            }
            row[`${key}2`] = ipcArr
            obj.value = `${key}2`
            obj.type = 'Array'
            var text = this.$commonJS.getColumnData(row, obj, prop, data)
            break;
          case 'legalStatus'://法律状态
          case 'simpleStatus'://专利状态
          case 'patentType'://专利类型
            var text = this[key][row[key]]
            break;
          default:
            var text = this.$commonJS.getColumnData(row, obj, prop, data)
            break
        }
        // var text = this.$commonJS.getColumnData(row, obj, prop, data)
        // console.log(text,key);
        return this.getViewDom(text, type)
      }
    },
    getViewDom(text, field,) {
      if (!text) {
        return ""
      }
      var obj = null
      switch (field) {
        case '权利要求原文':
          obj = text.find(item => {
            return item.if_origin
          })
          text = obj ? obj.text_content : ''
          break;
        case '权利要求译文':
          obj = text.find(item => {
            return item.if_origin == false
          })
          text = obj ? obj.text_content : ''
          break;
        case '说明书文本原文':
          obj = text.find(item => {
            return item.if_origin
          })
          var data = obj.text_content.split('\r\n').join('<br/>')
          text = data ? data : ''
          break;
        case '说明书文本译文':
          obj = text.find(item => {
            return item.if_origin == false
          })
          var data = obj.text_content.split('\r\n').join('<br/>')
          text = data ? data : ''
          break;

        default:
          break;
      }
      if (this.patent && this.patent.patentNo && field) {
        // SET_PATENT_OPINION_CONTRAST
        var arr = ['piZhuContrastList', 'contrastList', 'opinionContrastList']
        arr.forEach((item, index) => {
          if (this.highlight[item].length > 0) {
            text = this.getObject(item, index, text, field)
          }
        });

      }
      if (!this.highlight.patentHightLight.ifEnable || !text) {
        return text
      }
      try {
        this.highlight.patentHightLight.configs.map(item => {
          const keywords = item.keywords.split(';')
          for (let keyword of keywords) {
            if (!keyword) {
              continue
            }
            let sText = text
            let num = -1
            const rStr = new RegExp(keyword, "g")
            const rHtml = new RegExp("\<.*?\>", "ig")
            const sKey = `<span style="background: ${item.color};color: #fff">${keyword}</span>`
            const aHtml = sText.match(rHtml)
            sText = sText.replace(rHtml, '{~}')
            sText = sText.replace(rStr, sKey)
            sText = sText.replace(/{~}/g, () => {
              num++
              return aHtml[num]
            })
            text = sText
          }
        })

      } catch (e) {
      }
      // console.log(text);
      return text
    },
    getObject(key, index, text, field) {
      var arr1 = ['color', 'Type', 'Id', 'column', 'index', 'text', 'remark', 'temNode', 'selectType']
      var obj = {
        // 'piZhuContrastList': ['color', 'scratchType', 'id', 'scratchField', 'position', 'text', 'remark'],
        'piZhuContrastList': ['markColor', 'markType', 'id', 'markSelectField', 'markSite', 'markSelectText', 'markNoteText'],
        'contrastList': ['markColor', 'markType', 'id', 'fieldName', 'position', 'evidenceText'],
        // 'opinionContrastList': ['color', 'scratchType', 'id', 'scratchField', 'position', 'content'],
        'opinionContrastList': ['markColor', 'markType', 'id', 'scratchField', 'position', 'content'],
      }
      var selectType = ['p', 'c', 'o']
      var row = this.highlight[key]
      if (row.length > 0) {
        for (let i = 0; i < row.length; i++) {
          if (row[i].patentNo == this.patent.patentNo || (key == 'contrastList'&& (this.patent.patentNo != this.signPatentNo) && this.evidence && row[i].literatureId == this.evidence.id)) {
            if (row[i][obj[key][3]].indexOf(field) != -1) {
              var a = {}
              a.Type = 1
              obj[key].forEach((item, index1) => {
                if (item) {
                  if (arr1[index1] == 'index') {
                    a[arr1[index1]] = Number(row[i][item])
                  } else {
                    a[arr1[index1]] = row[i][item]
                  }

                }
              });
              a.temNode = text
              a.selectType = selectType[index]
              text = this.AddClass1(a);
            }
          }
        }
        return text
      }
    },
    //切换原文译文 
    handleChange(row, key) {
      switch (key) {
        case "title":
          this.$set(row, 'change', !row.change)
          break
        case "abstractStr":
          this.$set(row, 'change2', !row.change2)
          // row.change2 = !row.change2
          break
      }
    },

  },
}

export const highlight = {

  data() {
    return {

    }
  },
  computed: {
    // piZhuContrastList() {
    //   return this.$store.state.highlight.piZhuContrastList
    // },
    // contrastList() {
    //   return this.$store.state.highlight.contrastList
    // },
    // opinionContrastList() {
    //   return this.$store.state.highlight.opinionContrastList
    // },
  },
  mounted() {
    window.mouseenter1 = this.mouseenter1
    window.mouseleave1 = this.mouseleave1

  },
  methods: {
    mouseenter1(e, id, selectType) {
      var dom = document.getElementsByClassName(id)
      var message = this.getMessage(id, selectType)
      // 普通for循环可以拿到dom节点，forEach是拿不到dom节点
      for (let i = 0; i < dom.length - 1; i++) {
        dom[i].classList.add('greenColor')
        this.getChildNodesAdd(dom[i].childNodes)
      }
      // e.target是获取当前的,dom获取的是所有的class相同的节点
      e.target.parentNode.classList.add("pizhuLightHeigh");
      if (message.remark) {
        e.target.parentNode.appendChild(this.addPara(message.remark, e));
      }
    },
    getMessage(id, selectType) {
      var Id = id.substring(1, id.length)
      var messageItem = {}
      if (selectType == 'p') {//批注
        var messageItem = this.highlight.piZhuContrastList.find(item => {
          return item.id == Id
        })
      } else if (selectType == 'c') {//对比
        var messageItem = this.highlight.contrastList.find(item => {
          return item.id == Id
        })
      } else if (selectType == 'o') {//
        var messageItem = this.highlight.opinionContrastList.find(item => {
          return item.id == Id
        })
      }
      return messageItem
    },
    // 添加背景色
    getChildNodesAdd(dom) {
      if (dom.length > 0) {
        for (let m = 0; m < dom.length; m++) {
          if (dom[m].nodeType == 1) {
            dom[m].classList.add('greenColor')
          }
          if (dom[m].childNodes.length > 0) {
            this.getChildNodesAdd(dom[m].childNodes)
          }
        }
      }
    },
    addPara(val, e) {
      //创建div标签
      var p = document.createElement("div");
      //添加class
      p.classList.add('showPiZhu')
      if (e.clientY - 200 < 200 && e.clientX + 200 > document.documentElement.clientWidth) {
        p.setAttribute('style', 'left:-200px')
      } else if ((e.clientX + 200 > document.documentElement.clientWidth && e.clientY + 200 > document.documentElement.clientHeight) || e.clientX + 200 > document.documentElement.clientWidth) {
        p.setAttribute('style', 'bottom:25px;left:-200px;')
      } else if ((e.clientY + 200 > document.documentElement.clientHeight && e.clientX - 200 < 200) || (e.clientY + 200 > document.documentElement.clientHeight && e.clientX - 200 > 200)) {
        p.setAttribute('style', 'bottom:20px;left:10px')
      }
      //创建文本节点
      var text = document.createTextNode(val);
      //将文本节点追加到元素节点中
      p.appendChild(text);
      return p
    },
    mouseleave1(e, id, selectType) {
      var dom = document.getElementsByClassName(id)
      e.target.parentNode.classList.remove("pizhuLightHeigh");
      var message = this.getMessage(id, selectType)
      if (message.remark) {
        document.getElementsByClassName('showPiZhu')[0].remove()
      }
      for (let i = 0; i < dom.length - 1; i++) {
        dom[i].classList.remove('greenColor')
        this.getChildNodesRemove(dom[i].childNodes)
      }
    },
    // 删除背景色
    getChildNodesRemove(dom) {
      if (dom.length > 0) {
        for (let m = 0; m < dom.length; m++) {
          if (dom[m].nodeType == 1) {
            dom[m].classList.remove('greenColor')
          }
          if (dom[m].childNodes.length > 0) {
            this.getChildNodesRemove(dom[m].childNodes)
          }
        }
      }
    },
    AddClass1(selectObject) {
      let el = selectObject.temNode;
      // 将当前页面获取到的字符串进行处理，返回当前页面所有的标签及文本
      var splitStrings = this.SplitHtmlTag1(el);
      let bgColor = selectObject.color;
      if (!bgColor) {
        selectObject.color = 'yellow'
      }
      
      // 添加线及高亮(2:波浪线，0：下划线，1：高亮)
      var style = ''
      switch (selectObject.Type + '') {
        case '0'://下划线
          style = `text-decoration-line: underline;text-decoration-color: ${selectObject.color}`
          break;
        case '1'://高亮
          style = `background-color:${selectObject.color}`
          break;
        case '2'://波浪线
          style = `text-decoration-line: underline;text-decoration-style: wavy ;text-decoration-color: ${selectObject.color}`
          break;

      }
      let startTag = `<span class="${selectObject.selectType + selectObject.Id}" id="${selectObject.selectType + selectObject.Id}" style="${style}">`
      //图标
      var a = 'icon-xinxi3'
      switch (selectObject.selectType) {
        case 'p'://批注
          a = 'iconfont icon-xinxi3'
          break;
        case 'c'://对比
          a = 'el-icon-location-outline'
          break;
        case 'o'://陈述意见
          a = 'iconfont icon-xinxi2'
          break;
        case 'r'://特征
          break
      }
      var imgTag = `<span class="${selectObject.selectType + selectObject.Id}" style="background-color:white !important;"><i class="${a}" style="vertical-align: super;background-color:white !important;" onclick="vm.selectMark('${selectObject.selectType + selectObject.Id}','${selectObject.selectType}')" onmouseenter="mouseenter1(event,'${selectObject.selectType + selectObject.Id}','${selectObject.selectType}')" onmouseleave="mouseleave1(event,'${selectObject.selectType + selectObject.Id}','${selectObject.selectType}')"></i></span>`
      if (selectObject.selectType == 'r') {//特征
        imgTag = `<span class="${selectObject.selectType + selectObject.Id}" style="background-color:white !important;"><i class="el-icon-delete" style="vertical-align: super;background-color:white !important;" onclick="deleteFeature('${selectObject.selectType + selectObject.Id}','${selectObject.selectType}')"></i></span>`
      }
      let endTag = '</span>';
      let elText = '';

      splitStrings.forEach(function (item) {
        if (item.type == 'text') {
          elText = elText + item.text;
        }
      });
      let Indexs = [];
      let i = 0
      if (selectObject.index < 0) {
        let pattern = new RegExp(selectObject.text.replace(/[\r\n]/g, "").replace(/\ +/g, ""), "g");
        while ((match = pattern.exec(elText)) != null) {
          Indexs[i] = match;
          i++;
        }
      } else {
        Indexs[i] = [selectObject.text];
        Indexs[i].index = selectObject.index;
      }
      Indexs.forEach(function (match) {
        let currentIndex = 0;
        let temSplitStrings = new Array();
        splitStrings.forEach(function (item) {
          if (item.type == 'text') {
            if (item.text) {
              if (match.index >= currentIndex && match.index < (currentIndex + item.text.length)) {
                if ((match.index + match[0].length) <= (currentIndex + item.text.length) && item.text.indexOf(match[0]) != -1) {

                  if (match.index > currentIndex) {
                    temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
                  }
                  temSplitStrings.push({ text: startTag, type: 'tag' });
                  temSplitStrings.push({ text: match[0], type: 'text' });
                  temSplitStrings.push({ text: imgTag, type: 'tag' });
                  // }
                  temSplitStrings.push({ text: endTag, type: 'tag' });

                  if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
                    temSplitStrings.push({ text: item.text.substring((match.index + match[0].length) - currentIndex), type: 'text' });
                  }
                } else {
                  if (item.text.indexOf(match[0]) != -1) {
                    if (match.index > currentIndex) {
                      temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
                    }
                    if (temSplitStrings.length > 1) {

                      temSplitStrings.push({ text: startTag, type: 'tag' });
                    } else {
                      temSplitStrings.push({ text: startTag, type: 'tag' });
                    }

                    temSplitStrings.push({ text: item.text.substring(match.index - currentIndex), type: 'text' });
                    temSplitStrings.push({ text: endTag, type: 'tag' });
                  } else {
                    // console.log(temSplitStrings,match.index,item.text,currentIndex,match[0])
                    // debugger
                    temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
                    temSplitStrings.push({ text: startTag, type: 'tag' });
                    temSplitStrings.push({ text: item.text.substring(match.index - currentIndex, item.text.length), type: 'text' });
                    // temSplitStrings.push({ text: imgTag, type: 'tag' });
                    temSplitStrings.push({ text: endTag, type: 'tag' });
                    // return false
                    // temSplitStrings.push(item);
                  }
                }
              } else {
                if ((match.index + match[0].length) <= (currentIndex + item.text.length) && (match.index + match[0].length) > currentIndex) {
                  temSplitStrings.push({ text: startTag, type: 'tag' });
                  temSplitStrings.push({ text: item.text.substring(0, match.index + match[0].length - currentIndex), type: 'text' });

                  temSplitStrings.push({ text: imgTag, type: 'tag' });

                  temSplitStrings.push({ text: endTag, type: 'tag' });
                  if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
                    temSplitStrings.push({ text: item.text.substring((match.index + match[0].length - currentIndex)), type: 'text' });
                  }
                } else {
                  if (match.index < currentIndex && (match.index + match[0].length) >= (currentIndex + item.text.length)) {

                    temSplitStrings.push({ text: startTag, type: 'tag' });
                    temSplitStrings.push(item);
                    temSplitStrings.push({ text: endTag, type: 'tag' });
                  } else {

                    temSplitStrings.push(item);
                  }
                }
              }

              currentIndex = currentIndex + item.text.length;
            } else {
              temSplitStrings.push(item);
            }
          } else {
            temSplitStrings.push(item);
          }
        });

        splitStrings = temSplitStrings;
      });

      let temInnerHtml = '';
      splitStrings.forEach(function (item) {
        temInnerHtml = temInnerHtml + item.text;
      });
      return temInnerHtml;

    },
    SplitHtmlTag1(el) {
      let temInnerHtml = el.trim();
      let pattern = /<[^>]+>/g;
      let Indexs = [];
      let i = 0
      var match = null
      while ((match = pattern.exec(temInnerHtml)) != null) {
        Indexs[i] = match;
        i++;
      }
      var splitStrings = new Array();
      i = 0;
      var currentIndex = 0;
      for (var index = 0; index < Indexs.length; index++) {
        if (Indexs[index].index > currentIndex) {
          splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, Indexs[index].index), "type": "text" };
          i++;
          splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
          i++;
        } else {
          splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
          i++;
        }
        currentIndex = Indexs[index].index + Indexs[index][0].length;
      }
      if (currentIndex < temInnerHtml.length) {
        splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, temInnerHtml.length), "type": "text" };
      }

      return splitStrings;

    },
  },
}