bri-components 1.4.78 → 1.4.80

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.4.78",
+    "version": "1.4.80",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/components/list/DshCascaderTable.vue

@@ -13,21 +13,15 @@
         ></dsh-render>
 
         <!-- 表格 -->
-        <div class="DshCasTable-main">
-            <div
-                class="DshCasTable-main-center"
-                :style="{
-                    maxHeight: `${contentHeight}px`,
-                    height: `${contentHeight}px`
-                }"
-            >
-                <!-- 表头 -->
-                <dsh-render :render="tableHeadRender"></dsh-render>
-
-                <!-- 数据行 -->
-                <dsh-render :render="tableBodyRender"></dsh-render>
-            </div>
-        </div>
+        <bri-table
+            class="DshCasTable-main"
+            :isLoading="isLoading"
+            :columns="showColumns"
+            :data="isLoading ? [] : showListData"
+            :propsObj="tablePropsObj"
+            @changeSelect="changeSelect"
+            @selectAll="changeSelect"
+        ></bri-table>
 
         <!-- 添加行 -->
         <dsh-render :render="createBtnRender"></dsh-render>
@@ -53,15 +47,16 @@
                 <!-- 搜索条件 -->
                 <dsh-render :render="topSearchRender"></dsh-render>
 
-                <div class="DshCasTable-fullscreen-inner-main DshCasTable-main">
-                    <div class="DshCasTable-main-center">
-                        <!-- 表头 -->
-                        <dsh-render :render="tableHeadRender"></dsh-render>
-
-                        <!-- 数据行 -->
-                        <dsh-render :render="tableBodyRender"></dsh-render>
-                    </div>
-                </div>
+                <!-- 表格 -->
+                <bri-table
+                    class="DshCasTable-fullscreen-inner-main"
+                    :isLoading="isLoading"
+                    :columns="showColumns"
+                    :data="isLoading ? [] : showListData"
+                    :propsObj="tablePropsObj"
+                    @changeSelect="changeSelect"
+                    @selectAll="changeSelect"
+                ></bri-table>
 
                 <!-- 添加行 -->
                 <dsh-render :render="createBtnRender"></dsh-render>
