写了点

还没debug 诶嘿

src/router/meetingManagement.js

@@ -1,9 +1,29 @@
-// import MeetingList from '../views/meeting-management/MeetingList.vue'
+import { createRouter, createWebHistory } from 'vue-router';
-// import MeetingDetail from '../views/meeting-management/MeetingDetail.vue'
+import MeetingManagement from '../views/meeting-management/MeetingManagement.vue';
-// import MeetingEdit from '../views/meeting-management/MeetingEdit.vue'
+import AddMeeting from '../views/meeting-management/AddMeeting.vue';
+import EditMeeting from '../views/meeting-management/EditMeeting.vue';
 
-export default [
+const routes = [
-    // { path: '/meetings', component: MeetingList },
+    {
-    // { path: '/meetings/:id', component: MeetingDetail },
+        path: '/Meeting',
-    // { path: '/meetings/:id/edit', component: MeetingEdit }
+        name: 'MeetingManagement',
-]
+        component: MeetingManagement
+    },
+    {
+        path: '/Meeting/add',
+        name: 'AddMeeting',
+        component: AddMeeting
+    },
+    {
+        path: '/Meeting/edit/:id',
+        name: 'EditMeeting',
+        component: EditMeeting
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes
+});
+
+export default router;

src/services/meetingService.js

@@ -0,0 +1,30 @@
+import axios from 'axios';
+
+const API_URL = 'http://localhost:8080/meetings';
+
+class MeetingService {
+    getAllMeetings() {
+        return axios.get(`${API_URL}/listAll`);
+    }
+
+    getMeetingById(id) {
+        // 使用 POST 方法并传递请求体
+        return axios.post(`${API_URL}/getMeetingById`, { id });
+    }
+
+    createMeeting(meeting) {
+        return axios.post(`${API_URL}/addMeeting`, meeting);
+    }
+
+    updateMeeting(id, meeting) {
+        // 使用 POST 方法而不是 PUT 方法
+        return axios.post(`${API_URL}/updateMeeting`, meeting);
+    }
+
+    deleteMeeting(id) {
+        // 使用 POST 方法并传递请求体
+        return axios.post(`${API_URL}/deleteMeeting`, { id });
+    }
+}
+
+export default new MeetingService();

src/store/meetingManagement.js

@@ -1,27 +1,66 @@
+import MeetingService from '../services/meetingService';
+
 const state = {
-    meetings: []
+    meetings: [],
-}
+    currentMeeting: null
+};
 
 const mutations = {
     setMeetings(state, meetings) {
-        state.meetings = meetings
+        state.meetings = meetings;
+    },
+    setCurrentMeeting(state, meeting) {
+        state.currentMeeting = meeting;
     }
-}
+};
 
 const actions = {
-    fetchMeetings({ commit }) {
+    async fetchMeetings({ commit }) {
-        // 模拟API调用
+        try {
-        const meetings = [
+            const response = await MeetingService.getAllMeetings();
-            { id: 1, title: 'Meeting 1' },
+            commit('setMeetings', response.data);
-            { id: 2, title: 'Meeting 2' }
+        } catch (error) {
-        ]
+            console.error('Failed to fetch meetings:', error);
-        commit('setMeetings', meetings)
+        }
+    },
+    async fetchMeetingById({ commit }, id) {
+        try {
+            const response = await MeetingService.getMeetingById(id);
+            commit('setCurrentMeeting', response.data);
+        } catch (error) {
+            console.error('Failed to fetch meeting:', error);
+        }
+    },
+    async createMeeting({ dispatch }, meeting) {
+        try {
+            await MeetingService.createMeeting(meeting);
+            dispatch('fetchMeetings');
+        } catch (error) {
+            console.error('Failed to create meeting:', error);
+        }
+    },
+    async updateMeeting({ dispatch }, meeting) {
+        try {
+            await MeetingService.updateMeeting(meeting.id, meeting);
+            dispatch('fetchMeetings');
+        } catch (error) {
+            console.error('Failed to update meeting:', error);
+        }
+    },
+    async deleteMeeting({ dispatch }, id) {
+        try {
+            await MeetingService.deleteMeeting(id);
+            dispatch('fetchMeetings');
+        } catch (error) {
+            console.error('Failed to delete meeting:', error);
+        }
     }
-}
+};
 
 const getters = {
-    allMeetings: state => state.meetings
+    allMeetings: state => state.meetings,
-}
+    currentMeeting: state => state.currentMeeting
+};
 
 export default {
     namespaced: true,
@@ -29,4 +68,4 @@ export default {
     mutations,
     actions,
     getters
-}
+};

