bri-components 1.0.0

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

@@ -0,0 +1,189 @@
+export default {
+
+    data () {
+        return {
+            // 是否全部选中
+            isAllChecked: false,
+
+            checkboxGroupModel: [],
+
+            indeterminate: false
+
+        };
+
+    },
+
+    computed: {
+
+        // 禁用未选中的复选框集合
+        disabledUnChecked () {
+
+            let result = [];
+
+            this.internalTableData.filter((item, index) => {
+
+                if (item._disabled && !item._checked) {
+                    result.push(index);
+                }
+            });
+            return result;
+        },
+
+        // 获取当前选中的行信息
+        getCheckedTableRow () {
+
+            return this.internalTableData.filter((item, index) => {
+
+                return this.checkboxGroupModel.indexOf(index) > -1;
+            });
+        },
+
+        // 检测是否有
+        hasSelectionColumns () {
+
+            return this.internalColumns.some(x => {
+
+                return x.type && x.type === "selection";
+            });
+        }
+    },
+
+    methods: {
+        // 检测复杂表头是否需要设置 checkbox
+        isSelectionCol (fileds) {
+
+            if (Array.isArray(fileds) && fileds.length === 1) {
+
+                return this.internalColumns.some(x => x.field === fileds[0] && x.type === "selection");
+            }
+
+            return false;
+        },
+
+        // 禁用已选中的复选框集合
+        disabledChecked () {
+
+            let result = [];
+
+            this.internalTableData.filter((item, index) => {
+
+                if (item._disabled && item._checked) {
+                    result.push(index);
+                }
+            });
+            return result;
+        },
+
+        // check all trigger event
+        handleCheckAll () {
+
+            if (this.isAllChecked) {
+
+                this.checkboxGroupModel = [];
+
+                let allLen = this.internalTableData.length;
+
+                if (allLen > 0) {
+
+                    for (let i = 0; i < allLen; i++) {
+
+                        if (this.disabledUnChecked.indexOf(i) === -1) {
+
+                            this.checkboxGroupModel.push(i);
+                        }
+                    }
+                }
+
+            } else {
+
+                this.checkboxGroupModel = this.disabledChecked();
+            }
+
+            this.selectAll && this.selectAll(this.getCheckedTableRow);
+
+            this.setIndeterminateState();
+        },
+
+        // checkbox change event
+        handleCheckChange (rowData) {
+
+            this.$nextTick(x => {
+                this.selectChange && this.selectChange(this.getCheckedTableRow, rowData);
+            });
+        },
+
+        // checkbox-group change event
+        handleCheckGroupChange () {
+
+            this.selectGroupChange && this.selectGroupChange(this.getCheckedTableRow);
+
+            this.setCheckState();
+        },
+
+        // 设置部分选中状态（全选或者取消全选时）
+        setIndeterminateState () {
+
+            let checkedLen = this.checkboxGroupModel.length;
+            let allLen = this.internalTableData.length;
+
+            // 全选
+            if (checkedLen > 0 && checkedLen === allLen) {
+
+                this.indeterminate = false;
+
+            } else if (checkedLen > 0 && checkedLen < allLen) { // 部分选中
+
+                this.indeterminate = true;
+
+            } else { // 全不选
+
+                this.indeterminate = false;
+            }
+        },
+
+        // 设置选中状态
+        setCheckState () {
+
+            let checkedLen = this.checkboxGroupModel.length;
+            let allLen = this.internalTableData.length;
+
+            // 全选
+            if (checkedLen > 0 && checkedLen === allLen) {
+
+                this.indeterminate = false;
+
+                this.isAllChecked = true;
+
+            } else if (checkedLen > 0 && checkedLen < allLen) { // 部分选中
+
+                this.isAllChecked = false;
+
+                this.indeterminate = true;
+
+            } else { // 全不选
+
+                this.indeterminate = false;
+
+                this.isAllChecked = false;
+            }
+        },
+
+        // 修改checkbox 选中状态(table.vue 中调用)
+        updateCheckboxGroupModel () {
+
+            if (!this.hasSelectionColumns) { return false; }
+
+            this.checkboxGroupModel = [];
+
+            this.internalTableData.filter((item, index) => {
+
+                if (item._checked) {
+
+                    this.checkboxGroupModel.push(index);
+                }
+            });
+
+            this.setCheckState();
+        }
+    }
+};

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

