feat(component): !#zh: 增加表格组件 !#: add table component

ly525 · Aug 25, 2020 · 7b6ce8e · 7b6ce8e
1 parent 7cf954c
commit 7b6ce8e
Show file tree

Hide file tree

Showing 4 changed files with 293 additions and 108 deletions.
diff --git a/front-end/h5/src/components/core/support/excel.js b/front-end/h5/src/components/core/support/excel.js
@@ -1,113 +1,9 @@
-import Spreadsheet from 'x-data-spreadsheet'
-
 /**
- *
- declare module ExcelRows {
-  export interface cell {
-      text: string;
-  }
-  export interface Cells {
-    0: cell;
-    1: cell;
-    2: cell;
-  }
-  export interface ExcelRows {
-    cells: Cells;
-  }
-}
+ * 后续学习资料：https://github.com/myliang/x-spreadsheet/issues/159
  */
 
-/**
-  *
-  BinaryMatrix = [
-    [any, any, any, ...],
-    [any, any, any, ...],
-    [any, any, any, ...],
-  ]
-
-  ExcelDataType = [
-    {
-      cells: {
-        0: { text: any },
-        1: { text: any },
-        2: { text: any }
-      }
-    },
-    {
-      cells: {
-        0: { text: any },
-        1: { text: any },
-        2: { text: any }
-      }
-    },
-  ]
-  */
-
-class Parser {
-  /**
-   *
-   * @param {*} dataset ExcelDataType
-   */
-  static dataset2excel (dataset) {
-    return dataset.map(item => ({
-      cells: {
-        0: { text: item.x },
-        1: { text: item.y },
-        2: { text: item.s }
-      }
-    }))
-  }
-
-  /**
-   *
-    [
-      [1,2,3,4],
-      [5,6,7,8],
-      [9,10,11,12]
-    ]
-   * @param {Object} BinaryMatrix
-   * @returns {Object} ExcelDataType
-   */
-  static binaryMatrix2excel (binaryMatrix) {
-    const excelData = binaryMatrix.map((row, rowIndex) => {
-      // cells: {
-      //   0: { text: item.x },
-      //   1: { text: item.y },
-      //   2: { text: item.s }
-      // }
-      const cells = {}
-      row.forEach((cellValue, cellIndex) => {
-        cells[cellIndex] = { text: cellValue }
-      })
-      return { cells }
-    })
-    return excelData
-  }
-
-  static excel2chartDataSet (excelData) {
-    const rowsArray = Object.values(excelData.rows).filter(item => typeof item === 'object')
-    const dataset = rowsArray.map(row => {
-      const [x, y, s] = Object.values(row.cells).map(item => item.text)
-      return {
-        x: x,
-        y: y,
-        s: s
-      }
-    })
-    return dataset
-  }
-
-  static excel2BinaryMatrix (excelData) {
-    const rowsArray = Object.values(excelData.rows).filter(item => typeof item === 'object')
-    const dataset = rowsArray.map(row => {
-      // [1,2,3,4]
-      const cells = Object.values(row.cells).map(item => item.text)
-      return cells
-    })
-    console.log('dataset', dataset)
-    return dataset
-  }
-}
+import Spreadsheet from 'x-data-spreadsheet'
+import Parser from '../../../utils/excel-parser'
 
 // const getDefaultTableMatrix = () => [
 //   [1, 2, 3, 4],

