bri-components 1.0.3 → 1.1.0

package/src/components/list/BriFlatTable.vue

@@ -0,0 +1,430 @@
+<template>
+    <div class="BriFlatTable">
+        <bri-table
+            class="BriFlatTable-main"
+            :propsObj="tablePropsObj"
+            :columns="showColumns"
+            :data="listData"
+            :footer-data="footerData"
+            @selectChange="changeSelect"
+            @selectAll="changeSelect"
+        ></bri-table>
+
+        <!-- 添加行 -->
+        <dsh-buttons
+            class="BriFlatTable-create"
+            :list="$getOperationList(['create'])"
+            @click="$dispatchEvent($event, null, null, listData)"
+        ></dsh-buttons>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriFlatTable",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            oldData: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            rowDefault: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            outObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isShare: Boolean
+        },
+        model: {
+            prop: "data",
+            event: "change"
+        },
+        data () {
+            return {
+                showRuleMessage: false, // 显示校验文字
+                ruleRecordMap: {}
+            };
+        },
+        computed: {
+            tablePropsObj () {
+                return {
+                    maxHeight: this.contentHeight
+                };
+            },
+            listData () {
+                this.data.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.data;
+            },
+            footerData () {
+                let row = { _id: this.$ObjectID().str, custome: "汇总" };
+                this.filterColumns.map(col => {
+                    if (col._type === "number") {
+                        row[col._key] = this.$calNumList(this.listData.map(item => item[col._key]), col._summaryType, { ...col, _defaultDigit: 2 });
+                    }
+                });
+                return this.useSummary && this.listData.length ? [row] : [];
+            },
+            oldListData () {
+                this.oldData.forEach(item => {
+                    !item._id && this.$set(item, "_id", this.$ObjectID().str);
+                });
+                return this.oldData;
+            },
+
+            selfPropsObj () {
+                return {
+                    _contentHeight: 500,
+                    _useSelection: false, // 使用选择列
+                    _useIndex: true, // 使用序号列
+                    _useSummary: false, // 使用汇总行
+                    _disabledBtns: false, // 禁用增删按钮
+                    _disabledCreateBtn: false, // 置灰新增按钮，目前只内部使用，comp_web数据表配置页那块
+                    _disabledOldDataRow: false, // 置灰老数据行包含删除
+
+                    ...this.propsObj
+                };
+            },
+            contentHeight () {
+                return this.selfPropsObj._contentHeight;
+            },
+            useSelection () {
+                return this.selfPropsObj._useSelection;
+            },
+            useIndex () {
+                return this.selfPropsObj._useIndex;
+            },
+            useSummary () {
+                return this.selfPropsObj._useSummary;
+            },
+            disabledBtns () {
+                return this.selfPropsObj._disabledBtns;
+            },
+            disabledCreateBtn () {
+                return this.selfPropsObj._disabledCreateBtn;
+            },
+            disabledOldDataRow () {
+                return this.selfPropsObj._disabledOldDataRow;
+            },
+            useCampare () {
+                return !!this.oldListData.length;
+            },
+            filterColumns () {
+                return this.columns.filter(colItem => colItem._displayType !== "hide" && this.$isAdvRelyShow(colItem, this.outObj));
+            },
+            showColumns () {
+                const operationList = this.$getOperationList(["delete"]);
+                const showColumns = [
+                    ...(
+                        this.useSelection === true
+                            ? [
+                                {
+                                    field: "selection",
+                                    key: "selection",
+                                    type: "checkbox",
+                                    width: 66,
+                                    align: "center",
+                                    fixed: "left"
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...(
+                        this.useIndex === true
+                            ? [
+                                {
+                                    title: "序号",
+                                    field: "custome",
+                                    key: "customes",
+                                    width: 76,
+                                    align: "center",
+                                    fixed: "left",
+                                    renderBodyCell: ({ rowIndex }) => ++rowIndex
+                                }
+                            ]
+                            : []
+                    ),
+
+                    ...this.$transformToColumns(this.filterColumns.map(item => ({
+                        filter: undefined,
+                        sortBy: undefined,
+                        renderBodyCell: ({ row, column, rowIndex }, h) => {
+                            return [
+                                this.isShowCompare(column, row, this.oldListData[rowIndex])
+                                    ? h("Tooltip", {
+                                        class: "td-inner-compare",
+                                        props: {
+                                            content: this.$isEmptyData(this.oldListData[rowIndex][column._key]) ? "" : this.oldListData[rowIndex][column._key],
+                                            transfer: true,
+                                            maxWidth: 200,
+                                            placement: "top"
+                                        },
+                                        scopedSlots: {
+                                            default: props => h("dsh-unit", {
+                                                props: {
+                                                    canEdit: this.getUnitCanEdit(column, row),
+                                                    parentData: this.listData,
+                                                    formData: row,
+                                                    formItem: this.resetCol(item),
+                                                    isShare: this.isShare,
+                                                    rowIndex: rowIndex,
+                                                    isUnit: !this.finalCanEdit
+                                                },
+                                                on: {
+                                                    blur: () => this.controlBlur(null, column, row, arguments),
+                                                    change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                                }
+                                            })
+                                        }
+                                    })
+                                    : h("dsh-unit", {
+                                        props: {
+                                            canEdit: this.getUnitCanEdit(column, row),
+                                            parentData: this.listData,
+                                            formData: row,
+                                            formItem: this.resetCol(item),
+                                            isShare: this.isShare,
+                                            rowIndex: rowIndex,
+                                            isUnit: !this.finalCanEdit
+                                        },
+                                        on: {
+                                            blur: () => this.controlBlur(null, column, row, arguments),
+                                            change: () => this.$dispatchEvent(this.operationMap.changeVal, column, row, rowIndex, arguments)
+                                        }
+                                    }),
+                                !this.getRuleResult(column, row).bool &&
+                                    h("span", { class: "table-row-td-tip" }, this.getRuleResult(column, row).message)
+                            ];
+                        },
+                        renderHeaderCell: ({ column }, h) => {
+                            return h("span", [
+                                column._required && h("i", { style: { color: "#ed4014" } }, "*"),
+                                h("span", column.title),
+                                column._description &&
+                                    h("Tooltip", {
+                                        style: { display: "inline-block" },
+                                        props: {
+                                            content: column._description,
+                                            transfer: true,
+                                            maxWidth: 200
+                                        },
+                                        scopedSlots: {
+                                            default: props => h("i", { class: "table-head-description ivu-icon bico-font bico-explain" })
+                                        }
+                                    })
+                            ]);
+                        },
+                        ...item
+                    }))),
+
+                    ...(
+                        this.canEdit && operationList.length
+                            ? [
+                                {
+                                    title: "操作",
+                                    field: "operation",
+                                    key: "operation",
+                                    align: "center",
+                                    fixed: "right",
+                                    width: 100,
+                                    renderBodyCell: (params, h) => {
+                                        return h("dsh-buttons", {
+                                            props: {
+                                                list: operationList.map(btnItem => ({ ...btnItem, disabled: this.disabledOldDataRow && !params.row.__isCreate__ }))
+                                            },
+                                            on: {
+                                                click: (operationItem) => {
+                                                    this.$dispatchEvent(operationItem, params.row, params.index, this.listData);
+                                                }
+                                            }
+                                        });
+                                    }
+                                }
+                            ]
+                            : []
+                    )
+                ];
+                return showColumns;
+            },
+            selfRowDefault () {
+                return this.$filterObj(this.columns, this.rowDefault);
+            },
+            operationMap () {
+                const allOperationMap = {
+                    create: {
+                        name: "添加一行",
+                        type: "create",
+                        size: "default",
+                        long: true,
+                        disabled: !!this.disabledCreateBtn,
+                        event: "clickCreate",
+                        btnType: "default"
+                    },
+                    delete: {
+                        name: "删除",
+                        type: "delete",
+                        btnType: "errorText",
+                        icon: "ios-trash-outline",
+                        size: "small",
+                        disabled: false,
+                        event: "clickDelete"
+                    },
+                    // expand: {
+                    //     name: "展开",
+                    //     type: "expand",
+                    //     event: "clickExpand"
+                    // },
+                    changeVal: {
+                        name: "改变输入框值",
+                        type: "changeVal",
+                        event: "changeVal"
+                    }
+                };
+
+                return this.canEdit
+                    ? this.$categoryMapToMap(
+                        allOperationMap,
+                        null,
+                        this.disabledBtns ? ["create", "delete"] : []
+                    )
+                    : {};
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 共外部使用
+            validate () {
+                this.showRuleMessage = true;
+
+                return this.listData.every(dataItem =>
+                    this.filterColumns.every(col => this.getRuleResult(col, dataItem, true).bool)
+                );
+            },
+            // 点击 -添加行
+            clickCreate (operationItem, row, index, list) {
+                const newRow = {
+                    ...this.$deepCopy(this.selfRowDefault),
+                    __isCreate__: true,
+                    _id: this.$ObjectID().str
+                };
+                const newRowIndex = index == null ? list.length : index + 1;
+                list.splice(newRowIndex, 0, newRow);
+
+                this.$forceUpdate(); // 自定义页中点击添加一行没有更新页面
+
+                this.change("createRow", null, newRow, newRowIndex);
+            },
+            // 点击 -删除行
+            clickDelete (operationItem, row, rowIndex, list) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定删除吗？",
+                    onOk: () => {
+                        list.splice(rowIndex, 1);
+
+                        this.change("deleteRow", null, row, rowIndex);
+                    }
+                });
+            },
+            changeSelect (list) {
+                this.$emit("selectChange", list);
+            },
+            // 表单控件值改变
+            changeVal (operationItem, col, row, rowIndex, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+
+                this.change("changeVal", col, row, rowIndex, ...params);
+            },
+            // 表单控件失去焦点
+            controlBlur (operationItem, col, row, params) {
+                this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
+            },
+            change (...params) {
+                this.$emit("change", { list: this.listData, rowDefault: this.rowDefault }, ...params);
+            },
+
+            /* --------------- 工具方法 ------------- */
+            resetCol (col) {
+                let obj = {
+                    select: {
+                        _optionKind: "dropdown"
+                    },
+                    checkbox: {
+                        _optionKind: "dropdown"
+                    }
+                };
+                return { ...col, ...(obj[col._type] || {}) };
+            },
+            getUnitCanEdit (col, row) {
+                return this.canEdit && // 是否是编辑状态
+                    // (!this.disabledOldDataRow || !!this.createRowMap[row._id]) && // 是否让老数据行置灰
+                    (!this.disabledOldDataRow || !!row.__isCreate__) && // 是否让老数据行置灰
+                (!col.dependRowCanEdit || row.canEdit !== false); // 在老数据行里某些列不可编辑
+            },
+            isShowCompare (col, row, oldRow = {}) {
+                return this.useCampare && ["number"].includes(col._type) &&
+                    !(this.$isEmptyData(row[col._key]) && this.$isEmptyData(oldRow[col._key])) &&
+                    row[col._key] !== oldRow[col._key];
+            },
+            // 是否显示 单元格校验提示文字
+            getRuleResult (col, row, showRuleMessage = this.showRuleMessage) {
+                if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
+                    const val = row[col._key];
+                    const ruleConfig = this.$getFormTypeRuleConfig(col);
+                    // 为空 校验必填；不为空 格式校验 （不是必填也要校验格式）
+                    return this.$isEmptyData(val)
+                        ? {
+                            bool: !col._required,
+                            message: `${col._name}为必填项`
+                        }
+                        : ruleConfig.regs && ruleConfig.regs.length
+                            ? {
+                                bool: ruleConfig.regs.every(regItem => regItem.test(val)),
+                                message: col.regMessage || `${col._name}格式不正确`
+                            }
+                            : {
+                                bool: true
+                    };
+                } else {
+                    return {
+                        bool: true
+                    };
+                }
+            }
+        }
+    };
+</script>

