merge code
This commit is contained in:
663
docs/tableHook使用方式.md
Normal file
663
docs/tableHook使用方式.md
Normal file
@@ -0,0 +1,663 @@
|
||||
# useTableColumnControl Hook 使用文档
|
||||
|
||||
## 一、简介
|
||||
|
||||
`useTableColumnControl` 是一个用于统一管理表格列显示/隐藏和排序功能的 Vue 3 Composition API Hook。它封装了列配置的加载、保存、同步等逻辑，让开发者只需几行代码即可实现完整的表格列控制功能。
|
||||
|
||||
### 主要功能
|
||||
- ✅ 列显示/隐藏控制
|
||||
- ✅ 列排序管理
|
||||
- ✅ 配置自动保存到本地存储
|
||||
- ✅ 配置同步到后端服务器
|
||||
- ✅ 自动加载已保存的配置
|
||||
- ✅ 类型安全支持
|
||||
|
||||
---
|
||||
|
||||
## 二、安装和引入
|
||||
|
||||
### 文件位置
|
||||
```
|
||||
src/hooks/tableColumn.ts
|
||||
```
|
||||
|
||||
### 引入方式
|
||||
```typescript
|
||||
import { useTableColumnControl, type TableColumn } from '/@/hooks/tableColumn'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、基础使用
|
||||
|
||||
### 1. 引入公共样式（推荐）
|
||||
|
||||
首先在 `<style>` 中引入现代化页面布局样式：
|
||||
|
||||
```vue
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
```
|
||||
|
||||
### 2. 定义表格列配置
|
||||
|
||||
```typescript
|
||||
import { User, Calendar, Phone } from '@element-plus/icons-vue'
|
||||
|
||||
const tableColumns = [
|
||||
{ prop: 'name', label: '姓名', icon: User },
|
||||
{ prop: 'age', label: '年龄', icon: Calendar },
|
||||
{ prop: 'phone', label: '电话', icon: Phone }
|
||||
]
|
||||
```
|
||||
|
||||
### 3. 使用 Hook
|
||||
|
||||
```typescript
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
```
|
||||
|
||||
### 4. 在模板中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form class="search-form">
|
||||
<!-- 搜索表单项 -->
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<!-- TableColumnControl 组件 -->
|
||||
<TableColumnControl
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="dataList" stripe class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((pagination?.current || 1) - 1) * (pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 动态渲染列 -->
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
>
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon">
|
||||
<component :is="col.icon" />
|
||||
</el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination v-bind="pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、完整示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<right-toolbar>
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
trigger-type="default"
|
||||
trigger-circle
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-tooltip content="列设置" placement="top">
|
||||
<el-button circle>
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
|
||||
<el-table :data="state.dataList" stripe>
|
||||
<el-table-column type="index" label="序号" width="70">
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon">
|
||||
<component :is="col.icon" />
|
||||
</el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<!-- 操作列内容 -->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import { User, Calendar, Phone, Menu } from '@element-plus/icons-vue'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
|
||||
// 定义表格列
|
||||
const tableColumns = [
|
||||
{ prop: 'name', label: '姓名', icon: User },
|
||||
{ prop: 'age', label: '年龄', icon: Calendar },
|
||||
{ prop: 'phone', label: '电话', icon: Phone }
|
||||
]
|
||||
|
||||
// 使用 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
const columnControlRef = ref()
|
||||
const state = ref({
|
||||
dataList: [],
|
||||
pagination: { current: 1, size: 10 }
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 五、API 参考
|
||||
|
||||
### TableColumn 类型定义
|
||||
|
||||
```typescript
|
||||
interface TableColumn {
|
||||
prop?: string // 列属性名
|
||||
label?: string // 列标题
|
||||
icon?: any // 列图标组件
|
||||
width?: number | string // 列宽度
|
||||
minWidth?: number | string // 最小宽度
|
||||
showOverflowTooltip?: boolean // 是否显示溢出提示
|
||||
align?: 'left' | 'center' | 'right' // 对齐方式
|
||||
alwaysShow?: boolean // 是否始终显示（不参与列控制）
|
||||
fixed?: boolean | 'left' | 'right' // 是否固定列
|
||||
[key: string]: any // 其他自定义属性
|
||||
}
|
||||
```
|
||||
|
||||
### Hook 返回值
|
||||
|
||||
| 属性/方法 | 类型 | 说明 |
|
||||
|----------|------|------|
|
||||
| `visibleColumns` | `Ref<string[]>` | 当前可见的列 key 数组 |
|
||||
| `columnOrder` | `Ref<string[]>` | 列排序顺序数组 |
|
||||
| `visibleColumnsSorted` | `ComputedRef<TableColumn[]>` | 排序后的可见列配置数组 |
|
||||
| `checkColumnVisible` | `(prop: string) => boolean` | 检查列是否可见 |
|
||||
| `handleColumnChange` | `(value: string[]) => void` | 处理列显示变化 |
|
||||
| `handleColumnOrderChange` | `(order: string[]) => void` | 处理列排序变化 |
|
||||
| `loadSavedConfig` | `() => void` | 手动加载保存的配置 |
|
||||
|
||||
### Hook 选项参数
|
||||
|
||||
```typescript
|
||||
interface Options {
|
||||
autoLoad?: boolean // 是否自动加载配置，默认 true
|
||||
storageKey?: string // 自定义存储 key，默认使用路由路径
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 六、高级用法
|
||||
|
||||
### 1. 自定义存储 Key
|
||||
|
||||
如果不想使用默认的路由路径作为存储 key，可以自定义：
|
||||
|
||||
```typescript
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, {
|
||||
storageKey: 'custom-table-columns-key'
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 禁用自动加载
|
||||
|
||||
如果需要在特定时机手动加载配置：
|
||||
|
||||
```typescript
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange,
|
||||
loadSavedConfig
|
||||
} = useTableColumnControl(tableColumns, {
|
||||
autoLoad: false
|
||||
})
|
||||
|
||||
// 在需要的时候手动加载
|
||||
onMounted(() => {
|
||||
loadSavedConfig()
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 固定列和始终显示的列
|
||||
|
||||
某些列（如操作列）不应该参与列控制：
|
||||
|
||||
```typescript
|
||||
const tableColumns = [
|
||||
{ prop: 'name', label: '姓名', icon: User },
|
||||
{ prop: 'age', label: '年龄', icon: Calendar },
|
||||
{
|
||||
prop: 'action',
|
||||
label: '操作',
|
||||
alwaysShow: true, // 始终显示
|
||||
fixed: 'right' // 固定在右侧
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 4. 特殊列模板
|
||||
|
||||
如果需要为某些列添加特殊模板：
|
||||
|
||||
```vue
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
>
|
||||
<!-- 状态列特殊模板 -->
|
||||
<template v-if="col.prop === 'status'" #default="scope">
|
||||
<el-tag :type="scope.row.status === '1' ? 'success' : 'warning'">
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<!-- 其他列默认显示 -->
|
||||
<template v-else #default="scope">
|
||||
{{ scope.row[col.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 七、注意事项
|
||||
|
||||
### 1. 列 Key 的唯一性
|
||||
|
||||
确保每列的 `prop` 或 `label` 是唯一的，因为 Hook 使用它们作为标识：
|
||||
|
||||
```typescript
|
||||
// ✅ 正确
|
||||
const tableColumns = [
|
||||
{ prop: 'name', label: '姓名' },
|
||||
{ prop: 'age', label: '年龄' }
|
||||
]
|
||||
|
||||
// ❌ 错误：两个列都没有 prop
|
||||
const tableColumns = [
|
||||
{ label: '姓名' },
|
||||
{ label: '年龄' }
|
||||
]
|
||||
```
|
||||
|
||||
### 2. 响应式更新
|
||||
|
||||
`tableColumns` 应该是响应式的，如果需要在运行时动态修改列配置：
|
||||
|
||||
```typescript
|
||||
const tableColumns = ref([
|
||||
{ prop: 'name', label: '姓名' },
|
||||
{ prop: 'age', label: '年龄' }
|
||||
])
|
||||
|
||||
// 动态添加列
|
||||
tableColumns.value.push({ prop: 'phone', label: '电话' })
|
||||
```
|
||||
|
||||
### 3. 配置存储位置
|
||||
|
||||
- **本地存储**：使用 `localStorage`，key 为 `user-table-configs-all`
|
||||
- **后端存储**：通过 API 同步，key 为 `user-table-configs`
|
||||
- **页面存储**：每个页面的配置通过路由路径生成唯一 key
|
||||
|
||||
### 4. 配置加载时机
|
||||
|
||||
Hook 默认在组件挂载时自动加载配置。如果需要在数据加载后重新加载：
|
||||
|
||||
```typescript
|
||||
const { loadSavedConfig } = useTableColumnControl(tableColumns)
|
||||
|
||||
watch(() => someData.value, () => {
|
||||
// 数据变化后重新加载配置
|
||||
loadSavedConfig()
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 八、扩展方式
|
||||
|
||||
### 1. 添加列宽保存功能
|
||||
|
||||
如果需要保存列宽，可以扩展 Hook：
|
||||
|
||||
```typescript
|
||||
// 扩展 Hook
|
||||
function useTableColumnControlWithWidth(tableColumns: TableColumn[]) {
|
||||
const baseHook = useTableColumnControl(tableColumns)
|
||||
const columnWidths = ref<Record<string, number>>({})
|
||||
|
||||
const handleColumnWidthChange = (prop: string, width: number) => {
|
||||
columnWidths.value[prop] = width
|
||||
// 保存到本地存储
|
||||
const storageKey = getStorageKey()
|
||||
const config = getTableConfigFromLocal(storageKey) || {}
|
||||
config.columnWidths = columnWidths.value
|
||||
saveTableConfigToLocal(storageKey, config)
|
||||
}
|
||||
|
||||
return {
|
||||
...baseHook,
|
||||
columnWidths,
|
||||
handleColumnWidthChange
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 添加列固定功能
|
||||
|
||||
如果需要保存列的固定状态：
|
||||
|
||||
```typescript
|
||||
function useTableColumnControlWithFixed(tableColumns: TableColumn[]) {
|
||||
const baseHook = useTableColumnControl(tableColumns)
|
||||
const fixedColumns = ref<string[]>([])
|
||||
|
||||
const toggleColumnFixed = (prop: string) => {
|
||||
const index = fixedColumns.value.indexOf(prop)
|
||||
if (index > -1) {
|
||||
fixedColumns.value.splice(index, 1)
|
||||
} else {
|
||||
fixedColumns.value.push(prop)
|
||||
}
|
||||
// 保存配置
|
||||
}
|
||||
|
||||
return {
|
||||
...baseHook,
|
||||
fixedColumns,
|
||||
toggleColumnFixed
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 添加列分组功能
|
||||
|
||||
如果需要按分组管理列：
|
||||
|
||||
```typescript
|
||||
function useTableColumnControlWithGroup(
|
||||
tableColumns: TableColumn[],
|
||||
groups: Record<string, string[]>
|
||||
) {
|
||||
const baseHook = useTableColumnControl(tableColumns)
|
||||
|
||||
const getColumnsByGroup = (groupName: string) => {
|
||||
return tableColumns.filter(col =>
|
||||
groups[groupName]?.includes(col.prop || '')
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
...baseHook,
|
||||
getColumnsByGroup
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 自定义存储策略
|
||||
|
||||
如果需要使用不同的存储策略（如 IndexedDB）：
|
||||
|
||||
```typescript
|
||||
function useTableColumnControlWithCustomStorage(
|
||||
tableColumns: TableColumn[],
|
||||
storageAdapter: {
|
||||
get: (key: string) => Promise<any>
|
||||
set: (key: string, value: any) => Promise<void>
|
||||
}
|
||||
) {
|
||||
// 实现自定义存储逻辑
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 九、常见问题
|
||||
|
||||
### Q1: 为什么配置没有保存？
|
||||
|
||||
**A:** 检查以下几点：
|
||||
1. 确保 `handleColumnChange` 和 `handleColumnOrderChange` 已正确绑定到组件
|
||||
2. 检查浏览器控制台是否有错误
|
||||
3. 确认 API 调用是否成功（检查网络请求）
|
||||
|
||||
### Q2: 为什么某些列无法隐藏？
|
||||
|
||||
**A:** 检查列配置中是否设置了 `alwaysShow: true` 或 `fixed` 属性：
|
||||
|
||||
```typescript
|
||||
// 这些列无法隐藏
|
||||
{ prop: 'action', label: '操作', alwaysShow: true }
|
||||
{ prop: 'id', label: 'ID', fixed: 'left' }
|
||||
```
|
||||
|
||||
### Q3: 如何重置列配置？
|
||||
|
||||
**A:** 可以手动清除本地存储或调用 API 删除配置：
|
||||
|
||||
```typescript
|
||||
// 清除本地存储
|
||||
localStorage.removeItem('user-table-configs-all')
|
||||
|
||||
// 或通过 API 删除
|
||||
import { deleteUserTableConfig } from '/@/api/admin/usertable'
|
||||
deleteUserTableConfig(storageKey)
|
||||
```
|
||||
|
||||
### Q4: 如何在多个页面共享列配置？
|
||||
|
||||
**A:** 使用相同的 `storageKey`：
|
||||
|
||||
```typescript
|
||||
const { visibleColumns } = useTableColumnControl(tableColumns, {
|
||||
storageKey: 'shared-table-columns'
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 十、最佳实践
|
||||
|
||||
### 1. 列配置管理
|
||||
|
||||
将列配置提取到单独的文件中，便于维护：
|
||||
|
||||
```typescript
|
||||
// src/views/xxx/columns.ts
|
||||
import { User, Calendar } from '@element-plus/icons-vue'
|
||||
|
||||
export const tableColumns = [
|
||||
{ prop: 'name', label: '姓名', icon: User },
|
||||
{ prop: 'age', label: '年龄', icon: Calendar }
|
||||
]
|
||||
```
|
||||
|
||||
### 2. 类型定义
|
||||
|
||||
为列配置添加类型约束：
|
||||
|
||||
```typescript
|
||||
import type { TableColumn } from '/@/hooks/tableColumn'
|
||||
|
||||
const tableColumns: TableColumn[] = [
|
||||
{ prop: 'name', label: '姓名', icon: User }
|
||||
]
|
||||
```
|
||||
|
||||
### 3. 统一命名
|
||||
|
||||
保持列 `prop` 与后端字段名一致，便于数据处理。
|
||||
|
||||
### 4. 性能优化
|
||||
|
||||
对于大量列的表格，考虑使用虚拟滚动或分页加载列配置。
|
||||
|
||||
---
|
||||
|
||||
## 十一、迁移指南
|
||||
|
||||
### 从旧实现迁移到 Hook
|
||||
|
||||
**旧代码（~90 行）：**
|
||||
```typescript
|
||||
const visibleColumns = ref<string[]>([])
|
||||
const columnOrder = ref<string[]>([])
|
||||
const loadSavedConfig = () => { /* ... */ }
|
||||
const handleColumnChange = () => { /* ... */ }
|
||||
// ... 更多代码
|
||||
```
|
||||
|
||||
**新代码（~5 行）：**
|
||||
```typescript
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
```
|
||||
|
||||
### 迁移步骤
|
||||
|
||||
1. 引入 Hook
|
||||
2. 删除旧的列控制逻辑（`loadSavedConfig`、`handleColumnChange` 等）
|
||||
3. 使用 Hook 返回值替换原有变量
|
||||
4. 测试功能是否正常
|
||||
|
||||
---
|
||||
|
||||
## 十二、更新日志
|
||||
|
||||
### v1.0.0 (2024-01-XX)
|
||||
- ✅ 初始版本发布
|
||||
- ✅ 支持列显示/隐藏控制
|
||||
- ✅ 支持列排序管理
|
||||
- ✅ 支持本地存储和服务器同步
|
||||
- ✅ 支持自动加载配置
|
||||
|
||||
---
|
||||
|
||||
## 十三、相关资源
|
||||
|
||||
- **Hook 源码**：`src/hooks/tableColumn.ts`
|
||||
- **API 接口**：`src/api/admin/usertable.ts`
|
||||
- **组件源码**：`src/components/TableColumnControl/index.vue`
|
||||
- **示例页面**：`src/views/stuwork/classmasterresume/index.vue`
|
||||
|
||||
---
|
||||
|
||||
## 十四、贡献指南
|
||||
|
||||
如果发现 bug 或有改进建议，请：
|
||||
1. 提交 Issue 描述问题
|
||||
2. 提交 Pull Request 提供修复方案
|
||||
3. 更新本文档说明变更
|
||||
|
||||
---
|
||||
|
||||
**最后更新：2024-01-XX**
|
||||
|
||||
252
src/assets/styles/modern-page.scss
Normal file
252
src/assets/styles/modern-page.scss
Normal file
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
* 现代化页面布局公共样式
|
||||
* 用于统一的卡片式布局和表格样式
|
||||
*
|
||||
* 使用方法：
|
||||
* @import '/@/assets/styles/modern-page.scss';
|
||||
*
|
||||
* 然后在模板中使用以下类名：
|
||||
* - .modern-page-container: 页面容器
|
||||
* - .page-wrapper: 页面包装器
|
||||
* - .search-card: 搜索表单卡片
|
||||
* - .content-card: 内容卡片
|
||||
* - .modern-table: 现代化表格
|
||||
* - .search-form: 搜索表单
|
||||
*/
|
||||
|
||||
// 页面容器
|
||||
.modern-page-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
// 页面包装器
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
// 搜索卡片
|
||||
.search-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容卡片
|
||||
.content-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片头部
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
|
||||
.title-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--el-color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// 搜索表单 - 保持原有宽度
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
// 确保表单项宽度保持200px
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 现代化表格
|
||||
.modern-table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-table__header) {
|
||||
th {
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e4e7ed;
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
tr {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__row) {
|
||||
&:nth-child(even) {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页包装器
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.modern-page-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card,
|
||||
.content-card {
|
||||
:deep(.el-card__header) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 移动端保持表单宽度
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.search-card,
|
||||
.content-card {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 表格空状态优化
|
||||
:deep(.el-empty) {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
220
src/hooks/tableColumn.ts
Normal file
220
src/hooks/tableColumn.ts
Normal file
@@ -0,0 +1,220 @@
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
|
||||
/**
|
||||
* 表格列配置类型
|
||||
*/
|
||||
export interface TableColumn {
|
||||
prop?: string
|
||||
label?: string
|
||||
icon?: any
|
||||
width?: number | string
|
||||
minWidth?: number | string
|
||||
showOverflowTooltip?: boolean
|
||||
align?: 'left' | 'center' | 'right'
|
||||
alwaysShow?: boolean
|
||||
fixed?: boolean | 'left' | 'right'
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
/**
|
||||
* useTableColumnControl Hook
|
||||
*
|
||||
* 用于统一管理表格列的显示/隐藏和排序功能
|
||||
*
|
||||
* @param tableColumns 表格列配置数组
|
||||
* @param options 可选配置项
|
||||
* @returns 返回列控制相关的状态和方法
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* const tableColumns = [
|
||||
* { prop: 'name', label: '姓名', icon: User },
|
||||
* { prop: 'age', label: '年龄', icon: Calendar }
|
||||
* ]
|
||||
*
|
||||
* const {
|
||||
* visibleColumns,
|
||||
* visibleColumnsSorted,
|
||||
* checkColumnVisible,
|
||||
* handleColumnChange,
|
||||
* handleColumnOrderChange
|
||||
* } = useTableColumnControl(tableColumns)
|
||||
* ```
|
||||
*/
|
||||
export function useTableColumnControl(
|
||||
tableColumns: TableColumn[],
|
||||
options?: {
|
||||
/** 是否在挂载时自动加载配置，默认为 true */
|
||||
autoLoad?: boolean
|
||||
/** 自定义存储 key，默认使用路由路径 */
|
||||
storageKey?: string
|
||||
}
|
||||
) {
|
||||
const route = useRoute()
|
||||
const { autoLoad = true, storageKey: customStorageKey } = options || {}
|
||||
|
||||
// 生成存储 key
|
||||
const getStorageKey = () => {
|
||||
if (customStorageKey) {
|
||||
return customStorageKey
|
||||
}
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
return `table-columns-${routePath}`
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
const visibleColumns = ref<string[]>([])
|
||||
// 列排序顺序
|
||||
const columnOrder = ref<string[]>([])
|
||||
|
||||
/**
|
||||
* 从本地统一存储加载配置
|
||||
*/
|
||||
const loadSavedConfig = () => {
|
||||
const storageKey = getStorageKey()
|
||||
const savedConfig = getTableConfigFromLocal(storageKey)
|
||||
|
||||
// 获取所有有效的列 key
|
||||
const validColumns = tableColumns
|
||||
.filter(col => !col.alwaysShow && !col.fixed)
|
||||
.map(col => col.prop || col.label || '')
|
||||
.filter(Boolean)
|
||||
|
||||
// 加载可见列配置
|
||||
if (savedConfig && savedConfig.visibleColumns) {
|
||||
const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
|
||||
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
|
||||
} else {
|
||||
visibleColumns.value = validColumns
|
||||
}
|
||||
|
||||
// 加载列排序配置
|
||||
if (savedConfig && savedConfig.columnOrder) {
|
||||
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 = validColumns
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 列显示控制函数
|
||||
* @param prop 列的 prop 或 label
|
||||
* @returns 是否可见
|
||||
*/
|
||||
const checkColumnVisible = (prop: string): boolean => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
return true
|
||||
}
|
||||
return visibleColumns.value.includes(prop)
|
||||
}
|
||||
|
||||
/**
|
||||
* 列变化处理
|
||||
* @param value 新的可见列数组
|
||||
*/
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const storageKey = getStorageKey()
|
||||
|
||||
// 过滤掉 alwaysShow 和 fixed 的列
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
/**
|
||||
* 列排序变化处理
|
||||
* @param order 新的列排序数组
|
||||
*/
|
||||
const handleColumnOrderChange = (order: string[]) => {
|
||||
columnOrder.value = order
|
||||
const storageKey = getStorageKey()
|
||||
|
||||
// 保存到本地统一存储
|
||||
saveTableConfigToLocal(storageKey, { columnOrder: order })
|
||||
// 异步保存到后端
|
||||
updateUserTableConfig(storageKey, { columnOrder: order }).catch(() => {})
|
||||
}
|
||||
|
||||
/**
|
||||
* 排序后的表格列
|
||||
* 根据 visibleColumns 和 columnOrder 计算最终显示的列
|
||||
*/
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
// 过滤出可见的列
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label || ''
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
// 如果有排序配置，按排序顺序排列
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: TableColumn[] = []
|
||||
const unorderedColumns: TableColumn[] = []
|
||||
|
||||
// 先按保存的顺序添加列
|
||||
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
|
||||
})
|
||||
|
||||
// 自动加载配置
|
||||
if (autoLoad) {
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
/** 当前可见的列 key 数组 */
|
||||
visibleColumns,
|
||||
/** 列排序顺序 */
|
||||
columnOrder,
|
||||
/** 排序后的可见列配置数组 */
|
||||
visibleColumnsSorted,
|
||||
/** 检查列是否可见 */
|
||||
checkColumnVisible,
|
||||
/** 列变化处理函数 */
|
||||
handleColumnChange,
|
||||
/** 列排序变化处理函数 */
|
||||
handleColumnOrderChange,
|
||||
/** 手动加载配置 */
|
||||
loadSavedConfig
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -73,17 +81,22 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Link"
|
||||
@@ -97,7 +110,7 @@
|
||||
type="warning"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导 出
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="DocumentAdd"
|
||||
@@ -108,8 +121,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -130,23 +142,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
@@ -183,21 +200,21 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
班级概况
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
@@ -207,11 +224,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -262,8 +282,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { fetchList as getRuleList } from "/@/api/stuwork/entrancerule";
|
||||
import { downBlobFile, adaptationUrl } from "/@/utils/other";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Document, UserFilled, Phone, User, Lock, CircleCheck, TrendCharts, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, Document, UserFilled, Phone, User, Lock, CircleCheck, TrendCharts, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent as defineStatusTag } from 'vue'
|
||||
const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -299,94 +320,14 @@ const tableColumns = [
|
||||
{ prop: 'stuLoseRate', label: '流失率', icon: TrendCharts }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -583,7 +524,6 @@ const getRuleListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="班级" prop="classCode">
|
||||
<el-select
|
||||
v-model="searchForm.classCode"
|
||||
@@ -24,15 +32,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -53,20 +66,24 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
<span style="margin-left: 4px;">序号</span>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@@ -102,11 +119,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -117,8 +137,9 @@ import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList } from "/@/api/basic/basicstudentavatar";
|
||||
import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { Picture, List, Document, UserFilled, Grid, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { Picture, List, Document, UserFilled, Grid, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -135,94 +156,14 @@ const tableColumns = [
|
||||
{ prop: 'headImg', label: '头像', icon: Picture, width: 120 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -309,7 +250,6 @@ const getClassListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getClassListData()
|
||||
})
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -19,8 +25,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -41,23 +46,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -68,46 +78,57 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'awards'">
|
||||
<el-tag v-if="scope.row.awards" size="small" type="warning" effect="light">
|
||||
<!-- 获奖信息列特殊模板 -->
|
||||
<template v-if="col.prop === 'awards'" #default="scope">
|
||||
<el-tag v-if="scope.row.awards" size="small" type="warning" effect="plain" round>
|
||||
{{ scope.row.awards }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'awardTime'">
|
||||
<!-- 获奖时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'awardTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.awardTime || scope.row.month, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="Plus" @click="formDialogRef.openDialog()">新增获奖信息</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -155,19 +176,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ActivityAwards">
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, importExcel } from "/@/api/stuwork/activityawards";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, Trophy, CreditCard, Avatar, Medal, Calendar, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { UploadFilled, List, Trophy, CreditCard, Avatar, Medal, Calendar, EditPen, Setting, Menu, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import FormDialog from './form.vue'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const uploadRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -186,94 +205,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -282,7 +221,6 @@ const tableStyle = {
|
||||
}
|
||||
|
||||
// 配置 useTable
|
||||
loadSavedConfig()
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {},
|
||||
pageList: fetchList,
|
||||
@@ -290,7 +228,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -332,7 +270,6 @@ const handleImport = () => {
|
||||
const handleDownloadTemplate = async () => {
|
||||
try {
|
||||
const fileName = '获奖活动信息导入模板.xlsx'
|
||||
// 使用动态导入获取文件URL，从 views/stuwork/activityawards 到 assets/file 的相对路径
|
||||
const fileUrl = new URL(`../../../assets/file/${fileName}`, import.meta.url).href
|
||||
const response = await fetch(fileUrl)
|
||||
if (!response.ok) {
|
||||
@@ -382,5 +319,5 @@ const handleImportSubmit = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -12,8 +18,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -34,23 +39,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -61,19 +71,23 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'maxSub'">
|
||||
<el-tag v-if="scope.row.maxSub" size="small" type="success" effect="plain">
|
||||
<!-- 活动兼报数列特殊模板 -->
|
||||
<template v-if="col.prop === 'maxSub'" #default="scope">
|
||||
<el-tag v-if="scope.row.maxSub" size="small" type="success" effect="plain" round>
|
||||
{{ scope.row.maxSub }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'startTime'">
|
||||
<!-- 开始时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'startTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'endTime'">
|
||||
<!-- 结束时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'endTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="300" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -82,42 +96,50 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleImportSub(scope.row)">
|
||||
导入子项目
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="Plus" @click="formDialogRef.openDialog()">新增活动</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -163,20 +185,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ActivityInfo">
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, importSub } from "/@/api/stuwork/activityinfo";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, Trophy, Document, UserFilled, Calendar, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import FormDialog from './form.vue'
|
||||
import DetailDialog from './detail.vue'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
const uploadRef = ref()
|
||||
@@ -196,94 +216,14 @@ const tableColumns = [
|
||||
{ prop: 'endTime', label: '结束时间', icon: Calendar, width: 120 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -299,7 +239,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -376,5 +316,5 @@ const handleImportSubmit = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="活动主题" prop="activityInfoId">
|
||||
<el-select
|
||||
v-model="state.queryForm.activityInfoId"
|
||||
@@ -20,19 +33,24 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -53,23 +71,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -80,19 +103,23 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'startTime'">
|
||||
<!-- 开始时间列特殊模板 -->
|
||||
<template v-if="col.prop === 'startTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'endTime'">
|
||||
<!-- 结束时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'endTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'maxNum'">
|
||||
<el-tag v-if="scope.row.maxNum !== undefined && scope.row.maxNum !== null" size="small" type="success" effect="plain">
|
||||
<!-- 报名人数限制列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'maxNum'" #default="scope">
|
||||
<el-tag v-if="scope.row.maxNum !== undefined && scope.row.maxNum !== null" size="small" type="success" effect="plain" round>
|
||||
{{ scope.row.maxNum }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column prop="remarks" label="活动说明" show-overflow-tooltip align="center" min-width="200">
|
||||
<template #header>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
@@ -107,37 +134,42 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ActivityInfoSub">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, getActivityInfoList } from "/@/api/stuwork/activityinfosub";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Trophy, Document, Files, Calendar, UserFilled, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Trophy, Document, Files, Calendar, UserFilled, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
@@ -153,94 +185,14 @@ const tableColumns = [
|
||||
{ prop: 'maxNum', label: '报名人数限制', icon: UserFilled, width: 120 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -258,7 +210,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -306,12 +258,11 @@ const getActivityInfoListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getActivityInfoListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="活动主题" prop="activityInfoId">
|
||||
<el-select
|
||||
v-model="state.queryForm.activityInfoId"
|
||||
@@ -43,27 +56,31 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Download"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading">
|
||||
导出
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -84,23 +101,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -112,6 +134,7 @@
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -120,36 +143,41 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ActivityInfoSubSignup">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, exportExcel, getActivityInfoList, getActivityInfoSubList } from "/@/api/stuwork/activityinfosubsignup";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Trophy, Document, Files, CreditCard, Avatar, OfficeBuilding, Grid, UserFilled, Phone, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Trophy, Document, Files, CreditCard, Avatar, OfficeBuilding, Grid, UserFilled, Phone, Setting, Menu, Search, Document as DocIcon } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
@@ -170,94 +198,14 @@ const tableColumns = [
|
||||
{ prop: 'phone', label: '联系电话', icon: Phone, width: 120 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -277,7 +225,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -335,11 +283,9 @@ const handleExport = async () => {
|
||||
exportLoading.value = true
|
||||
try {
|
||||
const res = await exportExcel(state.queryForm)
|
||||
// 创建 Blob 对象
|
||||
const blob = new Blob([res.data as BlobPart], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
})
|
||||
// 创建下载链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
@@ -385,7 +331,6 @@ const getSubListData = async (activityInfoId?: string) => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getActivityInfoListData()
|
||||
getSubListData()
|
||||
@@ -393,5 +338,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="考核类型" prop="type">
|
||||
<el-select
|
||||
v-model="state.queryForm.type"
|
||||
@@ -19,15 +32,21 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -36,8 +55,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -58,23 +76,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -85,42 +108,52 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'type'">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<!-- 考核类型列特殊模板 -->
|
||||
<template v-if="col.prop === 'type'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatType(scope.row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="Plus" @click="formDialogRef.openDialog()">新增考核项</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -128,18 +161,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="AssessmentCategory">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/assessmentcategory";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Document, Collection, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Document, Collection, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -152,94 +183,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 考核类型列表
|
||||
const typeList = ref([
|
||||
@@ -254,7 +205,6 @@ const tableStyle = {
|
||||
}
|
||||
|
||||
// 配置 useTable
|
||||
loadSavedConfig()
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
type: ''
|
||||
@@ -264,7 +214,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -313,5 +263,5 @@ const handleDelete = async (row: any) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="指标名称" prop="pointName">
|
||||
<el-input
|
||||
v-model="state.queryForm.pointName"
|
||||
@@ -12,15 +25,21 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -29,8 +48,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -51,23 +69,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -78,43 +101,53 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'score'">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain">
|
||||
<!-- 默认扣分值列特殊模板 -->
|
||||
<template v-if="col.prop === 'score'" #default="scope">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain" round>
|
||||
{{ scope.row.score }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="Plus" @click="formDialogRef.openDialog()">新增指标</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -122,18 +155,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="AssessmentPoint">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/assessmentpoint";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Document, Trophy, Reading, Minus, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Document, Trophy, Reading, Minus, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -148,94 +179,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -244,7 +195,6 @@ const tableStyle = {
|
||||
}
|
||||
|
||||
// 配置 useTable
|
||||
loadSavedConfig()
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
pointName: ''
|
||||
@@ -254,7 +204,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -291,13 +241,8 @@ const handleDelete = async (row: any) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 初始化完成
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -49,26 +62,30 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -89,23 +106,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -117,25 +139,29 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'schoolTerm'">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ formatSchoolTerm(scope.row.schoolTerm) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'activityTime'">
|
||||
<!-- 活动时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'activityTime'" #default="scope">
|
||||
<span>{{ scope.row.activityTime || scope.row.recordDate || '-' }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'attendNum'">
|
||||
<el-tag v-if="scope.row.attendNum" size="small" type="success" effect="plain">
|
||||
<!-- 参加人数列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'attendNum'" #default="scope">
|
||||
<el-tag v-if="scope.row.attendNum" size="small" type="success" effect="plain" round>
|
||||
{{ scope.row.attendNum }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'attachment'">
|
||||
<!-- 活动图片列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'attachment'" #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.attachment"
|
||||
icon="Picture"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewImage(scope.row.attachment)">
|
||||
@@ -143,11 +169,12 @@
|
||||
</el-button>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'attachment2'">
|
||||
<!-- 活动图片2列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'attachment2'" #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.attachment2"
|
||||
icon="Picture"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewImage(scope.row.attachment2)">
|
||||
@@ -156,36 +183,45 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="Plus" @click="formDialogRef.openDialog()">新增活动</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -193,8 +229,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassActivity">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/classactivity";
|
||||
import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
@@ -203,11 +238,10 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, Grid, Trophy, User, Location, UserFilled, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, Grid, Trophy, User, Location, UserFilled, Setting, Menu, Search, Document, EditPen, Picture } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -226,103 +260,18 @@ const tableColumns = [
|
||||
{ prop: 'activityTime', label: '活动时间', icon: Calendar, width: 120 },
|
||||
{ prop: 'address', label: '活动地点', icon: Location, minWidth: 150 },
|
||||
{ prop: 'attendNum', label: '参加人数', icon: UserFilled },
|
||||
{ prop: 'attachment', label: '活动图片', width: 100 },
|
||||
{ prop: 'attachment2', label: '活动图片2', width: 100 }
|
||||
{ prop: 'attachment', label: '活动图片', icon: Picture, width: 100 },
|
||||
{ prop: 'attachment2', label: '活动图片2', icon: Picture, width: 100 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 检查列是否可见
|
||||
const checkColumnVisible = (prop: string) => {
|
||||
return visibleColumns.value.includes(prop)
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -342,7 +291,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -449,7 +398,6 @@ const getClassListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -458,5 +406,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -58,26 +71,30 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -98,24 +115,29 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -126,13 +148,15 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'schoolTerm'">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ formatSchoolTerm(scope.row.schoolTerm) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
@@ -140,21 +164,29 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增结算</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -163,30 +195,29 @@
|
||||
|
||||
<script setup lang="ts" name="ClassAssessmentSettle">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/classassessmentsettle";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { getDeptList } from '/@/api/basic/basicclass'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import { queryAllSchoolYear } from '/@/api/basic/basicyear'
|
||||
import { getDicts } from '/@/api/admin/dict'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Calendar, Clock, Grid, Setting, Menu, Search, Document, FolderAdd } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, Calendar, Clock, Grid, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
const schoolYearList = ref<any[]>([])
|
||||
const schoolTermList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
@@ -195,94 +226,14 @@ const tableColumns = [
|
||||
{ prop: 'virtualClassNo', label: '班号', icon: Grid }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -319,9 +270,17 @@ const {
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
|
||||
// 格式化学期
|
||||
const formatSchoolTerm = (value: string | number) => {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
const dictItem = schoolTermList.value.find(item => item.value == value)
|
||||
return dictItem ? dictItem.label : value
|
||||
}
|
||||
|
||||
// 学院选择变化
|
||||
const handleDeptChange = () => {
|
||||
// 清空班号选择
|
||||
searchForm.classCode = ''
|
||||
}
|
||||
|
||||
@@ -361,7 +320,6 @@ const handleDelete = async (ids: string[]) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 获取学院列表
|
||||
const getDeptListData = async () => {
|
||||
try {
|
||||
@@ -398,11 +356,32 @@ const getSchoolYearList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取学期字典
|
||||
const getSchoolTermDict = async () => {
|
||||
try {
|
||||
const res = await getDicts('school_term')
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
schoolTermList.value = res.data.map((item: any) => ({
|
||||
label: item.label || item.dictLabel || item.name,
|
||||
value: item.value || item.dictValue || item.code
|
||||
}))
|
||||
} else {
|
||||
schoolTermList.value = []
|
||||
}
|
||||
} catch (err) {
|
||||
schoolTermList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="班级" prop="classCode">
|
||||
<el-select
|
||||
v-model="searchForm.classCode"
|
||||
@@ -34,19 +47,24 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -67,23 +85,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -94,29 +117,34 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'stuStatus'">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<!-- 学生状态列特殊模板 -->
|
||||
<template v-if="col.prop === 'stuStatus'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatStudentStatus(scope.row.stuStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'attendanceType'">
|
||||
<el-tag size="small" type="warning" effect="plain">
|
||||
<!-- 考勤类型列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'attendanceType'" #default="scope">
|
||||
<el-tag size="small" type="warning" effect="plain" round>
|
||||
{{ formatAttendanceType(scope.row.attendanceType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'isRoom'">
|
||||
<!-- 是否住宿列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'isRoom'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.isRoom"
|
||||
:options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
|
||||
:type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'isDeviceIn'">
|
||||
<el-tag :type="scope.row.isDeviceIn === '1' ? 'success' : 'danger'">
|
||||
<!-- 是否扫脸列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'isDeviceIn'" #default="scope">
|
||||
<el-tag :type="scope.row.isDeviceIn === '1' ? 'success' : 'danger'" size="small" round>
|
||||
{{ scope.row.isDeviceIn === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -124,33 +152,36 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassAttendance">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { fetchList, queryMyClassList } from '/@/api/stuwork/classattendance'
|
||||
import { getDicts } from '/@/api/admin/dict'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, CreditCard, Avatar, Phone, CircleCheck, Collection, House, Camera, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, CreditCard, Avatar, Phone, CircleCheck, Collection, House, Camera, Setting, Menu, Search, Document, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
@@ -175,94 +206,14 @@ const tableColumns = [
|
||||
{ prop: 'isDeviceIn', label: '是否扫脸', icon: Camera }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -294,12 +245,6 @@ const formatAttendanceType = (value: string) => {
|
||||
return item ? item.label : value
|
||||
}
|
||||
|
||||
// 格式化是否
|
||||
const formatYesNo = (value: string | null) => {
|
||||
if (value === null || value === undefined || value === '') return '-'
|
||||
return value === '1' || value === 'true' ? '是' : '否'
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
getDataList()
|
||||
@@ -315,7 +260,6 @@ const handleReset = () => {
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row: any) => {
|
||||
// TODO: 实现编辑功能
|
||||
useMessage().info('编辑功能待实现')
|
||||
}
|
||||
|
||||
@@ -359,8 +303,6 @@ const getClassListData = async () => {
|
||||
// 获取点名类型字典
|
||||
const getOrderTypeDict = async () => {
|
||||
try {
|
||||
// 根据业务逻辑，点名类型可能是固定的几个值
|
||||
// 这里先使用常见的值，如果不对可以根据实际情况调整
|
||||
orderTypeList.value = [
|
||||
{ label: '早读', value: '1' },
|
||||
{ label: '上午', value: '2' },
|
||||
@@ -407,13 +349,14 @@ const getAttendanceTypeDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getClassListData()
|
||||
getOrderTypeDict()
|
||||
getStudentStatusDict()
|
||||
getAttendanceTypeDict()
|
||||
// 不自动加载数据，需要先选择班级和点名类型
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -65,28 +78,33 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导 出
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="DataAnalysis"
|
||||
@@ -97,8 +115,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -119,42 +136,49 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align">
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'score'">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" :type="scope.row.score >= 0 ? 'success' : 'danger'" effect="plain">
|
||||
<!-- 分数列特殊模板 -->
|
||||
<template v-if="col.prop === 'score'" #default="scope">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" :type="scope.row.score >= 0 ? 'success' : 'danger'" effect="plain" round>
|
||||
{{ scope.row.score }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
@@ -162,21 +186,29 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增记录</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -237,27 +269,23 @@
|
||||
|
||||
<script setup lang="ts" name="ClassCheckDaily">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs, exportData, getRank } from "/@/api/stuwork/classcheckdaily";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { getDeptList } from '/@/api/basic/basicclass'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import { queryAllSchoolYear } from '/@/api/basic/basicyear'
|
||||
import request from "/@/utils/request";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Avatar, Calendar, DataAnalysis, Document, CircleCheck, Setting, Menu, Search, Document as DocIcon, FolderAdd, Download } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, OfficeBuilding, Grid, Avatar, Calendar, DataAnalysis, Document, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
@@ -274,94 +302,14 @@ const tableColumns = [
|
||||
{ prop: 'handleResult', label: '处理结果', 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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -411,7 +359,6 @@ const rankForm = reactive({
|
||||
|
||||
// 学院选择变化
|
||||
const handleDeptChange = () => {
|
||||
// 清空班号选择
|
||||
searchForm.classCode = ''
|
||||
}
|
||||
|
||||
@@ -422,7 +369,7 @@ const handleSearch = () => {
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchFormRef.value?.formRef?.resetFields()
|
||||
searchFormRef.value?.resetFields()
|
||||
searchForm.schoolYear = ''
|
||||
searchForm.schoolTerm = ''
|
||||
searchForm.deptCode = ''
|
||||
@@ -456,7 +403,6 @@ const handleDelete = async (ids: string[]) => {
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const res = await exportData(searchForm)
|
||||
// 处理返回的文件流
|
||||
const blob = new Blob([res.data])
|
||||
const elink = document.createElement('a')
|
||||
elink.download = '日常巡检.xlsx'
|
||||
@@ -543,10 +489,13 @@ const getSchoolYearList = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getSchoolYearList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="state.queryForm.deptCode"
|
||||
@@ -43,19 +56,24 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
@@ -68,8 +86,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -90,23 +107,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -117,10 +139,12 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'createTime'">
|
||||
<!-- 创建时间列特殊模板 -->
|
||||
<template v-if="col.prop === 'createTime'" #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="250" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -128,36 +152,44 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Document"
|
||||
text
|
||||
link
|
||||
type="info"
|
||||
@click="handleFileList(scope.row)">
|
||||
附件列表
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增方案</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -168,8 +200,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassConstruction">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, initObj } from "/@/api/stuwork/classconstruction";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -179,11 +210,10 @@ import { parseTime } from "/@/utils/formatTime"
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import FileListDialog from './fileList.vue'
|
||||
import { List, OfficeBuilding, Grid, Document, Calendar, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, Document, Calendar, EditPen, Setting, Menu, Search, FolderAdd, RefreshLeft, EditPen as EditIcon, Document as DocIcon } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const fileListDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
@@ -201,94 +231,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -402,11 +352,11 @@ const getDeptListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -79,33 +92,37 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -126,23 +143,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -153,30 +175,35 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'schoolTerm'">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ formatSchoolTerm(scope.row.schoolTerm) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'operatTime'">
|
||||
<!-- 发生时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'operatTime'" #default="scope">
|
||||
<span>{{ scope.row.operatTime || '-' }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'type'">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<!-- 类型列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'type'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatType(scope.row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'money'">
|
||||
<el-tag v-if="scope.row.money !== null && scope.row.money !== undefined" size="small" type="success" effect="plain">
|
||||
<!-- 金额列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'money'" #default="scope">
|
||||
<el-tag v-if="scope.row.money !== null && scope.row.money !== undefined" size="small" type="success" effect="plain" round>
|
||||
¥{{ scope.row.money.toFixed(2) }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'attachment'">
|
||||
<!-- 附件列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'attachment'" #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.attachment"
|
||||
icon="Document"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewAttachment(scope.row)">
|
||||
@@ -185,6 +212,7 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -192,29 +220,37 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增记录</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -222,8 +258,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassFeeLog">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, exportExcel } from "/@/api/stuwork/classfeelog";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -233,11 +268,10 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Collection, Money, User, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Collection, Money, User, Document, Setting, Menu, Search, FolderAdd, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -262,94 +296,14 @@ const tableColumns = [
|
||||
{ prop: 'attachment', label: '附件', width: 100 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -424,29 +378,18 @@ const handleViewAttachment = (row: any) => {
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const res = await exportExcel(state.queryForm)
|
||||
|
||||
// 创建blob对象
|
||||
const blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
})
|
||||
|
||||
// 创建下载链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
|
||||
// 设置文件名
|
||||
const fileName = `班费记录_${new Date().getTime()}.xlsx`
|
||||
link.setAttribute('download', fileName)
|
||||
|
||||
// 触发下载
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
|
||||
// 清理
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
|
||||
useMessage().success('导出成功')
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '导出失败')
|
||||
@@ -550,7 +493,6 @@ const getTypeDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -561,5 +503,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="state.queryForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="getDataList"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -65,26 +78,30 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
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"
|
||||
@@ -105,36 +122,41 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width">
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ formatSchoolTerm(scope.row.schoolTerm) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
@@ -144,7 +166,7 @@
|
||||
</template>
|
||||
<!-- 归档级别列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'belong'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatBelong(scope.row.belong) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
@@ -153,7 +175,7 @@
|
||||
<el-button
|
||||
v-if="scope.row.attachment"
|
||||
icon="Document"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewAttachment(scope.row)">
|
||||
@@ -171,35 +193,43 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Folder"
|
||||
text
|
||||
link
|
||||
type="warning"
|
||||
@click="handleBelong(scope.row)">
|
||||
归档
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增荣誉</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -210,8 +240,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassHonor">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/classhonor";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -223,15 +252,14 @@ import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import BelongDialog from './belong.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, User, Collection, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, User, Collection, Setting, Menu, Search, FolderAdd, Folder, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const belongDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
const schoolYearList = ref<any[]>([])
|
||||
const schoolTermList = ref<any[]>([])
|
||||
@@ -241,128 +269,25 @@ const belongList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'deptName', label: '学院' },
|
||||
{ prop: 'classNo', label: '班号' },
|
||||
{ prop: 'title', label: '标题', minWidth: 200 },
|
||||
{ prop: 'author', label: '作者' },
|
||||
{ prop: 'updateTime', label: '更新时间', width: 180 },
|
||||
{ prop: 'belong', label: '归档级别' },
|
||||
{ prop: 'attachment', label: '附件', width: 100 }
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班号', icon: Grid },
|
||||
{ prop: 'title', label: '标题', icon: Document, minWidth: 200 },
|
||||
{ prop: 'author', label: '作者', icon: User },
|
||||
{ prop: 'updateTime', label: '更新时间', icon: Clock, width: 180 },
|
||||
{ prop: 'belong', label: '归档级别', icon: Collection },
|
||||
{ prop: 'attachment', label: '附件', icon: Document, width: 100 }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
schoolYear: { icon: Calendar },
|
||||
schoolTerm: { icon: Clock },
|
||||
deptName: { icon: OfficeBuilding },
|
||||
classNo: { icon: Grid },
|
||||
title: { icon: Document },
|
||||
author: { icon: User },
|
||||
updateTime: { icon: Clock },
|
||||
belong: { icon: Collection },
|
||||
attachment: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -539,14 +464,9 @@ onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getBelongDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -54,26 +67,30 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -94,71 +111,86 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align">
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'score'">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain">
|
||||
<!-- 扣分列特殊模板 -->
|
||||
<template v-if="col.prop === 'score'" #default="scope">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain" round>
|
||||
{{ scope.row.score }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增记录</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -167,25 +199,22 @@
|
||||
|
||||
<script setup lang="ts" name="ClassHygieneDaily">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/classhygienedaily";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { getDeptList } from '/@/api/basic/basicclass'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Calendar, Minus, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, Calendar, Minus, Document, Setting, Menu, Search, FolderAdd, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
@@ -199,94 +228,14 @@ const tableColumns = [
|
||||
{ prop: 'note', label: '检查记录', icon: Document }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -325,7 +274,6 @@ const {
|
||||
|
||||
// 学院选择变化
|
||||
const handleDeptChange = () => {
|
||||
// 清空班号选择
|
||||
searchForm.classCode = ''
|
||||
}
|
||||
|
||||
@@ -336,7 +284,7 @@ const handleSearch = () => {
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchFormRef.value?.formRef?.resetFields()
|
||||
searchFormRef.value?.resetFields()
|
||||
searchForm.deptCode = ''
|
||||
searchForm.classCode = ''
|
||||
searchForm.startTime = ''
|
||||
@@ -390,9 +338,12 @@ const getClassListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="楼号" prop="buildingNo">
|
||||
<el-select
|
||||
v-model="searchForm.buildingNo"
|
||||
@@ -45,19 +58,24 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -78,42 +96,49 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作' && !col.prop?.startsWith('day')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip
|
||||
align="center">
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 总分列特殊模板 -->
|
||||
<template v-if="col.prop === 'totalScore'" #default="scope">
|
||||
<el-tag v-if="scope.row.totalScore !== undefined && scope.row.totalScore !== null" size="small" type="success" effect="plain">
|
||||
<el-tag v-if="scope.row.totalScore !== undefined && scope.row.totalScore !== null" size="small" type="success" effect="plain" round>
|
||||
{{ scope.row.totalScore }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<!-- 排名列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'rank'" #default="scope">
|
||||
<el-tag v-if="scope.row.rank" size="small" :type="scope.row.rank <= 3 ? 'warning' : 'info'" effect="plain">
|
||||
<el-tag v-if="scope.row.rank" size="small" :type="scope.row.rank <= 3 ? 'warning' : 'info'" effect="plain" round>
|
||||
{{ scope.row.rank }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
@@ -142,23 +167,26 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Plus"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleAddScore(scope.row)">
|
||||
加分
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Minus"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleSubtractScore(scope.row)">
|
||||
减分
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 此接口不支持分页，不显示分页组件 -->
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 加分/减分对话框 -->
|
||||
@@ -216,142 +244,42 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassHygieneDailyAnalysis">
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList } from "/@/api/stuwork/classhygienedailyanalysis";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getBuildingList } from '/@/api/stuwork/dormbuilding'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, DataAnalysis, Trophy, Grid, Calendar, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, DataAnalysis, Trophy, Grid, Calendar, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const scoreFormRef = ref()
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const buildingList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
const scoreDialogVisible = ref(false)
|
||||
const scoreDialogTitle = ref('加分')
|
||||
const isAddScore = ref(true) // true: 加分, false: 减分
|
||||
const isAddScore = ref(true)
|
||||
|
||||
// 表格列配置（只包含固定列，动态日期列不包含在内）
|
||||
const tableColumns = [
|
||||
{ prop: 'totalScore', label: '总分' },
|
||||
{ prop: 'rank', label: '排名' },
|
||||
{ prop: 'classNo', label: '班级' }
|
||||
{ prop: 'totalScore', label: '总分', icon: DataAnalysis },
|
||||
{ prop: 'rank', label: '排名', icon: Trophy },
|
||||
{ prop: 'classNo', label: '班级', icon: Grid }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
totalScore: { icon: DataAnalysis },
|
||||
rank: { icon: Trophy },
|
||||
classNo: { icon: Grid }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 加分/减分表单
|
||||
const scoreForm = reactive({
|
||||
@@ -382,11 +310,10 @@ const dayColumns = computed(() => {
|
||||
// 配置 useTable - 接口参数为 buildingNo 和 month（数组格式）
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: searchForm,
|
||||
isPage: false, // 接口不支持分页
|
||||
isPage: false,
|
||||
pageList: async (queryParams: any) => {
|
||||
const params: any = {}
|
||||
|
||||
// 接口文档要求 buildingNo 和 month 都是数组格式
|
||||
if (searchForm.buildingNo) {
|
||||
params.buildingNo = Array.isArray(searchForm.buildingNo) ? searchForm.buildingNo : [searchForm.buildingNo]
|
||||
}
|
||||
@@ -399,8 +326,6 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
|
||||
const res = await fetchList(params)
|
||||
|
||||
// 接口返回的数据结构：数组，每个元素包含日期字段（如 2025-12-01）和班级信息
|
||||
// 需要确保返回数组格式给 useTable
|
||||
let dataList = []
|
||||
|
||||
if (Array.isArray(res.data)) {
|
||||
@@ -410,11 +335,9 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
} else if (res.data && Array.isArray(res.data.list)) {
|
||||
dataList = res.data.list
|
||||
} else if (res.data && typeof res.data === 'object') {
|
||||
// 如果 res.data 是单个对象，转换为数组
|
||||
dataList = [res.data]
|
||||
}
|
||||
|
||||
// 处理数据：将日期字段转换为 day1, day2 等格式，方便表格显示
|
||||
const processedData = dataList.map((item: any) => {
|
||||
const processed: any = {
|
||||
classCode: item.classCode || '',
|
||||
@@ -424,18 +347,15 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
isAddScore: item.isAddScore || 0
|
||||
}
|
||||
|
||||
// 提取所有日期字段（格式为 YYYY-MM-DD）
|
||||
const datePattern = /^\d{4}-\d{2}-\d{2}$/
|
||||
Object.keys(item).forEach(key => {
|
||||
if (datePattern.test(key)) {
|
||||
// 将日期转换为 day1, day2 等格式（根据日期中的天数）
|
||||
const date = new Date(key)
|
||||
const day = date.getDate()
|
||||
processed[`day${day}`] = item[key]
|
||||
}
|
||||
})
|
||||
|
||||
// 确保所有日期字段都存在（即使值为0或null），避免表格列无法显示
|
||||
if (searchForm.month) {
|
||||
const [year, month] = searchForm.month.split('-').map(Number)
|
||||
const daysInMonth = new Date(year, month, 0).getDate()
|
||||
@@ -458,7 +378,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: false // 不自动加载，需要手动调用
|
||||
createdIsNeed: false
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -529,8 +449,6 @@ const submitScore = async () => {
|
||||
|
||||
try {
|
||||
// TODO: 调用加分/减分接口
|
||||
// const api = isAddScore.value ? addScore : subtractScore
|
||||
// await api(scoreForm)
|
||||
useMessage().success(isAddScore.value ? '加分成功' : '减分成功')
|
||||
scoreDialogVisible.value = false
|
||||
getDataList()
|
||||
@@ -544,7 +462,6 @@ const getBuildingListData = async () => {
|
||||
try {
|
||||
const res = await getBuildingList()
|
||||
if (res.data) {
|
||||
// 处理返回的数据，可能是分页数据
|
||||
if (res.data.records) {
|
||||
buildingList.value = Array.isArray(res.data.records) ? res.data.records : []
|
||||
} else if (Array.isArray(res.data)) {
|
||||
@@ -582,10 +499,9 @@ const getClassListData = async () => {
|
||||
onMounted(() => {
|
||||
getBuildingListData()
|
||||
getClassListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -92,19 +105,24 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
批量新增
|
||||
</el-button>
|
||||
@@ -117,8 +135,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -139,23 +156,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -166,55 +188,65 @@
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'schoolTerm'">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ formatSchoolTerm(scope.row.schoolTerm) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'num'">
|
||||
<el-tag v-if="scope.row.num" size="small" type="success" effect="plain">
|
||||
<!-- 人数列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'num'" #default="scope">
|
||||
<el-tag v-if="scope.row.num" size="small" type="success" effect="plain" round>
|
||||
{{ scope.row.num }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'startTime'">
|
||||
<!-- 开始时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'startTime'" #default="scope">
|
||||
<span>{{ scope.row.startTime ? formatDateTime(scope.row.startTime) : '-' }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'endTime'">
|
||||
<!-- 结束时间列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'endTime'" #default="scope">
|
||||
<span>{{ scope.row.endTime ? formatDateTime(scope.row.endTime) : '-' }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'leaveType'">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<!-- 请假类型列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'leaveType'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatLeaveType(scope.row.leaveType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'stayDorm'">
|
||||
<!-- 是否住宿列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'stayDorm'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.stayDorm"
|
||||
:options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
|
||||
:type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'isSegment'">
|
||||
<!-- 时段请假列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'isSegment'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.isSegment"
|
||||
:options="[{ label: '是', value: '1' }, { label: '否', value: '0' }]"
|
||||
:type-map="{ '1': { type: 'success', effect: 'light' }, '0': { type: 'info', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'schoolDoor'">
|
||||
<el-tag size="small" type="warning" effect="plain">
|
||||
<!-- 请假校门列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'schoolDoor'" #default="scope">
|
||||
<el-tag size="small" type="warning" effect="plain" round>
|
||||
{{ formatSchoolDoor(scope.row.schoolDoor) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'deptAudit'">
|
||||
<!-- 基础部审核列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'deptAudit'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.deptAudit"
|
||||
:options="[{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }]"
|
||||
:type-map="{ '0': { type: 'warning', effect: 'light' }, '1': { type: 'success', effect: 'light' }, '2': { type: 'danger', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'schoolAudit'">
|
||||
<!-- 学工处审批列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'schoolAudit'" #default="scope">
|
||||
<StatusTag
|
||||
:value="scope.row.schoolAudit"
|
||||
:options="[{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }]"
|
||||
@@ -222,6 +254,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -230,28 +263,36 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">批量新增</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 批量新增表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -262,8 +303,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassLeaveApply">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, deleteByClass } from "/@/api/stuwork/classleaveapply";
|
||||
import { queryAllSchoolYear } from "/@/api/basic/basicyear";
|
||||
@@ -274,13 +314,12 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import DetailDialog from './detail.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Document, House, Location, CircleCheck, Warning, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Document, House, Location, CircleCheck, Warning, Setting, Menu, Search, FolderAdd, View } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
@@ -316,94 +355,14 @@ const tableColumns = [
|
||||
{ prop: 'rejectReason', label: '驳回原因', icon: Warning, minWidth: 150 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 校门列表
|
||||
const schoolDoorListData = [
|
||||
@@ -466,15 +425,6 @@ const formatLeaveType = (value: string) => {
|
||||
return item ? item.label : value
|
||||
}
|
||||
|
||||
// 格式化是否
|
||||
const formatYesNo = (value: string) => {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
const dictItem = yesNoList.value.find(item => item.value == value)
|
||||
return dictItem ? dictItem.label : value
|
||||
}
|
||||
|
||||
// 格式化校门
|
||||
const formatSchoolDoor = (value: string) => {
|
||||
if (!value) return '-'
|
||||
@@ -482,15 +432,6 @@ const formatSchoolDoor = (value: string) => {
|
||||
return item ? item.label : value
|
||||
}
|
||||
|
||||
// 格式化审核类型
|
||||
const formatAuditType = (value: string) => {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '-'
|
||||
}
|
||||
const dictItem = auditTypeList.value.find(item => item.value == value)
|
||||
return dictItem ? dictItem.label : value
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
getDataList()
|
||||
@@ -639,7 +580,6 @@ const getAuditTypeDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
schoolDoorList.value = schoolDoorListData
|
||||
getSchoolYearListData()
|
||||
@@ -653,5 +593,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -94,40 +107,44 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导 入
|
||||
导入
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="warning"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导 出
|
||||
导出
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -148,30 +165,38 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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>
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 考核项目列特殊模板 -->
|
||||
<template v-if="col.prop === 'assessmentCategory'" #default="scope">
|
||||
@@ -183,13 +208,13 @@
|
||||
</template>
|
||||
<!-- 类型列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'type'" #default="scope">
|
||||
<el-tag size="small" :type="scope.row.type === '1' ? 'success' : scope.row.type === '2' ? 'danger' : 'info'" effect="plain">
|
||||
<el-tag size="small" :type="scope.row.type === '1' ? 'success' : scope.row.type === '2' ? 'danger' : 'info'" effect="plain" round>
|
||||
{{ scope.row.type === '1' ? '加分' : scope.row.type === '2' ? '减分' : '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<!-- 分数列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'score'" #default="scope">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" :type="scope.row.score >= 0 ? 'success' : 'danger'" effect="plain">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" :type="scope.row.score >= 0 ? 'success' : 'danger'" effect="plain" round>
|
||||
{{ scope.row.score }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
@@ -203,36 +228,44 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleAppeal(scope.row)">
|
||||
申诉
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增考核</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -288,8 +321,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassMasterEvaluation">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs, exportData } from "/@/api/stuwork/classmasterevaluation";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
@@ -298,26 +330,23 @@ import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import { getList as getAssessmentCategoryList } from '/@/api/stuwork/assessmentcategory'
|
||||
import { getList as getAssessmentPointList } from '/@/api/stuwork/assessmentpoint'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Grid, UserFilled, Tickets, DataAnalysis, Collection, Calendar, User, Document, Setting, Menu, Search, FolderAdd, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, Grid, UserFilled, Tickets, DataAnalysis, Collection, Calendar, User, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const searchFormRef = ref()
|
||||
const uploadExcelRef = ref()
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
const assessmentCategoryList = ref<any[]>([])
|
||||
const assessmentPointList = ref<any[]>([])
|
||||
const appealDialogVisible = ref(false)
|
||||
// 模板文件URL - 标记为 assets 文件夹下的文件
|
||||
const templateUrl = ref('assets/file/班主任考核导入模板.xlsx')
|
||||
const appealForm = reactive({
|
||||
id: '',
|
||||
@@ -334,128 +363,25 @@ const appealForm = reactive({
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'virtualClassNo', label: '班号' },
|
||||
{ prop: 'realName', label: '班主任' },
|
||||
{ prop: 'assessmentCategory', label: '考核项目' },
|
||||
{ prop: 'assessmentPoint', label: '考核指标' },
|
||||
{ prop: 'type', label: '类型' },
|
||||
{ prop: 'score', label: '分数' },
|
||||
{ prop: 'recordDate', label: '考核日期' },
|
||||
{ prop: 'createBy', label: '考核人' },
|
||||
{ prop: 'remarks', label: '情况说明' }
|
||||
{ prop: 'virtualClassNo', label: '班号', icon: Grid },
|
||||
{ prop: 'realName', label: '班主任', icon: UserFilled },
|
||||
{ prop: 'assessmentCategory', label: '考核项目', icon: Tickets },
|
||||
{ prop: 'assessmentPoint', label: '考核指标', icon: DataAnalysis },
|
||||
{ prop: 'type', label: '类型', icon: Collection },
|
||||
{ prop: 'score', label: '分数', icon: DataAnalysis },
|
||||
{ prop: 'recordDate', label: '考核日期', icon: Calendar },
|
||||
{ prop: 'createBy', label: '考核人', icon: User },
|
||||
{ prop: 'remarks', label: '情况说明', icon: Document, minWidth: 150 }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
virtualClassNo: { icon: Grid },
|
||||
realName: { icon: UserFilled },
|
||||
assessmentCategory: { icon: Tickets },
|
||||
assessmentPoint: { icon: DataAnalysis },
|
||||
type: { icon: Collection },
|
||||
score: { icon: DataAnalysis },
|
||||
recordDate: { icon: Calendar },
|
||||
createBy: { icon: User },
|
||||
remarks: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -498,7 +424,6 @@ const {
|
||||
|
||||
// 学院选择变化
|
||||
const handleDeptChange = () => {
|
||||
// 清空班号选择
|
||||
searchForm.classCode = ''
|
||||
}
|
||||
|
||||
@@ -548,7 +473,6 @@ const handleImport = () => {
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const res = await exportData(searchForm)
|
||||
// 处理返回的文件流
|
||||
const blob = new Blob([res.data])
|
||||
const elink = document.createElement('a')
|
||||
elink.download = '班主任考核.xlsx'
|
||||
@@ -598,7 +522,6 @@ const submitAppeal = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 获取学院列表
|
||||
const getDeptListData = async () => {
|
||||
try {
|
||||
@@ -667,10 +590,9 @@ onMounted(() => {
|
||||
getClassListData()
|
||||
getAssessmentCategoryListData()
|
||||
getAssessmentPointListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -55,15 +63,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -84,24 +97,29 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -120,6 +138,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -129,28 +148,34 @@
|
||||
<el-button
|
||||
v-if="!scope.row.appealStatus || scope.row.appealStatus === '0'"
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleAudit(scope.row)">
|
||||
审核
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 审核对话框 -->
|
||||
<el-dialog
|
||||
@@ -219,13 +244,12 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { getDeptList, getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import { getTypeValue } from '/@/api/admin/dict'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Grid, UserFilled, Calendar, Tickets, DataAnalysis, Document, Warning, User, CircleCheck, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Grid, UserFilled, Calendar, Tickets, DataAnalysis, Document, Warning, User, CircleCheck, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const auditFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -252,94 +276,13 @@ const tableColumns = [
|
||||
{ prop: 'appealReply', label: '反馈意见', icon: EditPen }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 审核表单
|
||||
const auditForm = reactive({
|
||||
@@ -510,10 +453,13 @@ const getAppealStatusListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getAppealStatusListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="教师" prop="teacherNo">
|
||||
<el-select
|
||||
v-model="searchForm.teacherNo"
|
||||
@@ -27,28 +40,33 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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()"
|
||||
v-auth="'stuwork_classmasterresume_add'">
|
||||
新 增
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
:export="'stuwork_classmasterresume_export'"
|
||||
@exportExcel="exportExcel"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -69,24 +87,29 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -98,7 +121,8 @@
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
@@ -106,21 +130,29 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
查看履历详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增履历</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -131,22 +163,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassMasterResume">
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, nextTick, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, nextTick } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList } from "/@/api/stuwork/classmasterresume";
|
||||
import request from "/@/utils/request";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, User, CreditCard, Phone, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
// 尝试直接导入看看是否能解决问题
|
||||
import DetailDialog from './detail.vue';
|
||||
import { List, User, CreditCard, Phone, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
@@ -163,94 +192,14 @@ const tableColumns = [
|
||||
{ prop: 'telPhone', label: '联系方式', icon: Phone }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -265,7 +214,8 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
}
|
||||
},
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -297,7 +247,7 @@ const handleSearch = () => {
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchFormRef.value?.formRef?.resetFields()
|
||||
searchFormRef.value?.resetFields()
|
||||
searchForm.teacherNo = ''
|
||||
searchForm.telPhone = ''
|
||||
getDataList()
|
||||
@@ -314,7 +264,6 @@ const exportExcel = () => {
|
||||
|
||||
// 查看履历详情
|
||||
const handleViewDetail = async (row: any) => {
|
||||
|
||||
if (!row.teacherNo) {
|
||||
return
|
||||
}
|
||||
@@ -324,17 +273,15 @@ const handleViewDetail = async (row: any) => {
|
||||
|
||||
if (detailDialogRef.value && typeof detailDialogRef.value.openDialog === 'function') {
|
||||
detailDialogRef.value.openDialog(row.teacherNo)
|
||||
} else {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getTeacherList()
|
||||
// 调试：检查组件是否已挂载
|
||||
nextTick(() => {
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -89,22 +97,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
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"
|
||||
@@ -125,32 +137,37 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width">
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
@@ -184,17 +201,21 @@
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="250" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
@@ -202,28 +223,34 @@
|
||||
<el-button
|
||||
v-if="scope.row.isAddScore !== '1'"
|
||||
icon="Plus"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleAddScore(scope.row)">
|
||||
加分
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -234,8 +261,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassPaper">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, addScore } from "/@/api/stuwork/classpaper";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -246,11 +272,10 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import DetailDialog from './detail.vue'
|
||||
import { List, Document, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Document, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Collection, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const detailDialogRef = ref()
|
||||
@@ -267,132 +292,27 @@ const typeList = ref<any[]>([
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'title', label: '标题', minWidth: 200 },
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'deptName', label: '学院' },
|
||||
{ prop: 'classNo', label: '班号' },
|
||||
{ prop: 'teacherRealName', label: '班主任' },
|
||||
{ prop: 'type', label: '类型' },
|
||||
{ prop: 'journal', label: '发表刊物', minWidth: 150 },
|
||||
{ prop: 'page', label: '发表页码' },
|
||||
{ prop: 'isAddScore', label: '加分' },
|
||||
{ prop: 'attachment', label: '附件', width: 100 }
|
||||
{ prop: 'title', label: '标题', icon: Document, minWidth: 200 },
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班号', icon: Grid },
|
||||
{ prop: 'teacherRealName', label: '班主任', icon: UserFilled },
|
||||
{ prop: 'type', label: '类型', icon: Collection },
|
||||
{ prop: 'journal', label: '发表刊物', icon: Document, minWidth: 150 },
|
||||
{ prop: 'page', label: '发表页码', icon: Document },
|
||||
{ prop: 'isAddScore', label: '加分', icon: Document },
|
||||
{ prop: 'attachment', label: '附件', icon: Document, width: 100 }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
title: { icon: Document },
|
||||
schoolYear: { icon: Calendar },
|
||||
schoolTerm: { icon: Clock },
|
||||
deptName: { icon: OfficeBuilding },
|
||||
classNo: { icon: Grid },
|
||||
teacherRealName: { icon: UserFilled },
|
||||
type: { icon: Collection },
|
||||
journal: { icon: Document },
|
||||
page: { icon: Document },
|
||||
isAddScore: { icon: Document },
|
||||
attachment: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -568,13 +488,9 @@ onMounted(() => {
|
||||
getSchoolTermDict()
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -151,10 +151,10 @@
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
<el-tag size="small" effect="plain" type="info">{{ $index + 1 + (state.pagination.current - 1) * state.pagination.size }}</el-tag>
|
||||
{{ $index + 1 + (state.pagination.current - 1) * state.pagination.size }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -169,7 +169,7 @@
|
||||
</template>
|
||||
<!-- 状态列特殊模板 -->
|
||||
<template v-if="col.prop === 'status'" #default="scope">
|
||||
<el-tag size="small" :type="scope.row.status === '1' ? 'success' : 'warning'" effect="plain" round>
|
||||
<el-tag size="small" :type="getStatusTagType(scope.row.status)" effect="plain" round>
|
||||
{{ formatStatus(scope.row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
@@ -243,7 +243,8 @@ import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, OfficeBuilding, Calendar, CircleCheck, Clock, Grid, Document, User, Setting, Menu, Search, EditPen } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -281,104 +282,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
createBy: { icon: User }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -421,6 +332,25 @@ const formatStatus = (value: string) => {
|
||||
return item ? item.label : value
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (value: string) => {
|
||||
if (!value) return 'info'
|
||||
const item = statusList.value.find((item: any) => item.value === value)
|
||||
if (!item) return 'info'
|
||||
|
||||
const label = item.label || item.dictLabel || item.name || ''
|
||||
// 已提交用蓝色
|
||||
if (label.includes('已提交') || label.includes('提交')) {
|
||||
return 'primary'
|
||||
}
|
||||
// 审核通过用绿色
|
||||
if (label.includes('审核通过') || label.includes('通过')) {
|
||||
return 'success'
|
||||
}
|
||||
// 其他状态默认用灰色
|
||||
return 'info'
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchFormRef.value?.resetFields()
|
||||
@@ -537,7 +467,6 @@ onMounted(() => {
|
||||
getStatusDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -69,22 +77,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
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"
|
||||
@@ -105,32 +117,37 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width">
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
@@ -166,7 +183,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
@@ -174,42 +191,48 @@
|
||||
<el-button
|
||||
v-if="scope.row.isAddScore !== '1'"
|
||||
icon="Plus"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleAddScore(scope.row)">
|
||||
加分
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Folder"
|
||||
text
|
||||
link
|
||||
type="warning"
|
||||
@click="handleBelong(scope.row)">
|
||||
归档
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -220,8 +243,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassPublicity">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, addScore } from "/@/api/stuwork/classpublicity";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -233,13 +255,12 @@ import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import BelongDialog from './belong.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, User, Collection, Plus, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, User, Collection, Plus, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const belongDialogRef = ref()
|
||||
@@ -253,128 +274,24 @@ const belongList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'deptName', label: '学院' },
|
||||
{ prop: 'classNo', label: '班号' },
|
||||
{ prop: 'title', label: '标题', minWidth: 200 },
|
||||
{ prop: 'author', label: '作者' },
|
||||
{ prop: 'updateTime', label: '更新时间', width: 180 },
|
||||
{ prop: 'belong', label: '归档级别' },
|
||||
{ prop: 'isAddScore', label: '加分' }
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班号', icon: Grid },
|
||||
{ prop: 'title', label: '标题', icon: Document, minWidth: 200 },
|
||||
{ prop: 'author', label: '作者', icon: User },
|
||||
{ prop: 'updateTime', label: '更新时间', icon: Clock, width: 180 },
|
||||
{ prop: 'belong', label: '归档级别', icon: Collection },
|
||||
{ prop: 'isAddScore', label: '加分', icon: Plus }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
schoolYear: { icon: Calendar },
|
||||
schoolTerm: { icon: Clock },
|
||||
deptName: { icon: OfficeBuilding },
|
||||
classNo: { icon: Grid },
|
||||
title: { icon: Document },
|
||||
author: { icon: User },
|
||||
updateTime: { icon: Clock },
|
||||
belong: { icon: Collection },
|
||||
isAddScore: { icon: Plus }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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 {
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -566,14 +483,10 @@ onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getBelongDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptName">
|
||||
<el-select
|
||||
v-model="searchForm.deptName"
|
||||
@@ -60,15 +68,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Download"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
@@ -82,7 +95,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -103,31 +115,38 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
row-key="id"
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center">
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 班级状态列特殊模板 -->
|
||||
<template v-if="col.prop === 'classStatus'" #default="scope">
|
||||
@@ -163,24 +182,34 @@
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Setting"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleArrange(scope.row)">
|
||||
教室安排
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 教室安排表单弹窗 -->
|
||||
<arrange-dialog ref="arrangeDialogRef" @refresh="getDataList" />
|
||||
@@ -188,8 +217,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassroomBase">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, exportData, syncClassroomArrangement } from "/@/api/stuwork/classroombase";
|
||||
import { getDeptListByLevelTwo } from "/@/api/basic/basicdept";
|
||||
@@ -198,11 +226,10 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import ArrangeDialog from './arrange.vue'
|
||||
import { List, OfficeBuilding, CircleCheck, Location, UserFilled, Collection, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, CircleCheck, Location, UserFilled, Collection, Setting, Menu, Calendar, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const showSearch = ref(true)
|
||||
@@ -216,134 +243,27 @@ const arrangeDialogRef = ref()
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'buildingNo', label: '楼号' },
|
||||
{ prop: 'deptName', label: '学院' },
|
||||
{ prop: 'classStatus', label: '班级状态' },
|
||||
{ prop: 'position', label: '教室位置' },
|
||||
{ prop: 'stuNum', label: '人数' },
|
||||
{ prop: 'teacherRealName', label: '班主任' },
|
||||
{ prop: 'platformType', label: '讲台类型' },
|
||||
{ prop: 'tyType', label: '投影类型' },
|
||||
{ prop: 'tvType', label: '电视机' },
|
||||
{ prop: 'chairCnt', label: '方凳数量' },
|
||||
{ prop: 'tableCnt', label: '课桌数量' },
|
||||
{ prop: 'password', label: '锁密码' }
|
||||
{ prop: 'buildingNo', label: '楼号', icon: OfficeBuilding },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classStatus', label: '班级状态', icon: CircleCheck },
|
||||
{ prop: 'position', label: '教室位置', icon: Location },
|
||||
{ prop: 'stuNum', label: '人数', icon: UserFilled },
|
||||
{ prop: 'teacherRealName', label: '班主任', icon: UserFilled },
|
||||
{ prop: 'platformType', label: '讲台类型', icon: Collection },
|
||||
{ prop: 'tyType', label: '投影类型', icon: Collection },
|
||||
{ prop: 'tvType', label: '电视机', icon: Collection },
|
||||
{ prop: 'chairCnt', label: '方凳数量', icon: Calendar },
|
||||
{ prop: 'tableCnt', label: '课桌数量', icon: Calendar },
|
||||
{ prop: 'password', label: '锁密码', icon: Calendar }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
buildingNo: { icon: OfficeBuilding },
|
||||
deptName: { icon: OfficeBuilding },
|
||||
classStatus: { icon: CircleCheck },
|
||||
position: { icon: Location },
|
||||
stuNum: { icon: UserFilled },
|
||||
teacherRealName: { icon: UserFilled },
|
||||
platformType: { icon: Collection },
|
||||
tyType: { icon: Collection },
|
||||
tvType: { icon: Collection },
|
||||
chairCnt: { icon: Calendar },
|
||||
tableCnt: { icon: Calendar },
|
||||
password: { icon: Calendar }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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 {
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 班级状态列表
|
||||
const classStatusListData = [
|
||||
@@ -573,14 +493,10 @@ onMounted(() => {
|
||||
getPlatformTypeDict()
|
||||
getTyTypeDict()
|
||||
getTvTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -53,27 +66,32 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
:export="'stuwork_classRoomHygieneDaily_export'"
|
||||
@exportExcel="exportExcel"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -94,71 +112,86 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align">
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'score'">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain">
|
||||
<!-- 扣分列特殊模板 -->
|
||||
<template v-if="col.prop === 'score'" #default="scope">
|
||||
<el-tag v-if="scope.row.score !== undefined && scope.row.score !== null" size="small" type="danger" effect="plain" round>
|
||||
{{ scope.row.score }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
</template>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增记录</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -166,22 +199,20 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassRoomHygieneDaily">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/classroomhygienedaily";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { getDeptList } from '/@/api/basic/basicclass'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Calendar, Minus, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, Calendar, Minus, Document, Setting, Menu, Search, EditPen } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
@@ -199,94 +230,14 @@ const tableColumns = [
|
||||
{ prop: 'note', label: '检查记录', icon: Document }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -303,7 +254,8 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
}
|
||||
},
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -355,13 +307,6 @@ const getClassListData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
})
|
||||
|
||||
// 导出excel
|
||||
const exportExcel = () => {
|
||||
downBlobFile(
|
||||
@@ -391,4 +336,14 @@ const handleDelete = async (ids: string[]) => {
|
||||
useMessage().error(err.msg || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="楼号" prop="buildingNo">
|
||||
<el-select
|
||||
v-model="searchForm.buildingNo"
|
||||
@@ -49,15 +57,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -78,31 +91,38 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作' && !col.prop?.startsWith('day')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip
|
||||
align="center">
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 总分列特殊模板 -->
|
||||
<template v-if="col.prop === 'totalScore'" #default="scope">
|
||||
@@ -142,23 +162,25 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Plus"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleAddScore(scope.row)">
|
||||
加分
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Minus"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleSubtractScore(scope.row)">
|
||||
减分
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 此接口不支持分页，不显示分页组件 -->
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 加分/减分对话框 -->
|
||||
@@ -216,19 +238,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassRoomHygieneDailyAnalysis">
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList } from "/@/api/stuwork/classroomhygienedailyanalysis";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getBuildingList } from '/@/api/stuwork/teachbuilding'
|
||||
import { getClassListByRole } from '/@/api/basic/basicclass'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, DataAnalysis, Trophy, Grid, Calendar, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, DataAnalysis, Trophy, Grid, Calendar, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const scoreFormRef = ref()
|
||||
@@ -242,116 +262,20 @@ const isAddScore = ref(true) // true: 加分, false: 减分
|
||||
|
||||
// 表格列配置（只包含固定列，动态日期列不包含在内）
|
||||
const tableColumns = [
|
||||
{ prop: 'totalScore', label: '总分' },
|
||||
{ prop: 'rank', label: '排名' },
|
||||
{ prop: 'classNo', label: '班级' }
|
||||
{ prop: 'totalScore', label: '总分', icon: DataAnalysis },
|
||||
{ prop: 'rank', label: '排名', icon: Trophy },
|
||||
{ prop: 'classNo', label: '班级', icon: Grid }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
totalScore: { icon: DataAnalysis },
|
||||
rank: { icon: Trophy },
|
||||
classNo: { icon: Grid }
|
||||
}
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 当前显示的列
|
||||
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(() => {})
|
||||
}
|
||||
|
||||
// 加分/减分表单
|
||||
const scoreForm = reactive({
|
||||
@@ -582,11 +506,10 @@ const getClassListData = async () => {
|
||||
onMounted(() => {
|
||||
getBuildingListData()
|
||||
getClassListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -71,15 +79,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Upload"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导入
|
||||
</el-button>
|
||||
@@ -93,7 +106,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -114,30 +126,35 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '')"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip>
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<el-icon><component :is="columnConfigMap[col.prop || '']?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
@@ -170,7 +187,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
@@ -180,11 +197,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 导入对话框 -->
|
||||
<upload-excel
|
||||
@@ -262,8 +282,9 @@ import type { TableInstance } from 'element-plus'
|
||||
|
||||
// 引入组件
|
||||
const UploadExcel = defineAsyncComponent(() => import('/@/components/Upload/Excel.vue'));
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Location, DataAnalysis, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Location, DataAnalysis, Document, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -297,126 +318,14 @@ const tableColumns = [
|
||||
{ prop: '操作', label: '操作', alwaysShow: true, fixed: 'right' as const }
|
||||
]
|
||||
|
||||
// 当前显示的列（从 localStorage 读取或默认全部显示）
|
||||
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)
|
||||
|
||||
const validColumns = tableColumns
|
||||
.filter(col => !col.alwaysShow && !col.fixed)
|
||||
.map(col => col.prop || col.label)
|
||||
|
||||
if (savedConfig && savedConfig.visibleColumns) {
|
||||
const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
|
||||
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
|
||||
} else {
|
||||
visibleColumns.value = validColumns
|
||||
}
|
||||
|
||||
if (savedConfig && savedConfig.columnOrder) {
|
||||
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 = validColumns
|
||||
}
|
||||
}
|
||||
|
||||
// 立即加载保存的配置
|
||||
loadSavedConfig()
|
||||
|
||||
// 初始化可见列（已废弃，使用 loadSavedConfig 代替）
|
||||
const initVisibleColumns = () => {
|
||||
// 配置已在组件创建时通过 loadSavedConfig() 加载
|
||||
// 这里只做兼容性处理，不重复加载
|
||||
}
|
||||
|
||||
// 列显示控制函数
|
||||
const checkColumnVisible = (prop: string): boolean => {
|
||||
// 如果 visibleColumns 还没初始化，默认显示所有列
|
||||
if (visibleColumns.value.length === 0) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查 prop 是否在可见列列表中
|
||||
const isVisible = visibleColumns.value.includes(prop)
|
||||
return isVisible
|
||||
}
|
||||
|
||||
// 监听列变化
|
||||
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(() => {})
|
||||
}
|
||||
|
||||
// 初始化列排序顺序（已废弃，使用 loadSavedConfig 代替）
|
||||
const initColumnOrder = () => {
|
||||
// 配置已在组件创建时通过 loadSavedConfig() 加载
|
||||
// 这里只做兼容性处理，不重复加载
|
||||
}
|
||||
|
||||
// 获取排序后的列配置
|
||||
const sortedTableColumns = computed(() => {
|
||||
// 获取所有可排序的列
|
||||
const allSortableColumns = tableColumns.filter(col => !col.alwaysShow && !col.fixed)
|
||||
|
||||
if (columnOrder.value.length === 0) {
|
||||
return allSortableColumns
|
||||
}
|
||||
|
||||
const orderedColumns: typeof tableColumns = []
|
||||
const unorderedColumns: typeof tableColumns = []
|
||||
|
||||
// 先按照保存的顺序添加列
|
||||
columnOrder.value.forEach(key => {
|
||||
const col = tableColumns.find(c => {
|
||||
const colKey = c.prop || c.label
|
||||
return colKey === key && !c.alwaysShow && !c.fixed
|
||||
})
|
||||
if (col) {
|
||||
orderedColumns.push(col)
|
||||
}
|
||||
})
|
||||
|
||||
// 添加未在排序列表中的列（新增的列）
|
||||
allSortableColumns.forEach(col => {
|
||||
const key = col.prop || col.label
|
||||
if (!columnOrder.value.includes(key)) {
|
||||
unorderedColumns.push(col)
|
||||
}
|
||||
})
|
||||
|
||||
return [...orderedColumns, ...unorderedColumns]
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns.filter(col => !col.alwaysShow && !col.fixed))
|
||||
|
||||
// 列配置映射，包含每个列的渲染信息
|
||||
const columnConfigMap: Record<string, any> = {
|
||||
@@ -674,15 +583,5 @@ onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getSchoolTermDict()
|
||||
// 配置已在组件创建时通过 loadSavedConfig() 加载
|
||||
// 确保配置已同步到 TableColumnControl 组件
|
||||
nextTick(() => {
|
||||
// 确保 visibleColumns 已正确加载
|
||||
if (visibleColumns.value.length === 0) {
|
||||
// 如果 visibleColumns 为空，重新加载配置
|
||||
loadSavedConfig()
|
||||
}
|
||||
// visibleColumns 已经通过 v-model 绑定到 TableColumnControl，应该会自动同步
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -62,29 +70,33 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -105,23 +117,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -147,7 +164,7 @@
|
||||
<el-button
|
||||
v-if="scope.row.attachment"
|
||||
icon="Picture"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewImage(scope.row.attachment)">
|
||||
@@ -159,7 +176,7 @@
|
||||
<el-button
|
||||
v-if="scope.row.attachment2"
|
||||
icon="Picture"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleViewImage(scope.row.attachment2)">
|
||||
@@ -168,6 +185,7 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="250" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -176,35 +194,41 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -215,8 +239,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassSafeEdu">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, exportExcel } from "/@/api/stuwork/classsafeedu";
|
||||
import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
@@ -226,11 +249,10 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import DetailDialog from './detail.vue'
|
||||
import { List, Calendar, Clock, Grid, Trophy, User, Location, UserFilled, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, Grid, Trophy, User, Location, UserFilled, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
@@ -250,98 +272,18 @@ const tableColumns = [
|
||||
{ prop: 'address', label: '活动地点', icon: Location, minWidth: 150 },
|
||||
{ prop: 'recordDate', label: '活动时间', icon: Calendar, width: 120 },
|
||||
{ prop: 'attendNum', label: '参加人数', icon: UserFilled },
|
||||
{ prop: 'attachment', label: '活动照片', width: 100 },
|
||||
{ prop: 'attachment2', label: '活动照片2', width: 100 }
|
||||
{ prop: 'attachment', label: '活动照片', icon: UserFilled, width: 100 },
|
||||
{ prop: 'attachment2', label: '活动照片2', icon: UserFilled, width: 100 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -508,7 +450,6 @@ const getClassListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -517,5 +458,6 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -82,22 +90,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -118,23 +130,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -230,35 +247,41 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -269,8 +292,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassSummary">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/classsummary";
|
||||
import { getTeachDept } from "/@/api/basic/basicdept";
|
||||
@@ -281,11 +303,10 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import DetailDialog from './detail.vue'
|
||||
import { List, Calendar, Clock, Grid, UserFilled, Male, Female, House, Warning, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, Grid, UserFilled, Male, Female, House, Warning, CircleCheck, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
@@ -316,94 +337,14 @@ const tableColumns = [
|
||||
{ prop: 'status', label: '状态', 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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -559,7 +500,6 @@ const getStatusDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -570,4 +510,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -82,22 +90,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="handleInit">
|
||||
初始化
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -118,32 +130,37 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width">
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
@@ -168,28 +185,34 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewRecord(scope.row)">
|
||||
查看上传记录
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 初始化弹窗 -->
|
||||
<init-dialog ref="initDialogRef" @refresh="getDataList" />
|
||||
@@ -200,8 +223,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ClassTheme">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj } from "/@/api/stuwork/classtheme";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -212,11 +234,10 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import InitDialog from './init.vue'
|
||||
import RecordDialog from './record.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Upload, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Upload, EditPen, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const initDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const recordDialogRef = ref()
|
||||
@@ -230,122 +251,22 @@ const yesNoList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'deptName', label: '学院' },
|
||||
{ prop: 'classNo', label: '班级' },
|
||||
{ prop: 'count', label: '上传次数' },
|
||||
{ prop: 'remarks', label: '备注', minWidth: 200 }
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班级', icon: Grid },
|
||||
{ prop: 'count', label: '上传次数', icon: Upload },
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
schoolYear: { icon: Calendar },
|
||||
schoolTerm: { icon: Clock },
|
||||
deptName: { icon: OfficeBuilding },
|
||||
classNo: { icon: Grid },
|
||||
count: { icon: Upload },
|
||||
remarks: { icon: EditPen }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -500,13 +421,9 @@ onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
getYesNoDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -35,33 +38,40 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle"
|
||||
show-summary
|
||||
:summary-method="getSummaries">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center">
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 层数列特殊模板 -->
|
||||
<template v-if="col.prop === 'layers'" #default="scope">
|
||||
@@ -167,28 +177,34 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -199,8 +215,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="DormBuilding">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/dormbuilding";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
@@ -209,145 +224,38 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
const EmptyRoomDialog = defineAsyncComponent(() => import('./emptyRoomDialog.vue'));
|
||||
import { List, OfficeBuilding, Grid, UserFilled, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, UserFilled, Setting, Menu, Calendar, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const emptyRoomDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'buildingNo', label: '楼号' },
|
||||
{ prop: 'layers', label: '层数' },
|
||||
{ prop: 'allAlreadyNum', label: '已住人数' },
|
||||
{ prop: 'nowNum', label: '现住人数' },
|
||||
{ prop: 'surplusNum', label: '剩余可住人数' },
|
||||
{ prop: 'roomEmptyNum', label: '空宿舍数' },
|
||||
{ prop: 'roomEmptyNum5', label: '空5人宿舍数' },
|
||||
{ prop: 'roomEmptyNum4', label: '空4人宿舍数' },
|
||||
{ prop: 'roomEmptyNum3', label: '空3人宿舍数' },
|
||||
{ prop: 'roomEmptyNum2', label: '空2人宿舍数' },
|
||||
{ prop: 'roomEmptyNum1', label: '空1人宿舍数' },
|
||||
{ prop: 'phone', label: '电话' }
|
||||
{ prop: 'buildingNo', label: '楼号', icon: OfficeBuilding },
|
||||
{ prop: 'layers', label: '层数', icon: Grid },
|
||||
{ prop: 'allAlreadyNum', label: '已住人数', icon: UserFilled },
|
||||
{ prop: 'nowNum', label: '现住人数', icon: UserFilled },
|
||||
{ prop: 'surplusNum', label: '剩余可住人数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum', label: '空宿舍数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum5', label: '空5人宿舍数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum4', label: '空4人宿舍数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum3', label: '空3人宿舍数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum2', label: '空2人宿舍数', icon: UserFilled },
|
||||
{ prop: 'roomEmptyNum1', label: '空1人宿舍数', icon: UserFilled },
|
||||
{ prop: 'phone', label: '电话', icon: Calendar }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
buildingNo: { icon: OfficeBuilding },
|
||||
layers: { icon: Grid },
|
||||
allAlreadyNum: { icon: UserFilled },
|
||||
nowNum: { icon: UserFilled },
|
||||
surplusNum: { icon: UserFilled },
|
||||
roomEmptyNum: { icon: UserFilled },
|
||||
roomEmptyNum5: { icon: UserFilled },
|
||||
roomEmptyNum4: { icon: UserFilled },
|
||||
roomEmptyNum3: { icon: UserFilled },
|
||||
roomEmptyNum2: { icon: UserFilled },
|
||||
roomEmptyNum1: { icon: UserFilled },
|
||||
phone: { icon: Calendar }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -442,10 +350,10 @@ const handleViewEmptyRoom = (row: any, roomType: string) => {
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
// Hook 会自动加载配置
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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">
|
||||
<right-toolbar
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -27,22 +32,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -63,7 +73,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -73,11 +83,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -88,8 +101,9 @@ import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/dormbuildingmanger";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, CreditCard, UserFilled, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, CreditCard, UserFilled, Setting, Menu, Calendar, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -109,104 +123,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
realName: { icon: UserFilled }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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>({
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -70,22 +78,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -106,31 +118,38 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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
|
||||
align="center">
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
@@ -152,28 +171,34 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -181,8 +206,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="DormHygieneDaily">
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, computed } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/dormhygienedaily";
|
||||
import { getBuildingList } from "/@/api/stuwork/dormbuilding";
|
||||
@@ -194,11 +218,10 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, Calendar, Clock, OfficeBuilding, House, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, House, Document, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const searchFormRef = ref()
|
||||
@@ -210,122 +233,22 @@ const roomList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'buildingNo', label: '楼号' },
|
||||
{ prop: 'roomNo', label: '宿舍号' },
|
||||
{ prop: 'recordDate', label: '记录日期' },
|
||||
{ prop: 'note', label: '情况记录' }
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'buildingNo', label: '楼号', icon: OfficeBuilding },
|
||||
{ prop: 'roomNo', label: '宿舍号', icon: House },
|
||||
{ prop: 'recordDate', label: '记录日期', icon: Calendar },
|
||||
{ prop: 'note', label: '情况记录', icon: Document }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
const columnConfigMap: Record<string, { icon: any }> = {
|
||||
schoolYear: { icon: Calendar },
|
||||
schoolTerm: { icon: Clock },
|
||||
buildingNo: { icon: OfficeBuilding },
|
||||
roomNo: { icon: House },
|
||||
recordDate: { icon: Calendar },
|
||||
note: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -471,10 +394,9 @@ onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
getBuildingListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -88,15 +96,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -109,8 +122,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -131,23 +143,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -171,31 +188,41 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -203,8 +230,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="DormLiveApply">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, exportData } from "/@/api/stuwork/dormliveapply";
|
||||
import { queryAllSchoolYear } from "/@/api/basic/basicyear";
|
||||
@@ -214,11 +240,10 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Menu, Search, Document, Setting, User } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const showSearch = ref(true)
|
||||
@@ -236,101 +261,21 @@ const tableColumns = [
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班级', icon: Grid },
|
||||
{ prop: 'realName', label: '姓名' },
|
||||
{ prop: 'roomNo', label: '宿舍号' },
|
||||
{ prop: 'liveType', label: '留宿类型' },
|
||||
{ prop: 'liveDate', label: '留宿日期' },
|
||||
{ prop: 'auditStatus', label: '审核状态' }
|
||||
{ prop: 'realName', label: '姓名', icon: User },
|
||||
{ prop: 'roomNo', label: '宿舍号', icon: OfficeBuilding },
|
||||
{ prop: 'liveType', label: '留宿类型', icon: Calendar },
|
||||
{ prop: 'liveDate', label: '留宿日期', icon: Calendar },
|
||||
{ prop: 'auditStatus', label: '审核状态', icon: Setting }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -522,7 +467,6 @@ const getAuditStatusDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -533,3 +477,7 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="楼号" prop="buildingNo">
|
||||
<el-select
|
||||
v-model="searchForm.buildingNo"
|
||||
@@ -50,15 +58,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -72,7 +85,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -93,22 +105,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -140,21 +157,21 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleSetStatus(scope.row, '合格')"
|
||||
:disabled="isStatusDisabled(scope.row.reformStatus, '合格')">
|
||||
合格
|
||||
</el-button>
|
||||
<el-button
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleSetStatus(scope.row, '不合格')"
|
||||
:disabled="isStatusDisabled(scope.row.reformStatus, '不合格')">
|
||||
不合格
|
||||
</el-button>
|
||||
<el-button
|
||||
text
|
||||
link
|
||||
type="warning"
|
||||
@click="handleSetStatus(scope.row, '未整改')"
|
||||
:disabled="isStatusDisabled(scope.row.reformStatus, '未整改')">
|
||||
@@ -162,14 +179,14 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -179,11 +196,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -204,8 +224,9 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, OfficeBuilding, Grid, House, Calendar, Document, CircleCheck, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, House, Calendar, Document, CircleCheck, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent as defineStatusTag } from 'vue'
|
||||
const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -241,104 +262,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
remarks: { icon: EditPen }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -516,7 +447,6 @@ onMounted(() => {
|
||||
getReformStatusDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -67,15 +75,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -96,7 +109,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -117,24 +129,29 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle"
|
||||
@selection-change="handleSelectionChange">
|
||||
@selection-change="handleSelectionChange"
|
||||
class="modern-table">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -169,14 +186,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -186,11 +203,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -241,8 +261,9 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
import { List, OfficeBuilding, House, UserFilled, EditPen, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, House, UserFilled, EditPen, Setting, Menu, Calendar, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -269,104 +290,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
remarks: { icon: EditPen }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
const searchFormRef = ref()
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -101,15 +109,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增住宿生
|
||||
</el-button>
|
||||
@@ -145,7 +158,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -166,22 +178,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -217,16 +234,23 @@
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Switch"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleTransfer(scope.row)">
|
||||
转宿
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleCheckout(scope.row)">
|
||||
退宿
|
||||
@@ -236,11 +260,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/转宿表单弹窗 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -263,8 +290,9 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue';
|
||||
import TransferDialog from './transfer.vue';
|
||||
import TreeSelect from '/@/components/TreeSelect/index.vue';
|
||||
import { List, OfficeBuilding, House, Grid, UserFilled, Phone, CreditCard, Avatar, User, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, House, Grid, UserFilled, Phone, CreditCard, Avatar, User, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -309,104 +337,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
tel: { icon: Phone }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 树形选择器配置
|
||||
const treeProps = {
|
||||
@@ -581,7 +519,6 @@ onMounted(() => {
|
||||
getDormRoomTreeListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -45,15 +53,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -74,22 +87,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -134,7 +152,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看
|
||||
@@ -144,11 +162,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -161,8 +182,9 @@ import { getDeptList } from "/@/api/basic/basicclass";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getDicts } from "/@/api/admin/dict";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Calendar, OfficeBuilding, Grid, CreditCard, Avatar, Collection, House, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, OfficeBuilding, Grid, CreditCard, Avatar, Collection, House, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -200,104 +222,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
newBedNo: { icon: House }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -387,7 +319,6 @@ onMounted(() => {
|
||||
getChangeTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -35,22 +39,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" align="center">
|
||||
@sort-change="sortChangeHandle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -78,28 +87,28 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Switch"
|
||||
text
|
||||
link
|
||||
:type="scope.row.isHoliday === '1' ? 'warning' : 'success'"
|
||||
@click="handleToggleHoliday(scope.row)">
|
||||
{{ scope.row.isHoliday === '1' ? '关闭假期模式' : '开启假期模式' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
@@ -109,11 +118,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -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>({
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -40,15 +48,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -69,21 +82,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -119,7 +137,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看详情
|
||||
@@ -129,11 +147,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -147,8 +168,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Document, DataAnalysis, Calendar, Clock, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, Document, DataAnalysis, Calendar, Clock, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -178,104 +200,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
updateTime: { icon: Clock }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -69,11 +77,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -82,15 +96,14 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导入
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -111,23 +124,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -158,28 +176,34 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -227,8 +251,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="RewardClass">
|
||||
import { reactive, ref, onMounted, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, importExcel } from "/@/api/stuwork/rewardclass";
|
||||
import { getDeptList } from "/@/api/basic/basicclass";
|
||||
@@ -237,12 +260,11 @@ import { queryAllSchoolYear } from "/@/api/basic/basicyear";
|
||||
import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Trophy, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { UploadFilled, List, Calendar, Clock, OfficeBuilding, Grid, UserFilled, Trophy, EditPen, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import FormDialog from './form.vue'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const uploadRef = ref()
|
||||
const searchFormRef = ref()
|
||||
@@ -267,94 +289,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制 Hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -549,7 +491,6 @@ const getClassListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
@@ -559,5 +500,6 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -52,11 +60,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -65,15 +79,14 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导入
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -94,23 +107,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -133,6 +151,7 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -141,14 +160,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -158,11 +177,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -218,9 +240,10 @@ import { queryAllSchoolYear } from "/@/api/basic/basicyear";
|
||||
import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, Calendar, Clock, House, Trophy, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { UploadFilled, List, Calendar, Clock, House, Trophy, EditPen, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import FormDialog from './form.vue'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -244,94 +267,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -493,13 +436,9 @@ const getSchoolTermDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="奖项类型" prop="ruleType">
|
||||
<el-select
|
||||
v-model="state.queryForm.ruleType"
|
||||
@@ -23,11 +31,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -36,8 +50,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -58,23 +71,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -97,6 +115,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -105,14 +124,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -122,11 +141,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -142,8 +164,9 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Trophy, Collection, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Trophy, Collection, EditPen, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -160,94 +183,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 200 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -330,12 +273,8 @@ const getRuleTypeDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getRuleTypeDict()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="queryForm.deptCode"
|
||||
@@ -68,14 +76,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Download"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
@@ -83,7 +97,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -104,21 +117,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -159,6 +177,7 @@
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -174,8 +193,9 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, CreditCard, Avatar, DataAnalysis, Warning, Trophy, Clock, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Grid, CreditCard, Avatar, DataAnalysis, Warning, Trophy, Clock, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -215,104 +235,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
upDateTime: { icon: Clock }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 查询表单
|
||||
const queryForm = reactive({
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -38,11 +46,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -51,8 +65,7 @@
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -73,19 +86,24 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
@@ -136,14 +154,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -153,11 +171,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -177,9 +198,10 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import {
|
||||
List, Document, Calendar, Clock, Timer, Collection,
|
||||
Money, EditPen, Setting, Menu
|
||||
Money, EditPen, Setting, Menu, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -205,94 +227,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 150 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -448,7 +390,6 @@ const getClassifyDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
getSchoolTermDict()
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="state.queryForm.deptCode"
|
||||
@@ -45,11 +53,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -59,7 +73,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -80,21 +93,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -134,21 +152,21 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="User"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewMember(scope.row)">
|
||||
查看成员
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -158,11 +176,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -186,9 +207,10 @@ import FormDialog from './form.vue'
|
||||
import MemberDialog from './member.vue'
|
||||
import {
|
||||
List, Trophy, OfficeBuilding, User, UserFilled, Calendar,
|
||||
Phone, Collection, Document, Files, Setting, Menu
|
||||
Phone, Collection, Document, Files, Setting, Menu, Search
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -228,104 +250,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
ruleNote: { icon: Files }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -436,7 +368,6 @@ onMounted(() => {
|
||||
getTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -82,22 +90,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
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"
|
||||
@@ -118,21 +130,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -175,21 +192,21 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Document"
|
||||
text
|
||||
link
|
||||
type="success"
|
||||
@click="handleResult(scope.row)">
|
||||
干预结果
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -199,11 +216,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -226,8 +246,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import ResultDialog from './result.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, UserFilled, Phone, Heart, Warning, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, UserFilled, Phone, Heart, Warning, CircleCheck, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -272,104 +293,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
result: { 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>({
|
||||
@@ -535,7 +466,6 @@ onMounted(() => {
|
||||
getCareTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -90,21 +98,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导入
|
||||
@@ -112,7 +125,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -133,21 +145,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -199,14 +216,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -216,11 +233,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -270,8 +290,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, CreditCard, Calendar, Clock, OfficeBuilding, Grid, Avatar, Collection, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { UploadFilled, List, CreditCard, Calendar, Clock, OfficeBuilding, Grid, Avatar, Collection, Document, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import FormDialog from './form.vue'
|
||||
|
||||
// 定义变量内容
|
||||
@@ -318,104 +339,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
attachment: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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>({
|
||||
@@ -627,7 +558,6 @@ onMounted(() => {
|
||||
getTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="发起部门" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -24,22 +32,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -60,23 +72,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -94,6 +111,7 @@
|
||||
<span>{{ scope.row.endTime ? formatDateTime(scope.row.endTime) : '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -102,14 +120,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -119,11 +137,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -139,8 +160,9 @@ import { getDeptListByLevelTwo } from "/@/api/basic/basicdept";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Document, OfficeBuilding, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Document, OfficeBuilding, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -158,94 +180,14 @@ const tableColumns = [
|
||||
{ prop: 'deptName', label: '发起部门', icon: OfficeBuilding }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -325,7 +267,6 @@ const getDeptListData = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -155,15 +163,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -177,7 +190,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -198,21 +210,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -286,6 +303,8 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
@@ -295,7 +314,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="CircleClose"
|
||||
text
|
||||
link
|
||||
type="warning"
|
||||
@click="handleCancel(scope.row)">
|
||||
撤销
|
||||
@@ -305,11 +324,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -328,8 +350,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Avatar, Collection, Document, House, Warning, CircleCheck, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Avatar, Collection, Document, House, Warning, CircleCheck, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -385,104 +408,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
rejectReason: { icon: Warning }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -721,7 +654,6 @@ onMounted(() => {
|
||||
getAuditTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -106,15 +114,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -128,7 +141,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -149,21 +161,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -214,28 +231,28 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Document"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleReport(scope.row)">
|
||||
思想汇报
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="CircleClose"
|
||||
text
|
||||
link
|
||||
type="warning"
|
||||
@click="handleCancel(scope.row)">
|
||||
撤销处分
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -245,11 +262,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -268,8 +288,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, CreditCard, Warning, Document, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, CreditCard, Warning, Document, CircleCheck, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -316,104 +337,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
publishStatus: { 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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -682,7 +613,6 @@ onMounted(() => {
|
||||
getPublishStatusDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="系部代码" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -46,22 +54,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10 mr20"
|
||||
style="float: right;"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -82,23 +94,28 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
@@ -121,6 +138,7 @@
|
||||
<span>{{ scope.row.endTime ? formatDateTime(scope.row.endTime) : '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="100" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -129,7 +147,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -139,11 +157,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -161,8 +182,9 @@ import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, CreditCard, Avatar, Document, UserFilled, Phone, EditPen, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, CreditCard, Avatar, Document, UserFilled, Phone, EditPen, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -190,94 +212,14 @@ const tableColumns = [
|
||||
{ prop: 'remarks', label: '备注', icon: EditPen, minWidth: 150 }
|
||||
]
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 列变化处理
|
||||
const handleColumnChange = (value: string[]) => {
|
||||
visibleColumns.value = value
|
||||
const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
|
||||
const storageKey = `table-columns-${routePath}`
|
||||
const selectableColumns = value.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(() => {})
|
||||
}
|
||||
|
||||
// 排序后的表格列
|
||||
const visibleColumnsSorted = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return visibleColumns.value.includes(key)
|
||||
})
|
||||
|
||||
if (columnOrder.value.length > 0) {
|
||||
const orderedColumns: any[] = []
|
||||
const unorderedColumns: any[] = []
|
||||
|
||||
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
|
||||
})
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns, route.path)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -390,7 +332,6 @@ const getSchoolTermDict = async () => {
|
||||
}
|
||||
|
||||
// 初始化
|
||||
loadSavedConfig()
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -96,15 +104,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
批量新增异动
|
||||
</el-button>
|
||||
@@ -118,7 +131,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -139,21 +151,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -198,14 +215,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -215,11 +232,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 批量新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -238,8 +258,9 @@ import { list as getClassList } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, CreditCard, Avatar, Collection, Document, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, CreditCard, Avatar, Collection, Document, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -284,104 +305,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
remarks: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -594,7 +525,6 @@ onMounted(() => {
|
||||
getTurnYearDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -28,21 +33,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -57,13 +67,13 @@
|
||||
</template>
|
||||
<!-- 类型列特殊模板 -->
|
||||
<template v-if="col.prop === 'unionType'" #default="scope">
|
||||
<el-tag size="small" type="info" effect="plain">
|
||||
<el-tag size="small" type="info" effect="plain" round>
|
||||
{{ formatUnionType(scope.row.unionType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<!-- 排序列特殊模板 -->
|
||||
<template v-else-if="col.prop === 'sort'" #default="scope">
|
||||
<el-tag v-if="scope.row.sort !== undefined && scope.row.sort !== null" size="small" type="primary" effect="plain">
|
||||
<el-tag v-if="scope.row.sort !== undefined && scope.row.sort !== null" size="small" type="primary" effect="plain" round>
|
||||
{{ scope.row.sort }}
|
||||
</el-tag>
|
||||
<span v-else>-</span>
|
||||
@@ -77,22 +87,29 @@
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -100,8 +117,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="StuUnion">
|
||||
import { reactive, ref, onMounted, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList } from "/@/api/stuwork/stuunion";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
@@ -109,12 +125,11 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import {
|
||||
List, OfficeBuilding, Collection, Location, UserFilled, Sort, Setting, Menu, Calendar
|
||||
List, OfficeBuilding, Collection, Location, UserFilled, Sort, Setting, Menu, Calendar, Document
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const columnControlRef = ref<any>()
|
||||
const showSearch = ref(false)
|
||||
@@ -122,11 +137,11 @@ const unionTypeList = ref<any[]>([])
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'unionName', label: '学生会名称', minWidth: 200 },
|
||||
{ prop: 'unionType', label: '类型', width: 120 },
|
||||
{ prop: 'address', label: '联系地址', minWidth: 200 },
|
||||
{ prop: 'maintainer', label: '负责人', width: 120 },
|
||||
{ prop: 'sort', label: '排序', width: 80 }
|
||||
{ prop: 'unionName', label: '学生会名称', icon: OfficeBuilding, minWidth: 200 },
|
||||
{ prop: 'unionType', label: '类型', icon: Collection, width: 120 },
|
||||
{ prop: 'address', label: '联系地址', icon: Location, minWidth: 200 },
|
||||
{ prop: 'maintainer', label: '负责人', icon: UserFilled, width: 120 },
|
||||
{ prop: 'sort', label: '排序', icon: Sort, width: 80 }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
@@ -138,104 +153,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
sort: { icon: Sort }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -251,7 +176,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true // 页面加载时自动获取数据
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -296,14 +221,9 @@ const getUnionTypeDict = async () => {
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getUnionTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="班级" prop="classCode">
|
||||
<el-select
|
||||
v-model="state.queryForm.classCode"
|
||||
@@ -59,11 +67,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -72,14 +86,14 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Upload"
|
||||
type="primary"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleImport">
|
||||
导入
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="primary"
|
||||
type="warning"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
@@ -87,7 +101,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -108,21 +121,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -156,14 +174,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -173,11 +191,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -227,8 +248,9 @@ import { getGradeList } from "/@/api/basic/basicclass";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { UploadFilled, List, OfficeBuilding, Grid, CreditCard, Avatar, Phone, Calendar, Postcard, Briefcase, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable';
|
||||
import { UploadFilled, List, OfficeBuilding, Grid, CreditCard, Avatar, Phone, Calendar, Postcard, Briefcase, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import type { UploadFile, UploadFiles } from 'element-plus';
|
||||
import FormDialog from './form.vue'
|
||||
|
||||
@@ -269,104 +291,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
position: { icon: Briefcase }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -526,7 +458,6 @@ onMounted(() => {
|
||||
getGradeListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -86,15 +94,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -108,7 +121,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -129,21 +141,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -184,7 +201,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -194,11 +211,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -220,8 +240,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import TeacherDialog from './teacher.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, CreditCard, Avatar, Grid, UserFilled, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, CreditCard, Avatar, Grid, UserFilled, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -262,104 +283,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
attendanceTeacherName: { icon: UserFilled }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -480,7 +411,6 @@ onMounted(() => {
|
||||
getSchoolTermList()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -34,21 +38,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -71,14 +80,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -88,11 +97,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -107,8 +119,9 @@ import { fetchList, delObj } from "/@/api/stuwork/teachbuilding";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, OfficeBuilding, EditPen, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, EditPen, Setting, Menu, Calendar, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -127,104 +140,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
remarks: { icon: EditPen }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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>({
|
||||
@@ -269,7 +192,6 @@ const handleDelete = async (row: any) => {
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -39,15 +47,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
@@ -62,7 +75,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -83,23 +95,43 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
row-key="id"
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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
|
||||
align="center"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -108,14 +140,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -125,11 +157,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -150,8 +185,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import BatchDialog from './batch.vue'
|
||||
import { List, OfficeBuilding, Location, Setting, Menu, Calendar } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, Location, Setting, Menu, Calendar, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -178,104 +214,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
position: { icon: Location }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -377,7 +323,6 @@ onMounted(() => {
|
||||
getBuildingListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="批次" prop="termId">
|
||||
<el-select
|
||||
v-model="state.queryForm.termId"
|
||||
@@ -92,11 +100,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -105,8 +119,7 @@
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="primary"
|
||||
plain
|
||||
type="success"
|
||||
class="ml10"
|
||||
:loading="exportLoading"
|
||||
@click="handleExport">
|
||||
@@ -115,7 +128,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -136,21 +148,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -213,14 +230,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -230,11 +247,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<!-- <form-dialog ref="formDialogRef" @refresh="getDataList" /> -->
|
||||
@@ -257,9 +277,10 @@ import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import {
|
||||
User, School, Trophy, Phone, Money, CircleCheck, List,
|
||||
OfficeBuilding, Reading, UserFilled, Calendar, Sort, Grid,
|
||||
CreditCard, Avatar, Setting, Menu
|
||||
CreditCard, Avatar, Setting, Menu, Search, Document
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 引入组件
|
||||
const GenderTag = defineAsyncComponent(() => import('/@/components/GenderTag/index.vue'))
|
||||
@@ -320,104 +341,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
checkStatus: { 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)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -670,7 +601,6 @@ onMounted(() => {
|
||||
getMajorLevelDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getDataList" class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="state.queryForm.schoolYear"
|
||||
@@ -38,11 +46,17 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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="Plus"
|
||||
type="primary"
|
||||
@@ -52,7 +66,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -73,21 +86,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -130,14 +148,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -147,11 +165,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单弹窗 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="getDataList" />
|
||||
@@ -169,8 +190,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { parseTime } from "/@/utils/formatTime";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue'
|
||||
import { List, Document, Calendar, Clock, Collection, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Document, Calendar, Clock, Collection, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -202,104 +224,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
type: { icon: Collection }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 表格样式
|
||||
const tableStyle = {
|
||||
@@ -430,7 +362,6 @@ onMounted(() => {
|
||||
getTypeDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="可用余额" prop="effectiveMoney">
|
||||
<el-input-number
|
||||
v-model="searchForm.effectiveMoney"
|
||||
@@ -50,15 +58,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
@@ -79,7 +92,6 @@
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -100,22 +112,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -179,21 +196,21 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="info"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
明细
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -203,11 +220,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList()" />
|
||||
@@ -247,8 +267,9 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue';
|
||||
import DetailDialog from './detail.vue';
|
||||
import { List, OfficeBuilding, House, UserFilled, Money, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, OfficeBuilding, House, UserFilled, Money, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -286,104 +307,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
effectiveMoney: { icon: Money }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -515,7 +446,6 @@ onMounted(() => {
|
||||
getBuildingListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="宿舍号" prop="roomNo">
|
||||
<el-input
|
||||
v-model="searchForm.roomNo"
|
||||
@@ -45,22 +53,26 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
class="ml10"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新 增
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -81,22 +93,27 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -156,14 +173,14 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
@@ -173,11 +190,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList()" />
|
||||
@@ -194,8 +214,9 @@ import { getDicts } from "/@/api/admin/dict";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import FormDialog from './form.vue';
|
||||
import { List, House, Calendar, Clock, Document, Collection, CreditCard, Money, User, Avatar, CircleCheck, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, House, Calendar, Clock, Document, Collection, CreditCard, Money, User, Avatar, CircleCheck, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
|
||||
|
||||
@@ -242,104 +263,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
state: { 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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -544,7 +475,6 @@ onMounted(() => {
|
||||
getStateDict()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
@keyup.enter="handleSearch"
|
||||
class="search-form">
|
||||
<el-form-item label="学年" prop="schoolYear">
|
||||
<el-select
|
||||
v-model="searchForm.schoolYear"
|
||||
@@ -34,27 +47,32 @@
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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"
|
||||
:export="'stuwork_weekPlan_export'"
|
||||
@exportExcel="exportExcel"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -75,40 +93,46 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<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>
|
||||
show-overflow-tooltip
|
||||
:align="col.align || 'center'">
|
||||
<template #header>
|
||||
<el-icon><component :is="columnConfigMap[col.prop]?.icon || Calendar" /></el-icon>
|
||||
<span style="margin-left: 4px">{{ col.label }}</span>
|
||||
</template>
|
||||
<!-- 学期列特殊模板 -->
|
||||
<template v-if="col.prop === 'schoolTerm'" #default="scope">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
<el-tag size="small" type="primary" effect="plain" round>
|
||||
{{ scope.row.schoolTerm === 1 ? '上学期' : scope.row.schoolTerm === 2 ? '下学期' : scope.row.schoolTerm }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<el-table-column label="操作" width="250" align="center" fixed="right">
|
||||
<template #header>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span style="margin-left: 4px">操作</span>
|
||||
@@ -116,35 +140,43 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row.id)">
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
text
|
||||
icon="EditPen"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
text
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="120">
|
||||
<el-button type="primary" icon="FolderAdd" @click="formDialogRef.openDialog()">新增计划</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
@@ -155,24 +187,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="WeekPlan">
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, nextTick, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, reactive, defineAsyncComponent, onMounted, nextTick } from 'vue'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObjs } from "/@/api/stuwork/weekplan";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { queryAllSchoolYear } from '/@/api/basic/basicyear'
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import {
|
||||
List, Calendar, Clock, Document, Files, User, Setting, Menu
|
||||
List, Calendar, Clock, Document, User, Setting, Menu, Search, EditPen
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
const DetailDialog = defineAsyncComponent(() => import('./detail.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
@@ -188,12 +218,12 @@ const searchForm = reactive({
|
||||
author: ''
|
||||
})
|
||||
|
||||
// 表格列配置（不包含操作列，操作列单独渲染）
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'schoolYear', label: '学年' },
|
||||
{ prop: 'schoolTerm', label: '学期' },
|
||||
{ prop: 'title', label: '标题' },
|
||||
{ prop: 'author', label: '作者' }
|
||||
{ prop: 'schoolYear', label: '学年', icon: Calendar },
|
||||
{ prop: 'schoolTerm', label: '学期', icon: Clock },
|
||||
{ prop: 'title', label: '标题', icon: Document },
|
||||
{ prop: 'author', label: '作者', icon: User }
|
||||
]
|
||||
|
||||
// 列配置映射（用于图标）
|
||||
@@ -204,108 +234,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
author: { icon: User }
|
||||
}
|
||||
|
||||
// 当前显示的列（从 localStorage 读取或默认全部显示）
|
||||
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)
|
||||
|
||||
const validColumns = tableColumns
|
||||
.filter(col => !col.alwaysShow && !col.fixed)
|
||||
.map(col => col.prop || col.label)
|
||||
|
||||
if (savedConfig && savedConfig.visibleColumns) {
|
||||
const filteredSaved = savedConfig.visibleColumns.filter((col: string) => validColumns.includes(col))
|
||||
visibleColumns.value = filteredSaved.length > 0 ? filteredSaved : validColumns
|
||||
} else {
|
||||
visibleColumns.value = validColumns
|
||||
}
|
||||
|
||||
if (savedConfig && savedConfig.columnOrder) {
|
||||
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 = validColumns
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 立即加载保存的配置
|
||||
loadSavedConfig()
|
||||
|
||||
// 排序后的表格列
|
||||
const sortedTableColumns = computed(() => {
|
||||
const columns = tableColumns.filter(col => {
|
||||
const key = col.prop || col.label
|
||||
return col.alwaysShow || col.fixed || 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)
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
@@ -314,7 +250,8 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
}
|
||||
},
|
||||
createdIsNeed: true
|
||||
})
|
||||
|
||||
// table hook
|
||||
@@ -392,11 +329,9 @@ const getSchoolYearList = async () => {
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getSchoolYearList()
|
||||
// 确保配置已同步
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/@/assets/styles/modern-page.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 搜索表单 -->
|
||||
<el-row v-show="showSearch">
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch">
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
@@ -51,15 +59,20 @@
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<!-- 内容卡片 -->
|
||||
<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">
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
style="float: right;"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
@@ -80,21 +93,26 @@
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle">
|
||||
<el-table-column type="index" label="序号" width="60" align="center">
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table">
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="col in sortedTableColumns" :key="col.prop || col.label">
|
||||
<template v-for="col in visibleColumnsSorted" :key="col.prop || col.label">
|
||||
<el-table-column
|
||||
v-if="checkColumnVisible(col.prop || '') && col.prop !== '操作'"
|
||||
:prop="col.prop"
|
||||
@@ -133,7 +151,7 @@
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
text
|
||||
link
|
||||
type="primary"
|
||||
@click="handleView(scope.row)">
|
||||
查看详情
|
||||
@@ -143,11 +161,14 @@
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -160,8 +181,9 @@ import { getDeptList } from "/@/api/basic/basicclass";
|
||||
import { getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, CreditCard, Avatar, Collection, Setting, Menu } from '@element-plus/icons-vue'
|
||||
import { getTableConfigFromLocal, saveTableConfigToLocal, updateUserTableConfig } from '/@/api/admin/usertable'
|
||||
import { List, Calendar, Clock, OfficeBuilding, Grid, Document, CreditCard, Avatar, Collection, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumnControl'
|
||||
import '/@/styles/modern-page.scss'
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
@@ -200,104 +222,14 @@ const columnConfigMap: Record<string, { icon: any }> = {
|
||||
remarks: { icon: Document }
|
||||
}
|
||||
|
||||
// 当前显示的列
|
||||
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)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -446,7 +378,6 @@ onMounted(() => {
|
||||
getClassListData()
|
||||
nextTick(() => {
|
||||
if (visibleColumns.value.length === 0) {
|
||||
loadSavedConfig()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user