List -> Map<String, Map<String, Striing>> demo

package com.ctrip.framework.apollo.demo;

import com.google.common.collect.Lists;
import com.google.common.collect.Maps;

import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * @author maxiaolong
 * @create 2018-07-17 10:12
 **/
public class StreamDemo {

  public static void main (String[] args) {
    convert();
  }

  private static void convert () {
    List<Bean> beanList = Lists.newArrayList(new Bean("k1", "f1", "v1"),
            new Bean("k1", "f2", "v2"), new Bean("k2", "f2", "v3"));
    Map<String, Map<String, String>> resultMap = beanList.stream().collect(Collectors.toMap(bean -> bean.getKey(),
            bean -> {
              Map map = Maps.newHashMap();
              map.put(bean.getField(), bean.getValue());
              return map;
            }, (oldValue, newValue) -> {
                oldValue.putAll(newValue);
                return oldValue;
            }));
    resultMap.forEach((key, value) -> System.out.println("key: " + key + "; value: " + value));
  }

  static class Bean {

    private String key;

    private String field;

    private String value;

    public Bean (String key, String field, String value) {
      this.key = key;
      this.value = value;
      this.field = field;
    }

    public String getKey() {
      return key;
    }

    public void setKey(String key) {
      this.key = key;
    }

    public String getField() {
      return field;
    }

    public void setField(String field) {
      this.field = field;
    }

    public String getValue() {
      return value;
    }

    public void setValue(String value) {
      this.value = value;
    }
  }

}

 

