feat(PropTypes): add excel editor

Author: ly525

front-end/h5/package.json

@@ -36,7 +36,8 @@
     "vue-matomo": "^3.13.0-2",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "x-data-spreadsheet": "^1.1.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
@@ -54,6 +55,7 @@
     "dart-sass": "^1.23.7",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "less-loader": "^6.1.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "stylus": "^0.54.5",

front-end/h5/src/components/core/support/excel.js

@@ -0,0 +1,168 @@
+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;
+  }
+}
+ */
+
+/**
+  *
+  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
+  }
+}
+
+// const getDefaultTableMatrix = () => [
+//   [1, 2, 3, 4],
+//   [5, 6, 7, 8],
+//   [9, 10, 11, 12]
+// ]
+
+export default {
+  name: 'lbs-excel-editor',
+  props: {
+    value: {
+      type: Array,
+      // default: () => getDefaultTableMatrix()
+      default: () => []
+    },
+    formatter: {
+      type: Function,
+      default: Parser.excel2BinaryMatrix
+    }
+  },
+  computed: {
+    innerItems: {
+      get () {
+        return Parser.binaryMatrix2excel(this.value)
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  render () {
+    return <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
+  },
+  mounted () {
+    const ele = this.$refs.excel
+    const options = {
+      showToolbar: false,
+      showGrid: true,
+      showContextmenu: true
+      // view: {
+      //   height: () => 400,
+      //   width: () => ele.getBoundingClientRect().width
+      // }
+    }
+    new Spreadsheet(ele, options)
+      .loadData({
+        rows: this.innerItems
+      }) // load data
+      .change(excelData => {
+        // console.log('----------')
+        // console.log(excelData)
+        // console.log(this.formatter(excelData))
+        // console.log('----------')
+        this.$emit('change', this.formatter(excelData) /** BinaryMatrix */)
+        // save data to db
+      })
+  }
+}

front-end/h5/src/components/core/support/index.js

@@ -13,9 +13,11 @@ import Vue from 'vue'
 import PropMultiTextItemsEditor from './prop-multi-items-editor/text.js'
 import ImageGallery from './image-gallery/gallery.js'
 import VideoGallery from './video-gallery/gallery.js'
+import LbsExcelEditor from './excel'
 import LbpTextAlign from '@luban-h5/lbs-text-align'
 
 Vue.component(PropMultiTextItemsEditor.name, PropMultiTextItemsEditor)
 Vue.component(ImageGallery.name, ImageGallery)
 Vue.component(VideoGallery.name, VideoGallery)
 Vue.component('lbs-text-align', LbpTextAlign)
+Vue.component(LbsExcelEditor.name, LbsExcelEditor)