@@ -0,0 +1,56 @@
+import settings from "../../src/settings/settings.js";
+
+export default {
+
+    computed: {
+
+        vTableRightBody () {
+
+            let result = {
+                "v-table-rightview-special-border": true
+            };
+
+            result[settings.scrollbarClass] = true;
+
+            return result;
+        },
+
+        vTableFooter () {
+
+            let result = {
+
+                "v-table-rightview-special-border": true
+            };
+
+            result[settings.scrollbarClass] = true;
+
+            return result;
+        },
+
+        vTableBodyInner () {
+
+            return {
+                "v-table-body-inner-pb": !this.hasTableFooter
+            };
+        },
+
+        vTableBodyCell () {
+
+            return {
+                "vertical-border": this.showVerticalBorder,
+                "horizontal-border": this.showHorizontalBorder
+            };
+        }
+    },
+
+    methods: {
+
+        vTableFiltersIcon (filters) {
+
+            return {
+                "v-icon-filter": true,
+                "checked": filters.some(x => x.selected && x.value !== this.filterSpecialValue)
+            };
+        }
+    }
+};

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

@@ -0,0 +1,202 @@
+// 列宽度拖动
+import utils from "../../src/utils/utils.js";
+import { hasClass, addClass, removeClass } from "../../src/utils/dom.js";
+export default {
+    data () {
+        return {
+            draggingColumn: null, // 当前拖动的列
+            isDragging: false, // 是否正在拖动
+            draggingStartX: 0, // 拖动开始横坐标
+            draggingEndX: 0, // 拖动结束横坐标
+            minColumnWidth: 15 // 列允许拖动后的最小宽度
+        };
+    },
+    methods: {
+
+        handleTitleMouseMove (event, column) {
+
+            if (!this.columnWidthDrag) {
+                return false;
+            }
+
+            let target, rect;
+
+            if (this.isDragging) {
+                this.setDragLinePosition(event);
+            }
+
+            // 复杂表头，多列时不允许拖动
+            if (Array.isArray(column)) {
+
+                if (column.length > 1) {
+                    return false;
+                }
+                else {
+                    column = column[0];
+                }
+            }
+
+            // 最后一列不允许拖动
+            /* if (this.internalColumns[this.internalColumns.length - 1].field === column) {
+             return false;
+             } */
+
+            if (!this.showVerticalBorder) {
+                return false;
+            }
+
+            target = event.target;
+
+            while (target && ((target.className && !hasClass(target, "v-table-title-cell")) || !target.className)) {
+                target = target.parentNode;
+            }
+
+            if (target) {
+                rect = target.getBoundingClientRect();
+
+                const bodyStyle = document.body.style;
+
+                if (rect.width >= this.minColumnWidth && rect.right - event.pageX < 10) {
+
+                    if (!this.isDragging) { // 拖动中不设置
+                        this.draggingColumn = this.internalColumns.find(x => x.field === column);
+                    }
+
+                    bodyStyle.cursor = "col-resize";
+                } else {
+
+                    if (!this.isDragging) { // 拖动中不设置
+
+                        this.draggingColumn = null;
+                        bodyStyle.cursor = "";
+                    }
+                }
+            }
+        },
+
+        handleTitleMouseOut () {
+
+            if (!this.isDragging) {
+
+                document.body.style.cursor = "";
+            }
+        },
+
+        handleTitleMouseDown (event, column) {
+
+            if (!this.draggingColumn || !this.showVerticalBorder) {
+                return false;
+            }
+
+            this.isDragging = true;
+
+            this.draggingStartX = event.clientX;
+
+            this.setDragLinePosition(event);
+
+            document.onselectstart = function () {
+                return false;
+            };
+            document.ondragstart = function () {
+                return false;
+            };
+
+            utils.bind(document, "mousemove", this.handleDragMouseMove);
+            utils.bind(document, "mouseup", this.handleDragMouseUp);
+        },
+
+        handleDragMouseMove (e) {
+
+            if (!this.isDragging) {
+                return false;
+            }
+
+            this.setDragLinePosition(e);
+        },
+
+        setDragLinePosition (e) {
+            const tableLeft = utils.getViewportOffset(this.$el).left;
+            const dragLine = this.$el.querySelector(".v-table-drag-line");
+            const clientX = e.clientX;
+
+            if (this.draggingColumn.width + (clientX - this.draggingStartX) <= this.minColumnWidth) {
+                return;
+            }
+
+            dragLine.style.left = (clientX - tableLeft) + "px";
+        },
+
+        // 拖动时mouseup
+        handleDragMouseUp (e) {
+
+            if (!this.isDragging) {
+                return false;
+            }
+
+            this.draggingEndX = e.clientX;
+
+            let differ = this.draggingEndX - this.draggingStartX;
+
+            // 差值大于1才处理
+            if (Math.abs(differ) > 1) {
+                let draggingColumn = this.draggingColumn;
+                if (draggingColumn.width + differ < this.minColumnWidth) {
+                    draggingColumn.width = this.minColumnWidth;
+                } else {
+                    draggingColumn.width += differ;
+                }
+                this.columnWidthDragResize && this.columnWidthDragResize(draggingColumn, e);
+            }
+            let rightViewBody = this.$el.querySelector(".v-table-rightview .v-table-body");
+            let rightViewFooter = this.$el.querySelector(".v-table-rightview .v-table-footer");
+            let hasTableFooter = this.hasTableFooter;
+            if (rightViewBody) {
+                if (this.totalColumnsWidth < this.internalWidth) {
+
+                    if (!hasTableFooter) {
+
+                        rightViewBody.style.overflowX = "hidden";
+
+                        removeClass(rightViewBody, "v-table-rightview-special-border");
+                        rightViewBody.classList.remove("v-table-rightview-special-border");
+
+                    } else {
+
+                        rightViewFooter.style.overflowX = "hidden";
+                    }
+                } else {
+
+                    if (!hasTableFooter) {
+
+                        rightViewBody.style.overflowX = "scroll";
+
+                        if (!this.hasFrozenColumn) {
+
+                            addClass(rightViewBody, "v-table-rightview-special-border");
+                        }
+
+                    } else {
+
+                        rightViewFooter.style.overflowX = "scroll";
+                    }
+                }
+            }
+
+            this.draggingColumn = null;
+            document.body.style.cursor = "";
+            this.isDragging = false;
+
+            document.onselectstart = function () {
+                return true;
+            };
+            document.ondragstart = function () {
+                return true;
+            };
+
+            utils.unbind(document, "mousemove", this.handleDragMouseMove);
+            utils.unbind(document, "mouseup", this.handleDragMouseUp);
+        }
+
+    }
+
+};