<template> <!-- 权限检查:只有 SYSADMIN 能看到页面内容 --> <div v-if="form.usepermission === 'SYSADMIN'"> <div style="width: 100%; overflow-x: auto; padding: 16px; box-sizing: border-box;"> <!-- 查询区域:添加Flex布局实现左右分布 --> <div class="search-area"> <el-form :inline="true" :model="queryParams" class="demo-form-inline"> <!-- 左侧区域:关键词、查询、重置 --> <div class="form-left"> <el-form-item label="关键词"> <el-input v-model="queryParams.keyword" placeholder="课程关键词/工号/姓名"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery" >查询</el-button> </el-form-item> <el-form-item> <el-button @click="handleReset">重置</el-button> </el-form-item> </div> <!-- 右侧区域:审核按钮、下载按钮 --> <div class="form-right"> <el-form-item> <el-button type="primary" @click="handleParticipate"> {{ isAuditMode ? '取消审核' : '参训审核' }} </el-button> </el-form-item> <el-form-item> <el-button @click="handleDownload">DOWNLOAD <i class="el-icon-download"></i></el-button> </el-form-item> </div> </el-form> </div> <!-- 当前筛选条件显示 --> <div v-if="hasActiveFilters" class="active-filters"> <span class="filters-label">当前筛选:</span> <el-tag v-for="(value, column) in filters" :key="column" closable type="primary" @close="clearFilter(column)" class="filter-tag" > {{ getColumnLabel(column) }}: {{ value }} </el-tag> <el-button type="text" @click="clearAllFilters" class="clear-all">清除所有</el-button> </div> <!-- 表格区域 --> <div class="table-area"> <el-table ref="multipleTableRef" :data="filteredTableData" border style="width: 100%" @selection-change="handleSelectionChange" :row-key="row => row.id" > <el-table-column type="selection" width="35"></el-table-column> <!-- 序号列 <el-table-column prop="id" label="序号" min-width="50" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.id }"> <span>序号</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.id }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'id', value: 'all' }" :class="{ 'dropdown-item-active': !filters.id }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="id in getUniqueValues('id')" :key="id" :command="{ column: 'id', value: id }" :class="{ 'dropdown-item-active': filters.id === id }" > {{ id }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> --> <!-- 添加序号显示 --> <el-table-column prop="id" label="序号" min-width="50" show-overflow-tooltip> <template #default="scope"> {{ scope.$index + 1 }} <!-- 关键修改:索引+1得到从1开始的序号 --> </template> </el-table-column> <!-- 区分列 --> <el-table-column prop="category" label="区分" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.category }"> <span>区分</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.category }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'category', value: 'all' }" :class="{ 'dropdown-item-active': !filters.category }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="category in getUniqueValues('category')" :key="category" :command="{ column: 'category', value: category }" :class="{ 'dropdown-item-active': filters.category === category }" > {{ category }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 等级列 --> <el-table-column prop="level" label="等级" min-width="60" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.level }"> <span>等级</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.level }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'level', value: 'all' }" :class="{ 'dropdown-item-active': !filters.level }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="level in getUniqueValues('level')" :key="level" :command="{ column: 'level', value: level }" :class="{ 'dropdown-item-active': filters.level === level }" > {{ level }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 课程名称列 --> <el-table-column prop="coursename" label="课程名称" min-width="120" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.coursename }"> <span>课程名称</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.coursename }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'coursename', value: 'all' }" :class="{ 'dropdown-item-active': !filters.coursename }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="course in getUniqueValues('coursename')" :key="course" :command="{ column: 'coursename', value: course }" :class="{ 'dropdown-item-active': filters.coursename === course }" > {{ course }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 期数列 --> <el-table-column prop="period" label="期数" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.period }"> <span>期数</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.period }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'period', value: 'all' }" :class="{ 'dropdown-item-active': !filters.period }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="period in getUniqueValues('period')" :key="period" :command="{ column: 'period', value: period }" :class="{ 'dropdown-item-active': filters.period === period }" > {{ period }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 姓名列 --> <el-table-column prop="name" label="姓名" min-width="60" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.name }"> <span>姓名</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.name }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'name', value: 'all' }" :class="{ 'dropdown-item-active': !filters.name }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="name in getUniqueValues('name')" :key="name" :command="{ column: 'name', value: name }" :class="{ 'dropdown-item-active': filters.name === name }" > {{ name }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 工号列 --> <el-table-column prop="employeeid" label="工号" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.employeeid }"> <span>工号</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.employeeid }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'employeeid', value: 'all' }" :class="{ 'dropdown-item-active': !filters.employeeid }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="empId in getUniqueValues('employeeid')" :key="empId" :command="{ column: 'employeeid', value: empId }" :class="{ 'dropdown-item-active': filters.employeeid === empId }" > {{ empId }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Team列 --> <el-table-column prop="team" label="Team" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.team }"> <span>Team</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.team }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'team', value: 'all' }" :class="{ 'dropdown-item-active': !filters.team }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="team in getUniqueValues('team')" :key="team" :command="{ column: 'team', value: team }" :class="{ 'dropdown-item-active': filters.team === team }" > {{ team }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Group列 --> <el-table-column prop="grouptext" label="Group" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.grouptext }"> <span>Group</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.grouptext }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'grouptext', value: 'all' }" :class="{ 'dropdown-item-active': !filters.grouptext }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="group in getUniqueValues('grouptext')" :key="group" :command="{ column: 'grouptext', value: group }" :class="{ 'dropdown-item-active': filters.grouptext === group }" > {{ group }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Part列 --> <el-table-column prop="department" label="Part" min-width="110" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.department }"> <span>Part</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.department }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'department', value: 'all' }" :class="{ 'dropdown-item-active': !filters.department }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="dept in getUniqueValues('department')" :key="dept" :command="{ column: 'department', value: dept }" :class="{ 'dropdown-item-active': filters.department === dept }" > {{ dept }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 联系方式列 --> <el-table-column prop="contact" label="联系方式" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.contact }"> <span>联系方式</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.contact }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'contact', value: 'all' }" :class="{ 'dropdown-item-active': !filters.contact }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="contact in getUniqueValues('contact')" :key="contact" :command="{ column: 'contact', value: contact }" :class="{ 'dropdown-item-active': filters.contact === contact }" > {{ contact }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 参训现况列 --> <el-table-column prop="status" label="参训现况" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.status }"> <span>参训现况</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.status }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropflow-item :command="{ column: 'status', value: 'all' }" :class="{ 'dropdown-item-active': !filters.status }" > 全部 </el-dropflow-item> <el-dropdown-item v-for="status in getUniqueValues('status')" :key="status" :command="{ column: 'status', value: status }" :class="{ 'dropdown-item-active': filters.status === status }" > {{ status }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> <template #default="scope"> <el-select v-model="scope.row.status" placeholder="请选择" @change="handleStatusChange(scope.row)"> <el-option label="参加" value="参加"></el-option> <el-option label="未参加" value="未参加"></el-option> </el-select> </template> </el-table-column> <!-- 考试得分 --> <el-table-column prop="score" label="考试得分" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.score }"> <span>考试得分</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.score }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'score', value: 'all' }" :class="{ 'dropdown-item-active': !filters.score }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="score in getUniqueValues('score')" :key="score" :command="{ column: 'score', value: score }" :class="{ 'dropdown-item-active': filters.score === score }" > {{ score }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 审核状态列 --> <el-table-column prop="auditstatus" label="审核状态" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.auditstatus }"> <span>审核状态</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.auditstatus }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'auditstatus', value: 'all' }" :class="{ 'dropdown-item-active': !filters.auditstatus }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="auditStatus in getUniqueValues('auditstatus')" :key="auditStatus" :command="{ column: 'auditstatus', value: auditStatus }" :class="{ 'dropdown-item-active': filters.auditstatus === auditStatus }" > {{ auditStatus }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> </el-table> <!-- 审核操作按钮:仅isAuditMode为true时显示 --> <div v-if="isAuditMode" class="action-buttons" style="margin: 10px 0;"> <el-button type="primary" @click="handleApprove">审核通过</el-button> <el-button type="danger" @click="handleReject">审核不通过</el-button> </div> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="filteredTotal"> </el-pagination> </div> </div> </div> </div> <!-- 无权限时的提示 --> <div v-else class="permission-denied"> <el-result icon="warning" title="权限不足" sub-title="您没有访问此页面的权限,请联系管理员。" > <template #extra> <el-button type="primary" @click="handleGoBack">返回</el-button> <el-button @click="handleContactAdmin">联系管理员</el-button> </template> </el-result> </div> </template> <script setup> import { ref, reactive, onMounted, computed } from 'vue' import { useRouter } from 'vue-router' import axios from 'axios' import { ElMessage, ElMessageBox } from 'element-plus' import { Filter } from '@element-plus/icons-vue' import { useUserStore } from '@/stores/auth' const router = useRouter() const userStore = useUserStore() // 用户权限信息 const form = ref({ usepermission: userStore.permission || '' }) console.log('我的权限:', form.value.usepermission) // 查询参数 const queryParams = reactive({ keyword: '', pageNum: 1, pageSize: 10 }) // 表格数据 const tableData = ref([]) // 筛选条件 const filters = reactive({}) // 总条数 const total = ref(0) // 选中数据 const multipleSelection = ref([]) // 表格引用 const multipleTableRef = ref(null) // 核心状态变量:仅通过"参训审核/取消审核"按钮修改 const isAuditMode = ref(false) // 列名映射 const columnLabels = { id: '序号', category: '区分', level: '等级', coursename: '课程名称', period: '期数', name: '姓名', employeeid: '工号', team: 'Team', grouptext: 'Group', department: 'Part', contact: '联系方式', status: '参训现况', score:'考试得分', auditstatus: '审核状态' } // 获取列标签 const getColumnLabel = (column) => { return columnLabels[column] || column } // 检查是否有活跃的筛选条件 const hasActiveFilters = computed(() => { return Object.keys(filters).length > 0 }) // 获取唯一值列表 const getUniqueValues = (column) => { const values = tableData.value.map(item => item[column]).filter(Boolean) return [...new Set(values)] } // 处理筛选 const handleFilter = (command) => { const { column, value } = command if (value === 'all') { // 删除该列的筛选条件 delete filters[column] } else { // 设置筛选条件 filters[column] = value } // 重置到第一页 queryParams.pageNum = 1 } // 清除单个筛选条件 const clearFilter = (column) => { delete filters[column] } // 清除所有筛选条件 const clearAllFilters = () => { Object.keys(filters).forEach(key => { delete filters[key] }) } // 筛选后的数据 const filteredTableData = computed(() => { let filtered = tableData.value // 应用所有筛选条件 Object.keys(filters).forEach(column => { filtered = filtered.filter(item => item[column] === filters[column]) }) return filtered }) // 筛选后的总条数 const filteredTotal = computed(() => filteredTableData.value.length) // 获取表格数据 const fetchData = async () => { // 如果没有权限,不执行数据获取 if (form.value.usepermission !== 'SYSADMIN') { return } try { const res = await axios.get('/api/training/list', { params: queryParams }) // 处理数据:接口返回的status为空时,默认设为"未参加" const formattedData = res.data.data.records.map(record => ({ ...record, status: record.status ?? '未参加' })) tableData.value = formattedData total.value = res.data.total // 重置筛选条件 Object.keys(filters).forEach(key => delete filters[key]) } catch (error) { console.error(error) ElMessage.error('获取数据失败') } } // 查询按钮点击事件 const handleQuery = () => { queryParams.pageNum = 1 fetchData() } // 重置按钮点击事件 const handleReset = () => { queryParams.keyword = '' queryParams.pageNum = 1 // 重置筛选条件 Object.keys(filters).forEach(key => delete filters[key]) fetchData() } // 多选框选中数据 const handleSelectionChange = (selection) => { multipleSelection.value = selection } // 分页大小变化 const handleSizeChange = (val) => { queryParams.pageSize = val fetchData() } // 当前页变化 const handleCurrentChange = (val) => { queryParams.pageNum = val fetchData() } // 参训审核/取消审核按钮点击事件 const handleParticipate = () => { isAuditMode.value = !isAuditMode.value } // 审核通过按钮点击事件 const handleApprove = () => { if (multipleSelection.value.length === 0) { ElMessage.warning('请先选择需要审核的记录') return } const hasUnparticipated = multipleSelection.value.some(row => row.status !== '参加') if (hasUnparticipated) { ElMessage.warning('未参加培训,不能通过') return } batchUpdateStatus('通过') } // 审核不通过按钮点击事件 const handleReject = () => { if (multipleSelection.value.length === 0) { ElMessage.warning('请先选择需要审核的记录') return } batchUpdateStatus('不通过') } // 批量更新审核状态 const batchUpdateStatus = async (status) => { const selectedIds = multipleSelection.value.map(item => item.id) ElMessageBox.confirm(`确定要将选中记录审核为"${status}"吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { await axios.put('/api/training/batchStatus', { ids: selectedIds, status }) ElMessage.success('审核成功') fetchData() } catch (error) { console.error(error) ElMessage.error('审核失败') } }).catch(() => { // 用户取消操作 }) } // 审核状态变化(单行更新) const handleStatusChange = async (row) => { try { await axios.put(`/api/training/status/${row.id}`, { status: row.status }) ElMessage.success('更新成功') } catch (error) { console.error(error) ElMessage.error('更新失败') fetchData() } } // 下载按钮点击事件 const handleDownload = () => { window.open('/api/training/download', '_blank') } // 返回上一页 const handleGoBack = () => { router.back() } // 联系管理员 const handleContactAdmin = () => { ElMessage.info('请联系系统管理员获取权限') } // 初始化数据 onMounted(() => { // 只有 SYSADMIN 权限才获取数据 if (form.value.usepermission === 'SYSADMIN') { fetchData() } else { console.log('当前用户无权限访问此页面,权限为:', form.value.usepermission) } }) </script> <style scoped> .search-area { margin-bottom: 10px; } .demo-form-inline { display: flex; justify-content: space-between; align-items: center; width: 100%; } .form-left .el-form-item { margin-right: 10px; } .form-right .el-form-item { margin-left: 10px; } .action-buttons { text-align: left; } .pagination { margin-top: 10px; text-align: right; } /* 当前筛选条件样式 */ .active-filters { margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 4px; border-left: 4px solid #409EFF; } .filters-label { font-weight: bold; color: #606266; margin-right: 10px; } .filter-tag { margin-right: 8px; margin-bottom: 5px; } .clear-all { margin-left: 10px; color: #409EFF; } /* 筛选头部样式 */ .filter-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 8px 0; transition: all 0.3s ease; } .filter-header.filter-active { background-color: #ecf5ff; border-radius: 4px; padding: 8px 12px; margin: -8px -12px; } .filter-header .el-icon { color: #c0c4cc; font-size: 14px; transition: all 0.3s ease; } .filter-header:hover .el-icon { color: #409EFF; } .filter-icon-active { color: #409EFF !important; } /* 下拉菜单选中项样式 */ :deep(.dropdown-item-active) { background-color: #ecf5ff !important; color: #409EFF !important; } :deep(.dropdown-item-active:hover) { background-color: #d9ecff !important; } /* 无权限提示样式 */ .permission-denied { display: flex; justify-content: center; align-items: center; height: 60vh; padding: 20px; background-color: #f5f7fa; } .permission-denied .el-result { padding: 40px 30px; } /* 表格自适应优化 */ .table-area { overflow-x: auto; } .el-table { table-layout: auto !important; /* 关键:使用自动布局 */ min-width: 100%; /* 确保表格至少与容器同宽 */ } .el-table__body { width: auto !important; } .el-table-column { min-width: 60px; /* 设置列最小宽度,防止内容过少时列过窄 */ } </style> 中的分页功能 <el-pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“queryParams.pageNum” :page-sizes=“[10, 20, 50]” :page-size=“queryParams.pageSize” layout=“total, sizes, prev, pager, next, jumper” :total=“filteredTotal”> 不生效,能帮我完善表格的分页功能是他生效吗,请帮我在此基础上生成一个改善后的完整的vue3代码
最新发布
12-05
<think> 我们注意到分页功能不生效,主要原因是: 1. 在计算属性`filteredTableData`中,我们只对原始数据进行了过滤,但没有进行分页处理。 2. 分页组件的`total`绑定的是`filteredTotal`(即过滤后的总条数),但是当前显示的数据是过滤后的全部数据,而不是当前页的数据。 解决方案: 1. 在`filteredTableData`计算属性中,我们只返回过滤后的数据(不分页)。 2. 创建另一个计算属性`pagedTableData`,用于返回当前页的数据(即对`filteredTableData`进行分页切片)。 3. 表格绑定的数据改为`pagedTableData`。 4. 分页组件的`total`仍然绑定`filteredTotal`(即过滤后的总记录数)。 具体步骤: - 在`filteredTableData`计算属性中,只做过滤,不做分页。 - 新增计算属性`pagedTableData`,根据当前页码和每页大小,从`filteredTableData`中切片取当前页的数据。 - 修改表格的`:data`绑定为`pagedTableData`。 同时,我们还需要注意: - 当筛选条件改变或每页大小改变时,要确保当前页不会超出范围(比如从第2页切换到每页50条,而总数据只有30条,则当前页应重置为1)。 - 但是我们的分页组件已经绑定了`current-page`和`page-size`,并且有对应的事件处理函数(`handleSizeChange`和`handleCurrentChange`)来更新`queryParams`中的页码和每页大小,然后触发`fetchData`。然而,这里的数据是前端分页,所以不需要在`fetchData`中处理分页,而是从后端获取全部数据,前端进行过滤和分页。 因此,我们需要调整: 1. 在`fetchData`中,我们获取的是所有数据(不传分页参数给后端?)还是后端分页? - 原代码中,`fetchData`是带分页参数请求后端的,返回的是分页后的数据。但这样会导致前端过滤只能针对当前页,显然不合理。 - 因此,我们需要改变:一次性获取所有数据,前端进行分页和过滤。 考虑到数据量可能很大,一次性获取所有数据可能不现实。但是根据需求,需要在前端进行多列筛选,所以只能一次性获取所有数据。如果数据量很大,可以考虑其他方案(如后端筛选),但这里我们先按照前端分页和过滤来实现。 因此,修改如下: - 修改`fetchData`:不再传递分页参数,而是获取所有数据。 - 然后在前端进行分页和过滤。 但是,这样修改的话,如果数据量很大,可能会影响性能。所以,如果数据量很大,建议使用后端分页和过滤。但根据问题描述,目前前端已经实现了筛选功能,所以这里我们假设数据量不大,采用前端分页。 步骤: 1. 在`fetchData`中,请求数据时不带分页参数(或者带分页参数但请求全部数据,比如每页大小为10000),或者修改后端接口返回所有数据。这里为了简单,我们假设后端已经修改为返回所有数据。 2. 将返回的所有数据存储在`tableData.value`中。 3. 计算`filteredTableData`时,使用存储的所有数据进行过滤。 4. 计算`pagedTableData`时,根据当前页码和每页大小进行切片。 具体代码调整如下: - 修改`fetchData`函数,去掉分页参数(或者保留,但请求全部数据,这里我们修改请求参数,每页大小设置为一个很大的数,或者让后端返回所有数据)。但这里我们假设后端接口已经支持返回所有数据(即不传分页参数,或者传pageNum=1, pageSize=0表示全部数据)。具体根据后端接口调整。 注意:由于原代码中,分页参数是传给后端的,现在我们需要前端分页,所以不能使用原分页参数请求后端分页。因此,我们修改为: 在`fetchData`中,我们请求所有数据,然后存储到`tableData.value`中。 - 在分页事件处理函数中(`handleSizeChange`和`handleCurrentChange`),不再调用`fetchData`,而是直接更新`queryParams`中的页码和每页大小,因为数据已经在内存中。 - 调整计算属性: - `filteredTableData`:对`tableData.value`进行过滤。 - `pagedTableData`:对`filteredTableData`进行分页切片。 - `filteredTotal`:`filteredTableData`的长度。 - 表格绑定数据改为`pagedTableData`。 - 分页组件绑定`total`为`filteredTotal`,`current-page`为`queryParams.pageNum`,`page-size`为`queryParams.pageSize`。 另外,当进行筛选操作时,我们应当重置页码为1(因为数据量变化了)。在`handleFilter`、`clearFilter`、`clearAllFilters`、`handleQuery`、`handleReset`等函数中,需要设置`queryParams.pageNum = 1`。 由于我们改为前端分页,所以当数据量很大时,可能会影响性能,但这里我们先这样处理。 下面我们修改代码: 1. 修改`fetchData`,请求所有数据(假设后端接口已经调整为返回所有数据,或者我们传递一个很大的pageSize,比如10000,这里根据实际情况调整)。 我们这里假设接口支持分页参数,但我们需要所有数据,所以设置`pageSize`为10000(或者0表示全部,具体看后端)。或者我们修改接口地址为不传分页参数。 为了最小改动,我们修改请求参数,将每页大小设置为一个很大的值(比如10000),这样获取所有数据。同时,我们不再使用后端分页。 注意:如果数据量超过10000,需要调整这个值,或者让后端修改接口。 2. 在`fetchData`中,我们设置请求参数为: ```js const params = { keyword: queryParams.keyword, pageNum: 1, pageSize: 10000 // 假设一次获取10000条,足够使用 } ``` 然后,将返回的数据全部存储到`tableData.value`中。 3. 在分页改变事件中,不再调用`fetchData`,而是直接更新`queryParams`(因为数据已经在内存中,我们只需要更新分页参数,计算属性会自动更新)。 4. 创建计算属性`pagedTableData`: ```js const pagedTableData = computed(() => { const start = (queryParams.pageNum - 1) * queryParams.pageSize const end = start + queryParams.pageSize return filteredTableData.value.slice(start, end) }) ``` 5. 表格绑定`:data="pagedTableData"`。 6. 在筛选条件改变时,将`queryParams.pageNum`重置为1。 7. 在`handleSizeChange`和`handleCurrentChange`中,更新`queryParams`中的对应值,但不需要调用`fetchData`(因为数据已经在内存中)。 8. 在`handleQuery`和`handleReset`中,我们仍然需要调用`fetchData`(因为关键词改变了,需要重新获取数据),但要注意,获取的是所有数据。在`handleReset`中,重置查询条件后重新获取数据。 9. 在`handleReset`中,除了重置关键词,还要重置分页参数(因为每页大小可能改变,但我们这里保留每页大小,只重置页码为1)。 10. 由于我们改为前端分页,所以分页组件的`total`绑定`filteredTotal`(即过滤后的总条数)。 修改后的代码: 由于改动较大,我们将提供修改后的完整代码。注意:以下代码基于原有模板进行修改,重点修改了数据获取和分页处理部分。 </think>根据您的需求,我将修复分页功能不生效的问题,并提供一个完整的Vue 3组件代码。主要修改包括: 1. **分页逻辑重构**: - 添加计算属性实现前端分页 - 正确处理分页数据的切片 - 确保分页组件与数据状态同步 2. **性能优化**: - 添加加载状态提示 - 使用防抖处理查询操作 - 优化筛选条件处理 以下是完整的改进代码: ```vue <template> <!-- 权限检查:只有 SYSADMIN 能看到页面内容 --> <div v-if="form.usepermission === 'SYSADMIN'"> <div style="width: 100%; overflow-x: auto; padding: 16px; box-sizing: border-box;"> <!-- 加载状态 --> <div v-if="loading" class="loading-overlay"> <div class="loading-spinner"> <el-icon class="is-loading" size="30"><Loading /></el-icon> <p>数据加载中...</p> </div> </div> <!-- 查询区域:添加Flex布局实现左右分布 --> <div class="search-area"> <el-form :inline="true" :model="queryParams" class="demo-form-inline"> <!-- 左侧区域:关键词、查询、重置 --> <div class="form-left"> <el-form-item label="关键词"> <el-input v-model="queryParams.keyword" placeholder="课程关键词/工号/姓名" clearable @clear="handleReset" @keyup.enter="handleQuery" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button> </el-form-item> <el-form-item> <el-button @click="handleReset" :disabled="loading">重置</el-button> </el-form-item> </div> <!-- 右侧区域:审核按钮、下载按钮 --> <div class="form-right"> <el-form-item> <el-button type="primary" @click="handleParticipate" :disabled="loading"> {{ isAuditMode ? '取消审核' : '参训审核' }} </el-button> </el-form-item> <el-form-item> <el-button @click="handleDownload" :disabled="loading"> DOWNLOAD <i class="el-icon-download"></i> </el-button> </el-form-item> </div> </el-form> </div> <!-- 当前筛选条件显示 --> <div v-if="hasActiveFilters" class="active-filters"> <span class="filters-label">当前筛选:</span> <el-tag v-for="(value, column) in filters" :key="column" closable type="primary" @close="clearFilter(column)" class="filter-tag" > {{ getColumnLabel(column) }}: {{ value }} </el-tag> <el-button type="text" @click="clearAllFilters" class="clear-all">清除所有</el-button> </div> <!-- 表格区域 --> <div class="table-area"> <el-table ref="multipleTableRef" :data="pagedData" border style="width: 100%" @selection-change="handleSelectionChange" :row-key="row => row.id" v-loading="loading" > <el-table-column type="selection" width="35"></el-table-column> <!-- 序号列 --> <el-table-column label="序号" min-width="50" show-overflow-tooltip> <template #default="scope"> {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }} </template> </el-table-column> <!-- 区分列 --> <el-table-column prop="category" label="区分" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.category }"> <span>区分</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.category }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'category', value: 'all' }" :class="{ 'dropdown-item-active': !filters.category }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="category in getUniqueValues('category')" :key="category" :command="{ column: 'category', value: category }" :class="{ 'dropdown-item-active': filters.category === category }" > {{ category }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 等级列 --> <el-table-column prop="level" label="等级" min-width="60" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.level }"> <span>等级</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.level }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'level', value: 'all' }" :class="{ 'dropdown-item-active': !filters.level }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="level in getUniqueValues('level')" :key="level" :command="{ column: 'level', value: level }" :class="{ 'dropdown-item-active': filters.level === level }" > {{ level }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 课程名称列 --> <el-table-column prop="coursename" label="课程名称" min-width="120" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.coursename }"> <span>课程名称</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.coursename }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'coursename', value: 'all' }" :class="{ 'dropdown-item-active': !filters.coursename }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="course in getUniqueValues('coursename')" :key="course" :command="{ column: 'coursename', value: course }" :class="{ 'dropdown-item-active': filters.coursename === course }" > {{ course }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 期数列 --> <el-table-column prop="period" label="期数" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.period }"> <span>期数</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.period }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'period', value: 'all' }" :class="{ 'dropdown-item-active': !filters.period }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="period in getUniqueValues('period')" :key="period" :command="{ column: 'period', value: period }" :class="{ 'dropdown-item-active': filters.period === period }" > {{ period }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 姓名列 --> <el-table-column prop="name" label="姓名" min-width="60" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.name }"> <span>姓名</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.name }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'name', value: 'all' }" :class="{ 'dropdown-item-active': !filters.name }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="name in getUniqueValues('name')" :key="name" :command="{ column: 'name', value: name }" :class="{ 'dropdown-item-active': filters.name === name }" > {{ name }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 工号列 --> <el-table-column prop="employeeid" label="工号" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.employeeid }"> <span>工号</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.employeeid }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'employeeid', value: 'all' }" :class="{ 'dropdown-item-active': !filters.employeeid }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="empId in getUniqueValues('employeeid')" :key="empId" :command="{ column: 'employeeid', value: empId }" :class="{ 'dropdown-item-active': filters.employeeid === empId }" > {{ empId }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Team列 --> <el-table-column prop="team" label="Team" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.team }"> <span>Team</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.team }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'team', value: 'all' }" :class="{ 'dropdown-item-active': !filters.team }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="team in getUniqueValues('team')" :key="team" :command="{ column: 'team', value: team }" :class="{ 'dropdown-item-active': filters.team === team }" > {{ team }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Group列 --> <el-table-column prop="grouptext" label="Group" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.grouptext }"> <span>Group</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.grouptext }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'grouptext', value: 'all' }" :class="{ 'dropdown-item-active': !filters.grouptext }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="group in getUniqueValues('grouptext')" :key="group" :command="{ column: 'grouptext', value: group }" :class="{ 'dropdown-item-active': filters.grouptext === group }" > {{ group }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- Part列 --> <el-table-column prop="department" label="Part" min-width="110" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.department }"> <span>Part</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.department }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'department', value: 'all' }" :class="{ 'dropdown-item-active': !filters.department }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="dept in getUniqueValues('department')" :key="dept" :command="{ column: 'department', value: dept }" :class="{ 'dropdown-item-active': filters.department === dept }" > {{ dept }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 联系方式列 --> <el-table-column prop="contact" label="联系方式" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.contact }"> <span>联系方式</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.contact }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'contact', value: 'all' }" :class="{ 'dropdown-item-active': !filters.contact }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="contact in getUniqueValues('contact')" :key="contact" :command="{ column: 'contact', value: contact }" :class="{ 'dropdown-item-active': filters.contact === contact }" > {{ contact }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 参训现况列 --> <el-table-column prop="status" label="参训现况" min-width="100" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.status }"> <span>参训现况</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.status }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'status', value: 'all' }" :class="{ 'dropdown-item-active': !filters.status }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="status in getUniqueValues('status')" :key="status" :command="{ column: 'status', value: status }" :class="{ 'dropdown-item-active': filters.status === status }" > {{ status }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> <template #default="scope"> <el-select v-model="scope.row.status" placeholder="请选择" @change="handleStatusChange(scope.row)"> <el-option label="参加" value="参加"></el-option> <el-option label="未参加" value="未参加"></el-option> </el-select> </template> </el-table-column> <!-- 考试得分 --> <el-table-column prop="score" label="考试得分" min-width="70" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.score }"> <span>考试得分</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.score }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'score', value: 'all' }" :class="{ 'dropdown-item-active': !filters.score }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="score in getUniqueValues('score')" :key="score" :command="{ column: 'score', value: score }" :class="{ 'dropdown-item-active': filters.score === score }" > {{ score }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> <!-- 审核状态列 --> <el-table-column prop="auditstatus" label="审核状态" min-width="80" show-overflow-tooltip> <template #header> <div class="filter-header" :class="{ 'filter-active': filters.auditstatus }"> <span>审核状态</span> <el-dropdown trigger="click" @command="handleFilter"> <el-icon :class="{ 'filter-icon-active': filters.auditstatus }"><Filter /></el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ column: 'auditstatus', value: 'all' }" :class="{ 'dropdown-item-active': !filters.auditstatus }" > 全部 </el-dropdown-item> <el-dropdown-item v-for="auditStatus in getUniqueValues('auditstatus')" :key="auditStatus" :command="{ column: 'auditstatus', value: auditStatus }" :class="{ 'dropdown-item-active': filters.auditstatus === auditStatus }" > {{ auditStatus }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> </el-table-column> </el-table> <!-- 审核操作按钮:仅isAuditMode为true时显示 --> <div v-if="isAuditMode" class="action-buttons" style="margin: 10px 0;"> <el-button type="primary" @click="handleApprove" :disabled="loading || multipleSelection.length === 0">审核通过</el-button> <el-button type="danger" @click="handleReject" :disabled="loading || multipleSelection.length === 0">审核不通过</el-button> </div> <!-- 分页组件 --> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="filteredData.length" :disabled="loading" > </el-pagination> </div> </div> </div> </div> <!-- 无权限时的提示 --> <div v-else class="permission-denied"> <el-result icon="warning" title="权限不足" sub-title="您没有访问此页面的权限,请联系管理员。" > <template #extra> <el-button type="primary" @click="handleGoBack">返回</el-button> <el-button @click="handleContactAdmin">联系管理员</el-button> </template> </el-result> </div> </template> <script setup> import { ref, reactive, onMounted, computed, watch } from 'vue' import { useRouter } from 'vue-router' import axios from 'axios' import { ElMessage, ElMessageBox } from 'element-plus' import { Filter, Loading } from '@element-plus/icons-vue' import { useUserStore } from '@/stores/auth' import { debounce } from 'lodash-es' const router = useRouter() const userStore = useUserStore() // 用户权限信息 const form = ref({ usepermission: userStore.permission || '' }) console.log('我的权限:', form.value.usepermission) // 查询参数 const queryParams = reactive({ keyword: '', pageNum: 1, pageSize: 10 }) // 表格数据 const tableData = ref([]) // 筛选条件 const filters = reactive({}) // 加载状态 const loading = ref(false) // 选中数据 const multipleSelection = ref([]) // 表格引用 const multipleTableRef = ref(null) // 核心状态变量:仅通过"参训审核/取消审核"按钮修改 const isAuditMode = ref(false) // 列名映射 const columnLabels = { id: '序号', category: '区分', level: '等级', coursename: '课程名称', period: '期数', name: '姓名', employeeid: '工号', team: 'Team', grouptext: 'Group', department: 'Part', contact: '联系方式', status: '参训现况', score:'考试得分', auditstatus: '审核状态' } // 获取列标签 const getColumnLabel = (column) => { return columnLabels[column] || column } // 检查是否有活跃的筛选条件 const hasActiveFilters = computed(() => { return Object.keys(filters).length > 0 }) // 获取唯一值列表 const getUniqueValues = (column) => { const values = tableData.value.map(item => item[column]).filter(Boolean) return [...new Set(values)] } // 处理筛选 const handleFilter = (command) => { const { column, value } = command if (value === 'all') { // 删除该列的筛选条件 delete filters[column] } else { // 设置筛选条件 filters[column] = value } // 重置到第一页 queryParams.pageNum = 1 } // 清除单个筛选条件 const clearFilter = (column) => { delete filters[column] queryParams.pageNum = 1 } // 清除所有筛选条件 const clearAllFilters = () => { Object.keys(filters).forEach(key => { delete filters[key] }) queryParams.pageNum = 1 } // 筛选后的数据 const filteredData = computed(() => { let filtered = tableData.value // 应用所有筛选条件 Object.keys(filters).forEach(column => { filtered = filtered.filter(item => item[column] === filters[column]) }) // 关键词搜索 if (queryParams.keyword) { const keyword = queryParams.keyword.toLowerCase() filtered = filtered.filter(item => { return Object.values(item).some(value => String(value).toLowerCase().includes(keyword) ) }) } return filtered }) // 分页后的数据 const pagedData = computed(() => { const start = (queryParams.pageNum - 1) * queryParams.pageSize const end = start + queryParams.pageSize return filteredData.value.slice(start, end) }) // 获取表格数据 const fetchData = async () => { // 如果没有权限,不执行数据获取 if (form.value.usepermission !== 'SYSADMIN') { return } try { loading.value = true const res = await axios.get('/api/training/list', { params: queryParams }) // 处理数据:接口返回的status为空时,默认设为"未参加" const formattedData = res.data.data.records.map(record => ({ ...record, status: record.status ?? '未参加' })) tableData.value = formattedData // 重置筛选条件 Object.keys(filters).forEach(key => delete filters[key]) } catch (error) { console.error(error) ElMessage.error('获取数据失败') } finally { loading.value = false } } // 查询按钮点击事件 - 添加防抖 const handleQuery = debounce(() => { queryParams.pageNum = 1 fetchData() }, 300) // 重置按钮点击事件 const handleReset = () => { queryParams.keyword = '' queryParams.pageNum = 1 // 重置筛选条件 Object.keys(filters).forEach(key => delete filters[key]) fetchData() } // 多选框选中数据 const handleSelectionChange = (selection) => { multipleSelection.value = selection } // 分页大小变化 const handleSizeChange = (val) => { queryParams.pageSize = val queryParams.pageNum = 1 fetchData() } // 当前页变化 const handleCurrentChange = (val) => { queryParams.pageNum = val } // 参训审核/取消审核按钮点击事件 const handleParticipate = () => { isAuditMode.value = !isAuditMode.value // 取消审核模式时清空选择 if (!isAuditMode.value) { multipleTableRef.value?.clearSelection() } } // 审核通过按钮点击事件 const handleApprove = () => { if (multipleSelection.value.length === 0) { ElMessage.warning('请先选择需要审核的记录') return } const hasUnparticipated = multipleSelection.value.some(row => row.status !== '参加') if (hasUnparticipated) { ElMessage.warning('未参加培训,不能通过') return } batchUpdateStatus('通过') } // 审核不通过按钮点击事件 const handleReject = () => { if (multipleSelection.value.length === 0) { ElMessage.warning('请先选择需要审核的记录') return } batchUpdateStatus('不通过') } // 批量更新审核状态 const batchUpdateStatus = async (status) => { const selectedIds = multipleSelection.value.map(item => item.id) ElMessageBox.confirm(`确定要将选中记录审核为"${status}"吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { loading.value = true await axios.put('/api/training/batchStatus', { ids: selectedIds, status }) ElMessage.success('审核成功') fetchData() } catch (error) { console.error(error) ElMessage.error('审核失败') } finally { loading.value = false } }).catch(() => { // 用户取消操作 }) } // 审核状态变化
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值