bri-components 1.5.21 → 1.6.0

package/src/components/list/BriCard.vue

@@ -1,95 +1,95 @@
-<template>
-    <div class="BriCard">
-        <template v-if="data.length">
-            <div
-                v-for="item in data"
-                :key="item._key"
-                class="item"
-                @click="change(item)"
-            >
-                <div :class="{
-                    'item-normal': true,
-                    'item-active': item.checked
-                }">
-                    <span class="label">{{ item.name }}</span>
-                </div>
-            </div>
-        </template>
-
-        <div
-            v-else
-            class="BriCard-nodata"
-        >
-            暂无数据…
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BriCard",
-        mixins: [],
-        components: {},
-        props: {
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
-        },
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {
-            change () {
-                this.$emit("on-change", this.value);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriCard {
-        .item {
-            height: 50px;
-            margin-bottom: 10px;
-            float: left;
-            width: 33.3%;
-            padding: 0 10px;
-            min-width: 160px;
-
-            &-normal {
-                width: 100%;
-                height: 100%;
-                border: 1px solid #eaeaea;
-                position: relative;
-                border-radius: 5px;
-                cursor: pointer;
-
-                .label {
-                    .dsh-ellipsis();
-                    display: block;
-                    width: 160px;
-                    height: 100%;
-                    position: absolute;
-                    left: 50%;
-                    margin-left: -80px;
-                    line-height: 50px;
-                    text-align: center;
-                }
-            }
-
-            &-active {
-                background-color: @themeColor;
-                color: #fff;
-            }
-        }
-
-        &-nodata {
-            #dsh-nodata();
-        }
-    }
-</style>
+<template>
+    <div class="BriCard">
+        <template v-if="data.length">
+            <div
+                v-for="item in data"
+                :key="item._key"
+                class="item"
+                @click="change(item)"
+            >
+                <div :class="{
+                    'item-normal': true,
+                    'item-active': item.checked
+                }">
+                    <span class="label">{{ item.name }}</span>
+                </div>
+            </div>
+        </template>
+
+        <div
+            v-else
+            class="BriCard-nodata"
+        >
+            暂无数据…
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriCard",
+        mixins: [],
+        components: {},
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            change () {
+                this.$emit("on-change", this.value);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriCard {
+        .item {
+            height: 50px;
+            margin-bottom: 10px;
+            float: left;
+            width: 33.3%;
+            padding: 0 10px;
+            min-width: 160px;
+
+            &-normal {
+                width: 100%;
+                height: 100%;
+                border: 1px solid #eaeaea;
+                position: relative;
+                border-radius: 5px;
+                cursor: pointer;
+
+                .label {
+                    .dsh-ellipsis();
+                    display: block;
+                    width: 160px;
+                    height: 100%;
+                    position: absolute;
+                    left: 50%;
+                    margin-left: -80px;
+                    line-height: 50px;
+                    text-align: center;
+                }
+            }
+
+            &-active {
+                background-color: @themeColor;
+                color: #fff;
+            }
+        }
+
+        &-nodata {
+            #dsh-nodata();
+        }
+    }
+</style>

package/src/components/list/BriTable.vue

@@ -1,205 +1,205 @@
-<template>
-    <div class="bri-table">
-        <ve-table
-            class="bri-table-content"
-            ref="briTable"
-            :class="[selfClassName, selfPropsObj.className]"
-            :table-data="data"
-            :footer-data="footerData"
-            :columns="columnsList"
-            :show-header="selfPropsObj.showHeader"
-            :fixed-header="selfPropsObj.fixedHeader"
-            :fixed-footer="selfPropsObj.fixedFooter"
-            :scroll-width="selfPropsObj.scrollWidth"
-            :max-height="selfPropsObj.maxHeight"
-            :row-key-field-name="selfPropsObj.rowKeyFieldName"
-            :border-around="selfPropsObj.borderAround"
-            :border-x="selfPropsObj.borderX"
-            :border-y="selfPropsObj.borderY"
-            :cellSpanOption="selfPropsObj.cellSpanOption"
-            :columnHiddenOption="selfPropsObj.columnHiddenOption"
-            :cellStyleOption="cellStyleOption"
-            :rowStyleOption="rowStyleOption"
-            :expandOption="selfPropsObj.expandOption"
-            :checkbox-option="selfCheckboxOption"
-            :radioOption="selfPropsObj.radioOption"
-            :sortOption="sortOption"
-            :cellSelectionOption="selfPropsObj.cellSelectionOption"
-            :editOption="selfPropsObj.editOption"
-            :contextmenuHeaderOption="selfPropsObj.contextmenuHeaderOption"
-            :contextmenuBodyOption="selfPropsObj.contextmenuBodyOption"
-            :event-custom-option="eventCustomOption"
-            :cellAutofillOption="selfPropsObj.cellAutofillOption"
-            :clipboardOption="selfPropsObj.clipboardOption"
-            :columnWidthResizeOption="columnWidthResizeOption"
-        ></ve-table>
-
-        <!-- loading -->
-        <bri-loading
-            class="bri-table-empty"
-            :value="isLoading ? 1 : data.length ? 0 : 2"
-        >
-            <template slot="nodata">
-                {{ noDataText }}
-            </template>
-        </bri-loading>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BriTable",
-        props: {
-            isLoading: Boolean,
-            data: Array,
-            footerData: Array,
-            columns: Array,
-
-            noDataText: {
-                type: String,
-                default: "暂无数据…"
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            checkboxOption: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            }
-        },
-        data () {
-            // 中文文档https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/api
-            return { };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    rowKeyFieldName: "_id",
-                    scrollWidth: "0",
-                    borderY: true,
-                    fixedHeader: true,
-                    canClick: false,
-                    cellSelectionOption: {
-                        enable: false
-                    },
-                    ...this.propsObj
-                };
-            },
-            columnsList () {
-                return this.columns;
-            },
-
-            // 当前表格状态
-            currentState () {
-                return this.propsObj.state || this.state;
-            },
-            selfClassName () {
-                let className = "";
-                if (this.selfPropsObj.canClick) {
-                    className += "bri-table-click ";
-                }
-                if (this.loading || !this.data.length) {
-                    className += "bri-table-onlyhead ";
-                }
-                return className;
-            },
-            rowStyleOption () {
-                return {
-                    clickHighlight: false,
-                    ...(this.propsObj.rowStyleOption || {})
-                };
-            },
-            cellStyleOption () {
-                return {
-                    headerCellClass: () => {
-                        return "bri-table-th";
-                    },
-                    bodyCellClass: ({rowIndex}) => {
-                        return "bri-table-td";
-                    },
-                    ...(this.propsObj.cellStyleOption || {})
-                };
-            },
-            // 自定义表格事件，也可配置鼠标事件
-            eventCustomOption () {
-                return {
-                    bodyCellEvents: ({ row, rowIndex, column }) => {
-                        return {
-                            click: (event) => {
-                                if (!["checkbox"].includes(column.type)) {
-                                    this.$emit("click-row", row, rowIndex, event);
-                                }
-                            },
-                            dblclick: (event) => {
-                                this.$emit("db-click-row", row, rowIndex, column, event);
-                            }
-                        };
-                    },
-                    ...(this.propsObj.eventCustomOption || {})
-                };
-            },
-            // 全选配置项
-            selfCheckboxOption () {
-                return {
-                    // 行选择改变事件
-                    selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
-                        this.$emit(
-                            "changeSelect",
-                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
-                            { row, isSelected, selectedRowKeys }
-                        );
-                    },
-                    // 全选改变事件
-                    selectedAllChange: ({ isSelected, selectedRowKeys }) => {
-                        this.$emit(
-                            "selectAll",
-                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
-                            { isSelected, selectedRowKeys }
-                        );
-                    },
-                    ...(this.propsObj.checkboxOption || {}),
-                    ...this.checkboxOption
-                };
-            },
-            // 列宽改变设置项
-            columnWidthResizeOption () {
-                return {
-                    enable: true,
-                    minWidth: 80,
-                    sizeChange: ({ column, differWidth, columnWidth }) => {
-                        this.$emit("size-change", column, differWidth, columnWidth);
-                    },
-                    ...(this.propsObj.columnWidthResizeOption || {})
-                };
-            },
-            sortOption () {
-                return {
-                    sortChange: (params) => {
-                        let sortObj =
-                            Object.keys(params)
-                                .filter(attr => !!params[attr])
-                                .reduce((obj, attr) => {
-                                    return { sortType: params[attr], field: attr };
-                                }, {});
-                        this.$emit("changeSort", sortObj);
-                    },
-                    ...(this.propsObj.sortOption || {})
-                };
-            }
-        },
-        mounted () {},
-        methods: {
-            hideColumnsByKeys (keys = []) {
-                this.$refs.briTable.hideColumnsByKeys(keys);
-            },
-            showColumnsByKeys (keys = []) {
-                this.$refs.briTable.showColumnsByKeys(keys);
-            }
-        }
-    };
-</script>
+<template>
+    <div class="bri-table">
+        <ve-table
+            class="bri-table-content"
+            ref="briTable"
+            :class="[selfClassName, selfPropsObj.className]"
+            :table-data="data"
+            :footer-data="footerData"
+            :columns="columnsList"
+            :show-header="selfPropsObj.showHeader"
+            :fixed-header="selfPropsObj.fixedHeader"
+            :fixed-footer="selfPropsObj.fixedFooter"
+            :scroll-width="selfPropsObj.scrollWidth"
+            :max-height="selfPropsObj.maxHeight"
+            :row-key-field-name="selfPropsObj.rowKeyFieldName"
+            :border-around="selfPropsObj.borderAround"
+            :border-x="selfPropsObj.borderX"
+            :border-y="selfPropsObj.borderY"
+            :cellSpanOption="selfPropsObj.cellSpanOption"
+            :columnHiddenOption="selfPropsObj.columnHiddenOption"
+            :cellStyleOption="cellStyleOption"
+            :rowStyleOption="rowStyleOption"
+            :expandOption="selfPropsObj.expandOption"
+            :checkbox-option="selfCheckboxOption"
+            :radioOption="selfPropsObj.radioOption"
+            :sortOption="sortOption"
+            :cellSelectionOption="selfPropsObj.cellSelectionOption"
+            :editOption="selfPropsObj.editOption"
+            :contextmenuHeaderOption="selfPropsObj.contextmenuHeaderOption"
+            :contextmenuBodyOption="selfPropsObj.contextmenuBodyOption"
+            :event-custom-option="eventCustomOption"
+            :cellAutofillOption="selfPropsObj.cellAutofillOption"
+            :clipboardOption="selfPropsObj.clipboardOption"
+            :columnWidthResizeOption="columnWidthResizeOption"
+        ></ve-table>
+
+        <!-- loading -->
+        <bri-loading
+            class="bri-table-empty"
+            :value="isLoading ? 1 : data.length ? 0 : 2"
+        >
+            <template slot="nodata">
+                {{ noDataText }}
+            </template>
+        </bri-loading>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTable",
+        props: {
+            isLoading: Boolean,
+            data: Array,
+            footerData: Array,
+            columns: Array,
+
+            noDataText: {
+                type: String,
+                default: "暂无数据…"
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            checkboxOption: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            // 中文文档https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/api
+            return { };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    rowKeyFieldName: "_id",
+                    scrollWidth: "0",
+                    borderY: true,
+                    fixedHeader: true,
+                    canClick: false,
+                    cellSelectionOption: {
+                        enable: false
+                    },
+                    ...this.propsObj
+                };
+            },
+            columnsList () {
+                return this.columns;
+            },
+
+            // 当前表格状态
+            currentState () {
+                return this.propsObj.state || this.state;
+            },
+            selfClassName () {
+                let className = "";
+                if (this.selfPropsObj.canClick) {
+                    className += "bri-table-click ";
+                }
+                if (this.loading || !this.data.length) {
+                    className += "bri-table-onlyhead ";
+                }
+                return className;
+            },
+            rowStyleOption () {
+                return {
+                    clickHighlight: false,
+                    ...(this.propsObj.rowStyleOption || {})
+                };
+            },
+            cellStyleOption () {
+                return {
+                    headerCellClass: () => {
+                        return "bri-table-th";
+                    },
+                    bodyCellClass: ({rowIndex}) => {
+                        return "bri-table-td";
+                    },
+                    ...(this.propsObj.cellStyleOption || {})
+                };
+            },
+            // 自定义表格事件，也可配置鼠标事件
+            eventCustomOption () {
+                return {
+                    bodyCellEvents: ({ row, rowIndex, column }) => {
+                        return {
+                            click: (event) => {
+                                if (!["checkbox"].includes(column.type)) {
+                                    this.$emit("click-row", row, rowIndex, event);
+                                }
+                            },
+                            dblclick: (event) => {
+                                this.$emit("db-click-row", row, rowIndex, column, event);
+                            }
+                        };
+                    },
+                    ...(this.propsObj.eventCustomOption || {})
+                };
+            },
+            // 全选配置项
+            selfCheckboxOption () {
+                return {
+                    // 行选择改变事件
+                    selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+                        this.$emit(
+                            "changeSelect",
+                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
+                            { row, isSelected, selectedRowKeys }
+                        );
+                    },
+                    // 全选改变事件
+                    selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+                        this.$emit(
+                            "selectAll",
+                            this.data.filter(dataItem => selectedRowKeys.includes(dataItem[this.selfPropsObj.rowKeyFieldName])),
+                            { isSelected, selectedRowKeys }
+                        );
+                    },
+                    ...(this.propsObj.checkboxOption || {}),
+                    ...this.checkboxOption
+                };
+            },
+            // 列宽改变设置项
+            columnWidthResizeOption () {
+                return {
+                    enable: true,
+                    minWidth: 80,
+                    sizeChange: ({ column, differWidth, columnWidth }) => {
+                        this.$emit("size-change", column, differWidth, columnWidth);
+                    },
+                    ...(this.propsObj.columnWidthResizeOption || {})
+                };
+            },
+            sortOption () {
+                return {
+                    sortChange: (params) => {
+                        let sortObj =
+                            Object.keys(params)
+                                .filter(attr => !!params[attr])
+                                .reduce((obj, attr) => {
+                                    return { sortType: params[attr], field: attr };
+                                }, {});
+                        this.$emit("changeSort", sortObj);
+                    },
+                    ...(this.propsObj.sortOption || {})
+                };
+            }
+        },
+        mounted () {},
+        methods: {
+            hideColumnsByKeys (keys = []) {
+                this.$refs.briTable.hideColumnsByKeys(keys);
+            },
+            showColumnsByKeys (keys = []) {
+                this.$refs.briTable.showColumnsByKeys(keys);
+            }
+        }
+    };
+</script>