From d4ee8e78212bd94d1600a5d356553d11861dc6d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Thu, 4 Jan 2024 10:38:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81table=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/header/index.vue         |  85 +++++++----
 src/components/table/index.vue                | 136 ++++++++++--------
 src/utils/tableStore.ts                       |  11 +-
 .../sags/operationsManagement/statistics.vue  |   8 +-
 types/table.d.ts                              |   6 +-
 5 files changed, 147 insertions(+), 99 deletions(-)

diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index e4f573a..e4a47de 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -1,48 +1,54 @@
 <template>
-    <!-- 通用搜索 -->
-    <transition name='el-zoom-in-bottom' mode='out-in' v-if='$slots.select'>
-        <div class='table-com-search' v-if='showSelect'>
-            <el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
-                <slot name='select'></slot>
-                <el-form-item label='日期' v-if='datePicker'>
-                    <DatePicker v-model='date' @change='dateChange'></DatePicker>
-                </el-form-item>
-                <el-form-item>
-                    <el-button @click='onComSearch' type='primary'>查询</el-button>
-                    <el-button @click='onResetForm'>重置</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-    </transition>
+    <div ref="tableHeader">
+        <!-- 通用搜索 -->
+        <transition name="el-zoom-in-bottom" mode="out-in" v-if="$slots.select">
+            <div class="table-com-search" v-if="showSelect">
+                <el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
+                    <slot name="select"></slot>
+                    <el-form-item label="日期" v-if="datePicker">
+                        <DatePicker v-model="date" @change="dateChange"></DatePicker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button @click="onComSearch" type="primary">查询</el-button>
+                        <el-button @click="onResetForm">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </transition>
 
-    <div class='table-header ba-scroll-style' v-if='showOperation'>
-        <slot name='operation'></slot>
-        <!-- 右侧搜索框和工具按钮 -->
-        <div class='table-search' >
-        <slot name='right'></slot>
-            <div class='table-search-button-group' v-if='$slots.select'>
-                <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
-                    <Icon size='14' name='el-icon-Search' />
-                </el-button>
+        <div class="table-header ba-scroll-style" v-if="showOperation">
+            <slot name="operation"></slot>
+            <!-- 右侧搜索框和工具按钮 -->
+            <div class="table-search">
+                <slot name="right"></slot>
+                <div class="table-search-button-group" v-if="$slots.select">
+                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
+                        <Icon size="14" name="el-icon-Search" />
+                    </el-button>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang='ts'>
-import { inject, ref } from 'vue'
+<script setup lang="ts">
+import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
 import type TableStore from '@/utils/tableStore'
 import DatePicker from '@/components/form/datePicker/index.vue'
+import { mainHeight } from '@/utils/layout'
 
 const tableStore = inject('tableStore') as TableStore
-const date = ref([window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'), window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])
+const tableHeader = ref()
+const date = ref([
+    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
+    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
+])
 
 interface Props {
     // 默认展开
     showSelect?: boolean
     showOperation?: boolean // 是否显示operation
     datePicker?: boolean
-
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -54,9 +60,30 @@ if (props.datePicker) {
     tableStore.table.params.searchBeginTime = date.value[0]
     tableStore.table.params.searchEndTime = date.value[1]
 }
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        handlerHeight()
+    }
+})
+onMounted(() => {
+    resizeObserver.observe(tableHeader.value)
+})
+onUnmounted(() => {
+    resizeObserver.disconnect()
+})
+
+const handlerHeight = () => {
+    tableStore.table.height = mainHeight(
+        tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
+    ).height as string
+}
 const showSelect = ref(props.showSelect)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
