From cd7ed3a2209f9de7988dbc529dcb4577d0bf92c4 Mon Sep 17 00:00:00 2001
From: Gimmy <975402925@qq.com>
Date: Mon, 21 Oct 2024 14:18:24 +0800
Subject: [PATCH] =?UTF-8?q?docs(grid):=20=E8=A1=A8=E6=A0=BCdemo=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4xlsx=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../import-excel-composition-api.vue          | 71 ++++++++++---------
 .../app/grid/import-export/import-excel.vue   | 70 +++++++++---------
 .../pc/app/grid/webdoc/grid-import-export.js  |  1 +
 examples/sites/package.json                   |  5 +-
 4 files changed, 74 insertions(+), 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
index 0d5fa22060..6302ba71ce 100644
--- 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
index f3d24ae138..b849c69714 100644
--- 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
index fefd229979..3bc3efb57a 100644
--- 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
index 04c7f47603..5153b2b1a8 100644
--- 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:~",