package/src/components/list/BriTable.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="bri-table">
+        <ve-table
+            class="bri-table-content"
+            :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="checkboxOption"
+            :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 -->
+        <div v-if="isLoading" class="bri-table-empty bri-table-loading">
+            <slot name="loading">正在加载中，请稍后...</slot>
+        </div>
+        <!-- empty -->
+        <div v-else-if="!data.length" class="bri-table-empty">
+            <slot name="empty">{{ noDataText }}</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTable",
+        props: {
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isLoading: Boolean,
+            noDataText: {
+                type: String,
+                default: "暂无数据"
+            },
+            columns: Array,
+            data: Array,
+            footerData: Array
+        },
+        data () {
+            // 中文文档https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/api
+            return {
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    rowKeyFieldName: "_id",
+                    scrollWidth: "0",
+                    borderY: true,
+                    cellSelectionOption: {
+                        enable: false
+                    },
+                    ...this.propsObj
+                };
+            },
+            columnsList () {
+                return this.columns;
+            },
+
+            // 当前表格状态
+            currentState () {
+                return this.propsObj.state || this.state;
+            },
+            selfClassName () {
+                if (this.loading || !this.data.length) {
+                    return "bri-table-onlyhead";
+                } else {
+                    return "";
+                }
+            },
+
+            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 {
+                    bodyRowEvents: ({ row, rowIndex }) => {
+                        return {
+                            click: (event) => {
+                                this.$emit("click-row", row, rowIndex, event);
+                            },
+                            dblclick: (event) => {
+                                this.$emit("db-click-row", row, rowIndex, event);
+                            }
+                        };
+                    },
+                    ...(this.propsObj.eventCustomOption || {})
+                };
+            },
+            // 全选配置项
+            checkboxOption () {
+                return {
+                    // 行选择改变事件
+                    selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+                        this.$emit(
+                            "selectChange",
+                            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 || {})
+                };
+            },
+            // 列宽改变设置项
+            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("sort-change", sortObj);
+                    },
+                    ...(this.propsObj.sortOption || {})
+                };
+            }
+        },
+        mounted () {
+        },
+        methods: {}
+    };
+</script>