bri-components 1.0.0

package/src/components/list/easyTable/v-table/src/scroll-bar-control-mixin.js

@@ -0,0 +1,21 @@
+import utils from "../../src/utils/utils.js";
+export default {
+    data () {
+        return {
+            scrollbarWidth: 0
+        };
+    },
+    methods: {
+        // 如果存在footer 则横向滚动条体现在footer上
+        controlScrollBar () {
+            if (this.hasTableFooter) {
+                let body = this.$el.querySelector(".v-table-centerview .v-table-body");
+                body.style.overflowX = "hidden";
+            }
+        },
+        setScrollbarWidth () {
+            this.scrollbarWidth = utils.getScrollbarWidth();
+        }
+    }
+
+};

package/src/components/list/easyTable/v-table/src/scroll-control-mixin.js

@@ -0,0 +1,92 @@
+/*
+ * 鼠标滚动，滚动条改变
+ * */
+import utils from "../../src/utils/utils.js";
+export default {
+    methods: {
+        body0Mousewheel (e) {
+            let body2 = this.$el.querySelector(".v-table-centerview .v-table-body");
+            let e1 = e.originalEvent || window.event || e;
+            let scrollHeight = e1.wheelDelta || e1.detail * (-1);
+            body2.scrollTop = (body2.scrollTop - scrollHeight);
+        },
+
+        // 表格内容滚动到顶部（常用与分页）
+        bodyScrollTop () {
+            let body0 = this.$el.querySelector(".v-table-rightview .v-table-body");
+            let body1 = this.$el.querySelector(".v-table-leftview .v-table-body");
+            let body2 = this.$el.querySelector(".v-table-centerview .v-table-body");
+
+            if (body0) {
+                body0.scrollTop = 0;
+            }
+            if (body1) {
+                body1.scrollTop = 0;
+            }
+            body2.scrollTop = 0;
+        },
+
+        body2Scroll (e) {
+            let view2 = this.$el.querySelector(".v-table-centerview");
+            let body0 = this.$el.querySelector(".v-table-rightview .v-table-body");
+            let body1 = this.$el.querySelector(".v-table-leftview .v-table-body");
+            let body2 = this.$el.querySelector(".v-table-centerview .v-table-body");
+            if (body1) {
+                body1.scrollTop = body2.scrollTop;
+            }
+            if (body0) {
+                body0.scrollTop = body2.scrollTop;
+            }
+
+            view2.querySelector(".v-table-header").scrollLeft = body2.scrollLeft;
+        },
+
+        centerViewFooterScroll () {
+            let view2 = this.$el.querySelector(".v-table-centerview");
+            let centerViewFooter = this.$el.querySelector(".v-table-centerview .v-table-footer");
+
+            view2.querySelector(".v-table-header").scrollLeft = centerViewFooter.scrollLeft;
+            view2.querySelector(".v-table-body").scrollLeft = centerViewFooter.scrollLeft;
+
+        },
+
+        // 列表中滚动条控制
+        scrollControl () {
+            this.unbindEvents();
+            // 修复左侧固定列绑定滚动事件失效的问题
+            setTimeout(x => {
+                let body0 = this.$el.querySelector(".v-table-rightview .v-table-body");
+                let body1 = this.$el.querySelector(".v-table-leftview .v-table-body");
+                let body2 = this.$el.querySelector(".v-table-centerview .v-table-body");
+                let centerViewFooter = this.$el.querySelector(".v-table-centerview .v-table-footer");
+
+                utils.bind(body0, "mousewheel", this.body0Mousewheel);
+                utils.bind(body1, "mousewheel", this.body0Mousewheel);
+                utils.bind(body2, "scroll", this.body2Scroll);
+                utils.bind(centerViewFooter, "scroll", this.centerViewFooterScroll);
+            });
+        },
+
+        unbindEvents () {
+            let body0 = this.$el.querySelector(".v-table-rightview .v-table-body");
+            let body1 = this.$el.querySelector(".v-table-leftview .v-table-body");
+            let body2 = this.$el.querySelector(".v-table-centerview .v-table-body");
+            let centerViewFooter = this.$el.querySelector(".v-table-centerview .v-table-footer");
+
+            utils.unbind(body0, "mousewheel", this.body0Mousewheel);
+            utils.unbind(body1, "mousewheel", this.body1Mousewheel);
+            utils.unbind(body2, "scroll", this.body2Scroll);
+            utils.unbind(centerViewFooter, "scroll", this.centerViewFooterScroll);
+        },
+
+        // 对外暴露的方法
+        scrollToTop () {
+            this.bodyScrollTop();
+        }
+    },
+
+    beforeDestroy () {
+
+        this.unbindEvents();
+    }
+};

