bri-components 1.4.7-0 → 1.4.7

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

@@ -1,7 +1,14 @@
 export default {
     mixins: [],
     components: {},
-    props: {},
+    props: {
+        rowspanMap: {
+            type: Object,
+            default () {
+                return {};
+            }
+        }
+    },
     data () {
         return {};
     },
@@ -12,7 +19,31 @@ export default {
             };
         },
         mergeRowColKeys () {
-            return this.selfPropsObj._mergeRowColKeys || []; // 配置端有问题，高级依赖时值成undefined了
+            const mergeRowColKeys = this.selfPropsObj._mergeRowColKeys || []; // 配置端有问题，高级依赖时值成undefined了
+            return this.selfColumns
+                .filter(colItem => mergeRowColKeys.includes(colItem._key))
+                .map(colItem => colItem._key);
+        },
+        // 一级合并列keys（一级合并列：左侧第一合并列和右侧和并列）
+        firstMergeRowColKeys () {
+            if (this.mergeRowColKeys.length) {
+                const firstNormalIndex = this.selfColumns.findIndex(colItem => !this.mergeRowColKeys.includes(colItem._key));
+
+                // -1代表无普通单元格，0代表第一列就是普通单元格
+                return [-1, 0].includes(firstNormalIndex)
+                    ? this.mergeRowColKeys
+                    : [
+                        this.mergeRowColKeys[0],
+                        ...this.selfColumns
+                            .filter((colItem, colIndex) => colIndex > firstNormalIndex && this.mergeRowColKeys.includes(colItem._key))
+                            .map(colItem => colItem._key)
+                ];
+            } else {
+                return [];
+            }
+        },
+        notFirstMergeRowColKeys () {
+            return this.mergeRowColKeys.filter(colKey => !this.firstMergeRowColKeys.includes(colKey));
         },
 
         allListData () {
@@ -23,6 +54,12 @@ export default {
             this.initFlag = false;
             return this.data;
         },
+        allListMap () {
+            return this.$arrToMap(this.allListData, "_id");
+        },
+        // allListIds () {
+        //     return this.allListData.map(rowItem => rowItem._id);
+        // },
         footerData () {
             return this.isSearching
                 ? []
@@ -74,53 +111,119 @@ export default {
                     ];
                 }
             };
-        },
-        mergeRowColumns () {
-            return this.selfColumns.filter(colItem => this.mergeRowColKeys.includes(colItem._key));
         }
     },
