From 7b6ce8ec78e5b9ea349b132d8ee1560a3cd103b3 Mon Sep 17 00:00:00 2001 From: ly525 Date: Sun, 23 Aug 2020 16:55:12 +0800 Subject: [PATCH] =?UTF-8?q?feat(component):=20!#zh:=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=20!#:=20add=20table=20comp?= =?UTF-8?q?onent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../h5/src/components/core/support/excel.js | 110 +---------------- .../h5/src/components/plugins/lbp-table.js | 111 ++++++++++++++++++ .../src/components/plugins/styles/table.scss | 84 +++++++++++++ front-end/h5/src/mixins/load-plugins.js | 96 ++++++++++++++- 4 files changed, 293 insertions(+), 108 deletions(-) create mode 100644 front-end/h5/src/components/plugins/lbp-table.js create mode 100644 front-end/h5/src/components/plugins/styles/table.scss diff --git a/front-end/h5/src/components/core/support/excel.js b/front-end/h5/src/components/core/support/excel.js index 64469d45..663f8002 100644 --- 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 new file mode 100644 index 00000000..ee83628b --- /dev/null +++ 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
{cell}
+ } + + const renderTable = (tableData = [], tableClass = '', tableStyle = {}) => { + const headers = tableData.length ? tableData[0] : [] + const columnsCount = headers.length + return ( + + + { + [...Array(columnsCount)].map((item, i) => ) + } + + + { tableData.map(row => { row.map(renderCell) }) } + +
+ ) + } + + return ( +
+
+ {renderTable(this.dataset)} +
+
+ {renderTable(this.dataset, 'left-table')} +
+
+ ) + }, + 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 new file mode 100644 index 00000000..565cbf01 --- /dev/null +++ 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; + } + } + } +} diff --git a/front-end/h5/src/mixins/load-plugins.js b/front-end/h5/src/mixins/load-plugins.js index ed07c365..39163399 100644 --- a/front-end/h5/src/mixins/load-plugins.js +++ b/front-end/h5/src/mixins/load-plugins.js @@ -14,9 +14,67 @@ import LbpBgMusic from '../components/plugins/lbp-bg-music' import LbpNoticeBar from '../components/plugins/lbp-notice-bar' import LbpRate from '../components/plugins/lbp-rate' import LbpQQMap from '../components/plugins/lbp-qq-map/src' +import LbpLineChart from '../components/plugins/charts/line' +import LbpTable from '../components/plugins/lbp-table' // import LbpTabs from '../components/plugins/lbp-tabs' export const pluginsList = [ + { + i18nTitle: { + 'en-US': 'LineChart', + 'zh-CN': '折线图' + }, + title: '折线图', + icon: 'line-chart', + component: LbpLineChart, + visible: true, + name: LbpLineChart.name, + shortcutProps: { + type: 'line' + } + }, + { + i18nTitle: { + 'en-US': 'LineChart', + 'zh-CN': '柱状图' + }, + title: '柱状图', + icon: 'bar-chart', + component: LbpLineChart, + visible: true, + name: LbpLineChart.name, + shortcutProps: { + type: 'histogram' + } + }, + { + i18nTitle: { + 'en-US': 'LineChart', + 'zh-CN': '饼状图' + }, + title: '饼状图', + icon: 'pie-chart', + component: LbpLineChart, + visible: true, + name: LbpLineChart.name, + shortcutProps: { + type: 'pie' + } + }, + { + i18nTitle: { + 'en-US': 'LineChart', + 'zh-CN': '漏斗图' + }, + title: '漏斗图', + icon: 'filter', + component: LbpLineChart, + visible: true, + name: LbpLineChart.name, + shortcutProps: { + type: 'funnel' + } + }, { title: '公告', i18nTitle: { @@ -183,7 +241,43 @@ export const pluginsList = [ component: LbpBgMusic, visible: true, name: LbpBgMusic.name - } + }, + { + i18nTitle: { + 'en-US': 'Table(Default)', + 'zh-CN': '默认表格' + }, + icon: 'table', + component: LbpTable, + visible: true, + name: LbpTable.name, + }, + { + i18nTitle: { + 'en-US': 'Table(Stripe)', + 'zh-CN': '(斑马线)表格' + }, + icon: 'table', + component: LbpTable, + visible: true, + name: LbpTable.name, + shortcutProps: { + theme: 'lbp-table-theme-stripe' + } + }, + { + i18nTitle: { + 'en-US': 'Table(LightBlue)', + 'zh-CN': '(淡蓝色)表格' + }, + icon: 'table', + component: LbpTable, + visible: true, + name: LbpTable.name, + shortcutProps: { + theme: 'lbp-table-theme-light-blue' + } + }, ] export default {