@kyfe/ks-query-table 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,45 @@
+## 目录说明
+
+
+- **/assets**: 存放公共资源，如图标。
+- **/components**: 存放组件。
+  - **/query-table**: 主组件。
+    - **/index.vue**: 主组件。
+    - **/mixins**: query-table的mixins。
+      - **/column-mixin**: 表格列头相关。
+      - **/column-setting**: 个性设置相关。
+      - **/data-mixin**: 行数据相关。
+      - **/pagination-mixin**: 表格分页相关。
+      - **/table-fixed**: 吸顶相关。
+      - **/table-horizontal.js**: 横屏相关。
+
+      
+  - **/table-horizontal**: 表格横屏组件。
+  - **/table-pagination**: 表格分页组件。
+  - **table-settings**: 个性设置组件。
+  - **tooltip**: 单元格气泡组件。
+- **/demo**: 存放demo。
+- **/hooks**: 存放封装的通用逻辑。与utils不同的是，hooks内部是可以有状态、多实例的。
+  - **/use-cache-promise**: 缓存promise结果。
+  - **/use-column-config**: 获取列配置
+  - **/use-encryption**: 加解密
+  
+
+
+- **/index.js**: 项目主入口。
+- **/mixins**: 项目级mixins。
+- **/store**: 存放共享数据。注意，不带响应式。
+  - **/column-store**: 列存储
+  
+- **/styles**: 存放样式。
+- **/utils**: 存放工具函数。
+  - **/column**: 列工具
+  - **/encryption**: 加解密
+  - **/http**: http
+
+
+
+- **/tests**: 存放测试文件，确保代码的质量。
+
+
+- **README.md**: 项目说明文件，提供项目的基本信息和使用说明。

package/api/index.js

@@ -0,0 +1,12 @@
+import { http } from '../utils/http'
+
+export const APPKEY_SYSTEM = '10124'
+
+// 获取当前菜单下的通用查询配置
+export const getGenericSearch = () => {
+  return http('system.genericSearch.listByMenuId', APPKEY_SYSTEM, { menuId: ksui.menu.id })
+}
+
+// 通过id获取详细配置
+export const getGenericSearchById = (params) =>
+  http('system.genericSearch.get', APPKEY_SYSTEM, params)

package/assets/horizontal-back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M16.799951171875,4.299951171875L8.994601171875,11.999951171875L16.799951171875,19.699951171875L15.684901171875,20.799951171875L7.507864171875,12.733281171875C7.097313171875,12.328281171875,7.097313171875,11.671631171875,7.507864171875,11.266621171875L15.684901171875,3.199951171875L16.799951171875,4.299951171875Z" fill-rule="evenodd" fill="#1C1E23" fill-opacity="1"/></g></g></svg>

package/components/pe-table/cell.js

