From 9e9d666bbe57503bb0902bda0d23bf34ae75e832 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 21 十月 2024 17:17:25 +0800
Subject: [PATCH] 表格和图表展示 ；同步 colFilter
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 151 +++++++++++++++++++++++++-------------------------
1 files changed, 75 insertions(+), 76 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 6aa4fa2..17d4558 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/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);
--
Gitblit v1.9.3