vsyswin-ui 0.2.43 → 0.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsyswin-ui",
-  "version": "0.2.43",
+  "version": "0.2.47",
   "main": "lib/vsyswin-ui.umd.min.js",
   "private": false,
   "description": "Vue2.x的应用组件库.",

package/packages/index.js

@@ -7,19 +7,20 @@ import selectProject from './select-project' // 项目选择组件
 import selectTree from './select-tree' // 表单树选择器
 import SearchBar from './search-bar' // 搜索工具栏
 import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
+import paging from './paging'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function(Vue) {
+const install = function (Vue) {
   // 判断是否可以安装
   if (install.installed) return
   // 遍历注册全局组件
-  components.map(component => Vue.component(component.name, component))
+  components.map((component) => Vue.component(component.name, component))
 }
 
 // 判断是否是直接引入文件
@@ -37,6 +38,7 @@ export default {
   selectTree,
   SearchBar,
   simpleSearchBar,
+  paging,
   newSearchBar,
   table,
   dragSet

package/packages/newSearchBar/src/newSearchBar.vue

@@ -122,7 +122,7 @@ export default {
       this.$emit('selectChange', ids)
     },
     deleteItem(index) {
-      this.$emit('selectChange', index)
+      this.$emit('deleteItem', index)
     }
   }
 }

package/packages/paging/index.js

@@ -0,0 +1,10 @@
+// 导入组件
+import paging from './src/paging.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+paging.install = function (Vue) {
+  Vue.component(paging.name, paging)
+}
+
+// 默认导出组件
+export default paging

package/packages/paging/src/paging.vue

@@ -0,0 +1,86 @@
+<!-- 分页组件 -->
+<template>
+  <div :style="alignStyle">
+    <el-pagination
+      class="cus-pagination"
+      background
+      prev-text="上一页"
+      next-text="下一页"
+      size="small"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page="pagination.currentPage"
+      :page-sizes="pageSizes"
+      :page-size="pagination.pageSize"
+      :layout="layout"
+      :total="pagination.totals"
+    >
+      <slot>
+        <span class="el-pagination__total">总共 {{ pagination.totals }} 条，{{ Math.ceil(pagination.totals / pagination.pageSize) }} 页</span>
+      </slot>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+/*
+  pagination: {
+    currentPage: 1,
+    pageSize: 20,
+    totals: 0
+  }
+*/
+export default {
+  name: 'SyPaging',
+  props: {
+    align: {
+      type: String,
+      default: 'right',
+      validator: function (value) {
+        return ['left', 'center', 'right'].indexOf(value) !== -1
+      }
+    },
+    layout: {
+      type: String,
+      default: 'slot, prev, pager, next, sizes, jumper'
+    },
+    pagination: {
+      type: Object,
+      required: true
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 50, 100, 200]
+      }
+    }
+  },
+  computed: {
+    alignStyle() {
+      return {
+        'text-align': this.align
+      }
+    }
+  },
+  methods: {
+    // 每页数量发生改变
+    handleSizeChange(val) {
+      const { currentPage, totals } = this.pagination
+      const maxNum = Math.ceil(totals / val)
+      this.pagination.currentPage = maxNum < currentPage ? maxNum : currentPage
+      this.pagination.pageSize = val
+      this.handleChange('pageSize')
+    },
+    // 页码发生改变
+    handlePageChange(val) {
+      this.pagination.currentPage = val
+      this.handleChange('currentPage')
+    },
+
+    handleChange(type) {
+      const { currentPage, pageSize } = this.pagination
+      this.$emit('change', { currentPage, pageSize }, type)
+    }
+  }
+}
+</script>

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>