From 0e70182c896eb9126a5f99ebd4ccc8e9a490b37c Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Fri, 10 Jul 2026 08:55:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/header/index.vue         | 841 +++++++++---------
 src/components/table/index.vue                |  14 +-
 .../govern/device/control/moduleData.vue      |  12 +-
 src/views/govern/monitorRecall/log.vue        |   2 +-
 src/views/pms/comptroller/list.vue            |   2 +-
 .../sags/operationsManagement/index.vue       |   2 +-
 .../sags/operationsManagement/point.vue       |   2 +-
 src/views/setting/dictionary/list/index.vue   |   2 +-
 .../setting/dictionary/version/index.vue      |   2 +-
 src/views/system/scheduledTasks/index.vue     |   4 +-
 tsconfig.json                                 |   2 +-
 11 files changed, 451 insertions(+), 434 deletions(-)

diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index 4a3ecc2..1486903 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -1,414 +1,427 @@
-<template>
-    <div ref="tableHeader" class="cn-table-header">
-        <div class="table-header ba-scroll-style" :key="num">
-            <el-form
-                style="flex: 1; min-height: 34px; margin-right: 0px; display: flex; flex-wrap: wrap; align-items: center"
-                ref="headerForm"
-                @submit.prevent=""
-                @keyup.enter="onComSearch"
-                label-position="left"
-                :inline="true"
-            >
-                <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
-                    <DatePicker
-                        ref="datePickerRef"
-                        :nextFlag="nextFlag"
-                        :theCurrentTime="theCurrentTime"
-                        @change="handleDatePickerChange"
-                        :timeKeyList="props.timeKeyList"
-                    ></DatePicker>
-                </el-form-item>
-
-                <el-form-item label="区域" v-if="area">
-                    <Area ref="areaRef" v-model.trim="tableStore.table.params.deptIndex" />
-                </el-form-item>
-                <slot name="select"></slot>
-            </el-form>
-            <template v-if="$slots.select || datePicker || showSearch">
-                <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
-                    <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
-                    <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
-                </el-button>
-                <el-button
-                    @click="onComSearch"
-                    v-if="showSearch &&showQuery"
-                    :loading="tableStore.table.loading"
-                    type="primary"
-                    :icon="Search"
-                >
-                    查询
-                </el-button>
-                <el-button
-                    @click="onResetForm"
-                    v-if="showSearch && showReset"
-                    :loading="tableStore.table.loading"
-                    :icon="RefreshLeft"
-                >
-                    重置
-                </el-button>
-                <el-button
-                    @click="onExport"
-                    v-if="showExport"
-                    :loading="tableStore.table.exportLoading"
-                    type="primary"
-                    icon="el-icon-Download"
-                >
-                    导出
-                </el-button>
-            </template>
-            <slot name="operation"></slot>
-            <el-button class="ml10" v-if="showCustomColumn"   :icon="Setting" @click="openCustomColumn">列设置</el-button>
-        </div>
-        <el-form
-            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            ref="headerFormSecond"
-            @submit.prevent=""
-            @keyup.enter="onComSearch"
-            label-position="left"
-            :inline="true"
-        ></el-form>
-    </div>
-</template>
-
-<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 Area from '@/components/form/area/index.vue'
-import { mainHeight } from '@/utils/layout'
-import { useDictData } from '@/stores/dictData'
-import { Search, RefreshLeft, Setting } from '@element-plus/icons-vue'
-import { useTimeCacheStore } from '@/stores/timeCache'
-import { useRoute } from 'vue-router'
-
-const emit = defineEmits(['selectChange','onResetForm'])
-
-const tableStore = inject('tableStore') as TableStore
-const tableHeader = ref()
-const datePickerRef = ref()
-const dictData = useDictData()
-const areaRef = ref()
-const headerForm = ref()
-const headerFormSecond = ref()
-const num = ref(0)
-
-// 获取路由和缓存 store
-const route = useRoute()
-const timeCacheStore = useTimeCacheStore()
-
-interface Props {
-    datePicker?: boolean
-    area?: boolean
-    showSearch?: boolean
-    nextFlag?: boolean //控制时间是否可以往后推
-    theCurrentTime?: boolean //控制时间前3天展示上个月时间
-    showQuery?: boolean //是否显示查詢
-    showReset?: boolean //是否显示重置
-    showExport?: boolean //导出控制
-    showCustomColumn?: boolean // 列设置
-    timeCacheFlag?: boolean //是否取缓存时间
-    timeKeyList?: string[] //日期下拉列表
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    datePicker: false,
-    area: false,
-    showSearch: true,
-    nextFlag: false,
-    theCurrentTime: true,
-    showReset: true,
-    showQuery: true,
-    showExport: false,
-    showCustomColumn: false,
-    timeCacheFlag: true,
-    timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
-})
-
-const openCustomColumn = () => {
-    tableStore?.table?.ref?.openCustom?.()
-}
-
-// 处理 DatePicker 值变化事件
-const handleDatePickerChange = (value: any) => {
-    // 将值缓存到 timeCache
-    // if (value) {
-    //     timeCacheStore.setCache(route.path, value.interval, value.timeValue)
-    // }
-
-    // 将 datePicker 的变化传递给父组件
-    emit('selectChange', true, tableHeader.value.offsetHeight, value)
-}
-
-// 动态计算table高度
-let resizeObserver = new ResizeObserver(entries => {
-    for (const entry of entries) {
-        handlerHeight()
-        computedSearchRow()
-    }
-})
-const showUnfoldButton = ref(false)
-const headerFormSecondStyleOpen = {
-    opacity: 1,
-    height: 'auto',
-    padding: '0 15px 0px 15px'
-}
-const headerFormSecondStyleClose = {
-    opacity: 0,
-    height: '0',
-    padding: '0'
-}
-onMounted(() => {
-    if (props.showCustomColumn && tableStore?.table) {
-        tableStore.table.customColumnInHeader = true
-    }
-    // 设置初始值到 DatePicker
-    if (props.datePicker && datePickerRef.value) {
-        // 从缓存中获取值并设置
-        const cached = timeCacheStore.getCache(route.path)
-        if (props.timeCacheFlag && cached) {
-            if (cached.interval !== undefined) {
-                datePickerRef.value.setInterval(cached.interval)
-            }
-            if (cached.timeValue) {
-                datePickerRef.value.timeValue = cached.timeValue
-            }
-        }
-
-        // 更新 tableStore 参数
-        tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue?.[0]
-        tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue?.[1]
-        tableStore.table.params.startTime = datePickerRef.value?.timeValue?.[0]
-        tableStore.table.params.endTime = datePickerRef.value?.timeValue?.[1]
-        tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
-    }
-
-    if (props.area) {
-        tableStore.table.params.deptIndex = dictData.state.area[0].id
-    }
-
-    nextTick(() => {
-        resizeObserver.observe(tableHeader.value)
-        computedSearchRow()
-    })
-})
-onUnmounted(() => {
-    if (tableStore?.table) {
-        tableStore.table.customColumnInHeader = false
-    }
-    resizeObserver.disconnect()
-})
-
-const handlerHeight = () => {
-    if (tableStore && tableStore.table) {
-        tableStore.table.height = mainHeight(
-            tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
-        ).height as string
-    }
-}
-// 刷新页面handler高度出下拉
-const computedSearchRow = () => {
-    if (!headerForm.value.$el) return
-
-    // 清空headerFormSecond.value.$el下的元素
-    while (headerFormSecond.value.$el.firstChild) {
-        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
-    }
-
-    // 获取第一行放了几个表单
-    const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
-
-    //  把第一行放不下的复制一份放到headerFormSecond.value.$el
-    let width = 0
-    for (let i = 0; i < elFormItem.length; i++) {
-        width += elFormItem[i].offsetWidth + 32
-        if (width > headerForm.value.$el.offsetWidth) {
-            headerFormSecond.value.$el.appendChild(elFormItem[i])
-        }
-    }
-
-    // 判断是否需要折叠
-    if (headerFormSecond.value.$el.scrollHeight > 0) {
-        showUnfoldButton.value = true
-    } else {
-        showUnfoldButton.value = false
-    }
-}
-
-const showSelect = ref(false)
-const showSelectChange = () => {
-    showSelect.value = !showSelect.value
-    setTimeout(() => {
-        emit('selectChange', showSelect.value, tableHeader.value.offsetHeight)
-    }, 20)
-}
-const onComSearch = async () => {
-    if (props.datePicker) {
-        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
-        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
-        tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
-        tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
-        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
-    }
-
-    await tableStore.onTableAction('search', {})
-}
-const setDatePicker = (list: any) => {
-    datePickerRef.value.setTimeOptions(list)
-}
-const onResetForm = () => {
-    //时间重置成默认值
-    datePickerRef.value?.setInterval(3)
-    emit('onResetForm')
-    tableStore.onTableAction('reset', {})
-}
-const setInterval = (val: any) => {
-    datePickerRef.value.setInterval(val)
-}
-
-const setTimeInterval = (val: any) => {
-    datePickerRef.value.timeValue = val
-    tableStore.table.params.searchBeginTime = val[0]
-    tableStore.table.params.searchEndTime = val[1]
-    tableStore.table.params.startTime = val[0]
-    tableStore.table.params.endTime = val[1]
-}
-// 导出
-const onExport = () => {
-    tableStore.onTableAction('export', { showAllFlag: true })
-}
-
-defineExpose({
-    onComSearch,
-    areaRef,
-    setDatePicker,
-    setInterval,
-    setTimeInterval,
-    datePickerRef,
-    showSelectChange,
-    computedSearchRow
-})
-</script>
-
-<style scoped lang="scss">
-.cn-table-header {
-    border: 1px solid var(--el-border-color);
-}
-
-.table-header {
-    position: relative;
-    overflow-x: auto;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 100%;
-    background-color: var(--ba-bg-color-overlay);
-
-    border-bottom: none;
-    padding: 13px 15px 9px;
-    font-size: 14px;
-
-    .table-header-operate-text {
-        margin-left: 6px;
-    }
-}
-
-.table-com-search {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    background-color: var(--ba-bg-color-overlay);
-    border: 1px solid var(--ba-border-color);
-    border-bottom: none;
-    padding: 13px 15px 20px 15px;
-    font-size: 14px;
-}
-
-#header-form-second,
-#header-form {
-    // display: flex;
-    // flex-wrap: wrap;
-    transition: all 0.3s;
-}
-
-.mlr-12 {
-    margin-left: 12px;
-}
-
-.mlr-12 + .el-button {
-    margin-left: 12px;
-}
-
-.table-search {
-    display: flex;
-    margin-left: auto;
-
-    .quick-search {
-        width: auto;
-    }
-}
-
-.table-search-button-group {
-    display: flex;
-    margin-left: 12px;
-    border: 1px solid var(--el-border-color);
-    border-radius: var(--el-border-radius-base);
-    overflow: hidden;
-
-    button:focus,
-    button:active {
-        background-color: var(--ba-bg-color-overlay);
-    }
-
-    button:hover {
-        background-color: var(--el-color-info-light-7);
-    }
-
-    .table-search-button-item {
-        height: 30px;
-        border: none;
-        border-radius: 0;
-    }
-
-    .el-button + .el-button {
-        margin: 0;
-    }
-
-    .right-border {
-        border-right: 1px solid var(--el-border-color);
-    }
-}
-
-html.dark {
-    .table-search-button-group {
-        button:focus,
-        button:active {
-            background-color: var(--el-color-info-dark-2);
-        }
-
-        button:hover {
-            background-color: var(--el-color-info-light-7);
-        }
-
-        button {
-            background-color: var(--ba-bg-color-overlay);
-
-            el-icon {
-                color: white !important;
-            }
-        }
-    }
-}
-
-#header-form,
-#header-form-second {
-    :deep(.el-select) {
-        --el-select-width: 220px;
-    }
-
-    :deep(.el-input) {
-        --el-input-width: 220px;
-    }
-}
-
-</style>
+<template>
+    <div ref="tableHeader" class="cn-table-header">
+        <div class="table-header ba-scroll-style" :key="num">
+            <el-form
+                style="flex: 1; min-height: 34px; margin-right: 0px; display: flex; flex-wrap: wrap; align-items: center"
+                ref="headerForm"
+                @submit.prevent=""
+                @keyup.enter="onComSearch"
+                label-position="left"
+                :inline="true"
+            >
+                <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
+                    <DatePicker
+                        ref="datePickerRef"
+                        :nextFlag="nextFlag"
+                        :theCurrentTime="theCurrentTime"
+                        @change="handleDatePickerChange"
+                        :timeKeyList="props.timeKeyList"
+                    ></DatePicker>
+                </el-form-item>
+
+                <el-form-item label="区域" v-if="area">
+                    <Area ref="areaRef" v-model.trim="tableStore.table.params.deptIndex" />
+                </el-form-item>
+                <slot name="select"></slot>
+            </el-form>
+            <template v-if="$slots.select || datePicker || showSearch">
+                <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
+                    <Icon :size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
+                    <Icon :size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
+                </el-button>
+                <el-button
+                    @click="onComSearch"
+                    v-if="showSearch &&showQuery"
+                    :loading="tableStore.table.loading"
+                    type="primary"
+                    :icon="Search"
+                >
+                    查询
+                </el-button>
+                <el-button
+                    @click="onResetForm"
+                    v-if="showSearch && showReset"
+                    :loading="tableStore.table.loading"
+                    :icon="RefreshLeft"
+                >
+                    重置
+                </el-button>
+                <el-button
+                    @click="onExport"
+                    v-if="showExport"
+                    :loading="tableStore.table.exportLoading"
+                    type="primary"
+                    icon="el-icon-Download"
+                >
+                    导出
+                </el-button>
+            </template>
+            <slot name="operation"></slot>
+            <el-button
+                class="ml10 vxe-toolbar-custom-target"
+                v-if="showCustomColumn"
+                :icon="Setting"
+                @click="openCustomColumn"
+            >
+                列设置
+            </el-button>
+        </div>
+        <el-form
+            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            ref="headerFormSecond"
+            @submit.prevent=""
+            @keyup.enter="onComSearch"
+            label-position="left"
+            :inline="true"
+        ></el-form>
+    </div>
+</template>
+
+<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 Area from '@/components/form/area/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+import { Search, RefreshLeft, Setting } from '@element-plus/icons-vue'
+import { useTimeCacheStore } from '@/stores/timeCache'
+import { useRoute } from 'vue-router'
+
+const emit = defineEmits(['selectChange','onResetForm'])
+
+const tableStore = inject('tableStore') as TableStore
+const tableHeader = ref()
+const datePickerRef = ref()
+const dictData = useDictData()
+const areaRef = ref()
+const headerForm = ref()
+const headerFormSecond = ref()
+const num = ref(0)
+
+// 获取路由和缓存 store
+const route = useRoute()
+const timeCacheStore = useTimeCacheStore()
+
+interface Props {
+    datePicker?: boolean
+    area?: boolean
+    showSearch?: boolean
+    nextFlag?: boolean //控制时间是否可以往后推
+    theCurrentTime?: boolean //控制时间前3天展示上个月时间
+    showQuery?: boolean //是否显示查詢
+    showReset?: boolean //是否显示重置
+    showExport?: boolean //导出控制
+    showCustomColumn?: boolean // 列设置
+    timeCacheFlag?: boolean //是否取缓存时间
+    timeKeyList?: string[] //日期下拉列表
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    datePicker: false,
+    area: false,
+    showSearch: true,
+    nextFlag: false,
+    theCurrentTime: true,
+    showReset: true,
+    showQuery: true,
+    showExport: false,
+    showCustomColumn: false,
+    timeCacheFlag: true,
+    timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
+})
+
+const openCustomColumn = () => {
+    const tableRef = tableStore?.table?.ref
+    if (!tableRef) return
+    if (tableRef.getCustomVisible?.()) {
+        tableRef.closeCustom?.()
+    } else {
+        tableRef.openCustom?.()
+    }
+}
+
+// 处理 DatePicker 值变化事件
+const handleDatePickerChange = (value: any) => {
+    // 将值缓存到 timeCache
+    // if (value) {
+    //     timeCacheStore.setCache(route.path, value.interval, value.timeValue)
+    // }
+
+    // 将 datePicker 的变化传递给父组件
+    emit('selectChange', true, tableHeader.value.offsetHeight, value)
+}
+
+// 动态计算table高度
+let resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        handlerHeight()
+        computedSearchRow()
+    }
+})
+const showUnfoldButton = ref(false)
+const headerFormSecondStyleOpen = {
+    opacity: 1,
+    height: 'auto',
+    padding: '0 15px 0px 15px'
+}
+const headerFormSecondStyleClose = {
+    opacity: 0,
+    height: '0',
+    padding: '0'
+}
+onMounted(() => {
+    if (props.showCustomColumn && tableStore?.table) {
+        tableStore.table.customColumnInHeader = true
+    }
+    // 设置初始值到 DatePicker
+    if (props.datePicker && datePickerRef.value) {
+        // 从缓存中获取值并设置
+        const cached = timeCacheStore.getCache(route.path)
+        if (props.timeCacheFlag && cached) {
+            if (cached.interval !== undefined) {
+                datePickerRef.value.setInterval(cached.interval)
+            }
+            if (cached.timeValue) {
+                datePickerRef.value.timeValue = cached.timeValue
+            }
+        }
+
+        // 更新 tableStore 参数
+        tableStore.table.params.searchBeginTime = datePickerRef.value?.timeValue?.[0]
+        tableStore.table.params.searchEndTime = datePickerRef.value?.timeValue?.[1]
+        tableStore.table.params.startTime = datePickerRef.value?.timeValue?.[0]
+        tableStore.table.params.endTime = datePickerRef.value?.timeValue?.[1]
+        tableStore.table.params.timeFlag = datePickerRef.value?.timeFlag
+    }
+
+    if (props.area) {
+        tableStore.table.params.deptIndex = dictData.state.area[0].id
+    }
+
+    nextTick(() => {
+        resizeObserver.observe(tableHeader.value)
+        computedSearchRow()
+    })
+})
+onUnmounted(() => {
+    if (tableStore?.table) {
+        tableStore.table.customColumnInHeader = false
+    }
+    resizeObserver.disconnect()
+})
+
+const handlerHeight = () => {
+    if (tableStore && tableStore.table) {
+        tableStore.table.height = mainHeight(
+            tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
+        ).height as string
+    }
+}
+// 刷新页面handler高度出下拉
+const computedSearchRow = () => {
+    if (!headerForm.value.$el) return
+
+    // 清空headerFormSecond.value.$el下的元素
+    while (headerFormSecond.value.$el.firstChild) {
+        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
+    }
+
+    // 获取第一行放了几个表单
+    const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
+
+    //  把第一行放不下的复制一份放到headerFormSecond.value.$el
+    let width = 0
+    for (let i = 0; i < elFormItem.length; i++) {
+        width += elFormItem[i].offsetWidth + 32
+        if (width > headerForm.value.$el.offsetWidth) {
+            headerFormSecond.value.$el.appendChild(elFormItem[i])
+        }
+    }
+
+    // 判断是否需要折叠
+    if (headerFormSecond.value.$el.scrollHeight > 0) {
+        showUnfoldButton.value = true
+    } else {
+        showUnfoldButton.value = false
+    }
+}
+
+const showSelect = ref(false)
+const showSelectChange = () => {
+    showSelect.value = !showSelect.value
+    setTimeout(() => {
+        emit('selectChange', showSelect.value, tableHeader.value.offsetHeight)
+    }, 20)
+}
+const onComSearch = async () => {
+    if (props.datePicker) {
+        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
+    }
+
+    await tableStore.onTableAction('search', {})
+}
+const setDatePicker = (list: any) => {
+    datePickerRef.value.setTimeOptions(list)
+}
+const onResetForm = () => {
+    //时间重置成默认值
+    datePickerRef.value?.setInterval(3)
+    emit('onResetForm')
+    tableStore.onTableAction('reset', {})
+}
+const setInterval = (val: any) => {
+    datePickerRef.value.setInterval(val)
+}
+
+const setTimeInterval = (val: any) => {
+    datePickerRef.value.timeValue = val
+    tableStore.table.params.searchBeginTime = val[0]
+    tableStore.table.params.searchEndTime = val[1]
+    tableStore.table.params.startTime = val[0]
+    tableStore.table.params.endTime = val[1]
+}
+// 导出
+const onExport = () => {
+    tableStore.onTableAction('export', { showAllFlag: true })
+}
+
+defineExpose({
+    onComSearch,
+    areaRef,
+    setDatePicker,
+    setInterval,
+    setTimeInterval,
+    datePickerRef,
+    showSelectChange,
+    computedSearchRow
+})
+</script>
+
+<style scoped lang="scss">
+.cn-table-header {
+    border: 1px solid var(--el-border-color);
+}
+
+.table-header {
+    position: relative;
+    overflow-x: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+
+    border-bottom: none;
+    padding: 13px 15px 9px;
+    font-size: 14px;
+
+    .table-header-operate-text {
+        margin-left: 6px;
+    }
+}
+
+.table-com-search {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    border: 1px solid var(--ba-border-color);
+    border-bottom: none;
+    padding: 13px 15px 20px 15px;
+    font-size: 14px;
+}
+
+#header-form-second,
+#header-form {
+    // display: flex;
+    // flex-wrap: wrap;
+    transition: all 0.3s;
+}
+
+.mlr-12 {
+    margin-left: 12px;
+}
+
+.mlr-12 + .el-button {
+    margin-left: 12px;
+}
+
+.table-search {
+    display: flex;
+    margin-left: auto;
+
+    .quick-search {
+        width: auto;
+    }
+}
+
+.table-search-button-group {
+    display: flex;
+    margin-left: 12px;
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    overflow: hidden;
+
+    button:focus,
+    button:active {
+        background-color: var(--ba-bg-color-overlay);
+    }
+
+    button:hover {
+        background-color: var(--el-color-info-light-7);
+    }
+
+    .table-search-button-item {
+        height: 30px;
+        border: none;
+        border-radius: 0;
+    }
+
+    .el-button + .el-button {
+        margin: 0;
+    }
+
+    .right-border {
+        border-right: 1px solid var(--el-border-color);
+    }
+}
+
+html.dark {
+    .table-search-button-group {
+        button:focus,
+        button:active {
+            background-color: var(--el-color-info-dark-2);
+        }
+
+        button:hover {
+            background-color: var(--el-color-info-light-7);
+        }
+
+        button {
+            background-color: var(--ba-bg-color-overlay);
+
+            el-icon {
+                color: white !important;
+            }
+        }
+    }
+}
+
+#header-form,
+#header-form-second {
+    :deep(.el-select) {
+        --el-select-width: 220px;
+    }
+
+    :deep(.el-input) {
+        --el-input-width: 220px;
+    }
+}
+
+</style>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 23550c9..03d3352 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
         <div v-if="showCustomColumn && !tableStore?.table?.customColumnInHeader" class="table-custom-toolbar">
