From 127b50081163e7c1cd62bc61650a53ea5bf05164 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 09 十月 2024 14:51:48 +0800
Subject: [PATCH] Merge branch 'test' of http://47.103.154.90:83/r/WI/Web.Admin.V1.0 into test

---
 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue |  347 ++++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 232 insertions(+), 115 deletions(-)

diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 2cccabb..015c6ae 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -1,23 +1,22 @@
 <!-- 鏌ヨ鏈�鏂拌鍛婁俊鎭� -->
 <template>
 	<div>
-		<span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
-		<div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
+		<!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
+		<div class="w-full flex-column" ref="containerRef" v-resize="resizeHandler">
 			<el-table
 				ref="tableRef"
-				border
+				:maxHeight="tableHeight"
 				:cell-style="tableCellStyle"
 				:header-cell-style="tableHeaderCellStyle"
-				:data="data?.values"
+				:data="chunkTableData[pager.index - 1]"
 				:spanMethod="objectSpanMethod"
-
 				class="w-full h-full"
 				cellClassName="text-sm"
 				headerCellClassName="text-sm"
 			>
-				<template v-if="data?.cols?.length > 0">
+				<DefineColumns v-slot="{ cols }">
 					<el-table-column
-						v-for="(item, index) in colList"
+						v-for="(item, index) in cols"
 						:label="item.title"
 						:width="item.width"
 						:sortable="item.type === 'time'"
@@ -25,16 +24,45 @@
 						:prop="index + ''"
 						show-overflow-tooltip
 					/>
+				</DefineColumns>
+				<el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
+					<template v-if="data?.cols?.length > 0">
+						<el-table-column
+							v-for="(item, index) in colList"
+							:label="item.title"
+							:width="item.width"
+							:sortable="item.type === 'time'"
+							:key="index"
+							:prop="index + ''"
+							show-overflow-tooltip
+						/>
+					</template>
+				</el-table-column>
+				<template v-else>
+					<template v-if="data?.cols?.length > 0">
+						<ReuseColumns :cols="colList" />
+					</template>
 				</template>
 			</el-table>
+			<el-pagination
+				style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important"
+				small
+				hide-on-single-page
+				v-model:current-page="pager.index"
+				v-model:page-size="pager.size"
+				layout="total,prev,pager,next,jumper"
+				:total="pager.total"
+			/>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
 import type { TableInstance } from 'element-plus';
 import _ from 'lodash';
-import { CSSProperties, onMounted, ref, type PropType } 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({
@@ -43,25 +71,156 @@
 	},
 });
 
+const [DefineColumns, ReuseColumns] = createReusableTemplate<{
+	cols: any[];
+}>();
 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]);
+// FIXME:  濡傛灉鍏ㄩ儴 group 閮戒负 true锛屾伆濂芥渶鍚庡鏉¤褰曚篃鍙互褰掍负涓�缁勶紝寰堝彲鑳芥樉绀轰笉瀵癸紝灏戜簡鍑犳潯閲嶅鐨勬暟鎹�
 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 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
