123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<template>
|
|
<div class="meeting-management">
|
|
<div class="header">
|
|
<el-button type="primary" @click="goToAddMeeting">添加会议</el-button>
|
|
</div>
|
|
<el-table :data="allMeetings" style="width: 100%">
|
|
<el-table-column prop="id" label="会议ID" width="80"></el-table-column>
|
|
<el-table-column prop="name" label="会议名称"></el-table-column>
|
|
<el-table-column prop="organizer" label="组织者"></el-table-column>
|
|
<el-table-column prop="startTime" label="开始时间"></el-table-column>
|
|
<el-table-column prop="endTime" label="结束时间"></el-table-column>
|
|
<el-table-column prop="status" label="状态"></el-table-column>
|
|
<el-table-column label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button @click="editMeeting(scope.row.id)" type="text">修改</el-button>
|
|
<el-button @click="confirmDelete(scope.row.id)" type="text" class="delete-button">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'MeetingManagement',
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('meetingManagement', ['allMeetings'])
|
|
},
|
|
methods: {
|
|
...mapActions('meetingManagement', ['fetchMeetings', 'deleteMeeting']),
|
|
goToAddMeeting() {
|
|
this.$router.push({ name: 'AddMeeting' });
|
|
},
|
|
editMeeting(id) {
|
|
this.$router.push({ name: 'EditMeeting', params: { id } });
|
|
},
|
|
confirmDelete(id) {
|
|
this.$confirm('是否确认删除会议管理编号为 "' + id + '" 的数据项?', '系统提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.deleteMeeting(id).then(() => {
|
|
this.fetchMeetings();
|
|
});
|
|
}).catch(() => {});
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.fetchMeetings();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.fetchMeetings();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchMeetings();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.meeting-management {
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.el-button {
|
|
background-color: #409eff;
|
|
border-color: #409eff;
|
|
color: #fff;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style> |