package/src/components/list/easyTable/v-table/src/sort-control-mixin.js

@@ -0,0 +1,108 @@
+/*
+ * 排序
+ * */
+export default {
+
+    data () {
+
+        return {
+            sortColumns: {}
+        };
+    },
+
+    methods: {
+        // 是否允许排序
+        enableSort (val) {
+            return this.showSort && typeof val === "string";
+        },
+        // 允许排序的列集合
+        setSortColumns () {
+            let titleRowsToSortInfo = [];
+            this.sortColumns = {};
+
+            if (this.internalTitleRows.length > 0) {
+                this.internalTitleRows.filter((row) => {
+                    row.filter((column, index) => {
+                        if (typeof column.orderBy === "string" && column.fields.length === 1) {
+                            column.field = column.fields[0];
+                            titleRowsToSortInfo.push(column);
+                        }
+                    });
+                });
+            }
+
+            let collection = titleRowsToSortInfo.length > 0 ? titleRowsToSortInfo : this.internalColumns;
+
+            collection.forEach(item => {
+                if (this.enableSort(item.orderBy)) {
+                    this.sortColumns[item.field] = item.orderBy;
+                }
+            });
+
+            // this.singleSortInit();
+        },
+
+        // 获取当前排序规则
+        getCurrentSort (field) {
+
+            return this.sortColumns[field];
+        },
+
+        // 排序控制
+        sortControl (field) {
+
+            let orderBy = this.sortColumns[field];
+            if (this.enableSort(orderBy)) {
+
+                if (this.sortAlways) {
+                    this.sortColumns[field] = orderBy === "asc" ? "desc" : "asc";
+                } else {
+                    this.sortColumns[field] = orderBy === "asc" ? "desc"
+                    : (this.sortColumns[field] === "desc" ? "" : "asc");
+                }
+
+                if (!this.multipleSort) {
+
+                    for (let col in this.sortColumns) {
+
+                        if (col !== field) {
+
+                            this.sortColumns[col] = "";
+                        }
+                    }
+                }
+                this.$emit("sort-change", {
+                    field: field,
+                    sortType: this.sortColumns[field]
+                });
+            }
+
+        },
+
+        // 单排时只允许保留第一个排序规则（‘asc’或者‘desc’）
+        singleSortInit () {
+
+            let result = false;
+
+            if (!this.multipleSort && this.sortColumns) {
+
+                for (let col in this.sortColumns) {
+
+                    if (result) {
+
+                        this.sortColumns[col] = "";
+                    }
+                    result = true;
+                }
+            }
+        },
+
+        // 对外暴露的方法（重置排序规则）
+        resetOrder () {
+
+            this.setSortColumns();
+
+            this.$emit("sort-change", this.sortColumns);
+        }
+    }
+};

package/src/components/list/easyTable/v-table/src/table-empty-mixin.js

@@ -0,0 +1,73 @@
+// 表格数据为空时的处理逻辑
+import utils from "../../src/utils/utils.js";
+export default {
+
+    data () {
+        return {
+
+            isTableEmpty: false,
+
+            // 表格数据为空时表头的高度（若有滚动条会包含滚动条的宽度）
+            // tableEmptyContentHeight: 50,
+
+            // 表格数据为空时的总高度
+            tableEmptyHeight: 0
+        };
+    },
+
+    methods: {
+
+        // table 数据为空的处理
+        tableEmpty () {
+
+            let tableData = this.internalTableData;
+            let tableEmptyHeight = 0;
+
+            if (Array.isArray(tableData) && tableData.length > 0) {
+
+                this.isTableEmpty = false;
+                return false;
+            }
+
+            this.isTableEmpty = true;
+
+            tableEmptyHeight = this.getTotalColumnsHeight() + this.errorContentHeight;
+
+            this.tableEmptyHeight = tableEmptyHeight;
+
+            this.$nextTick(x => {
+
+                this.tableEmptyScroll();
+            });
+
+        },
+
+        tableEmptyScrollEvent (e) {
+
+            let headerEle = this.$el.querySelector(".v-table-centerview .v-table-header");
+            let tableEmptyEle = this.$el.querySelector(".v-table-empty .v-table-empty-scroll");
+
+            if (headerEle && tableEmptyEle) {
+
+                headerEle.scrollLeft = tableEmptyEle.scrollLeft;
+            }
+
+        },
+
+        // 无数据时的滚动条控制
+        tableEmptyScroll () {
+
+            let tableEmptyEle = this.$el.querySelector(".v-table-empty .v-table-empty-scroll");
+            // 无数据时的滚动条控制
+            utils.bind(tableEmptyEle, "scroll", this.tableEmptyScrollEvent);
+        }
+
+    },
+
+    beforeDestroy () {
+
+        let tableEmptyEle = this.$el.querySelector(".v-table-empty .v-table-empty-scroll");
+        // 无数据时的滚动条控制
+        utils.unbind(tableEmptyEle, "scroll", this.tableEmptyScrollEvent);
+    }
+};

