Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(grid): 表格demo删除xlsx依赖 #2325

Merged
merged 1 commit into from
Oct 21, 2024
Merged

docs(grid): 表格demo删除xlsx依赖 #2325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 36 additions & 35 deletions examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<input type="file" accept=".xls,.xlsx" @change="importExcel" />
<!-- <input type="file" accept=".xls,.xlsx" @change="importExcel" /> -->
<tiny-grid :data="tableData">
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
Expand All @@ -11,44 +11,45 @@
</template>

<script setup>
import { GridColumn as TinyGridColumn, Grid as TinyGrid, Modal } from '@opentiny/vue'
import { GridColumn as TinyGridColumn, Grid as TinyGrid } from '@opentiny/vue'
import { ref } from 'vue'
import * as XLSX from 'xlsx'

// import * as XLSX from 'xlsx'

const tableData = ref([])

let upload_file
// let upload_file

function importExcel(e) {
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
Modal.message({ message: '上传格式不正确，请上传xls或者xlsx格式', status: 'warning' })
return false
} else {
// 更新获取文件名
upload_file = files[0].name
}
// function importExcel(e) {
// const files = e.target.files
// if (files.length <= 0) {
// return false
// } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
// Modal.message({ message: '上传格式不正确，请上传xls或者xlsx格式', status: 'warning' })
// return false
// } else {
// // 更新获取文件名
// upload_file = files[0].name
// }

const fileReader = new FileReader()
fileReader.onload = (ev) => {
try {
const data = ev.target.result
const workbook = XLSX.read(data, {
type: 'binary'
})
// 取 Excel 的第一张 Sheet 表
const wsname = workbook.SheetNames[0]
// 生成 JSON 表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
// 将数据赋值给 Grid 数据源
tableData.value = ws
// 可以在这里给后端发请求，将读取的 Excel 数据存到数据库表中
} catch (e) {
return false
}
}
fileReader.readAsBinaryString(files[0])
}
// const fileReader = new FileReader()
// fileReader.onload = (ev) => {
// try {
// const data = ev.target.result
// const workbook = XLSX.read(data, {
// type: 'binary'
// })
// // 取 Excel 的第一张 Sheet 表
// const wsname = workbook.SheetNames[0]
// // 生成 JSON 表格内容
// const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
// // 将数据赋值给 Grid 数据源
// tableData.value = ws
// // 可以在这里给后端发请求，将读取的 Excel 数据存到数据库表中
// } catch (e) {
// return false
// }
// }
// fileReader.readAsBinaryString(files[0])
// }
</script>
70 changes: 35 additions & 35 deletions examples/sites/demos/pc/app/grid/import-export/import-excel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<input type="file" accept=".xls,.xlsx" @change="importExcel" />
<!-- <input type="file" accept=".xls,.xlsx" @change="importExcel" /> -->
<tiny-grid :data="tableData">
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
Expand All @@ -11,8 +11,9 @@
</template>

<script>
import { GridColumn, Grid, Modal } from '@opentiny/vue'
import * as XLSX from 'xlsx'
import { GridColumn, Grid } from '@opentiny/vue'

// import * as XLSX from 'xlsx'

export default {
components: {
Expand All @@ -25,38 +26,37 @@ export default {
}
},
methods: {
importExcel(e) {
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
Modal.message({ message: '上传格式不正确，请上传xls或者xlsx格式', status: 'warning' })
return false
} else {
// 更新获取文件名
this.upload_file = files[0].name
}

const fileReader = new FileReader()
fileReader.onload = (ev) => {
try {
const data = ev.target.result
const workbook = XLSX.read(data, {
type: 'binary'
})
// 取 Excel 的第一张 Sheet 表
const wsname = workbook.SheetNames[0]
// 生成 JSON 表格内容
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
// 将数据赋值给 Grid 数据源
this.tableData = ws
// 可以在这里给后端发请求，将读取的 Excel 数据存到数据库表中
} catch (e) {
return false
}
}
fileReader.readAsBinaryString(files[0])
}
// importExcel(e) {
// const files = e.target.files
// if (files.length <= 0) {
// return false
// } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
// Modal.message({ message: '上传格式不正确，请上传xls或者xlsx格式', status: 'warning' })
// return false
// } else {
// // 更新获取文件名
// this.upload_file = files[0].name
// }
// const fileReader = new FileReader()
// fileReader.onload = (ev) => {
// try {
// const data = ev.target.result
// const workbook = XLSX.read(data, {
// type: 'binary'
// })
// // 取 Excel 的第一张 Sheet 表
// const wsname = workbook.SheetNames[0]
// // 生成 JSON 表格内容
// const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
// // 将数据赋值给 Grid 数据源
// this.tableData = ws
// // 可以在这里给后端发请求，将读取的 Excel 数据存到数据库表中
// } catch (e) {
// return false
// }
// }
// fileReader.readAsBinaryString(files[0])
// }
}
}
</script>
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default {
<p>本示例使用的xlsx版本为0.18.2，导入的excel表格，表头字段需与表格field字段保持一致。</p>
<p>提示: xlsx 是一个非常强大的前端 EXCEL 文件操作库，支持表格带格式导入导出，可兼容 IE9+ 版本的浏览器。</p>
<p>详情参考：<a href="https://github.com/SheetJS/sheetjs" target="_blank">https://github.com/SheetJS/sheetjs</a></p>
<p>注意：如需体验demo，需要将demo中注释部分代码取消注释，切自行安装相关依赖。</p>
</div>
`,
'en-US': 'For details, see the following example.'
Expand Down
5 changes: 2 additions & 3 deletions examples/sites/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
"dependencies": {
"@opentiny/vue": "workspace:~",
"@opentiny/vue-common": "workspace:~",
"@opentiny/vue-hooks": "workspace:~",
"@opentiny/vue-design-aurora": "workspace:~",
"@opentiny/vue-design-saas": "workspace:~",
"@opentiny/vue-design-smb": "workspace:~",
"@opentiny/vue-directive": "workspace:~",
"@opentiny/vue-hooks": "workspace:~",
"@opentiny/vue-icon": "workspace:~",
"@opentiny/vue-icon-saas": "workspace:~",
"@opentiny/vue-repl": "^1.1.2",
Expand All @@ -46,8 +46,7 @@
"tailwindcss": "^3.2.4",
"vue": "^3.4.31",
"vue-i18n": "^9.1.10",
"vue-router": "4.1.5",
"xlsx": "^0.18.5"
"vue-router": "4.1.5"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issues Found: Remaining xlsx References

The xlsx dependency is still referenced in multiple files. Please remove or update all instances to ensure complete elimination.

Affected files:

  • packages/vue/src/file-upload/src/index.ts
  • packages/renderless/src/fluent-editor/options.ts
  • packages/renderless/src/grid/plugins/exportExcel.ts
  • internals/automate/src/aui-diff.ts
  • gulp/themeJson.mjs
  • examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
  • examples/sites/demos/pc/app/grid/import-export/import-excel.vue
  • examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
  • examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
🔗 Analysis chain

LGTM. Verify impact of xlsx removal.

The removal of the xlsx dependency aligns with the PR objective. However, to ensure this change doesn't break any existing functionality, please verify that all code previously using xlsx has been updated or removed.

Run the following script to check for any remaining references to xlsx:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining references to xlsx in the codebase

# Test: Search for 'xlsx' in all files. Expect: No results or only in comments/documentation.
rg -i 'xlsx' --type-not json

Length of output: 4940

},
"devDependencies": {
"@opentiny-internal/unplugin-virtual-template": "workspace:~",
Expand Down
Loading