@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/pe-table/utils/render-cells.js

@@ -0,0 +1,424 @@
+/** @format */
+// import Vue from 'vue'
+const Vue = window.Vue // 在此项目中，Vue使用的是public下的运行时的vue.reuntime.min.js。所以此时需要保持一致
+import CellRenderer from '../cell.js'
+import HeaderRenderer from '../header.js'
+import { getClasses } from './tools.js'
+import { tableCellFormatterResult } from './formatter.js'
+const CellRendererConstructor = Vue.extend(CellRenderer)
+const HeaderRendererConstructor = Vue.extend(HeaderRenderer)
+
+const createHeaderCellOption = ({
+  isRenderFixedCell,
+  column = {},
+  grid,
+  columnIndex,
+  columns
+}) => {
+  const { headerCellClassName, headerAlign, children } = column || {}
+  const params = {
+    columnIndex: columnIndex,
+    column: column,
+    align: headerAlign || (children && children.length && 'center'),
+    grid,
+    // isHeader: true
+  }
+  return {
+    text: isRenderFixedCell ? '' : column.label,
+    columnIndex,
+    columns,
+    placeholderSign: isRenderFixedCell, // 渲染空节点
+    headerCellClassName: getClasses(headerCellClassName, params),
+    globalHeaderCellClassName: getClasses(grid.headerCellClassName, params),
+    top: column.top,
+    height: column.height,
+    sortable:
+      (!column.children || !column.children.length) &&
+      (column.sortable || column.sortKeys), // 兼容sortKeys
+    collapseKeys: column.collapseKeys,
+    collapsed: column.collapsed,
+    sortOrder: grid.sortMap.key === column.key && grid.sortMap.order,
+    cellResizable: grid.cellResizable,
+    isOpenTwoHeaderBg: grid.isOpenTwoHeaderBg,
+    // 方法
+    sortChange: grid.sortChange,
+    changeCollapseKeys: grid.changeCollapseKeys,
+    cellResize: grid.cellResize,
+  }
+}
+
+const createRowCellOption = ({
+  isRenderFixedCell,
+  cell = {},
+  rowIndex,
+  columnIndex,
+  grid,
+  column,
+  originRowData,
+}) => {
+  const { key, cellClassName, align = 'left' } = column || {}
+  let text = ''
+  if (!isRenderFixedCell) {
+    text = tableCellFormatterResult({column, originRowData, rowIndex, columnIndex, displayText: cell[key]})
+  }
+  const params = {
+    column,
+    value: text,
+    rowData: originRowData,
+    columnIndex: columnIndex,
+    rowIndex: rowIndex,
+    align: align,
+    placeholderSign: isRenderFixedCell, // 渲染空节点
+    grid
+  }
+  return {
+    text,
+    rowIndex,
+    placeholderSign: isRenderFixedCell,
+    cellClassName: getClasses(cellClassName, params),
+    globalCellClassName: getClasses(grid.cellClassName, params),
+  }
+}
+
+/**
+ *
+ * #@description 渲染单元格的方法
+ * @param {*} {
+ *     cell,
+ *     columns,
+ *     isRenderFixedCells,
+ *     cellComponentMap,
+ *     removeCells,
+ *     rowData,
+ *     rowKey,
+ *     gridOffsetX,
+ *     isHeader,
+ *     handleEvent,
+ *     rowIndex,
+ *     grid,
+ *     rowContainerDom,
+ *   }
+ * @param {*} i
+ * @return {*}
+ */
+const renderCellComponent = (
+  {
+    cell = {},
+    columns,
+    isRenderFixedCells,
+    cellComponentMap,
+    removeCells,
+    rowData,
+    rowKey,
+    gridOffsetX,
+    isHeader,
+    handleEvent,
+    rowIndex,
+    grid,
+    rowContainerDom,
+    originRowData,
+    lastCellIndex,
+    isParentCol
+  },
+  i
+) => {
+  const cellId = cell[rowKey]
+  const column = columns[i]
+  const columnIndex = i
+  const { width, offsetX, fixed } = column || {}
+  let offset
+  if (isRenderFixedCells) {
+    offset = offsetX
+  } else {
+    offset = fixed ? offsetX : offsetX - gridOffsetX
+  }
+  const existingCell = cellComponentMap[cellId]
+  // if (existingCell != null) {
+  //   // 复用的组件，更新偏移值
+  //   existingCell.setOffset(offset)
+  //   if (isHeader) {
+  //     // 更新排序的按钮
+  //     existingCell.setSortOrder(
+  //       grid.sortMap.key === column.key && grid.sortMap.order
+  //     )
+  //   }
+  //   return true
+  // }
+  const commonCellParams = {
+    id: cellId,
+    offset,
+    width,
+    column,
+    fixed: isRenderFixedCells,
+    lastFixedCell: lastCellIndex && isRenderFixedCells,
+    isParentCol,
+    rowData,
+    originRowData,
+    handleEvent,
+    columnIndex,
+  }
+  // 如果不是渲染固定列，并且是固定列，则渲染空标签
+  const isRenderFixedCell = isRenderFixedCells === false && fixed
+  const headerCellParams = createHeaderCellOption({
+    isRenderFixedCell,
+    column,
+    grid,
+    columns,
+  })
+  const rowCellParams = createRowCellOption({
+    isRenderFixedCell,
+    rowIndex,
+    columnIndex,
+    grid,
+    column,
+    cell,
+    originRowData,
+  })
+  // const rowCellParams = {
+  //   text: isRenderFixedCell ? '' : cell[columnKey],
+  //   rowIndex,
+  //   cellClassName: grid.cellClassName,
+  // }
+  const cellParams = {
+    ...commonCellParams,
+    ...(isHeader ? headerCellParams : rowCellParams),
+  }
+  if (existingCell != null) {
+    // 复用的组件，更新偏移值
+    existingCell.setOffset(offset)
+    existingCell.reuse(cellParams)
+    if (isHeader) {
+      // 更新排序的按钮
+      existingCell.setSortOrder(
+        grid.sortMap.key === (column && column.key) && grid.sortMap.order
+      )
+    }
+    return true
+  }
+  const reuseCell = removeCells.pop()
+  if (reuseCell != null) {
+    delete cellComponentMap[reuseCell.id]
+    reuseCell.reuse && reuseCell.reuse(cellParams)
+    cellComponentMap[reuseCell.id] = reuseCell
+    return true
+  }
+
+  const params = {
+    el: document.createElement('div'),
+  }
+  let cellComponet = isHeader
+    ? new HeaderRendererConstructor(params)
+    : new CellRendererConstructor(params)
+
+  // 属性合并
+  for (let prop in cellParams) {
+    cellComponet[prop] = cellParams[prop]
+  }
+  // 添加到行内
+  rowContainerDom.appendChild(cellComponet.$el)
+  cellComponentMap[cellComponet.id] = cellComponet
+}
+
+export function removeCellComponents(componentMap, rowContainerDom) {
+  for (const removeCellComponet of Object.values(componentMap)) {
+    delete componentMap[removeCellComponet.id]
+    rowContainerDom.removeChild(removeCellComponet.$el)
+    removeCellComponet.$destroy()
+  }
+}
+
+/**
+ *
+ * @description 计算可视区域单元格渲染逻辑
+ * @export
+ * @param {*} {
+ *   columns,
+ *   startCell,
+ *   endCell,
+ *   cells,
+ *   cellComponentMap,
+ *   type,
+ *   rowContainerDom,
+ *   isRenderFixedCells,
+ *   gridOffsetX,
+ *   rowKey,
+ *   handleEvent,
+ *   rowData,
+ *   rowIndex,
+ *   grid = {},
+ *   headerParentColcellComponentMap,
+ * }
+ */
+export function calculateRenderCells({
+  columns,
+  startCell,
+  endCell,
+  cells,
+  cellComponentMap,
+  type,
+  rowContainerDom,
+  isRenderFixedCells,
+  gridOffsetX,
+  rowKey,
+  handleEvent,
+  rowData,
+  rowIndex,
+  grid = {},
+  headerParentColcellComponentMap,
+  originRowData,
+}) {
+  // 不存在列不处理
+  // if (!columns || !columns.length) {
+  //   removeCellComponents(cellComponentMap, rowContainerDom)
+  //   removeCellComponents(headerParentColcellComponentMap, rowContainerDom)
+  //   return
+  // }
+  const commonRowParams = {
+    rowContainerDom,
+    isRenderFixedCells,
+    gridOffsetX,
+    rowKey,
+    handleEvent,
+    rowData,
+    rowIndex,
+    grid,
+    originRowData,
+  }
+  const renderCells = {}
+  const renderParentCells = {}
+  const parentCols = []
+  const isHeader = type === 'header'
+  let _parentNodeKeySet = new Set()
+  // 存储需要渲染的列集合
+  for (let i = startCell; i <= endCell; i++) {
+    const cell = cells[i] || {}
+    const cellID = cell[rowKey]
+    renderCells[cellID] = true
+    if (isHeader) {
+      const { parentNodeKey } = cell
+      if (parentNodeKey) {
+        const parentCol = grid.mainColumns.find(
+          (col) => col.key === parentNodeKey
+        )
+        if (parentCol && !_parentNodeKeySet.has(parentNodeKey)) {
+          const parentCellId = parentCol[rowKey]
+          renderParentCells[parentCellId] = true
+          parentCols.push(parentCol)
+          _parentNodeKeySet.add(parentNodeKey)
+        }
+      }
+    }
+  }
+
+  const removeCells = []
+  for (const id in cellComponentMap) {
+    if (id in renderCells) {
+      continue
+    }
+    const cell = cellComponentMap[id]
+    removeCells.push(cell)
+  }
+  for (let i = startCell; i <= endCell; i++) {
+    const cell = cells[i]
+    const params = {
+      cell,
+      columns,
+      isRenderFixedCells,
+      lastCellIndex: endCell === i,
+      cellComponentMap,
+      removeCells,
+      isHeader,
+      ...commonRowParams,
+    }
+    const isContinue = renderCellComponent(params, i)
+    if (isContinue) {
+      continue
+    }
+  }
+  for (const removeCellComponet of removeCells) {
+    delete cellComponentMap[removeCellComponet.id]
+    removeCellComponet.$destroy()
+    rowContainerDom.removeChild(removeCellComponet.$el)
+  }
+  if (parentCols.length) {
+    calculateHeaderParentColRenderCells({
+      parentCols,
+      headerParentColcellComponentMap,
+      renderParentCells,
+      ...commonRowParams,
+    })
+  }
+}
+/**
+ *
+ * @description 计算表头父节点单元格渲染逻辑
+ * @export
+ * @param {*} {
+ *   parentCols,
+ *   headerParentColcellComponentMap,
+ *   renderParentCells,
+ *   rowContainerDom,
+ *   isRenderFixedCells,
+ *   gridOffsetX,
+ *   rowKey,
+ *   handleEvent,
+ *   rowData,
+ *   rowIndex,
+ *   grid,
+ * }
+ */
+export function calculateHeaderParentColRenderCells({
+  parentCols,
+  headerParentColcellComponentMap,
+  renderParentCells,
+  rowContainerDom,
+  isRenderFixedCells,
+  gridOffsetX,
+  rowKey,
+  handleEvent,
+  rowData,
+  rowIndex,
+  grid,
+}) {
+  // 不存在列不处理
+  if (!renderParentCells || !Object.keys(renderParentCells).length) {
+    return
+  }
+  const removeCells = []
+  for (const id in headerParentColcellComponentMap) {
+    if (id in renderParentCells) {
+      continue
+    }
+    const cell = headerParentColcellComponentMap[id]
+    removeCells.push(cell)
+  }
+  for (let i = 0; i < parentCols.length; i++) {
+    const cell = parentCols[i]
+    const params = {
+      cell,
+      columns: parentCols,
+      isRenderFixedCells,
+      lastCellIndex: i === (parentCols.length - 1),
+      cellComponentMap: headerParentColcellComponentMap,
+      isParentCol: true,
+      removeCells,
+      rowData,
+      rowKey,
+      gridOffsetX,
+      isHeader: true,
+      handleEvent,
+      rowIndex,
+      grid,
+      rowContainerDom,
+    }
+    const isContinue = renderCellComponent(params, i)
+    if (isContinue) {
+      continue
+    }
+  }
+  for (const removeCellComponet of removeCells) {
+    delete headerParentColcellComponentMap[removeCellComponet.id]
+    removeCellComponet.$destroy()
+    rowContainerDom.removeChild(removeCellComponet.$el)
+  }
+}

