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

opentiny · Oct 21, 2024 · d0dd390 · d0dd390
1 parent 363f40f
commit d0dd390
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 73 deletions.
diff --git a/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue b/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
@@ -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>
@@ -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>
diff --git a/examples/sites/demos/pc/app/grid/import-export/import-excel.vue b/examples/sites/demos/pc/app/grid/import-export/import-excel.vue
@@ -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>
@@ -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: {
@@ -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>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js b/examples/sites/demos/pc/app/grid/webdoc/grid-import-export.js
@@ -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.'

diff --git a/examples/sites/package.json b/examples/sites/package.json
@@ -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",
@@ -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"
   },
   "devDependencies": {
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",