xiangan_pc/src/components/patient-view/detail/_mixin.js

import cloneDeep from 'lodash/cloneDeep'

export default {
  props: {
    patientIdNumber: { type: String, required: true },
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      dataListTemp: [],
      type: '',
      searchKeyWord: '',
      searchIndex: -1,
      searchResult: [],
      searchColumn: []
    }
  },
  watch: {
    searchKeyWord(val) {
      if (val) {
        this.searchHandle()
      } else {
        this.searchReset()
      }
    }
  },
  created() { this.getDataList() },
  methods: {
    refreshData() { this.getDataList() },
    getDataList() {
      this.dataListLoading = true
      this.$http.get('/patient/view/examData', {
        params: {
          patientIdNumber: this.patientIdNumber,
          projectId: this.projectId ? this.projectId : null,
          type: this.type
        }
      }).then(({ data: res }) => {
        this.dataList = cloneDeep(res.data)
        this.dataListTemp = cloneDeep(res.data)
        this.dataListLoading = false
      }).catch(() => { this.dataListLoading = false })
    },
    setIndexDate(date) {
      if (date) {
        const rowIndex = this.dataList.findIndex(item => {
          return (item.opDate && item.opDate === date) ||
          (item.examTime && item.examTime.indexOf(date) >= 0) ||
          (item.EXAM_TIME && item.EXAM_TIME.indexOf(date) >= 0)
        })
        if (rowIndex >= 0) {
          setTimeout(() => {
            this.setCurrentRow(rowIndex)
          }, 100)
        }
      }
    },
    setCurrentRow(i) {
      if (this.$refs.dataList) {
        this.$refs.dataList.setCurrentRow(this.dataList[i])
        // this.$refs.dataList.toggleRowExpansion(this.dataList[i], true)
        const targetTop = this.$refs.dataList.$el.querySelectorAll('.el-table__body .row-1')[i].getBoundingClientRect().top
        const containerTop = this.$refs.dataList.$el.querySelector('.el-table__body').getBoundingClientRect().top
        const scrollParent = this.$refs.dataList.$el.querySelector('.el-table__body-wrapper')
        // console.log(this.$refs.dataList.$el, scrollParent, targetTop, containerTop)
        // const el = this.$refs.dataList.$el.querySelectorAll('.el-table__body .row-1')[i]
        // console.log(el, el.getClientRects(), el.getBoundingClientRect())
        scrollParent.scrollTop = targetTop - containerTop
      }
    },
    searchLast() {
      if (this.searchResult.length > 0) {
        if (this.searchIndex > 0) {
          this.searchIndex--
        } else {
          this.searchIndex = this.searchResult.length - 1
        }
        this.searchIndexDisplay()
      } else {
        this.searchIndex = -1
      }
    },
    searchNext() {
      if (this.searchResult.length > 0) {
        if (this.searchIndex + 1 < this.searchResult.length) {
          this.searchIndex++
        } else if (this.searchIndex + 1 >= this.searchResult.length) {
          this.searchIndex = 0
        }
        this.searchIndexDisplay()
      } else {
        this.searchIndex = -1
      }
    },
    searchReset() {
      this.searchIndex = -1
      this.searchKeyWord = ''
      this.searchResult = []
      this.dataList = cloneDeep(this.dataListTemp)
    },
    searchIndexDisplay() {
      if (this.searchIndex >= 0 && this.searchResult.length > 0) {
        const index = this.searchResult[this.searchIndex]
        this.$refs.dataList.toggleRowExpansion(this.dataList[index], true)
        this.setCurrentRow(index)
      }
    },
    searchHandle() {
      if (!this.searchKeyWord) { return false }
      this.searchIndex = -1
      this.searchResult = []
      this.dataList = cloneDeep(this.dataListTemp)

      const regex = new RegExp(this.searchKeyWord, 'g')
      let rowCount = 0
      this.dataList.forEach((item1, rowIndex1) => {
        const data = item1.data
        let isFlag = false
        if (data && data.length > 0) {
          // data子集匹配
          data.forEach((item2, rowIndex2) => {
            // 遍历行对象
            // Object.keys(item2).forEach(key => {
            this.searchColumn.forEach(key => {
              if (item2[key] && item2[key].toString().includes(this.searchKeyWord)) {
                isFlag = true
                item2[key] = item2[key].toString().replace(regex, `<span style='color:red;'>${this.searchKeyWord}</span>`)
              }
            })
          })
        } else {
          // 无data子集，自匹配
          this.searchColumn.forEach(key => {
            if (item1[key] && item1[key].toString().includes(this.searchKeyWord)) {
              isFlag = true
              item1[key] = item1[key].toString().replace(regex, `<span style='color:red;'>${this.searchKeyWord}</span>`)
            }
          })
        }
        if (isFlag) {
          // 记录数据位置
          this.searchResult[rowCount] = rowIndex1
          rowCount++
        }
      })
    }
  }
}