登录按钮有问题,导出功能未实现

This commit is contained in:
Sparkfreeman 2024-07-04 16:45:59 +08:00
parent e4a21e1c6c
commit 4f33e9c8ca
3 changed files with 88 additions and 31 deletions

View File

@ -1,7 +1,5 @@
import axios from 'axios';
//const API_URL = 'http://localhost:8080/meetings';
class MeetingService {
getAllMeetings() {
return axios.get(`/api/meetings/listAll`);
@ -17,14 +15,28 @@ class MeetingService {
}
updateMeeting(id, meeting) {
// 使用 POST 方法而不是 PUT 方法
return axios.post(`/api/meetings/updateMeeting`, meeting);
// Convert meeting object to a map
const meetingMap = {
id: id,
name: meeting.name,
organizer: meeting.organizer,
startTime: meeting.startTime,
endTime: meeting.endTime,
content: meeting.content,
status: meeting.status
};
return axios.post(`/api/meetings/updateMeeting`, meetingMap);
}
deleteMeeting(id) {
// 使用 POST 方法并传递请求体
return axios.post(`/api/meetings/deleteMeeting`, { id });
}
searchMeetings(params) {
// 使用 POST 方法并传递请求体
return axios.post(`/api/meetings/searchMeetings`, params);
}
}
export default new MeetingService();

View File

@ -23,6 +23,14 @@ const actions = {
console.error('Failed to fetch meetings:', error);
}
},
async searchMeetings({ commit }, params) {
try {
const response = await MeetingService.searchMeetings(params);
commit('setMeetings', response.data);
} catch (error) {
console.error('Failed to search meetings:', error);
}
},
async fetchMeetingById({ commit }, id) {
try {
const response = await MeetingService.getMeetingById(id);

View File

@ -1,6 +1,11 @@
<template>
<div class="meeting-management">
<div class="header">
<el-input v-model="searchName" placeholder="会议名称" class="search-input"></el-input>
<el-input v-model="searchOrganizer" placeholder="创建人" class="search-input"></el-input>
<el-date-picker v-model="searchStartTime" type="datetime" placeholder="开始时间" class="search-input"></el-date-picker>
<el-button type="primary" @click="searchMeetings">搜索</el-button>
<el-button type="primary" @click="exportMeetings">导出会议</el-button>
<el-button type="primary" @click="goToAddMeeting">添加会议</el-button>
</div>
<el-table :data="allMeetings" style="width: 100%">
@ -24,13 +29,15 @@
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
:total="total"
></el-pagination>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import axios from 'axios';
import MeetingService from "@services/meetingService.js";
export default {
name: 'MeetingManagement',
@ -38,14 +45,17 @@ export default {
return {
currentPage: 1,
pageSize: 10,
total: 0
total: 0,
searchName: '',
searchOrganizer: '',
searchStartTime: null
};
},
computed: {
...mapGetters('meetingManagement', ['allMeetings'])
},
methods: {
...mapActions('meetingManagement', ['fetchMeetings', 'deleteMeeting']),
...mapActions('meetingManagement', ['fetchMeetings', 'searchMeetings', 'deleteMeeting']),
goToAddMeeting() {
this.$router.push({ name: 'AddMeeting' });
},
@ -53,15 +63,21 @@ export default {
this.$router.push({ name: 'EditMeeting', params: { id } });
},
confirmDelete(id) {
this.$confirm('是否确认删除会议管理编号为 "' + id + '" 的数据项?', '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteMeeting(id).then(() => {
this.fetchMeetings();
});
}).catch(() => {});
this.$confirm(
'是否确认删除会议管理编号为 "' + id + '" 的数据项?',
'系统提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
this.deleteMeeting(id).then(() => {
this.fetchMeetings();
});
})
.catch(() => {});
},
handleSizeChange(val) {
this.pageSize = val;
@ -70,6 +86,37 @@ export default {
handleCurrentChange(val) {
this.currentPage = val;
this.fetchMeetings();
},
searchMeetings() {
const params = {
name: this.searchName,
organizer: this.searchOrganizer,
startTime: this.searchStartTime ? this.searchStartTime.toISOString() : null
};
MeetingService.searchMeetings(params);
},
exportMeetings() {
axios
.post(
'/api/meetings/export',
{
name: this.searchName,
organizer: this.searchOrganizer,
startTime: this.searchStartTime ? this.searchStartTime.toISOString() : null
},
{ responseType: 'blob' }
)
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'meetings.xlsx');
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error('导出失败', error);
});
}
},
mounted() {
@ -84,39 +131,29 @@ export default {
background-color: #f5f5f5;
border-radius: 8px;
}
.header {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}
.search-input {
margin-right: 10px;
}
.el-button {
background-color: #409eff;
border-color: #409eff;
color: #fff;
margin-right: 10px;
}
.el-button:hover {
background-color: #66b1ff;
border-color: #66b1ff;
}
.el-table {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}
.el-pagination {
margin-top: 20px;
text-align: center;
}
.delete-button {
color: #f56c6c;
}
.delete-button:hover {
color: #ff7875;
}