+    nextTick(() => {
+        handlerHeight()
+    })
 }
 const onComSearch = () => {
     tableStore.onTableAction('search', {})
@@ -70,7 +97,7 @@ const dateChange = () => {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .table-header {
     position: relative;
     overflow-x: auto;
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 8aa4b9c..a616805 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,78 +1,93 @@
 <template>
-    <vxe-table
-        ref='tableRef'
-        :data='tableStore.table.data'
-        v-loading='tableStore.table.loading'
-        v-bind='Object.assign({}, defaultAttribute, $attrs)'
-    >
-        <!-- Column 组件内部是 el-table-column -->
-        <template v-if='isGroup'>
-            <vxe-table-colgroup
-                v-if='isGroup'
-                v-for='(item, index) in tableStore.table.column'
-                :field='item.field'
-                :title='item.title'
-                :key='index'
-                :min-width='item.width'
-                show-overflow
-                align='center'
-            >
+    <div :style="{ height: tableStore.table.height }">
+        <vxe-table
+            ref="tableRef"
+            height="auto"
+            :data="tableStore.table.data"
+            v-loading="tableStore.table.loading"
+            v-bind="Object.assign({}, defaultAttribute, $attrs)"
+        >
+            <!-- Column 组件内部是 el-table-column -->
+            <template v-if="isGroup">
+                <vxe-table-colgroup
+                    v-if="isGroup"
+                    v-for="(item, index) in tableStore.table.column"
+                    :field="item.field"
+                    :title="item.title"
+                    :key="index"
+                    :min-width="item.width"
+                    show-overflow
+                    align="center"
+                >
+                    <Column
+                        :attr="child"
+                        :key="key + '-column'"
+                        v-for="(child, key) in item.children"
+                        :tree-node="child.treeNode"
+                    >
+                        <!-- tableStore 预设的列 render 方案 -->
+                        <template v-if="child.render" #default="scope">
+                            <FieldRender
+                                :field="child"
+                                :row="scope.row"
+                                :column="scope.column"
+                                :index="scope.rowIndex"
+                                :key="
+                                    key +
+                                    '-' +
+                                    child.render +
+                                    '-' +
+                                    (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
+                                "
+                            />
+                        </template>
+                    </Column>
+                </vxe-table-colgroup>
+            </template>
+            <template v-else>
                 <Column
-                    :attr='child'
+                    :attr="item"
                     :key="key + '-column'"
-                    v-for='(child, key) in item.children'
-                    :tree-node='child.treeNode'
+                    v-for="(item, key) in tableStore.table.column"
+                    :tree-node="item.treeNode"
                 >
                     <!-- tableStore 预设的列 render 方案 -->
-                    <template v-if='child.render' #default='scope'>
+                    <template v-if="item.render" #default="scope">
                         <FieldRender
-                            :field='child'
-                            :row='scope.row'
-                            :column='scope.column'
-                            :index='scope.rowIndex'
-                            :key=" key + '-' + child.render + '-' + (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')"
+                            :field="item"
+                            :row="scope.row"
+                            :column="scope.column"
+                            :index="scope.rowIndex"
+                            :key="
+                                key +
+                                '-' +
+                                item.render +
+                                '-' +
+                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                            "
                         />
                     </template>
                 </Column>
-            </vxe-table-colgroup>
-        </template>
-        <template v-else>
-            <Column
-                :attr='item'
-                :key="key + '-column'"
-                v-for='(item, key) in tableStore.table.column'
-                :tree-node='item.treeNode'
-            >
-                <!-- tableStore 预设的列 render 方案 -->
-                <template v-if='item.render' #default='scope'>
-                    <FieldRender
-                        :field='item'
-                        :row='scope.row'
-                        :column='scope.column'
-                        :index='scope.rowIndex'
-                        :key=" key + '-' +item.render +'-' +(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')" />
-                </template>
-            </Column>
+            </template>
+        </vxe-table>
+    </div>
 
-        </template>
-
-    </vxe-table>
-    <div v-if='props.pagination' class='table-pagination'>
+    <div v-if="tableStore.showPage" class="table-pagination">
         <el-pagination
-            :currentPage='tableStore.table.params!.pageNum'
-            :page-size='tableStore.table.params!.pageSize'
-            :page-sizes='pageSizes'
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
             background
             :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
-            :total='tableStore.table.total'
-            @size-change='onTableSizeChange'
-            @current-change='onTableCurrentChange'
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
         ></el-pagination>
     </div>
-    <slot name='footer'></slot>
+    <slot name="footer"></slot>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { ref, nextTick, inject, computed } from 'vue'
 import type { ElTable, TableInstance } from 'element-plus'
 import FieldRender from '@/components/table/fieldRender/index.vue'
@@ -86,12 +101,10 @@ const tableRef = ref<TableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
 
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
-    pagination?: boolean
     isGroup?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    pagination: true,
     isGroup: false
 })
 console.log(props)
@@ -113,7 +126,6 @@ const pageSizes = computed(() => {
     return defaultSizes
 })
 
-
 /*
  * 记录选择的项
  */
@@ -130,7 +142,7 @@ defineExpose({
 })
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .ba-data-table :deep(.el-button + .el-button) {
     margin-left: 6px;
 }
diff --git a/src/utils/tableStore.ts b/src/utils/tableStore.ts
index b8b4855..3fd58c2 100644
--- a/src/utils/tableStore.ts
+++ b/src/utils/tableStore.ts
@@ -2,7 +2,7 @@ import { reactive } from 'vue'
 import createAxios from '@/utils/request'
 import { requestPayload } from '@/utils/request'
 import { Method } from 'axios'
-
+import { mainHeight } from '@/utils/layout'
 interface TableStoreParams {
     url: string
     pk?: string
@@ -10,6 +10,8 @@ interface TableStoreParams {
     params?: anyObj
     method?: Method
     isWebPaging?: boolean // 是否前端分页
+    showPage?: boolean
+    publicHeight?: number
     resetCallback?: () => void
     loadCallback?: () => void
 }
@@ -20,6 +22,7 @@ export default class TableStore {
     public method: Method
     public initData: any = null
     public isWebPaging = false
+    public showPage = true
     public table: CnTable = reactive({
         ref: null,
         selection: [],
@@ -33,7 +36,9 @@ export default class TableStore {
         loading: true,
         column: [],
         loadCallback: null,
-        resetCallback: null
+        resetCallback: null,
+        height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
+        publicHeight: 0
     })
 
     constructor(public options: TableStoreParams) {
@@ -42,6 +47,8 @@ export default class TableStore {
         this.isWebPaging = options.isWebPaging || false
         this.method = options.method || 'GET'
         this.table.column = options.column
+        this.showPage = options.showPage || true
+        this.table.publicHeight = options.publicHeight || 0
         this.table.resetCallback = options.resetCallback || null
         this.table.loadCallback = options.loadCallback || null
         Object.assign(this.table.params, options.params)
diff --git a/src/views/voltage/sags/operationsManagement/statistics.vue b/src/views/voltage/sags/operationsManagement/statistics.vue
index 1f88bed..0d5c33e 100644
--- a/src/views/voltage/sags/operationsManagement/statistics.vue
+++ b/src/views/voltage/sags/operationsManagement/statistics.vue
@@ -145,7 +145,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function (params) {
+                    formatter: function (params: any) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -165,7 +165,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -193,7 +193,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function (params: any) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -219,7 +219,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function (params: any) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
diff --git a/types/table.d.ts b/types/table.d.ts
index f88fe27..0db0107 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -23,8 +23,10 @@ declare global {
             pageSize: number
             [key: string]: any
         }
-        loadCallback: (() => void )| null
-        resetCallback: (() => void)| null
+        loadCallback: (() => void) | null
+        resetCallback: (() => void) | null
+        height: string
+        publicHeight: number
     }
 
     /* 表格行 */