emacroh5lib 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,11 @@
-## 添加npm账号
-npm adduser --registry  https://registry.npmjs.org/
 
-## 发布npm包
-npm publish  --registry  https://registry.npmjs.org/
 
+## 读取excel表格数据
+
+``` JavaScript
+EMacro.File.readLocalExcel((file, workbook) => {
+    console.log("file", file);
+    console.log("workbook", workbook);
+    console.log("数据", workbook.Sheets["工作表1"]["G32"].h);
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.0",
+  "version": "1.0.001",
   "description": "EMacro前端组件库",
   "main": "./dist/emacroh5lib.min.js",
   "types": "./dist/types/index.d.ts",
@@ -10,6 +10,7 @@
     "build:prod": "webpack --mode=production --node-env=production",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
+    "e2e": "vue-cli-service test:e2e",
     "watch": "webpack --watch",
     "serve": "webpack serve",
     "dev": "webpack serve",
@@ -89,6 +90,9 @@
     "vue-echarts": "^6.0.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5",
+    "query-string": "^7.0.1",
+    "deep-eql": "^4.0.0"
   }
 }

package/src/components/MessageBox.jsx

@@ -0,0 +1,116 @@
+
+// 输入框支持搜索
+//
+export default {
+    data() {
+        return {
+            msg: "default",
+        };
+    },
+    props: {
+        data: { type: Array, default: [] },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        defaultValue: {
+            type: String,
+            default: ''
+        },
+        css: {
+            type: String,
+            default: 'width: 300px;'
+        },
+        // 失去焦点时回调
+        focus: {
+            type: Function,
+            default: () => {
+                console.log('focus');
+            }
+        },
+        blur: {
+            type: Function,
+            default: () => {
+                console.log('blur');
+            }
+        },
+        // 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数
+        change: {
+            type: Function,
+            default: (value, option) => {
+                console.log('change');
+            }
+        },
+        // 键盘按下时回调
+        inputKeydown: {
+            type: Function,
+            default: (event) => {
+                console.log('inputKeydown', event);
+            }
+        },
+        // 鼠标移入时回调
+        mouseenter: {
+            type: Function,
+            default: (event) => {
+                console.log('mouseenter', event);
+            }
+        },
+        // 鼠标移出时回调
+        mouseleave: {
+            type: Function,
+            default: (event) => {
+                console.log('mouseleave', event);
+            }
+        },
+        // 下拉列表滚动时的回调
+        popupScroll: {
+            type: Function,
+            default: (event) => {
+                console.log('popupScroll', event);
+            }
+        },
+        // 文本框值变化时回调
+        search: {
+            type: Function,
+            default: (value) => {
+                console.log('search', value);
+            }
+        },
+        // 被选中时调用，参数为选中项的 value (或 key) 值
+        select: {
+            type: Function,
+            default: (value, option) => {
+                console.log('select', value, option);
+            }
+        },
+        // 展开下拉菜单的回调
+        dropdownVisibleChange: {
+            type: Function,
+            default: (open) => {
+                console.log('dropdownVisibleChange', open);
+            }
+        },
+    },
+    methods: {
+        click(msg) {
+            // 子组件 input的事件回调
+            // 实现 改变msg值
+            //   this.user = '123';
+            console.log(msg);
+        }
+    },
+    render() {
+        return (
+            <div>
+                <a-select show-search placeholder={this.placeholder} option-filter-prop="children" style={this.css}
+                    onfocus={this.focus} onblur={this.blur} onchange={this.change} oninputKeydown={this.inputKeydown} defaultValue={this.defaultValue}>
+                    {
+                        this.data.map(item => {
+                            return <a-select-option value={item}>{item}</a-select-option>
+                        })
+                    }
+                </a-select>
+            </div>
+        );
+    }
+};

package/src/router/index.ts

@@ -17,7 +17,12 @@ const routes: Array<RouteConfig> = [
     // 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/AboutView.vue')
-  }
+  },
+  {
+    path: '/file',
+    name: 'file',
+    component: () => import('../views/File/index.vue')
+  },
 ]
 
 const router = new VueRouter({

package/src/utilities/File.ts

@@ -1,22 +1,50 @@
+import * as XLSX from "xlsx";
 
+namespace EMacro {
 
-const selectFile = (_options: any = { multiple: true }) => {
-    return new Promise((res, rej) => {
-        let options = {
-            accept: "*/*",
-            multiple: true,
-        };
-        if (_options) {
-            options.accept = _options.accept;
-            options.multiple = _options.multiple;
+    export class File {
+
+        private static selectFile(options: any = { multiple: true, accept: "*/*" }) {
+            return new Promise((res: (value: FileList) => void, rej) => {
+                const el = document.createElement("input");
+                el.type = "file";
+                el.accept = options.accept;
+                el.multiple = options.multiple;
+                el.addEventListener("change", (_) => {
+                    try {
+                        if (el.files === null) {
+                            rej(null)
+                        } else {
+                            res(el.files);
+                        }
+                    } catch (error) {
+                        rej(error)
+                    }
+                });
+                el.click();
+            });
+        }
+
+        public static readLocalExcel(onloadend: (file, workbook) => void, options: any = { multiple: true, accept: "*/*" }) {
+
+            this.selectFile(options).then((files: FileList) => {
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    let reader = new FileReader();
+                    reader.readAsArrayBuffer(file);
+                    reader.onloadend = async function (e: any) {
+                        let workbook = XLSX.read(e.target.result, { type: "binary" });
+                        onloadend(file, workbook);
+                    }
+                }
+            }).catch(e => {
+                throw e;
+            })
         }
-        const el = document.createElement("input");
-        el.type = "file";
-        el.accept = options.accept;
-        el.multiple = options.multiple;
-        el.addEventListener("change", (_) => {
-            res(el.files);
-        });
-        el.click();
-    });
-}
+
+    }
+
+}
+
+
+export default EMacro;

package/src/views/File/index.less

@@ -0,0 +1,15 @@
+.app-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+.click-button {
+  padding: 10px;
+  font-size: 16px;
+  color: white;
+  border-radius: 15px;
+  background-color: blue;
+}

package/src/views/File/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="app-container">
+    <button class="click-button" @click="test1">读取excel</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+import $ from "jquery";
+
+import * as echarts from "echarts";
+import EMacro from "../../utilities/File";
+
+/// <reference path = "../../utilities/File.ts" />
+
+@Component({
+  components: {},
+})
+@Component
+export default class Page extends Vue {
+  @Prop(Number) readonly msg!: number | undefined;
+  @Prop() private name!: string;
+
+  private currentTime = "";
+
+  public data_0 = {
+    page_index: 0,
+    page_size: 3,
+    data: [
+      { a: "面料类", b: "16500", c: "12063", d: "45.5%" },
+      { a: "面料类", b: "26500", c: "12063", d: "45.5%" },
+      { a: "面料类", b: "36500", c: "12063", d: "45.5%" },
+      { a: "面料类", b: "46500", c: "12063", d: "45.5%" },
+      { a: "面料类", b: "56500", c: "12063", d: "45.5%" },
+    ],
+  };
+
+  // 计算属性
+  private get reversedMessage(): string {
+    return this.currentTime;
+  }
+
+  public test1(): void {
+    EMacro.File.readLocalExcel((file, workbook) => {
+      console.log("file", file);
+      console.log("workbook", workbook);
+      console.log("数据", workbook.Sheets["工作表1"]["G32"].h);
+    });
+  }
+
+  // 生命周期
+  private created(): void {}
+  private mounted(): void {
+    this.$nextTick(() => {
+      console.log("调用", EMacro);
+    });
+  }
+  private updated(): void {}
+  private destroyed(): void {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+
+.app-container /deep/ .el-table .unchecked {
+  background: rgba(255, 192, 203, 0.35) !important;
+
+  td {
+    color: #fff !important;
+  }
+}
+</style>

package/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "./dist/", // 打包到的目录
     "sourceMap": true, // 是否生成sourceMap（用于浏览器调试）
     "noImplicitAny": false,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     "declaration": true, // 是否生成声明文件
     "declarationDir": "./dist/types/", // 声明文件打包的位置

package/webpack.config.js

@@ -3,9 +3,14 @@
 const path = require("path");
 // const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack');
 
 const isProduction = process.env.NODE_ENV == "production";
 
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
 const stylesHandler = isProduction
   ? MiniCssExtractPlugin.loader
   : "style-loader";
@@ -16,7 +21,7 @@ const config = {
     outputModule: true,
   },
   output: {
-    filename:'emacroh5lib.min.js',
+    filename: 'emacroh5lib.min.js',
     path: path.resolve(__dirname, "dist"),
     library: {
       // do not specify a `name` here
@@ -31,6 +36,12 @@ const config = {
     // new HtmlWebpackPlugin({
     //   template: "index.html",
     // }),
+    new webpack.ProvidePlugin({
+      echarts: 'echarts',
+      THREE: 'three',
+      jQuery: "jquery",
+      $: "jquery"
+    })
 
     // Add your plugins here
     // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -55,13 +66,17 @@ const config = {
         type: "asset/inline"
       },
 
+
       // Add your rules for custom modules here
       // Learn more about loaders from https://webpack.js.org/loaders/
     ],
   },
   resolve: {
+    alias: {
+      '@': resolve('src')
+    },
     extensions: [".tsx", ".ts", ".js"],
-  },
+  }
 };
 
 module.exports = () => {
@@ -72,5 +87,12 @@ module.exports = () => {
   } else {
     config.mode = "development";
   }
+
+  // 打包文件大小配置
+  config.performance = {
+    maxEntrypointSize: 10 * 1024 * 1024,
+    maxAssetSize: 10 * 1024 * 1024
+  }
+
   return config;
 };