@@ -0,0 +1,184 @@
+/** @format */
+
+import isFunction from 'lodash/isFunction'
+import './style/cell.less'
+
+export default {
+  name: 'cellCompoent',
+  computed: {
+    style() {
+      const obj = this.fixed
+        ? {
+          zIndex: '10',
+        }
+        : {}
+      return {
+        width: this.width + 'px',
+        transform: `translateX(${this.offset}px)`,
+        ...obj,
+      }
+    },
+    fixedClassName() {
+      return this.fixed ? 'pe-table-cell__fixed' : ''
+    },
+    lastFixedClassName() {
+      return this.lastFixedCell ? 'pe-table-cell__last-fixed' : ''
+    },
+  },
+  data() {
+    return {
+      width: 0,
+      offset: 0,
+      text: '',
+      column: undefined,
+      fixed: false,
+      lastFixedCell: false,
+      rowData: undefined,
+      handleEvent: undefined,
+      cellClassName: undefined,
+      globalCellClassName: undefined,
+      placeholderSign: false,
+      longPressTimer: null,
+    }
+  },
+  mounted() {
+    const $cell = this.$refs.cell
+    $cell.addEventListener('mousedown', this.startLongPress)
+    $cell.addEventListener('mouseup', this.endLongPress)
+    $cell.addEventListener('mouseleave', this.endLongPress)
+
+    $cell.addEventListener('touchstart', this.startLongPress)
+    $cell.addEventListener('touchend', this.endLongPress)
+    $cell.addEventListener('touchmove', this.endLongPress)
+    $cell.addEventListener('touchcancel', this.endLongPress)
+  },
+  beforeDestroy() {
+    const $cell = this.$refs.cell
+    $cell.removeEventListener('mousedown', this.startLongPress)
+    $cell.removeEventListener('mouseup', this.endLongPress)
+    $cell.removeEventListener('mouseleave', this.endLongPress)
+
+    $cell.removeEventListener('touchstart', this.startLongPress)
+    $cell.removeEventListener('touchend', this.endLongPress)
+    $cell.removeEventListener('touchmove', this.endLongPress)
+    $cell.removeEventListener('touchcancel', this.endLongPress)
+  },
+  render(h) {
+    const { rowCellRender, key } = this.column || {}
+    const createContent = () => {
+      if (this.placeholderSign) {
+        return null
+      }
+      let labelNode = null
+      const params = {
+        column: this.column,
+        value: this.text,
+        rowData: this.originRowData,
+        columnIndex: this.columnIndex,
+        rowIndex: this.rowIndex,
+      }
+      const defaultLable = () => <span class="pe-table-cell_label">{this.text}</span>
+      if (isFunction(rowCellRender)) {
+        labelNode = rowCellRender(h, params)
+        if (labelNode === null) {
+          labelNode = defaultLable()
+        }
+      } else {
+        labelNode = defaultLable()
+      }
+      return labelNode
+    }
+    const content = createContent()
+    let classNames = [
+      'pe-table-cell',
+      this.globalCellClassName,
+      this.cellClassName,
+      this.lastFixedClassName,
+      this.fixedClassName
+    ]
+    return (
+      <div
+        ref="cell"
+        class={classNames}
+        style={this.style}
+        on-click={this.handleClickEvent}
+        data-cellkey={key}
+      >
+        {content}
+      </div>
+    )
+  },
+  methods: {
+    setContent(text) {
+      // 判空，否则没有值会显示undefined，特别是自定义列没有返回的时候
+      if (undefined === text) {
+        return ''
+      }
+      this.text = String(text)
+    },
+    setOffset(offset) {
+      this.offset = offset
+    },
+    reuse({
+      id,
+      offset,
+      text,
+      width,
+      column,
+      fixed,
+      lastFixedCell,
+      rowData,
+      columnIndex,
+      rowIndex,
+      cellClassName,
+      originRowData,
+      globalCellClassName,
+      placeholderSign,
+    }) {
+      this.id = id
+      this.width = width
+      this.column = column
+      this.fixed = fixed
+      this.lastFixedCell = lastFixedCell
+      this.rowData = rowData
+      this.columnIndex = columnIndex
+      this.rowIndex = rowIndex
+      this.cellClassName = cellClassName
+      this.globalCellClassName = globalCellClassName
+      this.originRowData = originRowData
+      this.placeholderSign = placeholderSign
+      this.setOffset(offset)
+      this.setContent(text)
+    },
+    handleClickEvent(event) {
+      const params = {
+        column: this.column,
+        rowData: this.originRowData,
+        name: 'cell-click',
+        rowIndex: this.rowIndex,
+        columnIndex: this.columnIndex,
+      }
+      this.handleEvent && this.handleEvent(event, params)
+    },
+    handleLongEvent(event, params) {
+      this.handleEvent && this.handleEvent(event, params)
+    },
+    startLongPress(event) {
+      this.longPressTimer && this.endLongPress()
+      const params = {
+        column: this.column,
+        rowData: this.originRowData,
+        name: 'cell-long',
+        rowIndex: this.rowIndex,
+        columnIndex: this.columnIndex,
+      }
+      this.longPressTimer = setTimeout(() => {
+        this.handleLongEvent(event, params)
+      }, 500);
+    },
+    endLongPress() {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = null
+    },
+  },
+}

package/components/pe-table/collapse.js