diff --git a/front-end/h5/src/components/plugins/lbp-table.js b/front-end/h5/src/components/plugins/lbp-table.js
@@ -0,0 +1,111 @@
+// https://github.com/luban-h5-components/plugin-common-props
+import PropTypes from '@luban-h5/plugin-common-props'
+import { addListener as addResizeListener, removeListener } from 'resize-detector'
+import './styles/table.scss'
+
+function sum (arr = [], key) {
+  return arr.map(item => item[key]).reduce((a, b) => a + b, 0)
+}
+
+export default {
+  name: 'lbp-table',
+  extra: {
+    defaultStyle: {
+      width: 320,
+      height: 150
+    }
+  },
+  data: () => ({
+    mainTableWrapperEle: null,
+    mainTableEle: null,
+    fixedTableWrapperEle: null,
+    fixedTableEle: null
+  }),
+  props: {
+    theme: PropTypes.string({ defaultValue: '', label: '主题', visible: false }),
+    columnWidth: PropTypes.number({ label: '每列宽度(px)', defaultValue: 100 }),
+    freezeCount: PropTypes.number({ label: '冻结列数(px)', defaultValue: 0 }),
+    dataset: PropTypes.excel({
+      defaultValue: () => [
+        [ '列A', '列B', '列C'],
+        [ '————', '————', '————'],
+        [ '————', '————', '————'],
+        [ '————', '————', '————']
+      ]
+    })
+  },
+  watch: {
+    freezeCount () {
+      setTimeout(() => {
+        this.setFixedTableStyle()
+      }, 100)
+    }
+  },
+  render () {
+    const renderCell = cell => {
+      return <td><div class="cell" >{cell}</div></td>
+    }
+
+    const renderTable = (tableData = [], tableClass = '', tableStyle = {}) => {
+      const headers = tableData.length ? tableData[0] : []
+      const columnsCount = headers.length
+      return (
+        <table class={tableClass} style={tableStyle}>
+          <colgroup>
+            {
+              [...Array(columnsCount)].map((item, i) => <col style={{ width: this.columnWidth + 'px' }} />)
+            }
+          </colgroup>
+          <tbody>
+            { tableData.map(row => <tr>{ row.map(renderCell) }</tr>) }
+          </tbody>
+        </table>
+      )
+    }
+
+    return (
+      <div class={['lbp-table', this.theme]} ref="lbpTable">
+        <div class="main-table-wrapper">
+          {renderTable(this.dataset)}
+        </div>
+        <div class="fixed-table-wrapper" v-show="freezeCount">
+          {renderTable(this.dataset, 'left-table')}
+        </div>
+      </div>
+    )
+  },
+  methods: {
+    getFixedColsWidth () {
+      const tableHeaders = [].slice.apply(this.mainTableEle.querySelectorAll('tr:first-child > td'))
+      const freezeColsWidth = sum(tableHeaders.slice(0, +this.freezeCount), 'offsetWidth')
+      return freezeColsWidth
+    },
+    setFixedTableStyle () {
+      this.fixedTableWrapperEle.style.width = `${this.getFixedColsWidth()}px`
+      this.fixedTableWrapperEle.style.height = `calc(100% - ${this.mainTableWrapperEle.offsetHeight - this.mainTableWrapperEle.scrollHeight}px)`
+    },
+    setTableWidth () {
+      const parentWidth = this.$el.parentNode.style.width
+      this.fixedTableEle.style.width = this.mainTableEle.style.width = parentWidth
+    },
+    initElements () {
+      const root = this.$el
+      this.mainTableWrapperEle = root.querySelector('.main-table-wrapper')
+      this.mainTableEle = root.querySelector('.main-table-wrapper > table')
+      this.fixedTableWrapperEle = root.querySelector('.fixed-table-wrapper')
+      this.fixedTableEle = root.querySelector('.left-table')
+    }
+  },
+
+  mounted () {
+    this.initElements()
+    this.setTableWidth()
+    this.setFixedTableStyle()
+    addResizeListener(this.$refs.lbpTable, () => {
+      this.setTableWidth()
+      if (this.freezeCount) {
+        this.setFixedTableStyle()
+      }
+    })
+  }
+}
diff --git a/front-end/h5/src/components/plugins/styles/table.scss b/front-end/h5/src/components/plugins/styles/table.scss
@@ -0,0 +1,84 @@
+$border-color: #ebeef5;
+.lbp-table {
+  position: relative;
+  overflow: hidden;
+
+  table {
+    position: absolute;
+    table-layout: fixed;
+    height: 100%;
+    background: white;
+
+    // 边框
+    td {
+      border-top: 2px solid $border-color;
+      border-left: 2px solid $border-color;
+    }
+    tr:last-child {
+      border-bottom: 2px solid $border-color;
+      border-right: 2px solid $border-color;
+    }
+
+    // 表头加粗
+    tr:first-child  {
+      background-color: #f6f6f6;
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    // 居中对齐
+    td {
+      text-align: center;
+    }
+
+  }
+
+  .main-table-wrapper {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+
+  .fixed-table-wrapper {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    overflow: hidden;
+  }
+}
+
+
+.lbp-table-theme-stripe {
+  table {
+    tbody tr {
+      // 奇
+      &:nth-child(odd):not(:first-child) {
+        background-color: #f6f6f6;
+      }
+
+      &:nth-child(even) {
+        background-color: white;
+      }
+    }
+  }
+}
+
+.lbp-table-theme-light-blue {
+  table {
+    tbody tr {
+      &:first-child {
+        background-color: #edf8ff;
+      }
+      &:nth-child(odd):not(:first-child) {
+        background-color: #edf8ff;
+      }
+
+      &:nth-child(even) {
+        background-color: white;
+      }
+    }
+  }
+}