package/src/components/list/easyTable/v-table/src/table-empty.vue

@@ -0,0 +1,66 @@
+<template>
+
+    <div class="v-table-empty">
+        <!--表格无数据的提示信息-->
+        <div class="v-table-empty-content"
+             :style="{'height':contentHeight+'px','width':width+'px','top':titleHeight+'px'}">
+            <div class="v-table-empty-inner"
+                 :style="{'height':contentHeight+'px','width':'100%','line-height':contentHeight+'px'}"
+                 v-html="getCurrentContent"></div>
+        </div>
+
+        <!--表格无数据的滚动条-->
+        <div class="v-table-empty-scroll"
+             :style="{'height':contentHeight+'px','width':width+'px','top':titleHeight+'px'}">
+            <div class="v-table-empty-inner" :style="{'height':'1px','width':totalColumnsWidth+'px'}"></div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+    // import utils from "../../src/utils/utils.js";
+
+    export default{
+
+        props: {
+
+            // 表头的宽度
+            titleHeight: [Number, String],
+
+            // 内容显示的高度
+            contentHeight: [Number, String],
+
+            // 显示的宽度
+            width: [Number, String],
+
+            // 所有列的宽度和
+            totalColumnsWidth: [Number, String],
+
+            // 没数据时显示的内容
+            errorContent: {
+                type: [String]
+            },
+
+            // 是否正在加载
+            isLoading: [Boolean]
+
+        },
+
+        computed: {
+            // 获取当前要显示的内容
+            getCurrentContent () {
+
+                let result = "";
+
+                if (!this.isLoading) {
+                    result = this.errorContent;
+                }
+
+                return result;
+            }
+
+        }
+    };
+</script>

package/src/components/list/easyTable/v-table/src/table-filters-mixin.js

@@ -0,0 +1,126 @@
+export default {
+    data () {
+
+        return {
+
+            filterSpecialValue: "__all__"
+        };
+    },
+    methods: {
+
+        // 初始化 columns filters
+        initColumnsFilters () {
+
+            // 如果是复杂表头
+            if (this.isComplexTitle) {
+
+                this.internalTitleRows.forEach(rows => {
+
+                    rows.forEach(col => {
+
+                        if (this.enableFilters(col.filters, col.fields) && !col.filterMultiple) {
+
+                            col.filters.unshift({label: "全部", value: this.filterSpecialValue, selected: true});
+                        }
+                    });
+                });
+            } else {
+
+                this.internalColumns.map(col => {
+
+                    if (this.enableFilters(col.filters) && !col.filterMultiple) {
+
+                        col.filters.unshift({label: "全部", value: this.filterSpecialValue, selected: true});
+                    }
+                });
+            }
+        },
+
+        // 单选条件改变
+        filterConditionChange (filterMultiple) {
+
+            // 单选
+            if (!filterMultiple) {
+
+                this.filterSummary();
+            }
+        },
+
+        /*
+         * 是否包含 filters 功能
+         * fields : 当是复杂表头时，必须保证不是 colspan 的列
+         * */
+        enableFilters (filters, fields) {
+
+            let result = false;
+
+            if (Array.isArray(fields) && fields.length > 1) {
+
+                result = false;
+            }
+            if (Array.isArray(filters) && filters.length > 0) {
+
+                result = true;
+            }
+            return result;
+        },
+
+        filterEvent () {
+
+            this.filterSummary();
+        },
+
+        filterSummary () {
+
+            let result = {};
+            let columns = [];
+            let tempArr = [];
+
+            // 复杂表头
+            if (this.isComplexTitle) {
+
+                columns = this.internalTitleRows;
+
+                columns.forEach(rows => {
+
+                    rows.forEach(col => {
+
+                        tempArr = [];
+                        if (this.enableFilters(col.filters, col.fields)) {
+
+                            col.filters.forEach(f => {
+
+                                if (f.selected && f.value !== this.filterSpecialValue) {
+                                    tempArr.push(f.value);
+                                }
+                            });
+
+                            result[col.fields[0]] = tempArr.length > 0 ? tempArr : null;
+                        }
+                    });
+                });
+            } else {
+
+                columns = this.internalColumns;
+
+                columns.forEach(col => {
+
+                    tempArr = [];
+                    if (this.enableFilters(col.filters)) {
+
+                        col.filters.forEach(f => {
+
+                            if (f.selected && f.value !== this.filterSpecialValue) {
+                                tempArr.push(f.value);
+                            }
+                        });
+
+                        result[col.field] = tempArr.length > 0 ? tempArr : null;
+                    }
+                });
+            }
+
+            this.filterMethod && this.filterMethod(result);
+        }
+    }
+};