@@ -0,0 +1,334 @@
+/** @format */
+
+// import cloneDeep  from 'lodash/cloneDeep'
+// // const queue = []
+// let loading = false
+// export const collapseClass = {
+//   bg: 'table2-cell-collapse-bg',
+//   colMark: 'table2-cell-collapse_colMark'
+// }
+
+// let checkExpandTimer
+
+// // // 执行队列中的方法
+// // async function executeQueue() {
+// //   // 如果已经有方法在执行或队列为空，则直接返回
+// //   if (loading || queue.length === 0) return
+
+// //   // 获取队列中的第一个方法并执行
+// //   const { fn, context, args } = queue.shift()
+// //   try {
+// //     await fn.apply(context, args)
+// //   } catch (error) {
+// //     console.error('Error while executing changeCollapseKeys:', error)
+// //   } finally {
+// //     loading = false
+// //     // 继续执行队列中的下一个方法
+// //     executeQueue()
+// //   }
+// // }
+
+// // // 添加方法到队列的函数
+// // function addToQueue(fn, context, args) {
+// //   queue.push({ fn, context, args })
+// // }
+
+// const collapseType = {
+//   expand: 'expand',
+//   collapse: 'collapse'
+// }
+
+// function formatGroupInfo(group, column) {
+//   group.push(column)
+// }
+
+// function resetColumnsWidth(collapseAnimationGroup = []) {
+//   collapseAnimationGroup.forEach(groupInfo => {
+//     groupInfo.columnGroups.forEach(column => {
+//       // 解决默认是折叠，然后点击展开
+//       if (column.$collapseWidth === undefined) {
+//         column.$collapseWidth = column.width
+//       }
+//       column.width = 0.1
+//     })
+//   })
+// }
+
+// function getCollapseAnimationGroup(collapseKeys, columns) {
+//   collapseKeys = cloneDeep(collapseKeys)
+//   const groups = []
+//   let consecutiveGroup = []
+//   columns.forEach(column => {
+//     if (collapseKeys.includes(column.key)) {
+//       const isChild = column.children && column.children.length
+//       if (isChild) {
+//         column.children.forEach(childCol => {
+//           if (!collapseKeys.includes(childCol.key)) {
+//             collapseKeys.push(childCol.key)
+//           }
+//         })
+//       }
+//       formatGroupInfo(consecutiveGroup, column)
+//     } else {
+//       if (consecutiveGroup.length > 0) {
+//         groups.push(consecutiveGroup)
+//         consecutiveGroup = []
+//       }
+//     }
+//   })
+//   consecutiveGroup.length > 0 && groups.push(consecutiveGroup)
+//   // 组装配置参数
+//   return groups.reduce((res, cur = []) => {
+//     res.push({
+//       columnGroups: cur,
+//       ...cur.reduce(
+//         (r, c) => {
+//           const { totalWidth } = r
+//           r.totalWidth = totalWidth + c.width
+//           return r
+//         },
+//         {
+//           totalWidth: 0
+//         }
+//       )
+//     })
+//     return res
+//   }, [])
+// }
+
+// function getCollapseClassNames(labelClassName = '', type) {
+//   try {
+//     let classNames = labelClassName
+//     if (type === 'add') {
+//       if (!labelClassName || !labelClassName.includes(collapseClass.bg)) {
+//         classNames = `${labelClassName || ''} ${collapseClass.bg}`
+//       }
+//     } else {
+//       classNames = (labelClassName || '').replace(collapseClass.bg, '')
+//     }
+//     return classNames
+//   } catch (e) {
+//     return labelClassName
+//   }
+// }
+
+// function setColumnHighlight(column, visibleFlatColumns) {
+//   const collapseColumn = visibleFlatColumns && visibleFlatColumns.find(col => col.key === column.key)
+//   if (collapseColumn) collapseColumn.labelClassName = getCollapseClassNames(column.labelClassName, 'add')
+// }
+
+// function removeColumnHighlight(column, visibleFlatColumns) {
+//   if (column.labelClassName) {
+//     const collapseColumn = visibleFlatColumns && visibleFlatColumns.find(col => col.key === column.key)
+//     if (collapseColumn) collapseColumn.labelClassName = getCollapseClassNames(column.labelClassName)
+//   }
+// }
+
+// function createTransitionTime(v = 3) {
+//   return `transition: width .${v}s;`
+// }
+
+// function setCellCollapseHighlightClass(tds = [], colgroup = [], type, column) {
+//   tds.forEach(td => {
+//     const [cellEl] = td.children || []
+//     if (cellEl && cellEl.classList) {
+//       cellEl.classList.add(collapseClass.bg)
+//     }
+//   })
+//   colgroup.forEach(col => {
+//     if (col && col.classList) {
+//       col.classList.add(collapseClass.colMark)
+//       col.style = createTransitionTime()
+//     }
+//   })
+//   // 不做重复采集，场景问题： 当折叠收起子级后，马上再点击，收起父级。则会被重复采集，设置为0.1。
+//   if (type === collapseType.collapse && column.width !== 0.1) {
+//     column.$collapseWidth = column.width
+//     column.width = 0.1
+//   } else {
+//     column.width = column.$collapseWidth
+//   }
+// }
+
+// export function removeCellCollapseHighlightClass(tableEl) {
+//   loading = false
+//   const colgroup = tableEl.querySelectorAll(`.${collapseClass.colMark}`)
+//   // if (isRemoveBg) {
+//   //   const cells = tableEl.querySelectorAll(`.${collapseClass.bg}`)
+//   //   cells.forEach(el => {
+//   //     el.classList.remove(collapseClass.bg)
+//   //   })
+//   // }
+//   colgroup.forEach(el => {
+//     el.classList.remove(collapseClass.colMark)
+//     el.style = ''
+//   })
+// }
+
+// function renderHighlightGroup(collapseAnimationGroup, tableEl, type, callback, vm, emitParams) {
+//   try {
+//     collapseAnimationGroup.forEach(groupInfo => {
+//       groupInfo.columnGroups.forEach(column => {
+//         const { key } = column
+//         // 设置列背景色高亮
+//         column.labelClassName = getCollapseClassNames(column.labelClassName, 'add')
+//         column.className = getCollapseClassNames(column.className, 'add')
+//         const colgroup = tableEl.querySelectorAll(`[name="${key}"]`)
+//         setCellCollapseHighlightClass([], colgroup, type, column)
+//       })
+//     })
+//     const isCollapse = type === collapseType.collapse
+//     setTimeout(
+//       () => {
+//         removeCellCollapseHighlightClass(tableEl, isCollapse)
+//         isCollapse && callback()
+//         vm.$emit('collapsed', emitParams)
+//         // vm._updateTableHeight() // 存在全部一级头点击展开变成二级头，高度计算有误
+//         // vm.table._updateTableHeight() // 存在全部一级头点击展开变成二级头，高度计算有误
+//       },
+//       isCollapse ? 300 : 500
+//     )
+//   } catch (e) {
+//     loading = false
+//   }
+// }
+
+export default {
+  methods: {
+    changeCollapseKeys(column) {
+      // if (loading) return
+      const { collapsed, collapseKeys } = column
+      // console.log(key, '---k')
+      if (!Array.isArray(collapseKeys) || !this.tableData.length) {
+        return
+      }
+      // loading = true
+      const val = !collapsed
+      // const visibleFlatColumns = this.visibleFlatColumns
+      // const type = collapsed === true ? collapseType.expand : collapseType.collapse
+      // const collapseAnimationGroup = getCollapseAnimationGroup(collapseKeys, visibleFlatColumns)
+      // const tableEl = this.$el || document
+      // const isExpand = type === collapseType.expand
+      // clearTimeout(checkExpandTimer)
+      // this.checkColumnFreeze(collapseAnimationGroup)
+      // if (isExpand) {
+      // resetColumnsWidth(collapseAnimationGroup)
+      this.updateCollapseMap(collapseKeys, val, column)
+      //   setColumnHighlight(column, visibleFlatColumns)
+      // } else {
+      //   removeColumnHighlight(column, visibleFlatColumns)
+      // }
+      // 延迟的目的是为了在做展开的时候先把width：0.1绘制出来
+      // setTimeout(
+      //   () => {
+      //     const emitParams = { key, column, collapsed: val }
+      //       renderHighlightGroup(
+      //         collapseAnimationGroup,
+      //         tableEl,
+      //         type,
+      //         this.updateCollapseMap.bind(this, collapseKeys, val, column),
+      //         this,
+      //         emitParams
+      //       )
+      //       column.collapsed = type !== collapseType.expand
+      //       // this.updateColumns()
+      //     },
+      //     isExpand ? 20 : 0
+      //   )
+    },
+    checkColumnFreeze(columnGroups) {
+      try {
+        const isAllHide = columnGroups
+          .reduce((v, cur) => {
+            v.push(...(cur.columnGroups || []).map(col => col.$show))
+            return v
+          }, [])
+          .every(status => status === false)
+        if (isAllHide === true) {
+          this.table.$message.warning('当前所有被控制列均被隐藏')
+        }
+      } catch (err) {
+        // eslint-disable-next-line
+        console.log(err)
+      }
+    },
+    updateCollapseMap(collapseKeys, status, column) {
+      const { key } = column
+      const visibleFlatColumns = this.visibleFlatColumns
+      for (let i = 0; i < collapseKeys.length; i++) {
+        const collapseKey = collapseKeys[i]
+        this.collapsedMap[collapseKey] = status
+        const index = visibleFlatColumns.findIndex(col => col.key === collapseKey)
+        if (index > -1) {
+          const col = visibleFlatColumns[index] || {}
+          const { childKeys = [], parentNodeKeys, collapseKeys = [] } = col
+            col.collapseBg = !status ? 'collapse-bg' : ''
+          // 子级的状态需要更新:
+          childKeys &&
+            childKeys.length &&
+            childKeys.forEach(k => {
+              if (collapseKeys.indexOf(k) > -1) {
+                return true
+              }
+              this.$set(this.collapsedMap, k, status)
+              const childCol = visibleFlatColumns.find(col => col.key === k)
+              // 更新对应的column的 collapsed 状态, 如果也存在collapseKeys的话。
+              if (childCol && childCol.collapseKeys && childCol.collapseKeys.length) {
+                childCol.collapsed = status
+              }
+            })
+          // if (collapseKeys && collapseKeys.length) {
+          //   col.collapsed = collapseKeys.every(k => this.collapsedMap[k])
+          // }
+          // 如果存在父级，则在展开的情况下父级也必须展开
+          if (!status) {
+            parentNodeKeys &&
+              parentNodeKeys.length &&
+              parentNodeKeys.forEach(k => {
+                this.$set(this.collapsedMap, k, status)
+              })
+          } else {
+            // 如果子节点有一个展开，那么自己也要展开
+            const hasShowChild = childKeys.length && childKeys.some(k => !this.collapsedMap[k])
+            if (hasShowChild) {
+              this.$set(this.collapsedMap, col.key, !status)
+            }
+          }
+        }
+        this.updateVisibleFlatColumnsCol(key, {
+          collapsed: status,
+          collapseBg: !status ? 'collapse-bg' : ''
+        })
+      }
+      // 判断所有子节点是否被折叠，是则需要折叠自己
+      if (column.childKeys && column.childKeys.length) {
+        if (column.childKeys.every(k => this.collapsedMap[k])) {
+          this.collapsedMap[key] = status
+        }
+      }
+      this.updateColumns()
+      this.createHeader()
+      this.renderViewportRows()
+      this.renderViewportCells()
+      // 重新计算滚动条，且保持滚动条位置不变
+      this.setScrollOffsetX(this.offsetX)
+      this.refreshThumb()
+      this.$emit('collapsed')
+    },
+    updateVisibleFlatColumnsCol(key, obj) {
+      const visibleFlatColumns = this.visibleFlatColumns
+      const index = visibleFlatColumns.findIndex(col => col.key === key)
+      if (index === -1) {
+        return
+      }
+      const col = visibleFlatColumns[index]
+      for (const colKey in obj) {
+        if (!Object.hasOwnProperty.call(col, colKey)) {
+          this.$set(col, colKey, obj[colKey])
+        } else {
+          col[colKey] = obj[colKey]
+        }
+      }
+    },
+  },
+}

