vsyswin-ui 0.2.45 → 0.2.46

package/package.json

@@ -1,46 +1,46 @@
 {
-    "name": "vsyswin-ui",
-    "version": "0.2.45",
-    "main": "lib/vsyswin-ui.umd.min.js",
-    "private": false,
-    "description": "Vue2.x的应用组件库.",
-    "keywords": [
-        "syswin",
-        "syswin-ui"
-    ],
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint",
-        "lib": "vue-cli-service build --target lib --name vsyswin-ui --dest lib packages/index.js"
-    },
-    "dependencies": {
-        "core-js": "^3.6.5",
-        "deepmerge": "^4.2.2",
-        "element-ui": "^2.14.1",
-        "jquery": "^3.5.1",
-        "lodash": "^4.17.20",
-        "moment": "^2.29.1",
-        "throttle-debounce": "^3.0.1",
-        "vue": "^2.6.12",
-        "vuedraggable": "^2.23.2"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-plugin-eslint": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
-        "@vue/eslint-config-standard": "^5.1.2",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-standard": "^4.0.0",
-        "eslint-plugin-vue": "^6.2.2",
-        "sass": "^1.26.5",
-        "sass-loader": "^8.0.2",
-        "vue-router": "^3.5.3",
-        "vue-template-compiler": "^2.6.11",
-        "xe-utils": "^3.0.4"
-    }
+  "name": "vsyswin-ui",
+  "version": "0.2.46",
+  "main": "lib/vsyswin-ui.umd.min.js",
+  "private": false,
+  "description": "Vue2.x的应用组件库.",
+  "keywords": [
+    "syswin",
+    "syswin-ui"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name vsyswin-ui --dest lib packages/index.js"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "deepmerge": "^4.2.2",
+    "element-ui": "^2.14.1",
+    "jquery": "^3.5.1",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "throttle-debounce": "^3.0.1",
+    "vue": "^2.6.12",
+    "vuedraggable": "^2.23.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-router": "^3.5.3",
+    "vue-template-compiler": "^2.6.11",
+    "xe-utils": "^3.0.4"
+  }
 }

package/packages/search-bar/src/search-bar.vue