-            <el-button :icon="Setting" @click="openCustomColumn">列设置</el-button>
+            <el-button class="vxe-toolbar-custom-target" :icon="Setting" @click="openCustomColumn">列设置</el-button>
         </div>
         <vxe-table
             ref="tableRef"
@@ -66,7 +66,6 @@
 
 <script setup lang="ts">
 import { ref, inject, computed, onMounted, watch, useAttrs } from 'vue'
-import type { ElTable } from 'element-plus'
 import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
 import { Setting } from '@element-plus/icons-vue'
 import FieldRender from '@/components/table/fieldRender/index.vue'
@@ -87,7 +86,7 @@ const tableRef = ref<VxeTableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
 const router = useRouter()
 const key = ref(0)
-interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
+interface Props extends /* @vue-ignore */ Partial<VxeTableInstance> {
     isGroup?: boolean
     showOverflow?: boolean | 'ellipsis' | 'title' | 'tooltip'
     showCustomColumn?: boolean
@@ -109,7 +108,12 @@ const tableBindProps = computed(() => {
     })
 })
 const openCustomColumn = () => {
-    tableRef.value?.openCustom?.()
+    if (!tableRef.value) return
+    if (tableRef.value.getCustomVisible?.()) {
+        tableRef.value.closeCustom?.()
+    } else {
+        tableRef.value.openCustom?.()
+    }
 }
 onMounted(() => {
     if (!tableStore?.table) return
@@ -137,7 +141,7 @@ const handleSortChange = ({ field, order }: any) => {
     // console.log('🚀 ~ handleSortChange ~ prop, order :', field, order)
     if (field && order) {
         // 根据当前排序条件对所有数据进行排序
-        const list = tableStore.table.copyData.sort((a, b) => {
+        const list = tableStore.table.copyData.sort((a: any, b: any) => {
             if (order === 'asc') {
                 return a[field] > b[field] ? 1 : -1
             } else {
diff --git a/src/views/govern/device/control/moduleData.vue b/src/views/govern/device/control/moduleData.vue
index f16c736..2c280d9 100644
--- a/src/views/govern/device/control/moduleData.vue
+++ b/src/views/govern/device/control/moduleData.vue
@@ -189,7 +189,7 @@ const setData = (data: any) => {
                         fontSize: 16
                     }
                 },
-                formatter: function (params) {
+                formatter: function (params: any) {
                     // console.log("🚀 ~ data.forEach ~ params:", params)
                     let tip = ''
                     for (let i = 0; i < params.length; i++) {
@@ -378,10 +378,10 @@ const changeDataType = () => {
     let flag = dataType.value.includes(0) || dataType.value.includes(1)
     if (flag) {
         let data1 = dataType.value.includes(0)
-            ? loadList.map(k => (k.data == 3.14159 ? null : k.data))
+            ? loadList.map((k: any) => (k.data == 3.14159 ? null : k.data))
             : []
         let data2 = dataType.value.includes(1)
-            ? modOutList.map(k => (k.data == 3.14159 ? null : k.data))
+            ? modOutList.map((k: any) => (k.data == 3.14159 ? null : k.data))
             : []
         let [modOuMin, modOuMax] = yMethod([...data1, ...data2])
 
@@ -476,7 +476,7 @@ const changeDataType = () => {
     }
     if (dataType.value.includes(2)) {
         let [temperatureMin, temperatureMax] = yMethod(
-            temperatureList.map(k => (k.data == 3.14159 ? 0 : k.data))
+            temperatureList.map((k: any) => (k.data == 3.14159 ? 0 : k.data))
         )
         echartsData.value.yAxis[flag ? 1 : 0] = {
             name: '℃',
@@ -508,7 +508,7 @@ const changeDataType = () => {
     }
     key.value += 1
 }
-function renderItem(params, api) {
+function renderItem(params: any, api: any) {
     var categoryIndex = api.value(0)
     var start = api.coord([api.value(1), categoryIndex])
     var end = api.coord([api.value(2), categoryIndex])
@@ -538,7 +538,7 @@ function renderItem(params, api) {
     )
 }
 // 三角形标记渲染函数
-function renderMarker(params, api) {
+function renderMarker(params: any, api: any) {
     var point = api.coord([api.value(0), 0])
     var symbolSize = 8
     var offsetY = 40
diff --git a/src/views/govern/monitorRecall/log.vue b/src/views/govern/monitorRecall/log.vue
index 1789255..b051299 100644
--- a/src/views/govern/monitorRecall/log.vue
+++ b/src/views/govern/monitorRecall/log.vue
@@ -160,7 +160,7 @@ const handleaddDevice = () => {
         query: {
             activeName: '0',
             id: lineId.value,
-            ndid: deviceData.value?.ndid,
+            ndid: (deviceData.value as any)?.ndid || '',
 
         }
     })
diff --git a/src/views/pms/comptroller/list.vue b/src/views/pms/comptroller/list.vue
index 9c8fd49..638ef09 100644
--- a/src/views/pms/comptroller/list.vue
+++ b/src/views/pms/comptroller/list.vue
@@ -29,7 +29,7 @@ import { saveLogParam } from '@/api/common'
 defineOptions({
     name: 'comptroller/list'
 })
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     url: '/system-boot/audit/getAuditLog',
     method: 'POST',
     column: [
diff --git a/src/views/pms/voltage/sags/operationsManagement/index.vue b/src/views/pms/voltage/sags/operationsManagement/index.vue
index a861039..4b63f7f 100644
--- a/src/views/pms/voltage/sags/operationsManagement/index.vue
+++ b/src/views/pms/voltage/sags/operationsManagement/index.vue
@@ -47,7 +47,7 @@ defineOptions({
 const dictData = useDictData()
 const manufacturer = dictData.getBasicData('Dev_Manufacturers')
 const manufacturerForm = ref<string[]>([])
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     isWebPaging: true,
     url: '/device-boot/runManage/getRuntimeData',
     method: 'POST',
diff --git a/src/views/pms/voltage/sags/operationsManagement/point.vue b/src/views/pms/voltage/sags/operationsManagement/point.vue
index 677d42d..181e000 100644
--- a/src/views/pms/voltage/sags/operationsManagement/point.vue
+++ b/src/views/pms/voltage/sags/operationsManagement/point.vue
@@ -47,7 +47,7 @@ const interferenceSource = dictData.getBasicData('Interference_Source')
 const level = dictData.getBasicData('Dev_Voltage_Stand')
 const interferenceSourceForm = ref<string[]>([])
 const scaleForm = ref<string[]>([])
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     isWebPaging: true,
     url: '/device-boot/runManage/getLineLedger',
     method: 'POST',
diff --git a/src/views/setting/dictionary/list/index.vue b/src/views/setting/dictionary/list/index.vue
index 003c5b1..6c577d6 100644
--- a/src/views/setting/dictionary/list/index.vue
+++ b/src/views/setting/dictionary/list/index.vue
@@ -32,7 +32,7 @@ defineOptions({
 })
 const popupEditRef = ref()
 const detail = ref<anyObj | null>(null)
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     url: '/system-boot/dictType/list',
     method: 'POST',
     column: [
diff --git a/src/views/setting/dictionary/version/index.vue b/src/views/setting/dictionary/version/index.vue
index 1f57099..b3b8e92 100644
--- a/src/views/setting/dictionary/version/index.vue
+++ b/src/views/setting/dictionary/version/index.vue
@@ -102,7 +102,7 @@ const rules = {
     iosPath: [{ required: true, message: '请输入IOS路径', trigger: 'blur' }]
 }
 const formRef = ref()
-const tableStore = new TableStore({
+const tableStore: any = new TableStore({
     url: '/cs-system-boot/appVersion/getAllData',
     method: 'POST',
     showPage: false,
diff --git a/src/views/system/scheduledTasks/index.vue b/src/views/system/scheduledTasks/index.vue
index caac2ba..ec93597 100644
--- a/src/views/system/scheduledTasks/index.vue
+++ b/src/views/system/scheduledTasks/index.vue
@@ -105,12 +105,12 @@ const tableStore: any = new TableStore({
             onChangeField: (row: any, value: any) => {
                 if (row.jobStatus == 1) {
                     stop({ id: row.id }).then(res => {
-                        ElMessage.success(res.message)
+                        ElMessage.success((res as any).message)
                         tableStore.index()
                     })
                 } else {
                     start({ id: row.id }).then(res => {
-                        ElMessage.success(res.message)
+                        ElMessage.success((res as any).message)
                         tableStore.index()
                     })
                 }
diff --git a/tsconfig.json b/tsconfig.json
index 686d493..f21b946 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "esnext",
         "useDefineForClassFields": true,
-        "suppressImplicitAnyIndexErrors": true,
+        // "suppressImplicitAnyIndexErrors": true,
         "module": "esnext",
         "moduleResolution": "node",
         "removeComments": false,