package/src/components/list/easyTable/v-table/src/export-csv.js

@@ -0,0 +1,74 @@
+// 有csv 根式有很大的局限性，不能合并单元格，目前先不上此功能
+function getDownloadUrl (content) {
+
+    const BOM = "\uFEFF";
+    // Add BOM to text for open in excel correctly
+    if (window.Blob && window.URL && window.URL.createObjectURL) {
+        const csvData = new Blob([BOM + content], { type: "text/csv" });
+        return URL.createObjectURL(csvData);
+    } else {
+        return "data:attachment/csv;charset=utf-8," + BOM + encodeURIComponent(content);
+    }
+}
+
+function getContent (columns, tableData, separator = ",") {
+
+    const newLine = "\r\n";
+
+    let result = [];
+    let csvRows = [];
+    // let _tableData = [];
+
+    if (Array.isArray(columns) && columns.length > 0) {
+
+        csvRows = columns.map(x => {
+
+            return x.title;
+        });
+
+        result.push(csvRows.join(separator));
+    }
+
+    if (Array.isArray(tableData) && tableData.length > 0) {
+
+        tableData.forEach(row => {
+
+            csvRows = columns.map(col => {
+
+                if (row[col.field]) {
+
+                    return row[col.field];
+                }
+
+                return "";
+            });
+
+            result.push(csvRows.join(separator));
+        });
+    }
+
+    return result.join(newLine);
+}
+
+const csv = {
+
+    download (fileName, columns, tableData) {
+
+        let content = getContent(columns, tableData);
+
+        if (content && content.length > 0) {
+
+            const link = document.createElement("a");
+            link.download = fileName;
+            link.href = getDownloadUrl(content);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        } else {
+
+            console.error("vue-easytable::no export data");
+        }
+    }
+};
+
+export default csv;

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

