获取tree跨行跨列

 

 

获取tree跨行跨列

 function getColspan (column) {
  let colspan = 0
  const children = column.children || []
  for (let i = 0; i < children.length; i++) {
    const item = children[i]
    if (item.children && item.children.length > 0) {
      colspan += getColspan(item)
    } else {
      colspan += 1
    }
  }
  if (colspan == 0) {
    colspan = 1
  }
  return colspan
}

// 获取跨列
function getRowspan (column, maxLevel) {
  let rowspan = 1
  if (!column.children || column.children.length == 0) {
    rowspan = maxLevel - column.level + 1
  }
  return rowspan
}

function getMaxFloor (columns) {
  let max = 0
  const deepEach = function (column, floor) {
    if (floor > max) {
      max = floor
    }
    const children = column.children
    if (children && children.length) {
      children.forEach(child => {
        deepEach(child, floor + 1)
      })
    }
  }

  columns.forEach(column => {
    deepEach(column, 0)
  })

  return max
}

const colmuns = [
  {
    label: '测试L1',
    prop: '测试L1',
    width: 200,
    align: 'left',
    showOverflowTooltip: true
  },
  {
    label: '测试L2',
    prop: '测试L2',
    width: 200,
    align: 'left',
    showOverflowTooltip: true
  },
  {
    label: '测试L3',
    prop: 'cod',
    align: 'center',
    children: [
      {
        label: '测试L3-2-1',
        prop: '测试L3-2',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L3-2-1',
            prop: '测试L3-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center'
          }
        ]
      },
      {
        label: '测试L3-2-2',
        prop: '测试L3-2-2',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L3-2-1',
            prop: '测试L3-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center'
          },
          {
            label: '测试L3-2-2',
            prop: '测试L3-2-2',
            width: 150,
            align: 'center',
            children: [

              {
                label: '测试L3-2-2',
                prop: '测试L3-2-2',
                width: 150,
                align: 'center'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    label: '测试L4',
    prop: '测试L4',
    align: 'center',
    children: [
      {
        label: '测试L4-1',
        prop: '测试L4-1',
        width: 150,
        align: 'center',
        children: [
          {
            label: '测试L4-1-1',
            prop: '测试L4-1-1',
            width: 150,
            align: 'center',
            children: [
              {
                label: '测试L4-1-1-1',
                prop: '测试L4-1-1-1',
                width: 150,
                align: 'center',
                children: [

                  {
                    label: '测试L3-2-2',
                    prop: '测试L3-2-2',
                    width: 150,
                    align: 'center'
                  }
                ]
              }
            ]
          }
        ]
      }

    ]
  }
]

const maxLevel = getMaxFloor(colmuns)

 

 

xlsx合并单元格

 
// 获取跨列
function getColspan (column) {
  let colspan = 0
  const children = column.children || []
  for (let i = 0; i < children.length; i++) {
    const item = children[i]
    if (item.children && item.children.length > 0) {
      colspan += getColspan(item)
    } else {
      colspan += 1
    }
  }
  if (colspan == 0) {
    colspan = 1
  }
  return colspan
}

// 获取跨列
function getRowspan (column, maxLevel) {
  let rowspan = 1
  if (!column.children || column.children.length == 0) {
    rowspan = maxLevel - column.level + 1
  }
  return rowspan
}

function getMaxFloor (columns) {
  let max = 0
  const deepEach = function (column, floor) {
    if (floor > max) {
      max = floor
    }
    const children = column.children
    if (children && children.length) {
      children.forEach(child => {
        deepEach(child, floor + 1)
      })
    }
  }

  columns.forEach(column => {
    deepEach(column, 0)
  })

  return max
}

// https://segmentfault.com/q/1010000023268006?utm_source=tag-newest
// 转换数字到EXCEL单元格编号
function numberToCellCode (number) {
  let s = ''
  while (number > 0) {
    let m = number % 26
    if (m === 0) m = 26
    s = String.fromCharCode(m + 64) + s
    number = (number - m) / 26
  }
  return s
}

// 行转列
function formatJson (filterVal, jsonData) {
  return jsonData.map(v =>
    filterVal.map(j => {
      return v[j]
    })
  )
}

// 获取合并配置
function getMerges (headers) {
  const merges = []
  const multiHeader = []
  const dataFields = []
  let cellNumber = 0
  const deepColumn = (list = [], parent = null) => {
    list.forEach((item, index) => {
      cellNumber++
      if (parent && index == 0) {
        cellNumber = parent.cellNumber
      }
      item.level = !parent ? 0 : parent.level + 1
      item.cellNumber = cellNumber
      item.cellCode = numberToCellCode(item.cellNumber)
      item.colspan = getColspan(item)
      item.rowspan = getRowspan(item, maxFloor)
      multiHeader[item.level] = multiHeader[item.level] || []
      multiHeader[item.level].push(item.label)
      if (item.colspan > 1) {
        for (let i = 0; i < item.colspan - 1; i++) {
          multiHeader[item.level].push('')
        }
        merges.push(`${item.cellCode}${item.level + 1}:${numberToCellCode(item.cellNumber + item.colspan - 1)}${item.level + 1}`)
      }
      if (item.rowspan > 1) {
        for (let i = 1; i < item.rowspan; i++) {
          multiHeader[item.level + i] = multiHeader[item.level + 1] || []
          multiHeader[item.level + i].push('')
        }
        merges.push(`${item.cellCode}${item.level + 1}:${item.cellCode}${item.level + 1 + item.rowspan - 1}`)
      }

      if (item.children && item.children.length) {
        deepColumn(item.children, item)
      } else {
        dataFields.push(item.prop)
      }
    })
  }
  deepColumn(headers)
  console.log(multiHeader)
  return { merges, multiHeader, dataFields }
}

const columns2 = [
  {
    label: '用户姓名',
    prop: 'name',
    align: 'center'
  },
  {
    label: '联系方式',
    prop: '联系方式',
    align: 'center',
    children: [
      {
        label: '邮箱',
        prop: 'email',
        align: 'center'
      },
      {
        label: '联系电话',
        prop: 'linkphone',
        align: 'center'
      },
      {
        label: '联系地址',
        prop: 'address',
        align: 'center'
      }
    ]
  },
  {
    label: '年龄',
    prop: 'age',
    align: 'center'
  },
  {
    label: '所在城市',
    prop: 'city',
    align: 'center'
  },
  {
    label: '身份证号码',
    prop: 'idNumber',
    align: 'center'
  }
]
const columns = [
  {
    label: '文件标题',
    prop: '文件标题',
    align: 'center',
    children: [
      {
        label: '数据时间：2023年3月28日',
        prop: '数据时间：2023年3月28日',
        align: 'right',
        children: columns2
      }
    ]
  }
]

const maxFloor = getMaxFloor(columns)

// const headerStr = computed(() => {
//   return jsBeautify.js_beautify(JSON.stringify(columns), {
//     indent_size: 4,
//     space_in_empty_paren: true
//   })
// })

const test1 = () => {
  const merges = getMerges(columns)
  console.log(merges)
}

const { merges, multiHeader, dataFields } = getMerges(columns)

const data = formatJson(dataFields, res.data)
for (let i = multiHeader.length - 1; i > -1; i--) {
  data.unshift(multiHeader[i])
}
console.log(data)