可以返回搜索到的值，但无法显示在列表里

还没debug 诶嘿

src/router/authentication.js

@@ -1,10 +1,36 @@
-// ！！！这是一个示例，请根据实际情况修改！！！
+import Login from '../views/authentication/Login.vue';
-// import Login from '../views/authentication/Login.vue'
+import Register from '../views/authentication/Register.vue';
-// import Register from '../views/authentication/Register.vue'
+import ManageProfile from '../views/authentication/ManageProfile.vue';
-// import Profile from '../views/authentication/Profile.vue'
+import Profile from '../views/authentication/Profile.vue';
+import store from '../store';
+import {createRouter, createWebHistory} from "vue-router";
 
-export default [
+const routes = [
-    // { path: '/login', component: Login },
+    { path: '/login', component: Login },
-    // { path: '/register', component: Register },
+    { path: '/register', component: Register },
-    // { path: '/profile', component: Profile }
+    { path: '/manageProfile', component: ManageProfile },
-]
+    {
+        path: '/profile',
+        component: Profile,
+        meta: { requiresAuth: true },
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+        if (!store.getters['authentication/isAuthenticated']) {
+            next('/login');
+        } else {
+            next();
+        }
+    } else {
+        next();
+    }
+});
+
+export default routes;

src/router/meetingManagement.js

@@ -1,9 +1,24 @@
-// import MeetingList from '../views/meeting-management/MeetingList.vue'
+// meetingManagementRoutes.js
-// import MeetingDetail from '../views/meeting-management/MeetingDetail.vue'
+import MeetingManagement from "/src/views/meeting-management/MeetingManagement.vue";
-// import MeetingEdit from '../views/meeting-management/MeetingEdit.vue'
+import AddMeeting from "/src/views/meeting-management/AddMeeting.vue";
+import EditMeeting from "/src/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
+    }
+];
+
+export default routes;

src/services/meetingService.js

@@ -0,0 +1,42 @@
+import axios from 'axios';
+
+class MeetingService {
+    getAllMeetings() {
+        return axios.get(`/api/meetings/listAll`);
+    }
+
+    getMeetingById(id) {
+        // 使用 POST 方法并传递请求体
+        return axios.post(`/api/meetings/getMeetingById`, { id });
+    }
+
+    createMeeting(meeting) {
+        return axios.post(`/api/meetings/addMeeting`, meeting);
+    }
+
+    updateMeeting(id, 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();

src/store/authentication.js

@@ -1,30 +1,43 @@
+import axios from 'axios';
+
 const state = {
-    user: null
+    isAuthenticated: false,
-}
+    token: null,
+};
 
 const mutations = {
-    setUser(state, user) {
+    setUser(state, {token}) {
-        state.user = user
+        state.isAuthenticated = true;
-    }
+        state.token = token;
-}
+    },
+    clearUser(state) {
+        state.isAuthenticated = false;
+        state.token = null;
+    },
+};
 
 const actions = {
-    login({ commit }, user) {
+    async login({commit}, credentials) {
-        commit('setUser', user)
+        const response = await axios.post('/api/login', credentials);
+        if (response.status === 200) {
+            commit('setUser', {token: response.data.token});
+        }
+        return response;
     },
     logout({commit}) {
-        commit('setUser', null)
+        commit('clearUser');
-    }
+    },
-}
+};
 
 const getters = {
-    isAuthenticated: state => !!state.user
+    isAuthenticated: (state) => state.isAuthenticated,
-}
+    token: (state) => state.token,
+};
 
 export default {
     namespaced: true,
     state,
     mutations,
     actions,
-    getters
+    getters,
-}
+};

src/store/meetingManagement.js

