11.14

package.json

@@ -20,7 +20,9 @@
     "dexie": "^4.0.8",
     "element-plus": "^2.7.1",
     "lodash": "^4.17.21",
-    "vxe-table": "^4.7.87"
+    "vxe-pc-ui": "^4.2.26",
+    "vxe-table": "^4.7.94",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/renderer/src/views/shujudui.vue

@@ -22,6 +22,22 @@
             </el-icon>
             <span>清空</span>
           </el-button>
+          <el-upload :show-file-list="false" v-model="fileOriData" :before-upload="beforeAvatarUpload"
+            :http-request="successSubmit" accept=".xls,.xlsx,.csv"
+            style="display: inline-block;position: relative;top: 3px;left: 12px;margin-right: 24px;">
+            <el-button type="success" size="large">
+              <el-icon>
+                <Upload />
+              </el-icon>
+              <span>导入</span>
+            </el-button>
+          </el-upload>
+          <el-button type="primary" @click="exportData" size="large">
+            <el-icon>
+              <Download />
+            </el-icon>
+            <span>导入示例模板</span>
+          </el-button>
         </el-col>
         <el-col :span="6">
           <el-input v-model="searchParams.name" placeholder="请输入输入名称" size="large" clearable>
@@ -58,6 +74,7 @@
 
 <script>
 import _ from 'lodash'
+import * as XLSX from 'xlsx';
 import tableHeaderLocal from '../assets/json/shujudui.json'
 import { myDatabase } from '../assets/js/db.js'
 import dayjs from 'dayjs'
@@ -89,9 +106,81 @@ export default {
       },
       sortObj: {},
       loading: false,
+      fileOriData: null,
     }
   },
   methods: {
+    beforeAvatarUpload(rawFile) {
+      let imgList = ['text/csv', 'application/vnd.ms-excel', "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
+      if (imgList.indexOf(rawFile.type) === -1) {
+        this.$msgbox.alert('请上传excel,csv格式的表格文件!')
+        return false
+      } else if (rawFile.size / 1024 / 1024 > 50) {
+        this.$msgbox.alert('表格文件的大小为小于50MB,数据过多时会处理过慢')
+        return true
+      }
+      return true
+    },
+    //表格增加数据
+    async successSubmit(opts) {
+      let that = this
+      let file = opts.file
+      this.fileDealData = []
+      let fileReader = new FileReader()
+      fileReader.onload = async function () {
+        let data = this.result
+        let workbook = XLSX.read(data, { type: 'binary' })
+        let sheetName = workbook.SheetNames[0]
+        let sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName])
+        console.log(132, sheetData);
+        for (let i = 0; i < sheetData.length; i++) {
+          let element = sheetData[i];
+          let dealItem = {
+            name: element["名称"],
+            data: element["数据堆"],
+            note: element["备注"],
+          }
+          try {
+            console.log(138, dealItem);
+            await myDatabase.shujudui.add({
+              ...dealItem,
+              create_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+              update_at: dayjs().format('YYYY-MM-DD HH:mm:ss')
+            })
+          } catch (error) {
+            ElMessage({
+              message: `${dealItem.name}(${dealItem.data})数据堆重复，不可再次新增该数据堆信息`,
+              type: 'error',
+            })
+          }
+        }
+        await that.updateSeach()
+      }
+      fileReader.onerror = function (error) {
+        ElMessage({
+          message: `Error reading file:, ${error}`,
+          type: 'error',
+        })
+      }
+      fileReader.readAsArrayBuffer(file)
+    },
+    // 导出数据
+    async exportData() {
+      let lilstLocal = [{
+        "名称": "测试1",
+        "数据堆": "25 78 96 87 21 23",
+        "备注": "备注1"
+      }]
+      let jsonWorkSheet = XLSX.utils.json_to_sheet(lilstLocal);
+      let workBook = {
+        SheetNames: ["sheet1"],
+        Sheets: {
+          ["sheet1"]: jsonWorkSheet,
+        }
+      };
+      XLSX.writeFile(workBook, `导出示例.xlsx`);
+
+    },
     //更新数据
     async updateSeach() {
       this.loading = true