表格和图表展示 ；同步 colFilter

wujingjing

2024-10-21 9e9d666bbe57503bb0902bda0d23bf34ae75e832

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

@@ -1,42 +1,54 @@
<!-- 查询最新警告信息 -->
<template>
   <div>
      <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
      <div class="w-full flex-column">
         <div class="flex-0 flex-items-center mb-1 h-[38px] ">
            <template v-if="visibleParams && visibleParams.length > 0">
               <component
                  class="flex-0 m-2"
                  v-model="visibleParams[index].value"
                  v-for="(item, index) in visibleParams as any"
                  :key="item.id"
                  :id="item.id"
                  :is="recordSetTableMap[item.type]"
                  :data="item"
                  @change="(val) => handleQueryChange(val, item)"
                  :originData="originData"
               ></component>
					
            </template>
   <div class="w-full flex-column">
      <div class="flex-0 flex-items-center mb-1 h-[38px]">
         <template v-if="visibleParams && visibleParams.length > 0">
            <component
               class="flex-0 m-2"
               v-model="visibleParams[index].value"
               v-for="(item, index) in visibleParams as any"
               :key="item.id"
               :id="item.id"
               :is="recordSetTableMap[item.type]"
               :data="item"
               @change="(val) => handleQueryChange(val, item)"
               :originData="originData"
            ></component>
         </template>

            <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
         </div>
         <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
            <el-table
               ref="tableRef"
               :maxHeight="tableHeight"
               :cell-style="tableCellStyle"
               :header-cell-style="tableHeaderCellStyle"
               :data="chunkTableData[pager.index - 1]"
               @row-click="recordSelectChange"
               rowClassName="cursor-pointer"
               :spanMethod="objectSpanMethod"
               class="w-full h-full"
               highlightCurrentRow
               cellClassName="text-sm"
               headerCellClassName="text-sm"
            >
               <DefineColumns v-slot="{ cols }">
         <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
      </div>
      <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
         <el-table
            ref="tableRef"
            :maxHeight="tableHeight"
            :cell-style="tableCellStyle"
            :header-cell-style="tableHeaderCellStyle"
            :data="chunkTableData[pager.index - 1]"
            @row-click="recordSelectChange"
            rowClassName="cursor-pointer"
            :spanMethod="objectSpanMethod"
            class="w-full h-full"
            highlightCurrentRow
            cellClassName="text-sm"
            headerCellClassName="text-sm"
         >
            <DefineColumns v-slot="{ cols }">
               <template v-for="item in colList" :key="item.prop">
                  <el-table-column
                     v-if="item.isShow ?? true"
                     :type="item.type"
                     :label="item.label"
                     :width="item.width"
                     :sortable="item.sortable"
                     :key="item.prop"
                     :prop="item.prop"
                     show-overflow-tooltip
                  />
               </template>
            </DefineColumns>
            <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
               <template v-if="data?.cols?.length > 0">
                  <template v-for="item in colList" :key="item.prop">
                     <el-table-column
                        v-if="item.isShow ?? true"
@@ -49,43 +61,28 @@
                        show-overflow-tooltip
                     />
                  </template>
               </DefineColumns>
               <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
                  <template v-if="data?.cols?.length > 0">
                     <template v-for="item in colList" :key="item.prop">
                        <el-table-column
                           v-if="item.isShow ?? true"
                           :type="item.type"
                           :label="item.label"
                           :width="item.width"
                           :sortable="item.sortable"
                           :key="item.prop"
                           :prop="item.prop"
                           show-overflow-tooltip
                        />
                     </template>
                  </template>
               </el-table-column>
               <template v-else>
                  <template v-if="data?.cols?.length > 0">
                     <ReuseColumns :cols="colList" />
                  </template>
               </template>
            </el-table>
         </div>

         <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"
         />

         <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
            </el-table-column>
            <template v-else>
               <template v-if="data?.cols?.length > 0">
                  <ReuseColumns :cols="colList" />
               </template>
            </template>
         </el-table>
      </div>

      <el-pagination
         class="flex-0"
         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"
      />

      <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
   </div>
</template>

@@ -114,6 +111,10 @@
   summaryIndex: {
      type: Number,
   },
   tableLimitHeight:{
      type:Number,
      required:false
   }
});

const [DefineColumns, ReuseColumns] = createReusableTemplate<{
@@ -189,7 +190,7 @@
 * @param j 当前记录所在行位置
 */
const buildGroupData = (values, i = 0, j = 0) => {
   if(!values || values.length===0) return [];
   if (!values || values.length === 0) return [];
   const curGroupIndex = filterGroupIndexList.value[i];
   // 不可以分组，直接 return;
   if (curGroupIndex == undefined || values.length === 1) {
@@ -322,8 +323,7 @@
   if (width === 0 || height === 0) {
      return;
   }

   if (props.data?.cols?.length > 0 ) {
   if (props.data?.cols?.length > 0) {
      cellRowSpanMap.clear();
      props.data.values = buildGroupData(props.data.values);
      calcColWidth(width);
@@ -394,7 +394,7 @@
   const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight;

   // 限制高度
   const limitHeight = document.body.clientHeight * 0.7;
   const limitHeight =props.tableLimitHeight ??containerRef.value.clientHeight;

   // 求 size
   // size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight;
@@ -425,7 +425,6 @@
};

const tableHeight = ref(0.7 * document.body.clientHeight);

//#region ======================  ======================
const infoDetailIsShow = ref(false);
const detailMapRow = ref(null);