src/views/meeting-management/AddMeeting.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-form :model="meeting" label-width="120px" @submit.native.prevent="submitForm">
+    <el-form-item label="会议名称">
+      <el-input v-model="meeting.name"></el-input>
+    </el-form-item>
+    <el-form-item label="创建人">
+      <el-input v-model="meeting.organizer"></el-input>
+    </el-form-item>
+    <el-form-item label="开始时间">
+      <el-date-picker v-model="meeting.startTime" type="datetime" placeholder="选择时间"></el-date-picker>
+    </el-form-item>
+    <el-form-item label="结束时间">
+      <el-date-picker v-model="meeting.endTime" type="datetime" placeholder="选择时间"></el-date-picker>
+    </el-form-item>
+    <el-form-item label="会议内容">
+      <el-input type="textarea" v-model="meeting.content"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'AddMeeting',
+  data() {
+    return {
+      meeting: {
+        name: '',
+        organizer: '',
+        startTime: '',
+        endTime: '',
+        content: '',
+        status: 'Active'
+      }
+    };
+  },
+  methods: {
+    ...mapActions('meetingManagement', ['createMeeting']),
+    async submitForm() {
+      await this.createMeeting(this.meeting);
+      this.$router.push({ name: 'MeetingManagement' });
+    },
+    cancel() {
+      this.$router.push({ name: 'MeetingManagement' });
+    }
+  }
+};
+</script>

src/views/meeting-management/EditMeeting.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-form :model="meeting" label-width="120px" @submit.native.prevent="submitForm">
+    <el-form-item label="会议名称">
+      <el-input v-model="meeting.name"></el-input>
+    </el-form-item>
+    <el-form-item label="创建人">
+      <el-input v-model="meeting.organizer"></el-input>
+    </el-form-item>
+    <el-form-item label="开始时间">
+      <el-date-picker v-model="meeting.startTime" type="datetime" placeholder="选择时间"></el-date-picker>
+    </el-form-item>
+    <el-form-item label="结束时间">
+      <el-date-picker v-model="meeting.endTime" type="datetime" placeholder="选择时间"></el-date-picker>
+    </el-form-item>
+    <el-form-item label="会议内容">
+      <el-input type="textarea" v-model="meeting.content"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'EditMeeting',
+  data() {
+    return {
+      meeting: {
+        id: '',
+        name: '',
+        organizer: '',
+        startTime: '',
+        endTime: '',
+        content: '',
+        status: 'Active'
+      }
+    };
+  },
+  computed: {
+    ...mapGetters('meetingManagement', ['currentMeeting'])
+  },
+  methods: {
+    ...mapActions('meetingManagement', ['fetchMeetingById', 'editMeeting']),
+    async submitForm() {
+      await this.editMeeting(this.meeting);
+      this.$router.push({ name: 'MeetingManagement' });
+    },
+    cancel() {
+      this.$router.push({ name: 'MeetingManagement' });
+    }
+  },
+  async mounted() {
+    await this.fetchMeetingById(this.$route.params.id);
+    Object.assign(this.meeting, this.currentMeeting);
+  }
+};
+</script>

src/views/meeting-management/MeetingManagement.vue

@@ -0,0 +1,123 @@
+<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>