package/src/components/list/easyTable/v-table/src/table-footer-mixin.js

@@ -0,0 +1,122 @@
+import deepClone from "../../src/utils/deepClone.js";
+
+export default {
+    data () {
+
+        return {
+
+            footerTotalHeight: 0
+        };
+    },
+    computed: {
+
+        frozenFooterCols () {
+            let result = [];
+            if (this.initInternalFooter.length > 0) {
+                this.initInternalFooter.forEach(columns => {
+                    result.push(columns.filter(col => col.isFrozen));
+                });
+            }
+            return result;
+        },
+        frozenRightFooterCols () {
+            let result = [];
+            if (this.initInternalFooter.length > 0) {
+                this.initInternalFooter.forEach(columns => {
+                    result.push(columns.filter(col => col.isFrozenRight));
+                });
+            }
+            return result;
+        },
+        noFrozenFooterCols () {
+            let result = [];
+
+            if (this.initInternalFooter.length > 0) {
+
+                this.initInternalFooter.forEach(columns => {
+
+                    result.push(columns.filter(col => !col.isFrozen || !col.isFrozenRight));
+                });
+            }
+
+            return result;
+        },
+
+        getFooterTotalRowHeight () {
+
+            if (Array.isArray(this.footer) && this.footer.length > 0) {
+
+                return this.footer.length * this.footerRowHeight;
+            }
+            return 0;
+        },
+
+        hasTableFooter () {
+
+            return Array.isArray(this.footer) && this.footer.length;
+        },
+
+        initInternalFooter () {
+
+            if (!(Array.isArray(this.footer) && this.footer.length > 0)) {
+
+                return [];
+            }
+
+            let result = [];
+            let resultRow = [];
+            let cloneInternalColumns;
+
+            // 防止排序后对原数组进行干扰
+            cloneInternalColumns = deepClone(this.internalColumns);
+
+            cloneInternalColumns.sort(function (a, b) {
+
+                if (a.isFrozen) {
+
+                    return -1;
+                } else if (b.isFrozen) {
+
+                    return 1;
+                }
+                return 0;
+            });
+
+            this.footer.forEach((items, rows) => {
+
+                resultRow = [];
+
+                items.forEach((value, index) => {
+
+                    resultRow.push({
+                        content: value,
+                        width: cloneInternalColumns[index].width,
+                        align: cloneInternalColumns[index].columnAlign,
+                        isFrozen: !!cloneInternalColumns[index].isFrozen
+                    });
+                });
+
+                result.push(resultRow);
+            });
+            return result;
+        }
+    },
+
+    methods: {
+
+        // 设置 footer 单元格样式
+        setFooterCellClassName (isLeftView, rowIndex, colIndex, value) {
+
+            let _colIndex = colIndex;
+
+            // 如果是右列，并且有固定列
+            if (!isLeftView && this.hasFrozenColumn) {
+
+                _colIndex += this.frozenCols.length;
+            }
+
+            return this.footerCellClassName && this.footerCellClassName(rowIndex, _colIndex, value);
+        }
+    }
+
+};