bri-components 1.0.0

package/src/components/list/easyTable/v-dropdown/index.js

@@ -0,0 +1,7 @@
+import VDropdown from "./src/dropdown.vue";
+
+VDropdown.install = function (Vue) {
+    Vue.component(VDropdown.name, VDropdown);
+};
+
+export default VDropdown;

package/src/components/list/easyTable/v-dropdown/src/dropdown.vue

@@ -0,0 +1,337 @@
+<template>
+    <dl :class="['v-dropdown',sizeClass]" v-click-outside="clickOutside">
+        <dt class="v-dropdown-dt">
+            <a :class="[isSelect ? 'v-dropdown-selected' :'']" @click.stop.prevent="toggleItems()" :style="{'width':width+'px'}">
+                <slot></slot>
+            </a>
+        </dt>
+        <dd v-show="visible" class="v-dropdown-dd">
+            <ul class="v-dropdown-items" :style="{'min-width':width+'px','max-width':getMaxWidth+'px'}">
+
+                <template v-if="isMultiple">
+                    <v-checkbox-group is-vertical-show
+                    :min="min"
+                    :max="max"
+                    @change="checkboxGroupChange"
+                    v-model="checkboxGroupList"
+                    >
+                    <li v-for="(item, idx) in internalOptions" :key="idx"
+                    :class="['v-dropdown-items-multiple',getTextAlignClass()]"
+                    >
+                    <v-checkbox :key="item.label" :label="item.label"
+                    :showLine="item.showLine"></v-checkbox>
+                </li>
+            </v-checkbox-group>
+        </template>
+        <template v-else>
+            <li v-for="(item, idx) in internalOptions" :key="idx" @click.stop="selectOptionClick(item)"
+            :class="['v-dropdown-items-li',item.selected ? 'active' : '']">
+            <a :class="['v-dropdown-items-li-a',getTextAlignClass()]" href="javascript:void(0);">{{item.label}}</a>
+        </li>
+    </template>
+
+    <li v-if="showOperation" class="v-dropdown-operation">
+        <a @click.stop="confirm" class="v-dropdown-operation-item" href="javascript:void(0)">确认</a>
+        <a @click.stop="rest" class="v-dropdown-operation-item" href="javascript:void(0)">重置</a>
+    </li>
+</ul>
+</dd>
+</dl>
+</template>
+
+<script>
+    import settings from "../../src/settings/settings.js";
+    import clickoutside from "../../src/directives/clickoutside.js";
+
+    import VCheckboxGroup from "../../v-checkbox-group/index";
+    import VCheckbox from "../../v-checkbox/index";
+
+    import layerAdjustment from "../../src/mixins/layerAdjustment.js";
+
+    export default {
+        name: "v-dropdown",
+        components: {
+            VCheckboxGroup, VCheckbox
+        },
+        mixins: [layerAdjustment],
+        directives: {
+            "click-outside": clickoutside
+        },
+        data () {
+            return {
+
+                visible: false,
+
+                internalOptions: [],
+
+                // checkboxGroup 选中的项
+                checkboxGroupList: [],
+
+                // 样式前缀
+                textAlignPrefix: "v-dropdown-items-li-a-",
+
+                inputValue: "",
+
+                // 是否有选项被改变（初始值为null 为了区分首次internalOptions 赋值的问题）
+                isOperationChange: null
+            };
+        },
+        props: {
+            // 如果是select 组件将特殊处理
+            isSelect: {
+                type: Boolean,
+                default: false
+            },
+            showOperation: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                type: String
+            },
+
+            width: {
+                type: Number,
+                default: 90
+
+            },
+
+            // select的最大宽度(超出隐藏)
+            maxWidth: {
+                type: Number
+            },
+
+            // 如果为true 会包含 checkbox
+            isMultiple: {
+                type: Boolean,
+                default: false
+            },
+
+            // 用户传入v-model 的值 [{value/label/selected}]
+            value: [Object, Array],
+
+            // 占位符
+            placeholder: {
+                type: String,
+                default: "请选择",
+                validator: function (value) {
+                    return value.length > 0;
+                }
+            },
+
+            // 文本居中方式 left|center|right
+            textAlign: {
+                type: String,
+                default: "left"
+            },
+
+            // 最小选中数量
+            min: {
+                type: Number,
+                default: 0
+            },
+
+            // 最大选中数量
+            max: {
+                type: Number,
+                default: 999
+            },
+
+            // 是否支持输入input
+            isInput: {
+                type: Boolean,
+                default: false
+            }
+
+        },
+        computed: {
+
+            sizeClass () {
+                let size = settings.sizeMaps[this.size] || settings.sizeMapDefault;
+                return size === settings.sizeMaps["large"] ? " v-dropdown--large" : (size === settings.sizeMaps["middle"] ? " v-dropdown--middle" : " v-dropdown--small");
+            },
+
+            // 获取最大宽度(不设置则是无穷大)
+            getMaxWidth () {
+                let result = Infinity;
+                let maxWidth = this.maxWidth;
+                let width = this.width;
+
+                if (maxWidth && maxWidth > 0 && maxWidth > width) {
+
+                    result = maxWidth;
+                }
+
+                return result;
+            }
+        },
+        methods: {
+
+            // 初始化
+            init () {
+                this.internalOptions = Object.assign([], this.value);
+
+                this.checkboxGroupList = this.selectedLabels();
+
+                if (this.isInput) {
+                    this.setInputValue();
+                }
+            },
+
+            // operation filter confirm
+            confirm () {
+                if (this.isOperationChange) {
+
+                    this.$emit("on-filter-method", this.internalOptions);
+                    this.isOperationChange = false;
+                }
+                this.hideDropDown();
+            },
+
+            // operation filter reset
+            rest () {
+                if (this.internalOptions.some(x => x.selected)) {
+                    this.internalOptions.map(x => {
+                        if (x.selected) {
+                            x.selected = false;
+                        }
+                        return x;
+                    });
+                    this.checkboxGroupList = [];
+                    // 使用户传入的v-model 生效
+                    this.$emit("input", this.internalOptions);
+                    this.$emit("change");
+                    // 修复执行两次的bug
+                    /* this.$emit('on-filter-method',this.internalOptions);
+                    this.isOperationChange = false; */
+                }
+                setTimeout(x => {
+                    this.hideDropDown();
+                }, 50);
+            },
+
+            hideDropDown () {
+                if (this.showOperation && this.isOperationChange) {
+                    this.$emit("on-filter-method", this.internalOptions);
+                    this.isOperationChange = false;
+                }
+                this.visible = false;
+            },
+
+            showDropDown () {
+                this.visible = true;
+            },
+
+            // 设置文本框的值
+            setInputValue () {
+                let result;
+                let labels;
+                labels = this.selectedLabels();
+                if (Array.isArray(labels) && labels.length > 0) {
+                    result = labels.join();
+                }
+
+                this.inputValue = result;
+            },
+            // checkbox 选中改变事件
+            checkboxGroupChange () {
+
+                this.selectOptionClick();
+            },
+            toggleItems () {
+                // this.visible = !this.visible;
+                if (this.visible) {
+                    this.hideDropDown();
+                } else {
+                    this.showDropDown();
+                    this.$nextTick(x => {
+                        this.dropDownClick();
+                    });
+                }
+            },
+            selectOptionClick (item) {
+                if (!this.isMultiple) {
+                    this.internalOptions.map((x) => {
+                        if (item.label === x.label) {
+                            x.selected = true;
+                        } else {
+                            x.selected = false;
+                        }
+                        return x;
+                    });
+                } else { // 多选
+                    this.internalOptions.map((x) => {
+                        if (this.checkboxGroupList.includes(x.label)) {
+                            x.selected = true;
+                        } else {
+                            x.selected = false;
+                        }
+                        return x;
+                    });
+                }
+
+                if (!this.isMultiple) {
+                    this.toggleItems();
+                }
+
+                if (this.isInput) {
+                    this.setInputValue();
+                }
+                // 使用户传入的v-model 生效
+                this.$emit("input", this.internalOptions);
+                this.$emit("change");
+            },
+
+            // 获取样式名称
+            getTextAlignClass () {
+                return this.textAlignPrefix + this.textAlign;
+            },
+
+            // 当前选中项的label
+            selectedLabels () {
+                return this.internalOptions.filter(x => x.selected).map(x => {
+                    if (x.selected) {
+                        return x.label;
+                    }
+                });
+            },
+
+            clickOutside () {
+                this.hideDropDown();
+                // this.visible = false
+            },
+
+            // 下拉点击显示
+            dropDownClick () {
+                let dtEle = this.$el.querySelector(".v-dropdown-dt");
+                let ddItem = this.$el.querySelector(".v-dropdown-items");
+                this.layerAdjustmentOnce(ddItem, dtEle, 2);
+                return false;
+            },
+
+            // 确定下拉框的位置
+            dropdownAdjust () {
+                let dtEle = this.$el.querySelector(".v-dropdown-dt");
+                let ddItem = this.$el.querySelector(".v-dropdown-items");
+                this.layerAdjustmentBind(ddItem, dtEle, 2);
+            }
+
+        },
+
+        created () {
+            this.init();
+        },
+        mounted () {
+            this.dropdownAdjust();
+
+        },
+        watch: {
+            "value": function (val) {
+                this.init();
+            },
+            "internalOptions": function (val) {
+                this.isOperationChange = !!((this.showOperation && this.isOperationChange !== null));
+            }
+        }
+    };
+    </script>