-    created () { },
+    created () {
+        this.initRowspan();
+    },
     methods: {
+        // 本身的初始化
+        selfReset () {
+            this.initRowspan();
+        },
+        // 初始化合并单元格的rowspan
+        initRowspan () {
+            if (this.mergeRowColKeys.length) {
+                this.$set(this.tableDataObj, "rowspanMap", this.tableDataObj.rowspanMap || {});
+
+                this.allListData.forEach((rowItem, rowIndex) => {
+                    this.mergeRowColKeys.forEach(colKey => {
+                        const column = { _key: colKey };
+
+                        // 新增时，行的_id被置换，rowspanMap也要相应置换
+                        if (this.idRecordMap[rowItem._id]) {
+                            const oldId = this.idRecordMap[rowItem._id];
+                            this.rowspanMap[this.getMixKey(rowItem, column)] = this.getRealRowspan({
+                                row: { ...rowItem, _id: oldId },
+                                rowIndex,
+                                column
+                            });
+
+                            // 清除rowspanMap里和默认行老_id相关的
+                            delete this.rowspanMap[this.getMixKey({ _id: oldId }, column)];
+                        }
+                        else {
+                            this.rowspanMap[this.getMixKey(rowItem, column)] = this.getRealRowspan({ row: rowItem, rowIndex, column });
+                        }
+                    });
+                });
+
+                // 清除rowspanMap无用的（针对老数据）
+                Object.keys(this.rowspanMap).forEach(mixKey => {
+                    const id = mixKey.split("dsh")[0];
+                    if (!this.allListMap[id]) {
+                        delete this.rowspanMap[mixKey];
+                    }
+                });
+            }
+        },
+
         // 点击 -添加行
-        clickCreate (operationItem, row, rowIndex, col) {
+        clickCreate (operationItem, row, rowIndex, column) {
+            const curColKey = column ? column._key : undefined;
             const list = this.data;
             const newRow = this.getNewRowData();
 
             // 处理单元格合并相关
-            if (col) {
-                // 当前列是合并列，则该列之前的合并列，要复制这一行对应列的值；
-                if (this.mergeRowColKeys.includes(col._key)) {
-                    const newList = this.allListData.slice(rowIndex); // 从该行开始截取
-                    const nextRowIndex = this.$isEmptyData(row[col._key])
-                        ? 1
-                        : newList.findIndex(rowItem => rowItem[col._key] !== row[col._key]); // 寻找该单元格值开始不一样的行(特殊情况是最后一行，nextRowIndex为-1)
-                    row = nextRowIndex < 0
-                        ? newList[newList.length - 1]
-                        : newList[nextRowIndex - 1]; // 取该单元格值一样的最后一行
-
-                    const colIndex = this.mergeRowColumns.findIndex(column => column._key === col._key);
-                    this.mergeRowColumns.reduce((obj, column, columnIndex) => {
-                        return columnIndex < colIndex
-                            ? Object.assign(obj, {
-                                [column._key]: this.$deepCopy(row[column._key])
-                            })
-                            : obj;
-                    }, newRow);
+            if (this.mergeRowColKeys.length) {
+                // 非底部按钮添加时
+                if (row) {
+                    // 寻找对应的行数据 -当前列是合并列会寻找，普通列不用找（就是row）
+                    if (this.mergeRowColKeys.includes(curColKey)) {
+                        const newList = this.allListData.slice(rowIndex); // 从该行开始截取
+                        const nextRowIndex = this.$isEmptyData(row[curColKey])
+                            ? 1
+                            : newList.findIndex(rowItem => !this.isCompareSame(column, row, rowItem)); // 寻找该单元格值开始不一样的行(特殊情况是最后一行，nextRowIndex为-1)
+                        row = nextRowIndex < 0
+                            ? newList[newList.length - 1]
+                            : newList[nextRowIndex - 1]; // 取该单元格值一样的最后一行
+                    }
+
+                    // 寻找要复制值的列
+                    // 当前列：一级合并列，不复制值；
+                    if (this.firstMergeRowColKeys.includes(curColKey)) {
+                        // 新增的行做rowspan记录
+                        this.mergeRowColKeys.forEach(colKey => {
+                            this.rowspanMap[this.getMixKey(newRow, { _key: colKey })] = 1; // 新增的行做rowspan记录
+                        });
+                    }
+                    // 当前列：普通合并列(非一级合并列)，该列之前的合并列和一级合并列 复制值给新的行
+                    // 当前列：非合并列 -全部复制值给新的行
+                    else {
+                        const notFirstCopyColKeys = this.notFirstMergeRowColKeys.includes(curColKey)
+                            ? this.notFirstMergeRowColKeys.filter((colKey, colIndex, list) => colIndex < list.findIndex(colKey => colKey === curColKey))
+                            : this.notFirstMergeRowColKeys;
+                        const noCopyColKeys = this.notFirstMergeRowColKeys.includes(curColKey)
+                            ? this.notFirstMergeRowColKeys.filter((colKey, colIndex, list) => colIndex >= list.findIndex(colKey => colKey === curColKey))
+                            : [];
+                        const copyColKeys = notFirstCopyColKeys.concat(this.firstMergeRowColKeys);
+
+                        // 复制值
+                        copyColKeys.reduce((obj, colKey, colIndex) => {
+                            return Object.assign(obj, {
+                                [colKey]: this.$deepCopy(row[colKey])
+                            });
+                        }, newRow);
+
+                        // 做rowspan记录
+                        copyColKeys.forEach(colKey => {
+                            this.createMergeUnitRowspan({ row, rowIndex, column: { _key: colKey } });
+                            this.rowspanMap[this.getMixKey(newRow, { _key: colKey })] = 0; // 新增的行做rowspan记录
+                        }, newRow);
+                        noCopyColKeys.forEach(colKey => {
+                            this.rowspanMap[this.getMixKey(newRow, { _key: colKey })] = 1; // 新增的行做rowspan记录
+                        });
+                    }
                 }
-                // 当前列是非合并列，按该列前的最后合并列的操作处理（操作列时，colIndex < 0）
+                // 底部按钮添加时
                 else {
-                    const colIndex = this.selfColumns.findIndex(column => column._key === col._key);
-                    const mergeRowColumns = this.selfColumns.filter((column, columnIndex) =>
-                        (colIndex < 0 ? true : columnIndex <= colIndex) &&
-                        this.mergeRowColKeys.includes(column._key)
-                    );
-                    mergeRowColumns.slice(0, mergeRowColumns.length - 1).reduce((obj, column) => {
-                        return Object.assign(obj, {
-                            [column._key]: this.$deepCopy(row[column._key])
-                        });
-                    }, newRow);
+                    // 新增的行做rowspan记录
+                    this.mergeRowColKeys.forEach(colKey => {
+                        this.rowspanMap[this.getMixKey(newRow, { _key: colKey })] = 1; // 新增的行做rowspan记录
+                    });
                 }
             }
+
             const newRowIndex = row
                 ? list.findIndex(rowItem => rowItem._id === row._id) + 1
                 : list.length;
@@ -134,47 +237,129 @@ export default {
                 title: "提示",
                 content: "确定删除吗？",
                 onOk: () => {
+                    // 处理单元格合并相关
+                    if (this.mergeRowColKeys.length) {
+                        this.mergeRowColKeys.forEach(colKey => {
+                            this.deleteMergeUnitRowspan({ row, rowIndex, column: { _key: colKey } });
+                        });
+                    }
                     this.data.splice(rowIndex, 1);
 
                     this.change("deleteRow", row, rowIndex, null);
                 }
             });
         },
+        quickChangeVal (operationItem, row, rowIndex, column, params) {
+            this.$set(this.ruleRecordMap, this.getMixKey(row, column), { showRuleMessage: true });
+            this.dealSameRowsVal({ row, rowIndex, column });
+
+            this.change("quickChangeVal", row, rowIndex, column, ...params);
+        },
+        changeVal (operationItem, row, rowIndex, column, params) {
+            this.$set(this.ruleRecordMap, this.getMixKey(row, column), { showRuleMessage: true });
+            if (!["text", "textarea", "idcard", "email", "phone", "url", "password", "serialNumber"].includes(column._key)) {
+                this.dealSameRowsVal({ row, rowIndex, column });
+            }
+
+            this.change("changeVal", row, rowIndex, column, ...params);
+        },
 
         /* ----------- 方法 ---------- */
-        selfBodyCellClass ({ row, rowIndex, column }) {
-            return `${this.mergeRowColKeys && this.mergeRowColKeys.includes(column._key)
-                ? " bri-table-td-merge"
-                : ""
-            }`;
+        // 加工单元格对应的配置
+        getSelfResetCol ({ row, rowIndex, column }) {
+            return this.mergeRowColKeys.includes(column._key)
+                ? {
+                    _heightAuto: true
+                }
+                : {};
         },
         bodyCellSpan ({ row, rowIndex, column }) {
-            rowIndex = this.showListData.findIndex(dataItem => dataItem._id === row._id);
+            return {
+                rowspan: this.mergeRowColKeys.includes(column._key)
+                    ? this.isSearching
+                        ? this.getRowspan({ row, rowIndex, column })
+                        : this.getRealRowspan({ row, rowIndex, column })
+                    : 1,
+                colspan: 1
+            };
+        },
+        // 获取合并单元格真实的rowspan
+        getRealRowspan ({ row, rowIndex, column }) {
+            return ![undefined, null].includes(this.rowspanMap[this.getMixKey(row, column)])
+                ? this.rowspanMap[this.getMixKey(row, column)]
+                : ![undefined, null].includes(this.rowspanMap[this.getMixKey(row, column, false)])
+                    ? this.rowspanMap[this.getMixKey(row, column, false)]
+                    : this.getRowspan({ row, rowIndex, column }, this.allListData);
+        },
+        // 计算rowspan
+        getRowspan ({ row, rowIndex, column }, list = this.showListData) {
+            let rowspan = 1;
+            rowIndex = list.findIndex(dataItem => dataItem._id === row._id);
 
-            // 合并单元格（单元格值为空时不合并）
             if (
                 this.mergeRowColKeys.includes(column._key) &&
-                rowIndex > -1 &&
-                !this.$isEmptyData(row[column._key])
+                rowIndex > -1 // 代表显示出来的行
             ) {
-                if (
-                    rowIndex !== 0 &&
-                    row[column._key] === this.showListData[rowIndex - 1][column._key]
-                ) {
-                    return {
-                        rowspan: 0,
-                        colspan: 0
-                    };
+                if (rowIndex !== 0 && this.isCompareSame(column, row, list[rowIndex - 1])) {
+                    rowspan = 0;
                 } else {
-                    const newList = this.showListData.slice(rowIndex);
-                    const newIndex = newList.findIndex(rowItem => row[column._key] !== rowItem[column._key]);
-
-                    return {
-                        rowspan: newIndex === -1 ? newList.length : newIndex,
-                        colspan: 1
-                    };
+                    const newList = list.slice(rowIndex + 1);
+                    const newIndex = newList.findIndex(rowItem => !this.isCompareSame(column, row, rowItem));
+                    rowspan = 1 + (newIndex === -1 ? newList.length : newIndex);
                 }
             }
+
+            return rowspan;
+        },
+        // 添加一行后 处理合并单元格的rowspan
+        createMergeUnitRowspan ({ row, rowIndex, column }, list = this.allListData) {
+            rowIndex = list.findIndex(dataItem => dataItem._id === row._id);
+
+            if (rowIndex > -1) {
+                let fistMergeRow = this.rowspanMap[this.getMixKey(row, column)] === 0
+                    ? list.slice(0, rowIndex).findLast(rowItem => this.rowspanMap[this.getMixKey(rowItem, column)] > 1)
+                    : row;
+
+                this.rowspanMap[this.getMixKey(fistMergeRow, column)] = this.rowspanMap[this.getMixKey(fistMergeRow, column)] + 1;
+            }
+            else {
+                this.rowspanMap[this.getMixKey(row, column)] = 1;
+            }
+        },
+        // 删除一行后 处理合并单元格的rowspan
+        deleteMergeUnitRowspan ({ row, rowIndex, column }, list = this.allListData) {
+            rowIndex = list.findIndex(dataItem => dataItem._id === row._id);
+            let fistMergeRow = this.rowspanMap[this.getMixKey(row, column)] === 0
+                ? list.slice(0, rowIndex).findLast(rowItem => this.rowspanMap[this.getMixKey(rowItem, column)] > 1)
+                : row;
+
+            // 当前单元格合并了下面的 -把合并数减去1给下一单元格
+            if (this.rowspanMap[this.getMixKey(row, column)] > 1) {
+                nextRow = list[rowIndex + 1];
+                this.rowspanMap[this.getMixKey(nextRow, column)] = this.rowspanMap[this.getMixKey(row, column)] - 1;
+            }
+            // 当前单元格被上面的合并了 -最上面的合并单元格合并数减去1
+            else if (this.rowspanMap[this.getMixKey(row, column)] === 0) {
+                this.rowspanMap[this.getMixKey(fistMergeRow, column)] = this.rowspanMap[this.getMixKey(fistMergeRow, column)] - 1;
+            }
+            // 当前单元格单独存在（无合并）
+            else if (this.rowspanMap[this.getMixKey(row, column)] === 1) {
+                // 无处理
+            }
+
+            // 清除被删除单元格的rowspan记录
+            delete this.rowspanMap[this.getMixKey(row, column)];
+        },
+
+        // 合并单元格的行，某列的值全部跟着修改
+        dealSameRowsVal ({ row, rowIndex, column }, list = this.allListData) {
+            if (this.mergeRowColKeys.includes(column._key) && this.rowspanMap[this.getMixKey(row, column)] > 1) {
+                const indexInAll = list.findIndex(dataItem => dataItem._id === row._id);
+                list.slice(indexInAll + 1, indexInAll + this.rowspanMap[this.getMixKey(row, column)])
+                    .forEach(rowItem => {
+                        rowItem[column._key] = this.$deepCopy(row[column._key]);
+                });
+            }
         }
     }
 };