table: 修复group页面跳转时崩溃问题

src/components/DesignForm/app/groupPage.vue

@@ -34,7 +34,7 @@ const props = defineProps({
 //---------pagination configs------
 const totalNum = ref(0)
 const pageSize = ref(props.searchSend.pagesize)
-
+const selectedMergeKeys = ref<string[]>([]) 
 
 //------------------ by han2015:  支持表单排序功能----------------------
 const columnSortData = new Map();
@@ -59,10 +59,66 @@ const onUpdateSort = (data: { prop: string; order: "ascending" | "descending" |
   } else {
     columnSortData.delete(data.prop);
   }
-  getPageData()
+
+  selectedMergeKeys.value=Array.from(columnSortData.keys())
+  getPageData();
 }
 
+// 计算合并位置（预处理，避免每次渲染重复计算）
+const spanMap = computed(() => {
+  const map = {}
+  const pos = {}
+
+  // 按优先级排序的合并列，获取排序列
+  selectedMergeKeys.value.forEach((key, index) => {
+    map[key] = []
+    pos[key] = 0
+    
+    for (let i = 0; i < tableDataList.value.length; i++) {
+      if (i === 0) {
+        map[key][i] = 1  // 第一行总是 1
+        pos[key] = 0
+      } else {
+        // 检查：当前列及其所有前置列是否都相同
+        let shouldMerge = true
+        for (let j = 0; j <= index; j++) {
+          const checkKey = selectedMergeKeys.value[j]
+          if (tableDataList.value[i][checkKey] !== tableDataList.value[i-1][checkKey]) {
+            shouldMerge = false
+            break
+          }
+        }
+        
+        if (shouldMerge) {
+          // 合并：累加到合并起始位置，当前位置标记 0
+          map[key][pos[key]] += 1
+          map[key][i] = 0
+        } else {
+          // 不合并：新开一个合并组
+          map[key][i] = 1
+          pos[key] = i  // 更新合并起始位置
+        }
+      }
+    }
+  })
+  
+  return map
+})
+
+
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  const key = column.property
   
+  if (spanMap.value[key]) {
+    const rowspan = spanMap.value[key][rowIndex]
+    return {
+      rowspan: rowspan,
+      colspan: rowspan > 0 ? 1 : 0
+    }
+  }
+  
+  return { rowspan: 1, colspan: 1 }
+}
 const tableDataList = ref([]) // 表格行数据
 
 const groupColumnSearch = (val:any,clas?:number) =>{
@@ -79,7 +135,7 @@ const handleCurrentChange = (page: number) => {
   getPageData();
 };
 
-const getPageData=()=>{
+const getPageData=async ()=>{
   // by han2015: 处理排序字段信息
   let arr:string[]=[];
   columnSortData.forEach((value, key) => {
@@ -89,21 +145,13 @@ const getPageData=()=>{
   let sendData = props.searchSend
   sendData.sortData= arr.join(", ")
   sendData.pagesize = 50
-  gainFormPageListCont(sendData)
+  await gainFormPageListCont(sendData)
 		.then(({data})=>{
 			totalNum.value = data.total
       tableDataList.value = data.list
 	})
 }
 
-const spanMethod = (data: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number; }) => {
-  if(data.rowIndex==1){
-    console.log(data.column)
-  }
-  
-}
-
-
 onMounted(()=>{
   nextTick(()=>{
 		getPageData()
@@ -114,13 +162,14 @@ defineExpose({
 	groupColumnSearch
 })
 
+
 </script>
 <template>
 	<div>
 		<el-row :gutter="20">
       <el-table
         :data="tableDataList"
-        :span-method="spanMethod"
+        :span-method="objectSpanMethod"
         @sort-change="onUpdateSort"
         :header-cell-class-name="setHeaderClass"
         border
@@ -159,6 +208,7 @@ defineExpose({
             v-else-if="item.fieldClass == ''"
             :prop="item.field"
             :label="item.label"
+            :min-width="(item.label?.length || 2) * 15 + 30"
             header-align="center"
             sortable="custom"
             align="center"
@@ -194,7 +244,7 @@ defineExpose({
             :prop="item.field"
             :label="item.label"
             config=""
-            min-width="90"
+            :min-width="(item.label?.length || 2) * 15 + 30"
             header-align="center"
             sortable="custom"
             align="center"

src/components/DesignForm/app/index.vue

@@ -966,6 +966,7 @@ watch(
 watch(
   () => props.formId,
   (val: any) => {
+    tabsView(props.viewPage.list, 1)
     getPageData();
   },
   {
@@ -1007,7 +1008,6 @@ const getPageData = () => {
     searchData: json2string(props.searchData),
     sortData: arr.join(", "),
   };
-  console.log("获取列表详细信息??????",sendData)
 
   switch (viewType.value) {
     case 2:
@@ -1730,6 +1730,24 @@ const recallSendMsg = (val: any) => {
     getPageData();
   });
 };
+
+//html 标签全屏操作，只支持现代浏览器
+const enterFullScreen=()=>{
+  const docEl= document.getElementById("special-table-container");
+  if(docEl){
+    //支持多种浏览器
+    if (docEl.requestFullscreen) {
+      docEl.requestFullscreen();
+    } else if (docEl.webkitRequestFullscreen) {
+        docEl.webkitRequestFullscreen();
+    } else if (docEl.mozRequestFullScreen) {
+        docEl.mozRequestFullScreen();
+    } else if (docEl.msRequestFullscreen) {
+        docEl.msRequestFullscreen();
+    }
+  }
+}
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-11 11:17:42
@@ -1838,7 +1856,8 @@ const tabsView = (val: any, types: number) => {
       props.viewPage.gantt.isClick = false;
       props.viewPage.map.isClick = false;
       props.viewPage.chart.isClick = false;
-      props.viewPage.group.isClick = false;
+      if(props.viewPage.group)
+        props.viewPage.group.isClick = false;
       break;
   }
 };
@@ -1918,7 +1937,7 @@ const readerColumnSun = (column: any) => {
     if(labelLong > 6 ){
       return labelLong * 15;
     }else{
-      return labelLong * 30;
+      return labelLong * 20;
     }
     
   }else{
@@ -1977,7 +1996,7 @@ const isObject = (obj: any) => {
 }
 </script>
 <template>
-  <div ref="container" v-loading="state.loading" class="table-list-comm">
+  <div ref="container" v-loading="state.loading" class="table-list-comm" >
     <el-row class="rowBox">
       <el-col :span="24">
         <el-form v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
@@ -2095,6 +2114,14 @@ const isObject = (obj: any) => {
           </div>
           <div>
             <el-button-group class="ml-4">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="全屏"
+                placement="bottom"
+              >
+                <el-button size="small" @click="enterFullScreen" > 全屏</el-button>
+              </el-tooltip>
               <el-tooltip
                 class="box-item"
                 effect="dark"
@@ -2229,7 +2256,7 @@ const isObject = (obj: any) => {
         </div>
       </el-col>
 
-      <el-col v-if="viewType == 1" :span="24" class="tableTdClass">
+      <el-col v-if="viewType == 1" :span="24" class="tableTdClass" id="special-table-container">
         <el-table
           v-bind="data.tableProps"
           ref="table"
@@ -2299,7 +2326,7 @@ const isObject = (obj: any) => {
               :prop="item.field"
               :label="item.label"
               config=""
-              min-width="220"
+              min-width='220'
                header-align="center"
               align="center"
               fixed="right"
@@ -2450,7 +2477,7 @@ const isObject = (obj: any) => {
               :prop="item.field"
               :label="item.label"
               config=""
-              min-width="220"
+              :min-width="(item.label?.length || 2) * 14 + 20"
                header-align="center"
                sortable="custom"
               align="center"