@@ -464,7 +464,7 @@ export default {
     handleSearch(skipShrink) {
       if (this.$slots.default) {
         // 如果使用的是slot,则只触发on-search事件
-        this.$emit('on-search')
+        this.$emit('on-search', { keyword: this.keyword, filterList: [] })
         return
       }
       const filterList = this.createTagList()

package/packages/table/src/BigDataTable.js

@@ -0,0 +1,202 @@
+class BigDataTable {
+    constructor(vm, options) {
+        // 以下为私有变量
+        this._options = options
+        this._flag = true
+        this.$options = {}
+        this.$vm = vm
+
+        // data
+        this.$scource_data = []
+        this.$fill_data = []
+        this.$fill_data_length = 25
+        this.$fill_data_height = 0
+        this.$table_itemHeight = 32
+
+        // 指针
+        this.$vm_p = {
+            topspan: '',
+            bottomspan: '',
+            filldata: '',
+        }
+
+        // dom
+        this.$scroller_ref = null
+
+        // index
+        this.$scroll_top = 0
+        this.$span = {
+            topspan: 0,
+            bottomspan: 0
+        }
+        this.$Nodes = {
+            topNode: 0,
+            topUpdataNode: 0,
+            bottomUpdataNode: 0,
+            bottomNode: 0,
+        }
+        this.$view_pointer = 0
+        this.$cache_pointer = 0
+        this.init()
+    }
+
+    init() {
+        const options = this._options
+        const _this = this
+        this.$options = options
+        this.$scource_data = this.$vm[this.$options.data]
+        this.$scroller_ref = this.$options.scrollerRef
+        this.$vm_p.topspan = options.top_span
+        this.$vm_p.bottomspan = options.bottom_span
+        this.$vm_p.filldata = options.fill_data
+        if (options.filldata_length) this.$fill_data_length = options.filldata_length
+        if (options.table_itemHeight) this.$table_itemHeight = options.table_itemHeight
+
+        const handler = this.scrollerHandler.bind(_this)
+        this.$scroller_ref && this.on('scroll', this.$scroller_ref, handler)
+        this.updataNode('ref')
+    }
+
+    /* getFillData() {
+        return this.$fill_data
+    } */
+
+    scrollerHandler() {
+        // const _this = this
+        const scrollTop = this.$scroller_ref.scrollTop
+        this.$scroll_top = scrollTop
+        const _pointer = Math.floor(scrollTop / this.$table_itemHeight)
+        // console.log(this.$view_pointer)
+        // if(this.$view_pointer != _pointer){
+            this.$view_pointer = _pointer
+            window.requestAnimationFrame(this.pointerHandler.bind(this))
+            // this.pointerHandler()
+        // }
+    }
+
+    pointerHandler() {
+        const Node = this.$Nodes
+        const pointer = this.$view_pointer
+        if (pointer < Node.topNode || pointer > Node.bottomNode) {
+            this.updataNode('ref')
+            return
+        }
+
+        if (pointer < Node.topUpdataNode && pointer !== 0) {
+            this.updataNode('top')
+            return
+        }
+
+        if (pointer > Node.bottomUpdataNode && pointer !== this.$scource_data.length) {
+            this.updataNode('bottom')
+            return
+        }
+        window.requestAnimationFrame(this.pointerHandler.bind(this))
+    }
+
+    setInfoNode({ topNode, topUpdataNode, bottomUpdataNode, bottomNode }) {
+        this.$Nodes.topNode = topNode
+        this.$Nodes.topUpdataNode = topUpdataNode
+        this.$Nodes.bottomUpdataNode = bottomUpdataNode
+        this.$Nodes.bottomNode = bottomNode
+    }
+
+    updataNode(side) {
+        const pointer = this.$view_pointer
+        // const cachePointer = this.$cache_pointer
+        const oldNode = this.$Nodes
+        const _length = this.$fill_data_length
+        const totleLength = this.$scource_data.length
+        const itemHeight = this.$table_itemHeight
+        let _newNode = {
+            topNode: 0,
+            topUpdataNode: 0,
+            bottomUpdataNode: 0,
+            bottomNode: 0
+        }
+        let span = {
+            topSpan: 0,
+            bottomSpan: 0
+        }
+        if (side === 'top') {
+            const _top = oldNode.topNode
+            _newNode = {
+                topNode: Math.max(0, _top - _length),
+                topUpdataNode: Math.max(0, _top),
+                bottomUpdataNode: Math.min(totleLength, _top + _length * 2),
+                bottomNode: Math.min(totleLength, _top + _length * 3)
+            }
+        } else if (side === 'bottom') {
+            const _bottom = oldNode.bottomNode
+            _newNode = {
+                topNode: Math.max(0, _bottom - _length * 3),
+                topUpdataNode: Math.max(0, _bottom - _length * 2),
+                bottomUpdataNode: Math.min(totleLength, _bottom),
+                bottomNode: Math.min(totleLength, _bottom + _length)
+            }
+        } else if (side === 'ref') {
+            _newNode = {
+                topNode: Math.max(0, pointer - _length * 2),
+                topUpdataNode: Math.max(0, pointer - _length),
+                bottomUpdataNode: Math.min(totleLength, pointer + _length),
+                bottomNode: Math.min(totleLength, pointer + _length * 2)
+            }
+        }
+
+        span = {
+            topSpan: _newNode.topNode * itemHeight,
+            bottomSpan: (totleLength - _newNode.bottomNode) * itemHeight
+        }
+        this.$cache_pointer = pointer
+
+        this.setInfoNode(_newNode)
+
+        this.getFillData(_newNode)
+
+        this.setSpan(span)
+    }
+
+    setSpan({ topSpan, bottomSpan }) {
+        this.$span.topspan = topSpan
+        this.$span.bottomspan = bottomSpan
+        this.$vm[this.$vm_p.bottomspan] = bottomSpan
+        this.$vm[this.$vm_p.topspan] = topSpan
+        this.$vm.$nextTick(() => {
+            this.$scroller_ref.scrollTop = this.$cache_pointer * this.$table_itemHeight
+        })
+    }
+
+    // api:getFillData获取渲染数据
+    getFillData(node) {
+        let _data = []
+        _data = this.$scource_data.slice(node.topNode, node.bottomNode)
+        this.$fill_data = _data
+        this.$vm[this.$vm_p.filldata] = _data
+    }
+
+    // api:refresh
+    refresh() {
+        this.$scource_data = this.$vm[this.$options.data]
+        this.updataNode('ref')
+    }
+
+    // util
+    on(evt, element, fnc) {
+        return element.addEventListener ? element.addEventListener(evt, fnc, false) : element.attachEvent('on' + evt, fnc);
+    }
+
+    off(evt, element, fnc) {
+        return element.removeEventListener ? element.removeEventListener(evt, fnc, false) : element.detachEvent('on' + evt,
+            fnc);
+    }
+
+    isArray(arr) {
+        return Object.prototype.toString.call(arr) === '[object Array]';
+    }
+
+    getStyle(prop, elem) {
+        return window.getComputedStyle ? window.getComputedStyle(elem)[prop] : elem.currentStyle[prop];
+    }
+}
+
+export default BigDataTable

package/packages/table/src/table.vue

@@ -15,7 +15,7 @@
             :lazy="lazy"
             :load="load"
             :tree-props="treeProps"
-            :data="data"
+            v-bind="attrs"
             :default-expand-all="defaultExpandAll"
             :expand-row-keys="expandRowKeys"
             @sort-change="handleSortChange"
@@ -178,6 +178,7 @@
 <script>
 import noData from './noData';
 import dragSet from '../../drag-set';
+import BigDataTable from './BigDataTable.js'
 export default {
     name: 'SyTable',
     props: {
@@ -264,7 +265,8 @@ export default {
         nameKey: {
             type: String,
             default: () => ''
-        }
+        },
+        virtual: Boolean
     },
     data () {
         return {
@@ -275,7 +277,8 @@ export default {
             },
             columnList: [], // 表格列数据
             sumType: 2, // 合计类型 0：分页合计；1选中合计；2全部合计
-            selection: [] // 当前选中表格数据
+            selection: [], // 当前选中表格数据
+            fillData: [],
         };
     },
     components: {
@@ -289,6 +292,28 @@ export default {
         },
         table () {
             return this.$refs.cusTable;
+        },
+        attrs() {
+            if (this.virtual) {
+                return {
+                    data: this.fillData,
+                    'row-style': this.fillrow
+                }
+            } else {
+                return {
+                    data: this.data,
+                }
+            }
+        }
+    },
+    watch: {
+        data: {
+            handler(data) {
+                if (this.virtual) {
+                    this.reload()
+                }
+            },
+            immediate: true
         }
     },
     created() {
@@ -308,6 +333,47 @@ export default {
         this.doLayout();
     },
     methods: {
+        fillrow({
+            row,
+            rowIndex
+        }) {
+            if (rowIndex === 0) {
+                return {
+                    height: this.topSpan + 'px'
+                }
+            }
+            if (rowIndex === this.fillData.length - 1) {
+                return {
+                    height: this.bottomSpan + 'px'
+                }
+            }
+        },
+        reload() {
+            this.$nextTick(() => {
+                console.log(this.$refs.cusTable, 353)
+                if (!this.$refs.cusTable) return
+                const ref = this.$refs.cusTable.$refs.bodyWrapper
+                if (!this.tableControl) {
+                    this.initBigDataTable(ref)
+                } else {
+                    this.tableControl.refresh()
+                }
+            })
+        },
+        // 初始化大数据表
+        initBigDataTable(ref) {
+            const options = {
+            scrollerRef: ref,
+            data: 'data', // length:50000
+            fill_data: 'fillData',
+            top_span: 'topSpan',
+            bottom_span: 'bottomSpan',
+            filldata_length: 33,
+            table_item_height: 32
+            }
+            this.tableControl = new BigDataTable(this, options)
+            console.log(this.fillData, 375)
+        },
         // 获取表格列数据
         getColumnsData () {
             if (this.nameKey) {
@@ -432,7 +498,6 @@ export default {
             return sums;
         }
     },
-    watch: {}
 };
 </script>
 <style lang="scss" scoped>