package/src/components/list/easyTable/v-table/index.js

@@ -0,0 +1,7 @@
+import VTable from "./src/table.vue";
+
+VTable.install = function (Vue) {
+    Vue.component(VTable.name, VTable);
+};
+
+export default VTable;

package/src/components/list/easyTable/v-table/src/body-cell-merge-mixin.js

@@ -0,0 +1,141 @@
+export default {
+    data () {
+        return {
+            // 跳过渲染的列集合
+            skipRenderCells: []
+        };
+    },
+    methods: {
+        /*
+         * isFrozenColumns:是否是固定列
+         * */
+        cellMergeInit (rowIndex, field, rowData, isFrozenColumns) {
+            // 包含在 skipRenderCells 内，则不渲染
+            if (this.skipRenderCells.indexOf(rowIndex + "-" + field) !== -1) {
+                return false;
+            }
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            if (setting && ((setting.colSpan && setting.colSpan > 1) || (setting.rowSpan && setting.rowSpan > 1))) {
+                this.setSkipRenderCells(setting.colSpan, setting.rowSpan, rowIndex, field, isFrozenColumns);
+            }
+            return true;
+        },
+
+        // 设置不渲染的列
+        setSkipRenderCells (colSpan, rowSpan, rowIndex, field, isFrozenColumns) {
+
+            let columnsFields = isFrozenColumns ? this.getFrozenColumnsFields : this.getNoFrozenColumnsFields;
+            let skipCell = "";
+            let startPosX, endPosX, startPosY, endPosY;
+
+            endPosX = startPosX = columnsFields.indexOf(field);
+            if (colSpan && colSpan > 1) {
+                endPosX = startPosX + colSpan - 1;
+            }
+
+            endPosY = startPosY = rowIndex;
+            if (rowSpan && rowSpan > 1) {
+
+                endPosY = rowIndex + rowSpan - 1;
+            }
+
+            for (let posX = startPosX; posX <= endPosX; posX++) {
+
+                for (let posY = startPosY; posY <= endPosY; posY++) {
+
+                    if (posX == startPosX && posY == startPosY) {
+                        continue;
+                    }
+
+                    skipCell = posY + "-" + columnsFields[posX];
+
+                    // 避免状态改变重新渲染的情况
+                    if (this.skipRenderCells.indexOf(skipCell) === -1) {
+
+                        this.skipRenderCells.push(skipCell);
+                    }
+                }
+            }
+        },
+
+        // 设置 colSpan
+        setColRowSpan (rowIndex, field, rowData) {
+            let result = {
+                colSpan: "",
+                rowSpan: ""
+            };
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            if (setting) {
+                result = {
+                    colSpan: setting.colSpan ? setting.colSpan : "",
+                    rowSpan: setting.rowSpan ? setting.rowSpan : ""
+                };
+            }
+            return result;
+        },
+
+        /*
+         * 并检测不合法的设置，如果设置不合法则不会合并行和列
+         * */
+        isCellMergeRender (rowIndex, field, rowData) {
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            if (setting && ((setting.colSpan && setting.colSpan > 0) || (setting.rowSpan && setting.rowSpan > 0))) {
+                return true;
+            }
+            return false;
+        },
+
+        // 获取行高
+        getRowHeightByRowSpan (rowIndex, field, rowData) {
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            if (setting && (setting.rowSpan && setting.rowSpan > 1)) {
+                return this.rowHeight * setting.rowSpan;
+            }
+            return this.rowHeight;
+        },
+
+        /*
+         * 获取单元格宽度
+         * isFrozenColumns:是否是固定列
+         * */
+        getRowWidthByColSpan (rowIndex, field, rowData) {
+            let endPosX;
+            let startPosX;
+            let columnsFields = this.getColumnsFields;
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            let colSpan = setting.colSpan;
+            let totalWidth = 0;
+
+            if (setting && (colSpan && colSpan >= 1)) {
+                startPosX = columnsFields.indexOf(field);
+                endPosX = startPosX + colSpan - 1;
+                for (let i = startPosX; i <= endPosX; i++) {
+                    this.internalColumns.forEach(x => {
+                        if (columnsFields[i] === x.field) {
+                            totalWidth += x.width;
+                        }
+                    });
+                }
+            }
+            return totalWidth;
+        },
+
+        // 合并的单元格渲染的内容类型
+        cellMergeContentType (rowIndex, field, rowData) {
+            let result = {
+                isComponent: false,
+                isContent: false
+            };
+            let setting = this.cellMerge && this.cellMerge(rowIndex, rowData, field);
+            if (setting) {
+                if (setting.componentName && typeof setting.componentName === "string" && setting.componentName.length > 0) {
+                    result.isComponent = true;
+                } else if (setting.content && setting.content.length > 0) {
+                    result.isContent = true;
+                }
+            }
+            return result;
+        }
+    }
+
+};

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