+	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(buildGroupData(curVal, i, j));
+		j += curVal.length;
+		return preVal;
+	}, []);
+	return result;
+};
+
+/**
+ * 璁＄畻姣忎竴鍒楃殑瀹藉害
+ * 1锛夋�诲灏忎簬瀹瑰櫒瀹斤細鐩存帴鎸夋瘮渚嬪垎
+ * 2锛夋�诲澶т簬瀹瑰櫒瀹斤細鍏堝畬鍏ㄦ弧瓒虫渶灏忕殑瀹藉害锛岀洿鍒板埌涓嶆弧瓒冲搴︾殑鍦版柟锛岀劧鍚庡墿浣欏搴︼紝鎸夊搴︽瘮渚嬪垎閰�
+ * 3锛夎绠楀畬鐨勫搴︽斁鍦� colList.value 鐨� width 灞炴�т笂
+ * @param width
+ */
+const calcColWidth = (width) => {
+	const maxStrList = props.data.cols.map((item) => item.title);
+	const maxLenList = props.data.cols.map((item) => item.title.gblen());
+	for (const item of props.data.values) {
+		item.map((subItem, index) => {
+			const subItemLen = subItem?.gblen();
+			if (maxLenList[index] < subItemLen) {
+				maxLenList[index] = subItemLen;
+				maxStrList[index] = subItem;
+			}
+		});
+	}
+	// 鎬诲
+	let sumWidth = 0;
+	// 璁＄畻瀹為檯鍒楀
+	let maxWidthList = maxStrList.map((item, index) => {
+		const width =
+			getTextWidth(item, {
+				size: '0.875rem',
+			}) + measureWidthOffset;
+		sumWidth += width;
+		return {
+			index,
+			maxWidth: width,
+		};
+	});
+	// 鎬诲灏忎簬瀹瑰櫒瀹藉害
+	if (sumWidth <= width) {
+		// 鎸夋瘮渚嬪垎閰嶅搴�
+		maxWidthList = maxWidthList.map((item) => ({
+			...item,
+			width: (item.maxWidth / sumWidth) * width,
+		}));
+		// 鍏堟弧瓒冲皬鐨勶紝鍓╀綑绌洪棿鎸夋瘮渚嬪潎鍒�
+	} else {
+		// 褰撳墠宸叉弧瓒冲搴�
+		let curWidth = 0;
+		// 鎺掑ソ搴忕殑瀹藉害鍒楄〃
+		const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
+		// 鍓╀綑瀹藉害
+		let restWidth = width;
+		let notFitStartIndex = 1;
+		for (let index = 0; index < sortedWidthList.length; index++) {
+			const item = sortedWidthList[index];
+			// 鍔犱笂褰撳墠瀹藉害
+			curWidth += item.maxWidth;
+			// 娌″崰婊″鍣紝鎴栨槸鏈�灏忕殑閭ｄ釜锛岀洿鎺ュ彇瀹冪殑鏈�澶у搴�
+			if (curWidth < width || index === 0) {
+				maxWidthList[item.index].width = item.maxWidth;
+				continue;
+			}
+			// 鍔犱笂褰撳墠瀹藉害瓒呭嚭褰撳墠瀹瑰櫒锛屽氨涓嶅姞锛岃绠椾笉鍔犳椂鐨勫墿浣欏搴�
+			restWidth = width - (curWidth - item.maxWidth);
+			// 褰撳姞涓� index 绱㈠紩澶勭殑瀹藉害鏃讹紝姝ｅソ瀹藉害瓒呭嚭瀹瑰櫒
+			notFitStartIndex = index;
+			break;
+		}
+		// 鍓╀綑瀹藉害
+		let sumRestMaxWidth = 0;
+		// 鍓╀綑鍔犱笂浼氳秴鍑哄鍣ㄥ搴︾殑绱㈠紩
+		const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
+			sumRestMaxWidth += item.maxWidth;
+			return item.index;
+		});
+
+		// 鎸� maxWidth 姣斾緥鍒嗛厤鍓╀綑绌洪棿
+		for (const item of notFitIndexList) {
+			maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
+			// if (maxWidthList[item].maxWidth <= restWidth) {
+			// 	maxWidthList[item].width = restWidth;
+			// }
+		}
+	}
+	colList.value = props.data.cols.map((item, index) => ({
+		...item,
+		width: maxWidthList[index].width,
+	}));
 };
 const resizeEvent = ({ width, height }) => {
 	if (width === 0 || height === 0) {
@@ -69,110 +228,27 @@
 	}
 
 	if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
-		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;
+		props.data.values = buildGroupData(props.data.values);
+		calcColWidth(width);
+		nextTick(() => {
+			calcPagerHeight();
 		});
-
-		// 閲嶆柊鎺掑竷涓�涓嬩綅缃紝淇濊瘉 group 鐩搁偦锛屽悓鏃舵墦涓� rowspan
-		props.data.values = Object.values(groupData).reduce((preVal, curVal) => {
-			curVal.map((item, index, array) => {
-				item.rowspan = index === 0 ? array.length : undefined;
-			});
-			preVal = preVal.concat(curVal);
-			return preVal;
-		}, []);
-
-		const maxStrList = props.data.cols.map((item) => item.title);
-		const maxLenList = props.data.cols.map((item) => item.title.gblen());
-		for (const item of props.data.values) {
-			item.map((subItem, index) => {
-				const subItemLen = subItem?.gblen();
-				if (maxLenList[index] < subItemLen) {
-					maxLenList[index] = subItemLen;
-					maxStrList[index] = subItem;
-				}
-			});
-		}
-		// 鎬诲
-		let sumWidth = 0;
-		let maxWidthList = maxStrList.map((item, index) => {
-			const width =
-				getTextWidth(item, {
-					size: '0.875rem',
-				}) + measureWidthOffset;
-			sumWidth += width;
-			return {
-				index,
-				maxWidth: width,
-			};
-		});
-		if (sumWidth <= width) {
-			maxWidthList = maxWidthList.map((item) => ({
-				...item,
-				width: (item.maxWidth / sumWidth) * width,
-			}));
-			// 鍏堟弧瓒冲皬鐨勶紝鍓╀綑绌洪棿鎸夋瘮渚嬪潎鍒�
-		} else {
-			let curWidth = 0;
-			const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
-			let restWidth = width;
-			let notFitStartIndex = 1;
-			for (let index = 0; index < sortedWidthList.length; index++) {
-				const item = sortedWidthList[index];
-				curWidth += item.maxWidth;
-				if (curWidth < width || index === 0) {
-					maxWidthList[item.index].width = item.maxWidth;
-					continue;
-				}
-				restWidth = width - (curWidth - item.maxWidth);
-				notFitStartIndex = index;
-				break;
-			}
-			let sumRestMaxWidth = 0;
-			const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
-				sumRestMaxWidth += item.maxWidth;
-				return item.index;
-			});
-
-			// 骞冲潎鍒嗛厤鍓╀綑绌洪棿
-			for (const item of notFitIndexList) {
-				maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
-				if (maxWidthList[item].maxWidth <= restWidth) {
-					maxWidthList[item].width = restWidth;
-				}
-
-				// maxWidthList[item].width = undefined;
-			}
-		}
-		colList.value = props.data.cols.map((item, index) => ({
-			...item,
-			width: maxWidthList[index].width,
-		}));
 	} else {
 		colList.value = [];
 	}