@@ -1,27 +1,96 @@
+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 searchMeetings({ commit }, params) {
+        try {
+            const formattedparams = {
+                name: params.name,
+                organizer: params.organizer,
+                startTime: params.startTime,
+
+            };
+            const response = await MeetingService.searchMeetings(formattedparams);
+            commit('setMeetings', response.data);
+        } catch (error) {
+            console.error('Failed to search meetings:', error);
+        }
+    },
+    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 {
+            const formattedMeeting = {
+                name: meeting.name,
+                organizer: meeting.organizer,
+                startTime: meeting.startTime,
+                endTime: meeting.endTime,
+                content: meeting.content,
+                status: 'Scheduled' // 确保状态为 'Scheduled'
+            };
+            await MeetingService.createMeeting(formattedMeeting);
+            dispatch('fetchMeetings');
+        } catch (error) {
+            console.error('Failed to create meeting:', error);
+        }
+    },
+    async editMeeting({ dispatch }, meeting) {
+        try {
+            const formattedMeeting = {
+                name: meeting.name,
+                organizer: meeting.organizer,
+                startTime: meeting.startTime,
+                endTime: meeting.endTime,
+                content: meeting.content,
+                status: 'Scheduled' // 确保状态为 'Scheduled'
+            };
+            await MeetingService.updateMeeting(meeting.id, formattedMeeting);
+            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 +98,4 @@ export default {
     mutations,
     actions,
     getters
-}
+};

src/views/authentication/Login.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from 'vue';
+import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage } from 'element-plus';
+import 'element-plus/dist/index.css';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const username = ref('');
+const password = ref('');
+const rememberMe = ref(false);
+
+const handleLogin = async () => {
+  console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
+
+  try {
+    const response = await axios.post('/api/users/login', {
+      username: username.value,
+      password: password.value,
+    });
+
+    if (response.status === 200) {
+      ElMessage.success('登录成功');
+      await router.push('/profile');
+    } else {
+      ElMessage.error('登录失败，请稍后再试');
+    }
+  } catch (error) {
+    if (error.response && error.response.status === 401) {
+      ElMessage.error('用户名或密码错误');
+    } else {
+      ElMessage.error('登录失败，请稍后再试');
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <h2>测盟汇管理系统</h2>
+      <ElForm @submit.prevent="handleLogin">
+        <ElFormItem>
+          <label for="username">
+            <i class="fas fa-user"></i> 账号
+          </label>
+          <ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">
+            <i class="fas fa-lock"></i> 密码
+          </label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+        </ElFormItem>
+        <ElFormItem>
+          <ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.login-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/authentication/ManageProfile.vue

@@ -0,0 +1,219 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
+import 'element-plus/dist/index.css';
+import axios from "axios";
+import {useStore} from 'vuex';
+import {useRouter} from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const token = store.getters['authentication/token'];
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const gender = ref('');
+const department = ref('');
+const role = ref('');
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+
+onMounted(
+    async () => {
+      try {
+        // 从Vuex中获取JWT token
+        if (!token) {
+          store.commit('authentication/logout');
+          router.push('/login');
+        }
+
+        // 发送请求并附带token参数
+        const response = await axios.get(`/api/userProfile?token=${token}`);
+
+        if (response.status === 200) {
+          const user = response.data;
+          nickname.value = user.nickname;
+          phoneNumber.value = user.phoneNumber;
+          email.value = user.email;
+          gender.value = user.gender;
+          department.value = user.department;
+          role.value = user.role;
+        } else {
+          ElMessage.error('获取用户信息失败，请重试');
+        }
+      } catch (error) {
+        console.error('Error fetching user profile:', error);
+        ElMessage.error('获取用户信息失败，请重试');
+      }
+    }
+)
+
+const handleSaveProfile = async () => {
+  console.log('Saving profile with', {
+    nickname: nickname.value,
+    phoneNumber: phoneNumber.value,
+    email: email.value,
+    gender: gender.value,
+    department: department.value,
+    role: role.value
+  });
+  // 处理保存资料逻辑
+  try {
+    const response = await axios.post('/api/manageUserProfile', {
+      token: token,
+      nickname: nickname.value,
+      phoneNumber: phoneNumber.value,
+      email: email.value,
+      gender: gender.value,
+      department: department.value,
+      role: role.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('资料保存成功');
+    } else {
+      ElMessage.error('保存用户信息失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error saving user profile:', error);
+    ElMessage.error('保存用户信息失败，请重试');
+  }
+
+};
+
+const handleChangePassword = async () => {
+  if (newPassword.value !== confirmPassword.value) {
+    ElMessage.error('新密码和确认密码不一致');
+    return;
+  }
+  // console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
+  // 处理修改密码逻辑
+  try {
+    const response = await axios.post('/api/changePassword', {
+      token: token,
+      currentPassword: currentPassword.value,
+      newPassword: newPassword.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('密码修改成功，请重新登录');
+      store.commit('authentication/logout');
+      router.push('/login');
+    } else {
+      ElMessage.error('修改密码失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error changing password:', error);
+    ElMessage.error('修改密码失败，请重试');
+  }
+};
+</script>
+
+<template>
+  <div class="profile-container">
+    <div class="profile-box">
+      <h2>基本资料</h2>
+      <ElTabs>
+        <ElTabPane label="基本资料">
+          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
+            <ElFormItem label="用户昵称">
+              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
+            </ElFormItem>
+            <ElFormItem label="手机号码">
+              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
+            </ElFormItem>
+            <ElFormItem label="邮箱">
+              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
+            </ElFormItem>
+            <ElFormItem label="性别">
+              <ElRadioGroup v-model="gender">
+                <ElRadio label="男">男</ElRadio>
+                <ElRadio label="女">女</ElRadio>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem label="部门">
+              <ElInput v-model="department" type="text" placeholder="请输入部门" required/>
+            </ElFormItem>
+            <ElFormItem label="角色">
+              <ElInput v-model="role" type="text" placeholder="请输入角色" required/>
+            </ElFormItem>
+            <!--            <ElFormItem label="角色">-->
+            <!--              <ElSelect v-model="role" placeholder="请选择角色" required>-->
+            <!--                <ElOption label="管理员" value="admin"/>-->
+            <!--                <ElOption label="用户" value="user"/>-->
+            <!--              </ElSelect>-->
+            <!--            </ElFormItem>-->
+            <ElFormItem>
+              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
+              <ElButton type="danger">取消</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane label="修改密码">
+          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
+            <ElFormItem label="旧密码">
+              <ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
+            </ElFormItem>
+            <ElFormItem label="新密码">
+              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
+            </ElFormItem>
+            <ElFormItem label="确认密码">
+              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+      </ElTabs>
+      <ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.profile-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+}
+
+.profile-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 600px;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/authentication/Profile.vue

@@ -0,0 +1,144 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import 'element-plus/dist/index.css';
+import {useStore} from 'vuex';
+import axios from "axios";
+import {ElButton, ElMessage} from "element-plus";
+import {useRouter} from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const department = ref('');
+const role = ref('');
+const createdAt = ref('');
+
+onMounted(async () => {
+  try {
+    // 从Vuex中获取JWT token
+    const token = store.getters['authentication/token'];
+    if (!token) {
+      store.commit('authentication/logout');
+      router.push('/login');
+    }
+
+    // 发送请求并附带token参数
+    const response = await axios.get(`/api/userProfile?token=${token}`);
+
+    if (response.status === 200) {
+      const user = response.data;
+      nickname.value = user.nickname;
+      phoneNumber.value = user.phoneNumber;
+      email.value = user.email;
+      department.value = user.department;
+      role.value = user.role;
+      createdAt.value = user.createdAt;
+    } else {
+      ElMessage.error("获取用户信息失败，请重试");
+    }
+  } catch (error) {
+    console.error('Error fetching user profile:', error);
+    ElMessage.error("获取用户信息失败，请重试");
+  }
+});
+</script>
+
+
+<template>
+  <div class="profile-container">
+    <div class="profile-box">
+      <h2>个人信息</h2>
+      <div class="profile-image">
+        <img src="@assets/avatar.jpg" alt="Profile Image"/>
+      </div>
+      <div class="profile-info">
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">用户昵称：</span>
+          <span class="info-value">{{ nickname }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">手机号码：</span>
+          <span class="info-value">{{ phoneNumber }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">用户邮箱：</span>
+          <span class="info-value">{{ email }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">所属部门：</span>
+          <span class="info-value">{{ department }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">所属角色：</span>
+          <span class="info-value">{{ role }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">创建日期：</span>
+          <span class="info-value">{{ createdAt }}</span>
+        </div>
+        <div class="divider"></div>
+      </div>
+      <ElButton type="text" @click="() => $router.push('/manageProfile')">修改信息</ElButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+}
+
+.profile-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 30%;
+  max-width: 300px;
+  text-align: center;
+}
+
+.profile-image img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 1rem;
+}
+
+.profile-info {
+  text-align: left;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.info-label {
+  font-weight: bold;
+}
+
+.info-value {
+  color: #555;
+}
+
+.divider {
+  height: 1px;
+  background: #e0e0e0;
+  margin: 0.5rem 0;
+}
+</style>

src/views/authentication/Register.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue';
+import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox } from 'element-plus';
+import 'element-plus/dist/index.css';
+import axios from 'axios';
+import { useRouter } from 'vue-router';
+
+const username = ref('');
+const phoneNumber = ref('');
+const password = ref('');
+const verificationCode = ref('');
+const correctCode = '1234'; // 固定验证码
+const router = useRouter();
+
+const handleRegister = async () => {
+  console.log('Registering with', {
+    username: username.value,
+    phoneNumber: phoneNumber.value,
+    password: password.value,
+    verificationCode: verificationCode.value
+  });
+
+  if (verificationCode.value !== correctCode) {
+    await ElMessageBox.alert("验证码错误");
+    return;
+  }
+
+  try {
+    const response = await axios.post('/api/users/register', { // 修改为正确的端点
+      username: username.value,
+      password: password.value,
+    });
+
+    if (response.status === 200) {
+      ElMessage.success('注册成功');
+      await router.push('/login');
+    } else {
+      await ElMessageBox.alert(response.data.message);
+    }
+  } catch (error) {
+    await ElMessageBox.alert(error.response?.data?.message || '注册失败，请稍后再试');
+  }
+};
+</script>
+
+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <h2>企业租户注册</h2>
+      <ElForm @submit.prevent="handleRegister">
+        <ElFormItem>
+          <label for="userName">用户名称</label>
+          <ElInput v-model="username" type="text" id="userName" placeholder="请输入企业名称" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="phoneNumber">手机号码</label>
+          <ElInput v-model="phoneNumber" type="text" id="phoneNumber" placeholder="请输入企业联系方式" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">密码</label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="verificationCode">验证码</label>
+          <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => router.push('/login')">返回登录</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.register-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/meeting-management/AddMeeting.vue

@@ -0,0 +1,57 @@
+<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: 'Scheduled' // 确保状态为 'Scheduled'
+      }
+    };
+  },
+  methods: {
+    ...mapActions('meetingManagement', ['createMeeting']),
+    async submitForm() {
+      try {
+        await this.createMeeting(this.meeting);
+        this.$router.push({ name: 'MeetingManagement' });
+      } catch (error) {
+        console.error('Failed to create meeting:', error);
+      }
+    },
+    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,162 @@
+<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="search">搜索</el-button>
+      <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';
+import axios from 'axios';
+import MeetingService from "@services/meetingService.js";
+import MeetingManagement from "@store/meetingManagement.js";
+import meetingManagement from "@store/meetingManagement.js";
+
+export default {
+  name: 'MeetingManagement',
+  data() {
+    return {
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      searchName: '',
+      searchOrganizer: '',
+      searchStartTime: null,
+      allMeeting:''
+    };
+  },
+  computed: {
+    ...mapGetters('meetingManagement', ['allMeetings'])
+  },
+  methods: {
+    ...mapActions('meetingManagement', ['fetchMeetings', 'searchMeetings', '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();
+    },
+    search() {
+      const params = {
+        name: this.searchName,
+        organizer: this.searchOrganizer,
+        startTime: this.searchStartTime ? this.searchStartTime.toISOString() : null
+      };
+      this.allMeeting = this.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() {
+    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;
+}
+.search-input {
+  margin-right: 10px;
+}
+.el-button {
+  margin-right: 10px;
+}
+.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>