init flexsearch

Author: whyengineer

package-lock.json

@@ -17,6 +17,7 @@
     "electron-log": "^4.3.0",
     "electron-pdf-window": "^1.0.12",
     "element-ui": "^2.4.5",
+    "flexsearch": "^0.6.32",
     "mysql": "^2.18.1",
     "sqlite3": "^5.0.0",
     "typeorm": "^0.2.29",

package.json

@@ -1,18 +1,44 @@
 <template>
   <div id="app">
-    <router-view></router-view>   
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+    >
+      <el-menu-item index="1">Table</el-menu-item>
+      <el-menu-item index="2">SearchBuild</el-menu-item>
+      
+    </el-menu>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-                           
 export default {
-  name: 'app',
-}
+  name: "app",
+  data(){
+    return {
+      activeIndex:'',
+      
+    }
+  },
+  methods:{
+    handleSelect(val){
+      console.log(val)
+      if(val=='1'){
+        this.$router.push('/')
+      }else{
+         this.$router.push('/searchBuild')
+      }
+    }
+  }
+};
 </script>
 
 <style>
 #app {
-  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 </style>

src/App.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-pagination
+          layout="prev, pager, next"
+          :total="pageTotalNum * 10"
+          :current-page.sync="pageNum"
+          @current-change="handleCurrentChange"
+          background
+        >
+      </el-pagination>
+     {{rightCnt}}/{{totalCnt}}
+    
+  </div>
+</template>
+
+<script>
+import { ipcRenderer } from "electron";
+import products from "./products.js";
+import flexSearch from 'flexsearch';
+export default {
+  data() {
+    return {
+      index:'',
+      db: "jlc",
+      table: "cap",
+      type: "贴片电容",
+      rightCnt:0,
+      totalCnt: 0,
+      pageNum: 1,
+      eachCnt: 500,
+      loading: true,
+      productValue: ["cap", "贴片电容"],
+      productList: products,
+    };
+  },
+  computed: {
+    pageTotalNum: function () {
+      return Math.ceil(this.totalCnt / this.eachCnt);
+    },
+  },
+  mounted() {
+    this.index=flexSearch.create()
+    ipcRenderer.on("getDataRet", (evt, data) => {
+       for(let i in data.data){
+         let val=data.data[i]
+         this.index.add(val.pn, val.value+val.footprint+val.desc+val.vendorPn+val.type);
+         this.rightCnt+=1
+       }
+       this.pageNum+=1;
+       if(this.pageNum<=this.pageTotalNum)
+          this.handleCurrentChange(this.pageNum)
+        else{
+          console.log(this.index.export());
+        }
+    });
+    ipcRenderer.on("dbGetCountRet", (evt, data) => {
+      this.totalCnt = data.count;
+      ipcRenderer.send("getData", {
+        db: this.db,
+        column: this.table,
+        start: 0,
+        end: this.eachCnt,
+        where: {
+          type_: this.type,
+        },
+      });
+    });
+    this.loading = true;
+    ipcRenderer.send("dbGetCount", {
+      db: this.db,
+      column: this.table,
+      option: `type_="${this.type}"`,
+    });
+    // ipcRenderer.send("getData",{db:'jlc',column:'cap',start:0,end:30});
+  },
+  destroyed() {
+    ipcRenderer.removeAllListeners("getDataRet");
+    ipcRenderer.removeAllListeners("dbGetCountRet");
+
+  },
+  methods: {
+    productChange(val) {
+      this.pageNum = 1;
+      this.table = val[0];
+      this.type = val[1];
+      this.loading = true;
+      ipcRenderer.send("dbGetCount", {
+        db: this.db,
+        column: this.table,
+        option: `type_="${this.type}"`,
+      });
+    },
+    handleCurrentChange(val) {
+      this.loading = true;
+      ipcRenderer.send("getData", {
+        db: this.db,
+        column: this.table,
+        start: (val - 1) * this.eachCnt,
+        end: val * this.eachCnt,
+        where: {
+          type_: this.type,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.page {
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  opacity: 0.5;
+}
+.page:hover {
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  opacity: 1;
+}
+.table{
+  overflow-y: scroll;
+  height: 200px;
+}
+</style>

src/components/buildSearch.vue

@@ -175,7 +175,7 @@ export default {
         db: this.db,
         column: this.table,
         start: 0,
-        end: 30,
+        end: this.eachCnt,
         where: {
           type_: this.type,
         },

src/components/table.vue

@@ -11,12 +11,12 @@ const routes = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/searchBuild',
+    name: 'SearchBuild',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/SearchBuild.vue')
   }
 ]
 

src/router/index.js

@@ -0,0 +1,16 @@
+<template>
+  <div class="home">
+    <BuildSearch />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import BuildSearch from "@/components/buildSearch.vue";
+
+export default {
+  components: {
+    BuildSearch,
+  },
+};
+</script>