package/components/pe-table/empty.vue

@@ -0,0 +1,48 @@
+<script>
+import './style/empty.less'
+export default {
+  props: {
+    isAbnormal: {
+      type: Boolean,
+      default: false,
+    },
+    emptyText: {
+      type: String,
+      default: '暂无数据',
+    },
+    headerTotalHeight: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  methods: {
+    tableAbnormal() {
+      this.$emit('abnormal')
+    },
+  },
+  render() {
+    const { isAbnormal, emptyText } = this.$props
+    // 无数据
+    const createEmptyNode = () => {
+      return [<div class="pe-table-empty_bg"></div>, <span class="pe-table-empty_label">{emptyText}</span>]
+    }
+    // 断网
+    const createAbnormal = () => {
+      return (
+        <div class="abnormal">
+          <div class="abnormal-img"></div>
+          <div class="abnormal-desc">加载超时，请检查网络</div>
+          <ks-button onClick={() => this.tableAbnormal()} plain hairline type="primary" color="#F2412F">
+            重新加载
+          </ks-button>
+        </div>
+      )
+    }
+    return (
+      <div class="pe-table-empty" style={{ top: this.headerTotalHeight + 40 + 'PX' }}>
+        {isAbnormal ? createAbnormal() : createEmptyNode()}
+      </div>
+    )
+  },
+}
+</script>