@@ -99,48 +94,7 @@
 
         &-main {
             width: 100%;
-
-            &-center {
-                width: 100%;
-                height: 100%;
-                margin-left: 0px;
-                margin-right: 0px;
-                display: flex;
-                flex-direction: column;
-
-                .table {
-                    border-spacing: 0;
-                    border-collapse: collapse;
-                    border-color: #E5E5E5;
-                    line-height: 18px;
-                }
-
-                // 头部
-                &-top {
-                    width: 100%;
-                    z-index: 99;
-                    overflow: hidden;
-
-                    &-inner {
-                        display: block;
-                        float: left;
-                        width: 10000px;
-                    }
-                }
-
-                // 主体
-                &-list {
-                    width: 100%;
-                    flex: 1;
-                    min-height: 0px;
-                    margin-top: -1px;
-                    overflow: auto;
-
-                    &-inner {
-
-                    }
-                }
-            }
+            height: auto;
         }
 
         &-fullscreen {

package/src/components/list/mixins/DshCascaderTableMixin.js

@@ -10,9 +10,7 @@ export default {
         }
     },
     data () {
-        return {
-            boxWidth: 0
-        };
+        return {};
     },
     computed: {
         selfBasePropsObj () {
@@ -28,14 +26,20 @@ export default {
         oldReadonlyTreeColKeys () {
             return this.isDftSet ? [] : this.selfPropsObj._oldReadonlyTreeColKeys || []; // 配置端有问题，高级依赖时值成undefined了
         },
+
         // 替换tableBaseMixin里的
+        noborderColKeys () {
+            return [
+                ...this.treeColumns.map(colItem => colItem._key),
+                ...this.selfPropsObj._noborderColKeys
+            ];
+        },
         showCreateBtnColKeys () {
             return [
                 ...this.treeFormKeys,
                 ...(this.selfPropsObj._showCreateBtnColKeys || [])
             ];
         },
-        // 顶替tableBaseMixin里的
         searchTitle () {
             return `${this.isSearching ? "筛选" : "全部"}数据，共 ${this.selfTotal} 条；`;
         },
@@ -52,23 +56,12 @@ export default {
 
         showColumns () {
             return this.mergeColumns(this.treeColumns);
-        },
-        // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
-        rowColumnsArr () {
-            return this.transformRowColumnsArr(this.allTreeData, this.treeColumns);
         }
     },
     created () {
         this.init();
     },
-    mounted () {
-        setTimeout(() => {
-            this.$el.querySelector(".DshCasTable-main-center-list").addEventListener("scroll", (e) => {
-                this.$el.querySelector(".DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
-            }, false);
-            this.boxWidth = this.$refs.DshCascaderTable.clientWidth;
-        }, 0);
-    },
+    mounted () { },
     methods: {
         // 初始化
         init () {
@@ -77,292 +70,7 @@ export default {
                 // this.$set(treeFormItem, "canDelete", true);
             });
         },
-        // 点开模态框后处理 -表头跟着内容行滚动
-        dealingOpenModal () {
-            if (this.isEnlargeFlag) {
-                setTimeout(() => {
-                    document.querySelector(".DshCasTable-fullscreen-inner-main .DshCasTable-main-center-list").addEventListener("scroll", (e) => {
-                        document.querySelector(".DshCasTable-fullscreen-inner-main .DshCasTable-main-center-top").scrollLeft = e.srcElement.scrollLeft;
-                    }, false);
-                }, 0);
-            }
-        },
-
-        /* ----------- 渲染函数（声明：为了代码更加规范清晰，return的是h相关的函数，则函数名get开头；return的是h的直接调用，函数名不要get开头）---------- */
-        // 表格表头渲染函数
-        tableHeadRender (h) {
-            return h("div", {
-                class: "DshCasTable-main-center-top"
-            }, [
-                h("div", {
-                    class: "DshCasTable-main-center-top-inner"
-                }, [
-                    h("table", {
-                        class: "table",
-                        attrs: {
-                            border: "1",
-                            cellspacin: "0",
-                            bordercolor: "#E7EDF8"
-                        }
-                    }, [
-                        h("tbody", {
-                            class: ""
-                        }, [
-                            h(
-                                "tr",
-                                {},
-                                this.showColumns.map((column, colIndex) => {
-                                    return this.thRender(h, { column, colIndex });
-                                    // return h("dsh-render", {
-                                    //     props: {
-                                    //         render: this.thRender(h, { column, colIndex })
-                                    //     }
-                                    // })
-                                })
-                            )
-                        ])
-                    ])
-                ])
-            ]);
-        },
-        // 表格内容渲染函数
-        tableBodyRender (h) {
-            return h("div", {
-                class: "DshCasTable-main-center-list"
-            }, [
-                this.isLoading
-                    ? h("bri-loading")
-                    : h("div", {
-                        class: "DshCasTable-main-center-list-inner"
-                    }, [
-                        h("table", {
-                            class: "table",
-                            attrs: {
-                                border: "1",
-                                cellspacin: "0",
-                                bordercolor: "#E7EDF8"
-                            }
-                        }, [
-                            h("tbody", {
-                                class: ""
-                            }, [
-                                this.showListData.length
-                                    ? this.showListData.map((mixedRow, rowIndex) => {
-                                        return h(
-                                            "tr",
-                                            {
-                                                key: mixedRow._id,
-                                                class: ""
-                                            },
-                                            this.rowColumnsArr[rowIndex].map(column => {
-                                                return this.tdRender(h, { row: mixedRow[column.nodeKey || column._key], rowIndex, column });
-                                            })
-                                        );
-                                    })
-                                    // 无数据
-                                    : h(
-                                        "tr",
-                                        {
-                                            class: "bri-table-nodata"
-                                        },
-                                        [
-                                            this.emptyTdRender(h, {})
-                                        ]
-                                    )
-                            ])
-                        ])
-                    ])
-            ]);
-        },
-        // 表头单元格渲染函数 （无法共用contentColumns的renderHeaderCell，因为级联老版表头的无renderHeaderCell）
-        thRender (h, { column, colIndex }) {
-            return h(
-                "th",
-                {
-                    key: column._id,
-                    class: "bri-table-th",
-                    style: this.getThStyle({ column, colIndex })
-                },
-                [
-                    this.contentThCellRender(h, { column, colIndex })
-            ]);
-        },
-        emptyTdRender (h, { row, rowIndex, column }) {
-            return h("td", {
-                style: {
-                    width: `${this.boxWidth}px`,
-                    minWidth: `${this.boxWidth}px`,
-                    maxWidth: `${this.boxWidth}px`
-                },
-                attrs: {
-                    rowspan: 1,
-                    colspan: this.showColumns.length
-                }
-            }, "暂无数据…");
-        },
-        // 内容单元格渲染函数
-        tdRender (h, { row, rowIndex, column }) {
-            return h(
-                "td",
-                {
-                    class: this.bodyCellClass({ row, rowIndex, column }),
-                    style: this.getTdStyle({ row, rowIndex, column }),
-                    attrs: {
-                        rowspan: this.getTdRowSpan({ row, rowIndex, column }),
-                        colspan: this.getTdColSpan({ row, rowIndex, column })
-                    },
-                    on: {
-                        mouseenter: (event) => {
-                            this.$set(this.hoverRecordMap, `${row._id}`, true);
-                        },
-                        mouseleave: (event) => {
-                            this.$set(this.hoverRecordMap, `${row._id}`, false);
-                        }
-                    }
-                },
-                column.colType === "summary"
-                    ? this.getSummaryTdVal({ row, rowIndex, column })
-                    : column.colType === "operation"
-                        ? this.operationTdCellRender(h, { row, rowIndex, column })
-                        : this.contentTdCellRender(h, { row, rowIndex, column })
-            );
-        },
 
-        /* ----------- 方法 ---------- */
-        selfBodyCellClass ({ row, rowIndex, column }) {
-            return `${["tree"].includes(column.colType)
-                ? " bri-table-td-noborder"
-                : ""
-            }`;
-        },
-        // 表头 -获取样式
-        getThStyle ({ column, colIndex }) {
-            const typeData = this.$modFieldMap[column._type] || {};
-            const boxColWidth = this.boxWidth / this.showColumns.length;
-            const calcWidth = (column._name ? column._name.length * 12 : 48) + (column._type === "reference" ? 200 : 32);
-            const dftWidth = Math.max(boxColWidth, this.widthMap[column._type], calcWidth);
-            const width = column._width || dftWidth;
-
-            return {
-                width: `${width}px`,
-                minWidth: `${width}px`,
-                maxWidth: `${width}px`,
-                paddingTop: !this.headHeightAuto ? "10px" : undefined,
-                paddingBottom: !this.headHeightAuto ? "10px" : undefined,
-                textAlign: column._align || typeData.align,
-                "word-break": "break-all",
-                cursor: "pointer"
-            };
-        },
-
-        // 单元格 -获取样式
-        getTdStyle ({ row, rowIndex, column }) {
-            return {
-                ...this.getThStyle({ column }),
-                paddingTop: undefined,
-                paddingBottom: undefined
-            };
-        },
-        // 单元格 -获取行合并数
-        getTdRowSpan ({ row, rowIndex, column }) {
-            return row.total || 1;
-        },
-        // 单元格 -获取列合并数
-        getTdColSpan ({ row, rowIndex, column }) {
-            return 1;
-        },
-        // 单元格 -汇总节点单元格-获取值
-        getSummaryTdVal ({ row, rowIndex, column }) {
-            if (column._calField && column._operator) {
-                const calFieldFormItem = this.selfColumns.find(item => item._key === column._calField);
-
-                if (calFieldFormItem) {
-                    let loop = (nodes, arr) => {
-                        return nodes.reduce((arr, node) => {
-                            if (node.children.length) {
-                                return loop(node.children, arr);
-                            } else {
-                                arr.push(node[column._calField] || 0);
-                                return arr;
-                            }
-                        }, arr);
-                    };
-                    let list = loop(row.children, []);
-
-                    return this.$calNumList(list, column._operator, calFieldFormItem);
-                } else {
-                    return `来源列${column._calField}被删除`;
-                }
-            } else {
-                return !column._calField && !column._operator
-                    ? "未选择来源列和算法"
-                    : !column._calField
-                        ? "未选择来源列"
-                        : "未选择算法";
-            }
-        },
-        // 加工单元格对应的配置
-        getSelfResetCol ({ row, rowIndex, column }) {
-            return column.colType === "tree"
-                ? {
-                    _heightAuto: true,
-                    _placeholder: " "
-                }
-                : {};
-        },
-        // 单元格本身是否可编辑性 -针对表头列
-        getSelfColCanEdit ({ row, rowIndex, column }) {
-            return (this.getIsDftRow(row) ? !this.dftReadonlyTreeColKeys.includes(column._key) : true) && // 默认行的某列是否可编辑
-            (row.__old__ === true ? !this.oldReadonlyTreeColKeys.includes(column._key) : true); // 老数据行里某些列不可编辑
-        },
-        // getNewRowData时，额外补充的行相关的数据（针对层级属性的列）
-        getSelfNewRowData (level, list = []) {
-            const column = this.treeForm[level - 1];
-            const dftVal = column._default;
-            const initDftVal = this.initDftValMap[column._type];
-
-            return {
-                name: this.$isEmptyData(dftVal)
-                    ? initDftVal
-                    : dftVal
-            };
-        },
-
-        /* ----------- 工具方法 ---------- */
-        // 合并表头
-        mergeColumns (treeForm = [], subForm = this.showContentColumns) {
-            return [
-                ...treeForm.reduce((arr, treeFormItem) => {
-                    return arr.concat(
-                        {
-                            ...treeFormItem,
-                            colType: "tree"
-                        },
-                        treeFormItem._treeSubForm.map(treeSubFormItem => (
-                            {
-                                ...treeSubFormItem,
-                                nodeKey: treeFormItem._key,
-                                colType: "summary"
-                            }
-                        ))
-                    );
-                }, []),
-                ...subForm.map(subFormItem => ({
-                    ...subFormItem,
-                    nodeKey: treeForm[treeForm.length - 1]._key,
-                    colType: "data"
-                })),
-                ...(
-                    !this.isSearching && this.rowOperationList.length
-                        ? [{
-                            ...this.operationColumn,
-                            nodeKey: treeForm[treeForm.length - 1]._key,
-                            colType: "operation"
-                        }]
-                        : []
-                )
-            ];
-        },
         // 转化树数据
         getCalcuedTree (nodes = [], treeForm = [], subForm = []) {
             treeForm.forEach((treeFormItem, treeFormIndex) => {
@@ -425,28 +133,6 @@ export default {
             this.initFlag = false;
             return nodes;
         },
-        // 转化渲染使用的columns数组
-        transformRowColumnsArr (nodes = [], treeForm = []) {
-            const loop = (nodes = [], rowColumnsArr = []) => {
-                nodes = this.getFilteredNodes(nodes);
-
-                return nodes.reduce((rowColumnsArr, node, nodeIndex) => {
-                    if (nodeIndex !== 0 || rowColumnsArr.length === 0) {
-                        rowColumnsArr.push(
-                            this.mergeColumns(treeForm.slice(node.level - 1))
-                        );
-                    }
-
-                    if (node.children && node.children.length) {
-                        return loop(node.children, rowColumnsArr);
-                    } else {
-                        return rowColumnsArr;
-                    }
-                }, rowColumnsArr);
-            };
-
-            return loop(nodes);
-        },
         // 转化表格数据
         transformRows (nodes = [], treeForm = []) {
             const loop = (nodes = [], rows = []) => {
@@ -455,7 +141,14 @@ export default {
                 return nodes.reduce((rows, node, nodeIndex) => {
                     // 创建行，并把节点数据（对象类型）注入到行对象内
                     if (nodeIndex !== 0 || rows.length === 0) {
-                        rows.push({ _id: this.$ObjectID().str });
+                        rows.push({
+                            _id: this.$ObjectID().str,
+                            __isRendered__: true,
+                            __isShow__: true,
+                            __isTmpShow__: true
+                            // __isSearchShow__: false,
+                            // __isExpand__: false,
+                        });
                     }
                     const curCol = treeForm[node.level - 1];
                     const curRow = rows[rows.length - 1];
@@ -474,6 +167,53 @@ export default {
             };
             return loop(nodes);
         },
+        // 合并表头
+        mergeColumns (treeForm = [], subForm = this.showContentColumns) {
+            return this.$transformToColumns(
+                [
+                    ...treeForm.reduce((arr, treeFormItem) => ([
+                        ...arr,
+                        {
+                            ...treeFormItem,
+                            colType: "tree"
+                        },
+                        ...treeFormItem._treeSubForm.map(treeSubFormItem => ({
+                            ...treeSubFormItem,
+                            nodeKey: treeFormItem._key,
+                            colType: "summary"
+                        }))
+                    ]), []),
+                    ...subForm.map(subFormItem => ({
+                        ...subFormItem,
+                        nodeKey: treeForm[treeForm.length - 1]._key,
+                        colType: "data"
+                    })),
+                    ...(
+                        !this.isSearching && this.rowOperationList.length
+                            ? [{
+                                ...this.operationColumn,
+                                nodeKey: treeForm[treeForm.length - 1]._key,
+                                colType: "operation"
+                            }]
+                            : []
+                    )
+                ].map(colItem => ({
+                    ...colItem,
+                    renderHeaderCell: ({ column }, h) => {
+                        return this.contentThCellRender(h, { column });
+                    },
+                    renderBodyCell: ({ row, rowIndex, column }, h) => {
+                        row = row[column.nodeKey || column._key];
+
+                        return column.colType === "summary"
+                            ? this.getSummaryTdVal({ row, rowIndex, column })
+                            : column.colType === "operation"
+                                ? this.operationTdCellRender(h, { row, rowIndex, column })
+                                : this.contentTdCellRender(h, { row, rowIndex, column });
+                    }
+                }))
+            );
+        },
         getFilteredNodes (nodes = []) {
             const loop = (nodes = []) => {
                 return nodes.filter(rowItem => {
@@ -491,6 +231,73 @@ export default {
             };
 
             return loop(nodes);
+        },
+
+
+        bodyCellSpan ({ row, rowIndex, column }) {
+            row = row[column.nodeKey || column._key];
+            return {
+                rowspan: row
+                    ? row.total || 1
+                    : 0,
+                colspan: 1
+            };
+        },
+        // 单元格 -汇总节点单元格-获取值
+        getSummaryTdVal ({ row, rowIndex, column }) {
+            if (column._calField && column._operator) {
+                const calFieldFormItem = this.selfColumns.find(item => item._key === column._calField);
+
+                if (calFieldFormItem) {
+                    let loop = (nodes, arr) => {
+                        return nodes.reduce((arr, node) => {
+                            if (node.children.length) {
+                                return loop(node.children, arr);
+                            } else {
+                                arr.push(node[column._calField] || 0);
+                                return arr;
+                            }
+                        }, arr);
+                    };
+                    let list = loop(row.children, []);
+
+                    return this.$calNumList(list, column._operator, calFieldFormItem);
+                } else {
+                    return `来源列${column._calField}被删除`;
+                }
+            } else {
+                return !column._calField && !column._operator
+                    ? "未选择来源列和算法"
+                    : !column._calField
+                        ? "未选择来源列"
+                        : "未选择算法";
+            }
+        },
+        // 加工单元格对应的配置
+        getSelfResetCol ({ row, rowIndex, column }) {
+            return column.colType === "tree"
+                ? {
+                    _heightAuto: true,
+                    _placeholder: " "
+                }
+                : {};
+        },
+        // 单元格本身是否可编辑性 -针对表头列
+        getSelfColCanEdit ({ row, rowIndex, column }) {
+            return (this.getIsDftRow(row) ? !this.dftReadonlyTreeColKeys.includes(column._key) : true) && // 默认行的某列是否可编辑
+            (row.__old__ === true ? !this.oldReadonlyTreeColKeys.includes(column._key) : true); // 老数据行里某些列不可编辑
+        },
+        // getNewRowData时，额外补充的行相关的数据（针对层级属性的列）
+        getSelfNewRowData (level, list = []) {
+            const column = this.treeForm[level - 1];
+            const dftVal = column._default;
+            const initDftVal = this.initDftValMap[column._type];
+
+            return {
+                name: this.$isEmptyData(dftVal)
+                    ? initDftVal
+                    : dftVal
+            };
         }
     }
 };

package/src/components/list/mixins/DshFlatTableMixin.js

@@ -83,10 +83,11 @@ export default {
         curPageShowListData () {
             return this.pagePropsObj.page >= 1
                 ? (this.pagePropsObj.page - 1) * this.pagePropsObj.pagesize >= this.showListData.length
-                    ? this.showListData.slice(
-                        (this.pagePropsObj.page - 2) * this.pagePropsObj.pagesize,
-                        (this.pagePropsObj.page - 1) * this.pagePropsObj.pagesize
-                    )
+                    ? this.showListData.slice(-(
+                        this.showListData.length % this.pagePropsObj.pagesize === 0
+                            ? this.pagePropsObj.pagesize
+                            : this.showListData.length % this.pagePropsObj.pagesize
+                    ))
                     : this.showListData.slice(
                         (this.pagePropsObj.page - 1) * this.pagePropsObj.pagesize,
                         this.pagePropsObj.page * this.pagePropsObj.pagesize

package/src/components/list/mixins/tableBaseMixin.js

@@ -786,7 +786,7 @@ export default {
         isEnlarge (bool) {
             setTimeout(() => {
                 this.isEnlargeFlag = bool;
-                this.dealingOpenModal && this.dealingOpenModal();
+                // this.dealingOpenModal && this.dealingOpenModal();
             }, 0);
         }
     },
@@ -826,8 +826,8 @@ export default {
                 conditions: []
             };
             this.hideStatus = true;
-            this.changePage(1);
 
+            this.changePage && this.changePage(1);
             this.selfReset && this.selfReset();
         },
         loadingFunc () {
@@ -843,7 +843,8 @@ export default {
             if (this.parentObj.__isCreate__ !== true) {
                 this.isExpandAction = false;
                 this.dftAdvSearch.conditions = conditions;
-                this.changePage(1);
+
+                this.changePage && this.changePage(1);
             }
         },
         // 列表选择项改变
@@ -1423,10 +1424,6 @@ export default {
                 `${this.bgColKeys.includes(column._key)
                     ? " bri-table-td-bg"
                     : ""
-                }` +
-                `${this.selfBodyCellClass
-                    ? this.selfBodyCellClass({ row, rowIndex, column })
-                    : ""
                 }`;
         },
         eventCustomOption ({ row, rowIndex, column }) {