merge code
This commit is contained in:
@@ -1,118 +1,130 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button
|
||||
icon="FolderAdd"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
trigger-type="default"
|
||||
trigger-circle
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-tooltip class="item" effect="dark" content="列设置" placement="top">
|
||||
<el-button circle style="margin-left: 0;">
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 内容卡片 -->
|
||||
<el-card class="content-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Document /></el-icon>
|
||||
门禁规则列表
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<el-button
|
||||
icon="FolderAdd"
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
trigger-type="default"
|
||||
trigger-circle
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-tooltip class="item" effect="dark" content="列设置" placement="top">
|
||||
<el-button circle style="margin-left: 0;">
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip>
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Document" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<!-- 假期模式列特殊模板 -->
|
||||
<template v-if="col.prop === 'isHoliday'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.isHoliday"
|
||||
:options="[{ label: '开启', value: '1' }, { label: '关闭', value: '0' }]"
|
||||
:type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
|
||||
/>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="280">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip>
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Document" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 假期模式列特殊模板 -->
|
||||
<template v-if="col.prop === 'isHoliday'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.isHoliday"
|
||||
:options="[{ label: '开启', value: '1' }, { label: '关闭', value: '0' }]"
|
||||
:type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Switch"
|
||||
text
|
||||
:type="scope.row.isHoliday === '1' ? 'warning' : 'success'"
|
||||
@click="handleToggleHoliday(scope.row)">
|
||||
{{ scope.row.isHoliday === '1' ? '关闭假期模式' : '开启假期模式' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="280">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Switch"
|
||||
link
|
||||
:type="scope.row.isHoliday === '1' ? 'warning' : 'success'"
|
||||
@click="handleToggleHoliday(scope.row)">
|
||||
{{ scope.row.isHoliday === '1' ? '关闭假期模式' : '开启假期模式' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="View"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
@@ -155,7 +167,8 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, Document, Grid, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent as defineStatusTag } from 'vue'
|
||||
const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -182,104 +195,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
isHoliday: { icon: CircleCheck }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
const visibleColumns = ref<string[]>([])
|
||||
// 列排序顺序
|
||||
const columnOrder = ref<string[]>([])
|
||||
|
||||
// 从本地统一存储加载配置
|
||||
const loadSavedConfig = () => {
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const savedConfig = getTableConfigFromLocal(storageKey)
|
||||
|
||||
if (savedConfig && savedConfig.visibleColumns) {
|
||||
const validColumns = tableColumns.map(col => col.prop || col.label)
|
||||
const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
|
||||
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
|
||||
} else {
|
||||
visibleColumns.value = tableColumns.map(col => col.prop || col.label)
|
||||
}
|
||||
|
||||
if (savedConfig && savedConfig.columnOrder) {
|
||||
const validColumns = tableColumns.map(col => col.prop || col.label)
|
||||
columnOrder.value = savedConfig.columnOrder.filter((key: string) => validColumns.includes(key))
|
||||
validColumns.forEach(key => {
|
||||
if (!columnOrder.value.includes(key)) {
|
||||
columnOrder.value.push(key)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
columnOrder.value = tableColumns.map(col => col.prop || col.label)
|
||||
}
|
||||
}
|
||||
|
||||
loadSavedConfig()
|
||||
|
||||
// 排序后的表格列
|
||||
const sortedTableColumns = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: typeof tableColumns = []
|
||||
const unorderedColumns: typeof tableColumns = []
|
||||
|
||||
columnOrder.value.forEach(key => {
|
||||
const col = columns.find(c => (c.prop || c.label) === key)
|
||||
if (col) {
|
||||
orderedColumns.push(col)
|
||||
}
|
||||
})
|
||||
|
||||
columns.forEach(col => {
|
||||
const key = col.prop || col.label
|
||||
if (!columnOrder.value.includes(key)) {
|
||||
unorderedColumns.push(col)
|
||||
}
|
||||
})
|
||||
|
||||
return [...orderedColumns, ...unorderedColumns]
|
||||
}
|
||||
|
||||
return columns
|
||||
})
|
||||
|
||||
// 列显示控制函数
|
||||
const checkColumnVisible = (prop: string): boolean => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
return true
|
||||
}
|
||||
return visibleColumns.value.includes(prop)
|
||||
}
|
||||
|
||||
// 监听列变化
|
||||
const handleColumnChange = (columns: string[]) => {
|
||||
visibleColumns.value = columns
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = columns.filter(col => {
|
||||
const column = tableColumns.find(c => (c.prop || c.label) === col)
|
||||
return column && !column.alwaysShow && !column.fixed
|
||||
})
|
||||
// 保存到本地统一存储
|
||||
saveTableConfigToLocal(storageKey, { visibleColumns: selectableColumns })
|
||||
// 异步保存到后端
|
||||
updateUserTableConfig(storageKey, { visibleColumns: selectableColumns }).catch(() => {})
|
||||
}
|
||||
|
||||
// 监听列排序变化
|
||||
const handleColumnOrderChange = (order: string[]) => {
|
||||
columnOrder.value = order
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
// 保存到本地统一存储
|
||||
saveTableConfigToLocal(storageKey, { columnOrder: order })
|
||||
// 异步保存到后端
|
||||
updateUserTableConfig(storageKey, { columnOrder: order }).catch(() => {})
|
||||
}
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
|
||||
Reference in New Issue
Block a user