Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

全局表格添加列配置功能

Browse Source
This commit is contained in:
guanj
2026-07-09 13:54:18 +08:00
parent 1a69be62a0
commit 855c569535
116 changed files with 1078 additions and 9806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/table/header/index.vue
View File

@@ -1,21 +1,39 @@
<template>
<div ref="tableHeader" class="cn-table-header">
<div class="table-header ba-scroll-style">
<el-form style="flex: 1; height: 32px; display: flex; flex-wrap: wrap" ref="headerForm" @submit.prevent=""
@keyup.enter="onComSearch" label-position="left" :inline="true">
<el-form-item v-if="datePicker" style="grid-column: span 2; "
:style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }">
<el-form
style="flex: 1; height: 32px; display: flex; flex-wrap: wrap"
ref="headerForm"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
:inline="true"
>
<el-form-item
v-if="datePicker"
style="grid-column: span 2"
:style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }"
>
<template #label>
<el-checkbox v-if="showTimeAll" v-model="timeAll" label="统计时间" />
<span v-else>{{ dateLabel }}</span>
</template>
<DatePicker ref="datePickerRef" v-if="timeAll" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"
:isStatisticData="isStatisticData"></DatePicker>
<DatePicker
ref="datePickerRef"
v-if="timeAll"
:nextFlag="nextFlag"
:theCurrentTime="theCurrentTime"
:isStatisticData="isStatisticData"
></DatePicker>
</el-form-item>
<el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" @change-value="onAreaChange"
style="width: 200px;" />
<Area
ref="areaRef"
v-model="tableStore.table.params.deptIndex"
@change-value="onAreaChange"
style="width: 200px"
/>
</el-form-item>
<slot name="select"></slot>
</el-form>
@@ -24,24 +42,44 @@
<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" :loading="tableStore.table.loading" type="primary"
:icon="Search">
<el-button
@click="onComSearch"
v-if="showSearch"
: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
@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
@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>
<el-form
:style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
ref="headerFormSecond"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
:inline="true"
></el-form>
</div>
</template>
@@ -52,8 +90,7 @@ 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 } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
import { Search, RefreshLeft, Setting } from '@element-plus/icons-vue'
const emit = defineEmits(['selectChange', 'areaChange'])
const tableStore = inject('tableStore') as TableStore
const tableHeader = ref()
@@ -74,6 +111,7 @@ interface Props {
showTimeAll?: boolean //控制时间是否显示
dateLabel?: string //设置时间名称
isStatisticData?: number | string // 0统计数据 1分钟数据
showCustomColumn?: boolean // 列设置
}
const props = withDefaults(defineProps<Props>(), {
@@ -86,7 +124,8 @@ const props = withDefaults(defineProps<Props>(), {
showExport: false,
showTimeAll: false,
dateLabel: '统计日期',
isStatisticData: 0
isStatisticData: 0,
showCustomColumn: false
})
// 动态计算table高度
const resizeObserver = new ResizeObserver(entries => {
@@ -128,7 +167,13 @@ watch(
}, 500)
}
)
const openCustomColumn = () => {
tableStore?.table?.ref?.openCustom?.()
}
onMounted(() => {
if (props.showCustomColumn && tableStore?.table) {
tableStore.table.customColumnInHeader = true
}
timeAll.value = props.showTimeAll ? false : true
if (props.datePicker && timeAll.value) {
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
@@ -300,7 +345,7 @@ defineExpose({
margin-left: 12px;
}
.mlr-12+.el-button {
.mlr-12 + .el-button {
margin-left: 12px;
}
@@ -335,7 +380,7 @@ defineExpose({
border-radius: 0;
}
.el-button+.el-button {
.el-button + .el-button {
margin: 0;
}
@@ -346,7 +391,6 @@ defineExpose({
html.dark {
.table-search-button-group {
button:focus,
button:active {
background-color: var(--el-color-info-dark-2);