@@ -0,0 +1,102 @@
+import utils from "../../src/utils/utils.js";
+import {hasClass, addClass, removeClass} from "../../src/utils/dom.js";
+
+export default {
+
+    methods: {
+        // cell edit
+        cellEdit (e, callback, rowIndex, rowData, field) {
+
+            let target = e.target;
+            let oldVal;
+            let editInput;
+            let editInputLen;
+            let actionFun;
+            let textAlign;
+            let childTarget;
+
+            while ((target.className && target.className.indexOf("v-table-body-cell") === -1) || !target.className) {
+                target = target.parentNode;
+            }
+
+            // 子节点（span节点）
+            childTarget = target.children[0];
+
+            // 把子节点影藏掉
+            childTarget.style.display = "none";
+
+            if (hasClass(target, "cell-editing")) {
+                return false;
+            }
+
+            addClass(target, "cell-editing");
+
+            oldVal = childTarget.innerText.trim();
+
+            if (target.style.textAlign) {
+
+                textAlign = target.style.textAlign;
+            }
+
+            editInput = document.createElement("input");
+            editInput.value = oldVal;
+            editInput.className = "cell-edit-input";
+            editInput.style.textAlign = textAlign;
+            editInput.style.width = "100%";
+            editInput.style.height = "100%";
+            // editInput.style = `width:100%;height: 100%;text-align: ${textAlign};`;
+
+            target.appendChild(editInput);
+
+            editInput.focus();
+
+            editInputLen = editInput.value.length;
+            if (document.selection) {
+                let ctr = editInput.createTextRange();
+                ctr.moveStart("character", editInputLen);
+                ctr.collapse();
+                ctr.select();
+            } else if (typeof editInput.selectionStart == "number" && typeof editInput.selectionEnd == "number") {
+                editInput.selectionStart = editInput.selectionEnd = editInputLen;
+            }
+
+            actionFun = function (e) {
+
+                if (typeof e.keyCode === "undefined" || e.keyCode === 0 || e.keyCode == 13) {
+
+                    if (hasClass(target, "cell-editing")) {
+
+                        removeClass(target, "cell-editing");
+                    } else {
+                        return false;
+                    }
+
+                    childTarget.style.display = "";
+
+                    // fixed this.value bug in IE9
+                    callback(editInput.value, oldVal);
+
+                    utils.unbind(editInput, "blur", actionFun);
+                    utils.unbind(editInput, "keydown", actionFun);
+
+                    target.removeChild(editInput);
+                }
+            };
+
+            utils.bind(editInput, "blur", actionFun);
+            utils.bind(editInput, "keydown", actionFun);
+        },
+
+        // 单元格点击
+        cellEditClick (e, isEdit, rowData, field, rowIndex) {
+            if (isEdit) {
+                let self = this;
+                // 单元格内容变化后的回调
+                let onCellEditCallBack = function (newValue, oldVal) {
+                    self.cellEditDone && self.cellEditDone(newValue, oldVal, rowIndex, rowData, field);
+                };
+                this.cellEdit(e, onCellEditCallBack, rowIndex, rowData, field);
+            }
+        }
+    }
+};