报表页面高度固定 合计列index和selection开启时并两行，剂型名称 销售类型 业务区域下拉数据接口对接

src/components/LowDesign/src/LowReport/index.vue

@@ -42,7 +42,9 @@
           <Icon :size="14" icon="clarity:export-line"></Icon>
           <span>{{ t('Avue.crud.excelBtn') }}</span>
         </ElButton>
+        <div ref="tableHeightRef"></div>
       </template>
+    
       <template v-for="prop in numberRange" :key="prop" #[`${prop}-search`]="scope">
         <InputNumberRange
           v-model="tableSearch[prop]"
@@ -71,6 +73,9 @@
           :column="scope.column"
         ></InputTimeRange>
       </template>
+      <template #summary>
+        123123
+      </template>
       <template #header v-if="Object.keys(dimensionFields)?.length">
         <div  style="display:flex;align-items:center;border-top:1px solid #eee;margin-bottom:10px;padding-top:10px;">
         <span style="margin-right:10px;">维度：</span>
@@ -126,7 +131,7 @@ const loading = ref(false) // 列表的加载中
 const isInit = ref(false)
 const isSearch = ref(false)
 
-
+const tableHeightRef = ref<any>(null)
 const tableOption = ref<any>({})
 const tableData = ref<any>([])
 const tableSearch = ref({
@@ -160,6 +165,45 @@ const crudBind = computed(() => {
   return obj
 })
 
+function getElementToBodyTop(el) {
+  if (!el || !(el instanceof HTMLElement)) return 0;
+  
+  // 1. 获取元素相对于视口的位置（top是元素顶部到视口顶部的距离）
+  const rect = el.getBoundingClientRect();
+  // 2. 视口顶部到body顶部的距离 = 页面滚动的距离（window.scrollY）
+  // 最终距离 = 元素视口top + 页面滚动距离 - body的margin/padding（可选，根据场景）
+  const bodyTop = document.body.getBoundingClientRect().top; // body自身的偏移（通常为0）
+  return rect.top - bodyTop + window.scrollY;
+}
+const tableHeight=ref(0)
+watch(()=>tableHeightRef.value,()=>{
+  if(tableHeightRef.value){
+    setTimeout(()=>{
+      observeHeightChange(document.querySelector('.avue-crud__search'))
+      if(tableOption.value.showSummary&&tableOption.value.index&&tableOption.value.selection){
+        document.querySelector('tfoot tr td').colSpan="2"
+        document.querySelectorAll('tfoot tr td')[1].style.display="none"
+
+      }
+      
+    },1000)
+  }
+})
+let resizeObserver = null;
+const observeHeightChange = (targetEl) => {
+  // 确保元素已挂载
+  if (!targetEl) return;
+  // 创建ResizeObserver实例
+  resizeObserver = new ResizeObserver((entries) => {
+    const calcH= getElementToBodyTop(tableHeightRef.value)
+  tableHeight.value= ('calc(100vh - '+(parseInt(calcH+160))+"px)")
+  if(document.querySelector('.el-table').style){
+    document.querySelector('.el-table').style.height=tableHeight.value
+  }
+  });
+  // 开始监听目标元素
+  resizeObserver.observe(targetEl);
+};
 const setLastAmountRowClass=(row,rowIndex)=>{
   if(row.isAmount===true){
     return 'lastAmountRow'
@@ -214,7 +258,7 @@ const initTable = async () => {
     menu: false,
     addBtn: false,
     height: isHeight ? 'auto' : undefined,
-    calcHeight: isHeight ? 10 : '',
+    calcHeight: isHeight ?10 : '',
     index: reportVo.tableConfig.includes('index'),
     indexLabel: '序号',
     indexWidth: 54,
@@ -303,10 +347,23 @@ const initTable = async () => {
         if(item.fieldName=='效期剩余时间(天)分类') config.searchSpan=5
     
     if(config.search) config.searchLabelWidth=item.fieldName.length*12 +40
-    if(['货品名称','货品','剂型','产品','产品名称','剂型名称','客户名称','客户','业务员'].includes(item.fieldName)&&config.search){
+    const jkTableDicFields={
+      '货品名称':'hpmx',
+      '货品':'hpmx',
+      '剂型':'jxjk',
+      '产品':'hpmx',
+      '产品名称':'hpmx',
+      '剂型名称':'jxjk',
+      '客户名称':'khxx',
+      '销售类型':'xslx',
+      '客户':'khxx',
+      '业务员':'ywyxx',
+      '业务区域':'ywqy',
+    }
+    if(Object.keys(jkTableDicFields).includes(item.fieldName)&&config.search){
       config.dataType= 'string'
       config.dictType= 'defaultTable'             
-      config.dicUrl= `/lideeyunji/report-data/list/${item.fieldName.includes('客户') ?'khxx':(item.fieldName.includes('业务员')?'ywyxx': 'hpmx')}`
+      config.dicUrl= `/lideeyunji/report-data/list/${jkTableDicFields[item.fieldName]}`
       config.dicMethod= 'post'
       config.dicQuery= { //请求参数
            pageSize: 1000000,
@@ -406,6 +463,7 @@ const initTableLayout = () => {
   timerObj.value.layout = setTimeout(() => {
     if (crudRef.value) crudRef.value.getTableHeight()
   }, 100)
+
 }
 
 const selectionChange = (data) => {

src/styles/var.css

@@ -50,7 +50,7 @@
 
   --app-content-bg-color: #f5f7f9;
 
-  --app-footer-height: 50px;
+  --app-footer-height: 30px;
 
   --transition-time-02: 0.2s;
 }