@@ -0,0 +1,134 @@
+/*
+ * 固定列
+ *
+ * */
+
+export default {
+    computed: {
+        // 冻结的列集合
+        frozenCols () {
+            return this.internalColumns.filter(x => x.isFrozen === true);
+        },
+        // 冻结的列集合
+        frozenRightCols () {
+            return this.internalColumns.filter(x => x.isFrozenRight === true);
+        },
+        // 非冻结列集合
+        noFrozenCols () {
+            return this.internalColumns.filter(x => x.isFrozen !== true && x.isFrozenRight !== true);
+        },
+        // 冻结的表头列集合
+        frozenTitleCols () {
+            let frozenTitleCols = [];
+            let self = this;
+
+            if (this.internalTitleRows.length > 0) {
+
+                // 获取当前锁定的字段集合
+                let frozenFields = this.frozenCols.map(x => x.field);
+
+                this.internalTitleRows.forEach(function (rows) {
+
+                    let frozenTitleRows = rows.filter(function (row) {
+                        if (Array.isArray(row.fields)) {
+                            if (row.fields.every(field => frozenFields.indexOf(field) !== -1)) {
+                                return true;
+                            }
+                        }
+                    });
+
+                    if (frozenTitleRows.length > 0) {
+
+                        frozenTitleCols.push(frozenTitleRows);
+
+                        let minRowspan = self.getMinRowspan(frozenTitleRows);
+
+                        if (minRowspan && minRowspan > 0) {
+
+                            for (let i = 0; i < minRowspan; i++) {
+
+                                frozenTitleCols.push([]);
+                            }
+                        }
+                    }
+                });
+            }
+
+            return frozenTitleCols;
+        },
+        // 冻结的表头列集合
+        frozenRightTitleCols () {
+            let frozenRightTitleCols = [];
+            let self = this;
+
+            if (this.internalTitleRows.length > 0) {
+
+                // 获取当前锁定的字段集合
+                let frozenRightFields = this.frozenRightCols.map(x => x.field);
+
+                this.internalTitleRows.forEach(function (rows) {
+
+                    let frozenRightTitleRows = rows.filter(function (row) {
+                        if (Array.isArray(row.fields)) {
+                            if (row.fields.every(field => frozenRightFields.indexOf(field) !== -1)) {
+                                return true;
+                            }
+                        }
+                    });
+
+                    if (frozenRightTitleRows.length > 0) {
+
+                        frozenRightTitleCols.push(frozenRightTitleRows);
+
+                        let minRowspan = self.getMinRowspan(frozenRightTitleRows);
+
+                        if (minRowspan && minRowspan > 0) {
+
+                            for (let i = 0; i < minRowspan; i++) {
+
+                                frozenRightTitleCols.push([]);
+                            }
+                        }
+                    }
+                });
+            }
+
+            return frozenRightTitleCols;
+        },
+        // 未的表头列集合
+        noFrozenTitleCols () {
+            let noFrozenTitleCols = [];
+            let self = this;
+
+            if (this.internalTitleRows.length > 0) {
+
+                // 获取当前未锁定的字段集合
+                let noFrozenFields = this.noFrozenCols.map(x => x.field);
+
+                this.internalTitleRows.forEach(function (rows) {
+
+                    let noFrozenTitleRows = rows.filter(function (row) {
+                        if (Array.isArray(row.fields)) {
+                            return row.fields.every(field => noFrozenFields.indexOf(field) !== -1);
+                        }
+                    });
+
+                    if (noFrozenTitleRows.length > 0) {
+                        noFrozenTitleCols.push(noFrozenTitleRows);
+
+                        let minRowspan = self.getMinRowspan(noFrozenTitleRows);
+
+                        if (minRowspan && minRowspan > 0) {
+
+                            for (let i = 0; i < minRowspan; i++) {
+
+                                noFrozenTitleCols.push([]);
+                            }
+                        }
+                    }
+                });
+            }
+            return noFrozenTitleCols;
+        }
+    }
+};

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

@@ -0,0 +1,49 @@
+<template>
+    <div style="width:100%;height: 100%;">
+        <div class="v-table-loading" :style="{'opacity':loadingOpacity}"></div>
+        <div class="v-table-loading-content" v-html="loadingContent"></div>
+    </div>
+
+</template>
+
+<script>
+    export default{
+
+        props: {
+
+            loadingContent: [String],
+
+            loadingOpacity: [Number],
+
+            titleRows: [Array],
+
+            titleRowHeight: [Number],
+
+            columns: [Array]
+        },
+
+        methods: {
+
+            setPosition () {
+
+                let loadingEle = this.$el;
+                let loadingContentEle = this.$el.querySelector(".v-table-loading-content");
+                let titleHeight = 0;
+
+                if (this.columns && this.columns.length > 0) {
+
+                    titleHeight = (this.titleRows && this.titleRows.length > 0) ? this.titleRows.length * this.titleRowHeight : this.titleRowHeight;
+                }
+
+                loadingContentEle.style.top = ((loadingEle.clientHeight + titleHeight) / 2 - loadingContentEle.clientHeight / 2) + "px";
+            }
+        },
+
+        mounted () {
+
+            this.$nextTick(x => {
+                this.setPosition();
+            });
+        }
+    };
+</script>