package/src/view/home/query-table/components/pe-table/utils/slot.js

@@ -0,0 +1,28 @@
+export default {
+  functional: true,
+  props: {
+    renderFn: {
+      type: Function,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  render(h, context) {
+    // const style = {
+    //   opacity: context.props.show ? 1 : 0,
+    // }
+    const slots = context.slots() || {}
+    const children = slots.default || []
+    const [slot] = children
+    const createNode = () => {
+      if (slot) {
+        return slot
+      }
+      return [<div>{context.props.title || ''}</div>]
+    }
+    let node = createNode()
+    return node
+  },
+}

package/src/view/home/query-table/components/pe-table/utils/tools.js

@@ -0,0 +1,84 @@
+/** @format */
+
+import isFunction from 'lodash/isFunction'
+export function getRenderRange(offsetX, containerWidth, columns) {
+  let totalWidth = 0
+  const accumulatedWidths = []
+
+  // 计算总宽度和每个位置的累加宽度
+  for (let i = 0; i < columns.length; i++) {
+    const width = columns[i]
+    totalWidth += width
+    accumulatedWidths.push(totalWidth)
+  }
+
+  // 处理 offsetX 小于 0 的边界情况
+  if (offsetX < 0) {
+    offsetX = 0
+  }
+
+  // 处理 offsetX 超过总宽度的边界情况
+  if (offsetX >= totalWidth - containerWidth) {
+    offsetX = Math.max(0, totalWidth - containerWidth)
+  }
+
+  // 使用二分法查找起始索引
+  let startIndex = binarySearch(accumulatedWidths, offsetX)
+
+  // 计算起始位置的剩余偏移量
+  let startOffset =
+    offsetX - (startIndex > 0 ? accumulatedWidths[startIndex - 1] : 0)
+  let remainingWidth = containerWidth + startOffset
+
+  // 找到结束索引
+  let endIndex = startIndex
+  for (let i = startIndex; i < columns.length; i++) {
+    const width = columns[i]
+    if (remainingWidth - width <= 0) {
+      endIndex = i
+      break
+    }
+    remainingWidth -= width
+    if (i === columns.length - 1) {
+      endIndex = i
+    }
+  }
+
+  return { startIndex, endIndex }
+}
+
+function binarySearch(arr, target) {
+  let left = 0
+  let right = arr.length - 1
+  let result = arr.length
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2)
+    if (arr[mid] > target) {
+      result = mid
+      right = mid - 1
+    } else {
+      left = mid + 1
+    }
+  }
+
+  return result
+}
+
+export function getClasses(cellClassName, params) {
+  const { align, grid, ...restParams } = params
+  let classNames = [align, params.column && params.column.collapseBg, grid.overflow && 'overflow'].filter(Boolean)
+  if (cellClassName) {
+    if (isFunction(cellClassName)) {
+      const classes = cellClassName(restParams)
+      if (Array.isArray(classes)) {
+        classNames = [...classNames, ...classes]
+      } else {
+        classNames = [...classNames, classes]
+      }
+    } else {
+      classNames = [...classNames, cellClassName]
+    }
+  }
+  return classNames
+}