层层递进分组

gerson

2024-10-08 0cb229bcf8d48a4b80a843c7edc2e13d5ec75021

层层递进分组

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -6,7 +6,6 @@
            <el-table
                ref="tableRef"
                :height="tableHeight"
                border
                :cell-style="tableCellStyle"
                :header-cell-style="tableHeaderCellStyle"
                :data="chunkTableData[pager.index - 1]"
@@ -63,7 +62,8 @@
import { createReusableTemplate } from '@vueuse/core';
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import { CSSProperties, onMounted, reactive, ref, type PropType, nextTick } from 'vue';
import type { CSSProperties } from 'vue';
import { nextTick, onMounted, reactive, ref, type PropType } from 'vue';
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import { debounce, getTextWidth } from '/@/utils/util';
const props = defineProps({
@@ -75,54 +75,67 @@
const [DefineColumns, ReuseColumns] = createReusableTemplate<{
    cols: any[];
}>();
// props.data.title = '哈哈哈哈哈';

const colList = ref([]);
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
const groupColIndex = [];
const groupIndexList = [];
(props.data?.cols ?? []).map((item, index) => {
    if (item.group) {
        groupColIndex.push(index);
        groupIndexList.push(index);
    }
});

const chunkTableData = ref([props.data?.values]);

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (groupColIndex.includes(columnIndex)) {
    const key = `${rowIndex},${columnIndex}`;
    const rowspan = cellRowSpanMap.get(key);
    if (rowspan !== undefined) {
        return {
            rowspan: row.rowspan,
            rowspan,
            colspan: 1,
        };
    } else {
        return {
            rowspan: 1,
            colspan: 1,
        };
    }
};

/**
 * 构建分组结构
 */
const buildGroupData = () => {
    const groupData = _.groupBy(props.data.values, (item, index) => {
        // 找出所有需要 group 的值，加起来
        const groupKey = item.reduce((preVal, curVal, index) => {
            const isGroup = props.data.cols[index].group;
            if (isGroup) {
                preVal += curVal;
            }
            return preVal;
        }, '');
        return groupKey;
    });
// 单元格行合并情况
const cellRowSpanMap = new Map<string, number | undefined>();

/**
 * 构建分组结构，一组一组按层次构建
 * @param i 当前分组的索引位置
 * @param j 当前记录所在行位置
 */
const buildGroupData = (values, i = 0, j = 0) => {
    const curGroupIndex = groupIndexList[i];
    // 不可以分组，直接 return;
    if (curGroupIndex == undefined || values.length === 1) return values;

    const groupData = _.groupBy(values, (item, index) => {
        const groupValue = item[curGroupIndex];
        return groupValue;
    });
    // 顺延下一个分组
    i++;
    // 重新排布一下位置，保证 group 相邻，同时打上 rowspan
    props.data.values = Object.values(groupData).reduce((preVal, curVal) => {
        curVal.map((item, index, array) => {
            item.rowspan = index === 0 ? array.length : undefined;
    const result = Object.values(groupData).reduce((preVal, curVal) => {
        curVal.map((item, index) => {
            // 行列作为 key
            const key = `${j + index},${curGroupIndex}`;
            cellRowSpanMap.set(key, index === 0 ? curVal.length : 0);
        });
        preVal = preVal.concat(curVal);

        preVal = preVal.concat(buildGroupData(curVal, i, j));
        j += curVal.length;
        return preVal;
    }, []);
    return result;
};

/**
@@ -216,7 +229,7 @@
    }

    if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
        buildGroupData();
        props.data.values = buildGroupData(props.data.values);
        calcColWidth(width);
        nextTick(() => {
            calcPagerHeight();
@@ -283,7 +296,7 @@
 */
const calcPagerHeight = () => {
    // 表格内容单元格高度
    const cellHeight = tableRef.value.$el.querySelector('.el-table__body .el-table__cell').clientHeight;
    const cellHeight = tableRef.value.$el.querySelector('.el-table__body .el-table__cell[rowspan="1"]')?.clientHeight ?? 39;
    const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight;

    // 限制高度
@@ -297,7 +310,6 @@
    pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH));

    const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight;


    tableHeight.value = currentHeight;