徐烜 / bsth-ebus-h5_editor · Commits

Commit 76603fdb452cc5854a8c8c008237df44aef6d59f

Authored by ly525
Committed by 小小鲁班
1 parent 00ab1a0d

fix: refresh excel data when prop value update

Inline Side-by-side
Showing 1 changed file with 33 additions and 23 deletions
front-end/h5/src/components/core/support/excel.js
  View file @76603fd
@@ -34,47 +34,57 @@ export default { @@ -34,47 +34,57 @@ export default {
34 } 34 }
35 } 35 }
36 }, 36 },
  37 + watch: {
  38 + value() {
  39 + this.refreshSheet({ rows: this.innerItems })
  40 + }
  41 + },
37 methods: { 42 methods: {
38 parseCSV (csv) { 43 parseCSV (csv) {
39 const sheetData = Parser.binaryMatrix2excel(csv.data) 44 const sheetData = Parser.binaryMatrix2excel(csv.data)
40 this.$emit('change', csv.data) 45 this.$emit('change', csv.data)
41 this.refreshSheet({ rows: sheetData }) 46 this.refreshSheet({ rows: sheetData })
42 }, 47 },
  48 + /**
  49 + *
  50 + * @param {Object} data { rows }
  51 + */
43 refreshSheet (data) { 52 refreshSheet (data) {
44 this.sheet.loadData(data) 53 this.sheet.loadData(data)
45 this.sheet.reRender() 54 this.sheet.reRender()
  55 + },
  56 + initSheet() {
  57 + const ele = this.$refs.excel
  58 + return this.sheet || new Spreadsheet(ele, {
  59 + showToolbar: false,
  60 + showGrid: true,
  61 + showContextmenu: true
  62 + // view: {
  63 + // height: () => 400,
  64 + // width: () => ele.getBoundingClientRect().width
  65 + // }
  66 + }).change(excelData => {
  67 + // console.log('----------')
  68 + // console.log(excelData)
  69 + // console.log(this.formatter(excelData))
  70 + // console.log('----------')
  71 + this.$emit('change', this.formatter(excelData) /** BinaryMatrix */)
  72 + // save data to db
  73 + })
46 } 74 }
47 }, 75 },
  76 + // 注意(看源码)： 如果不调用 data 或 props 的某个值，则 render 不会执行。watcher 的更新时机是什么？？
48 render () { 77 render () {
49 return <div style="max-height: 320px;overflow:scroll;"> 78 return <div style="max-height: 320px;overflow:scroll;">
50 <div style="line-height:2;"> 79 <div style="line-height:2;">
51 <span>方案1: <CsvImport onParse={this.parseCSV} /></span> 80 <span>方案1: <CsvImport onParse={this.parseCSV} /></span>
52 <span>方案2: 直接编辑 Excel</span> 81 <span>方案2: 直接编辑 Excel</span>
53 - <div id="excel-wrapper" ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div> 82 + <div ref="excel" style="margin-right: 12px;width: 100%;overflow: scroll"></div>
54 </div> 83 </div>
55 </div> 84 </div>
56 }, 85 },
57 mounted () { 86 mounted () {
58 - const ele = this.$refs.excel  
59 - const options = {  
60 - showToolbar: false,  
61 - showGrid: true,  
62 - showContextmenu: true  
63 - // view: {  
64 - // height: () => 400,  
65 - // width: () => ele.getBoundingClientRect().width  
66 - // }  
67 - }  
68 - this.sheet = new Spreadsheet(ele, options)  
69 - this.sheet.loadData({  
70 - rows: this.innerItems  
71 - }).change(excelData => {  
72 - // console.log('----------')  
73 - // console.log(excelData)  
74 - // console.log(this.formatter(excelData))  
75 - // console.log('----------')  
76 - this.$emit('change', this.formatter(excelData) /** BinaryMatrix */)  
77 - // save data to db  
78 - })  
79 - } 87 + this.sheet = this.initSheet()
  88 + this.refreshSheet({ rows: this.innerItems })
  89 + },
80 } 90 }