-	tableRef.value.doLayout();
+
+	setTimeout(() => {
+		tableRef.value.doLayout();
+	}, 300);
 };
 
 const resizeHandler = debounce(resizeEvent);
 //#region ====================== 鏍峰紡 ======================
 const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
-	const extraStyle =
-		columnIndex === 0
-			? {
-					borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
-			  }
-			: {};
-	if (columnIndex === 0) {
-	}
+	const extraStyle = {
+		...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+	};
+
 	return {
 		textAlign: 'center',
 		borderColor: BORDER_COLOR,
@@ -184,12 +260,12 @@
 };
 
 const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
-	const extraStyle =
-		columnIndex === 0
-			? {
-					borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
-			  }
-			: {};
+	const extraStyle = {
+		...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+		...(rowIndex === 0
+			? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2', fontSize: '1rem' }
+			: {}),
+	};
 
 	return {
 		textAlign: 'center',
@@ -203,6 +279,48 @@
 	};
 }; //#endregion
 
+//#region ====================== 鍒嗛〉 ======================
+const pager = reactive({
+	index: 1,
+	size: 10,
+	total: props.data?.values?.length ?? 0,
+});
+
+const calcCellHeight = (count, cellHeight) => {
+	return count * cellHeight + count * THICK_BORDER_WIDTH;
+};
+
+/**
+ * 璁＄畻鍒嗛〉琛ㄦ牸瀹藉害
+ */
+const calcPagerHeight = () => {
+	// 琛ㄦ牸鍐呭鍗曞厓鏍奸珮搴�
+	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;
+
+	// 闄愬埗楂樺害
+	const limitHeight = document.body.clientHeight * 0.7;
+
+	// 姹� size
+	// size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight;
+	// size <= (limitHeight - headerHeight)/(cellHeight+THICK_BORDER_WIDTH);
+
+	// 涓�椤垫湁  pager.size锛屾潯璁板綍
+	pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH));
+
+	const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight;
+
+	tableHeight.value = currentHeight;
+
+	tableRef.value.doLayout();
+
+	// pager.index = 1;
+	chunkTableData.value = _.chunk(props.data.values ?? [], pager.size);
+};
+
+//#endregion
+
+const tableHeight = ref(0.7 * document.body.clientHeight);
 onMounted(() => {
 	resizeEvent({
 		width: containerRef.value.clientWidth,
@@ -211,7 +329,6 @@
 });
 </script>
 <style scoped lang="scss">
-
 // :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
 // 	background-color: v-bind(stripedBgColor);
 // }

--
Gitblit v1.9.3