@kyfe/ks-query-table 0.0.1 → 0.0.2

package/components/pe-table/load-more.js

@@ -0,0 +1,46 @@
+import './style/load-more.less'
+export default {
+  functional: true,
+  props: {
+    isLoadFinished: {
+      type: Boolean,
+    },
+    loadOptions: {
+      type: Object
+    },
+  },
+  render(h, context) {
+    const slots = context.slots() || {}
+    const children = slots.default || []
+    const [slot] = children
+    const { loadOptions, isLoadFinished } = context.props
+    const { finishedText, loadingText } = loadOptions || {}
+    // const loadNode = () => {
+    //   if (isLoadFinished) {
+    //     return (<div>{finishedText || ''}</div>)
+    //   return (<div>{loadingText || ''}</div>)
+    //   }
+    // }
+    const createNode = () => {
+      if (slot) {
+        return slot
+      }
+      // return <div class="pe-table-load-more">{isLoadFinished ? finishedText || '' : loadingText || ''}</div>
+      if (isLoadFinished) {
+        return <div class="pe-table-load-more">
+              <div class="loading-container">
+                {finishedText}
+              </div>
+          </div>
+      }
+      return <div class="pe-table-load-more">
+        <div class="loading"></div>
+          <div class="loading-container loading-color">
+            {loadingText || ''}
+          </div>
+      </div>
+    }
+    let node = createNode()
+    return node
+  },
+}

package/components/pe-table/props/index.js

