层层递进分组

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;