@@ -0,0 +1,183 @@
+/** @format */
+
+export const PE_TABLE_PROPS = {
+  total: { type: Number, default: 0 },
+
+  disabledAutoHideClose: { type: Boolean, default: false },
+  stretchEnabled: { // 是否启用拉伸效果
+    type: Boolean,
+    default: false
+  },
+  stretchResistance: { // 拉伸阻力系数
+    type: Number,
+    default: 0.3
+  },
+  isSorbentColumm:{
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  rowHeight: {
+    type: Number,
+    default: 32,
+  },
+  headerRowHeight: {
+    type: Number,
+    default: 30,
+  },
+  rowKey: {
+    String,
+    default: 'id',
+  },
+  cellClassName: [Function, String],
+  headerCellClassName: [Function, String],
+  showIndex: {
+    type: Boolean,
+    default: false,
+  },
+  overflow: {
+    type: Boolean,
+    default: false,
+  },
+  beforeSort: Function,
+  emptyText: {
+    type: String,
+    default: '暂无数据',
+  },
+
+  delayLoading: { type: Number, default: 0 },
+
+  rowCellRender: Function,
+  headerCellRender: Function,
+
+  scrollY: {
+    type: Boolean,
+    default: true,
+  },
+  scrollX: {
+    type: Boolean,
+    default: true,
+  },
+  // 表格宽度
+  width: {
+    type: [Number, String],
+    validator: function (val) {
+      return val && isFinite(val)
+    },
+  },
+  // 表格高度
+  height: {
+    type: [Number, String],
+    validator: function (val) {
+      return val && isFinite(val)
+    },
+  },
+  // 表格最大高度
+  maxHeight: [String, Number],
+  autoHideScrollbars: {
+    type: Boolean,
+    default: true,
+  },
+  // 水平滚动条大小
+  hScrollbarSize: {
+    type: Number,
+    default: 4,
+  },
+  // 垂直滚动条大小
+  vScrollbarSize: {
+    type: Number,
+    default: 4,
+  },
+  // 数据变化是否重置到顶部
+  autoResetScrollTop: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否横屏
+  isShowHorizontal: {
+    type: Boolean,
+    default: false,
+  },
+  // 开启loading
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否开启上拉加载更多
+  enableLoadMore: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否加载完成
+  isLoadFinished: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否加载更多
+  isLoadingMore: {
+    type: Boolean,
+    default: false,
+  },
+  // 加载更多配置
+  loadOptions: {
+    type: Object,
+    default: () => {
+      return {
+        offset: 50, // 距离底部多远触发回调
+        loadingText: '加载中...', // 加载完成后的提示文案
+        finishedText: '没有更多了',
+        immediateCheck: false, //是否在初始化时立即执行
+      }
+    },
+  },
+  // 展示底部统计
+  isScrollShowTotal: {
+    type: Boolean,
+    default: true,
+  },
+  // 断网
+  isAbnormal: {
+    type: Boolean,
+    default: false
+  },
+  // 不满一屏时不展示没有更多
+  noOneScreenNoShowMore: {
+    type: Boolean,
+    default: true,
+  },
+  // 二级表头时，开启一级表头背景底色
+  isOpenTwoHeaderBg: {
+    type: Boolean,
+    default: false,
+  },
+  // 默认排序
+  // 升序 'ascending' 降序 'descending'
+  defaultSort: {
+    type: Object,
+    default: () => {
+      return {
+        order: '',
+        key: '',
+      }
+    },
+  },
+  // 是否需要更新坐标
+  isUpdateOffset: {
+    type: Boolean,
+    default: true
+  },
+  // 序号格式化
+  indexFormat: Function,
+  // 是否可以调整列宽
+  cellResizable: {
+    type: Boolean,
+    default: true
+  },
+}

package/components/pe-table/row.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="row" :data-rowIndex="rowIndex" class="pe-table-row" :class="{'pe-table-row_header': type === 'header'}" :style="style"></div>
+</template>
+
+<script>
+import { calculateRenderCells } from './utils/render-cells'
+export default {
+  name: 'rowComponent',
+  computed: {
+    style() {
+      const headerRowStyle =
+        this.type !== 'row'
+          ? {
+              zIndex: '1',
+            }
+          : {}
+      return {
+        transform: `translateY(${this.offset}px)`,
+        ...headerRowStyle,
+        height: this.rowHeight + 'px',
+      }
+    },
+  },
+  data() {
+    this.cellComponentMap = {}
+    this.fixedCellComponentMap = {}
+    this.headerFixedParentColcellComponentMap = {}
+    this.headerParentColcellComponentMap = {}
+    return {
+      offset: 0,
+      id: '',
+      grid: {},
+      cells: [],
+      type: '',
+      rowHeight: 32,
+      rowData: undefined,
+      rowIndex: -1,
+      columns: []
+    }
+  },
+  methods: {
+    reuse ({offset, id, cells, type, rowHeight, rowData, rowIndex, columns, originRowData}) {
+      this.offset = offset
+      this.id = id
+      this.cells = cells
+      this.type = type
+      this.rowHeight = rowHeight
+      this.rowIndex = rowIndex
+      this.rowData = rowData
+      this.columns = columns
+      this.originRowData = originRowData
+    },
+    setCells (cells) {
+      this.cells = cells
+    },
+    setColumns (columns) {
+      this.columns = columns
+    },
+    setOffset(offset) {
+      this.offset = offset
+    },
+    destroy() {
+      if (this.grid.$refs.container.contains(this.$el)) {
+        this.grid.$refs.container.removeChild(this.$el)
+      } else {
+        // eslint-disable-next-line
+        console.error('row component already removed')
+      }
+    },
+    renderCells() {
+      const type = this.type
+      const rowKey = this.grid.$props.rowKey
+      const cells = this.cells
+      const params = {
+        cells,
+        type,
+        rowContainerDom: this.$refs.row,
+        rowKey,
+        handleEvent: this.grid.handleEvent,
+        rowData: this.rowData,
+        rowIndex: this.rowIndex,
+        grid: this.grid,
+        columns: this.columns,
+        mainColumns: this.grid.mainColumns,
+        originRowData: this.originRowData
+      }
+
+      // 固定列
+      const fixedColumns = params.columns.filter(col => col.fixed)
+        calculateRenderCells({
+          ...params,
+          columns: fixedColumns,
+          startCell: 0,
+          endCell: fixedColumns.length - 1,
+          cellComponentMap: this.fixedCellComponentMap,
+          isRenderFixedCells: true,
+          headerParentColcellComponentMap: this.headerFixedParentColcellComponentMap
+        })
+
+      // 正常列
+      const state = this.grid.getState()
+      calculateRenderCells({
+        ...params,
+        startCell: state.startCell,
+        endCell: state.endCell,
+        cellComponentMap: this.cellComponentMap,
+        gridOffsetX: this.grid.offsetX,
+        isRenderFixedCells: false,
+        headerParentColcellComponentMap: this.headerParentColcellComponentMap,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import url('./style/row.less');
+</style>