ExamSphere/admin/notice.vue

<template>
  <el-row class="page">
    <el-row class="block-view">
      <el-row class="top">
        <el-col>
          <el-text class="mx-1"><h2>系统通知管理</h2></el-text>
        </el-col>
      </el-row>

      <!-- 发布通知 -->
      <el-card class="publish" shadow="hover">
		  
        <el-row gutter={20} style="display: flex;">
          <el-col :span="20" class="center-col">
			  
            <el-input 
              placeholder="请输入通知标题"
              v-model="newNotification.title"
              clearable
              size="medium"
              class="notification-input"
            />
			
          </el-col>
		  <el-col></el-col>
          <el-col :span="24" class="center-col">
			  
            <el-input
              type="textarea"
              placeholder="请输入通知内容"
              v-model="newNotification.content"
              clearable
              size="large"
              class="notification-input"
            />
			
          </el-col>
        </el-row>
	
        <el-button
          type="primary"
          @click="isEditing ? updateNotification() : addNotification()"
          class="submit-btn"
          size="large"
        >
          {{ isEditing ? '保存编辑' : '发布通知' }}
        </el-button>
      </el-card>

      <!-- 已发布通知列表 -->
      <el-row class="notice-list" v-if="notifications.length > 0">
        <el-table :data="notifications" stripe style="width: 100%" border>
          <el-table-column prop="title" label="通知标题" width="220" />
          <el-table-column prop="content" label="通知内容" />
          <el-table-column prop="timestamp" label="发布时间" width="180" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button
                @click="editNotification(scope.row)"
                type="text"
                icon="el-icon-edit"
                size="small"
                class="edit-btn"
              >编辑</el-button>
              <el-button
                @click="deleteNotification(scope.row.id)"
                type="text"
                icon="el-icon-delete"
                size="small"
                class="delete-btn"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-alert v-else title="暂无通知" type="info" show-icon></el-alert>
    </el-row>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 存储通知列表和新通知信息
const notifications = ref([]);
const newNotification = ref({
  title: '',
  content: ''
});
// 用于判断当前是否在编辑状态
const isEditing = ref(false);
const editingNotificationId = ref(null);

// 添加通知的功能
const addNotification = () => {
  if (newNotification.value.title && newNotification.value.content) {
    notifications.value.push({
      id: Date.now(),  // 使用当前时间戳作为唯一 ID
      title: newNotification.value.title,
      content: newNotification.value.content,
      timestamp: new Date().toLocaleString(), // 获取当前时间
    });
    ElMessage.success('通知发布成功！');
    resetForm();
  } else {
    ElMessage.error('请填写完整的通知信息！');
  }
};

// 编辑通知
const editNotification = (notification) => {
  newNotification.value.title = notification.title;
  newNotification.value.content = notification.content;
  isEditing.value = true;
  editingNotificationId.value = notification.id; // 存储正在编辑的通知 ID
};

// 更新通知
const updateNotification = () => {
  if (newNotification.value.title && newNotification.value.content && editingNotificationId.value) {
    const index = notifications.value.findIndex(notification => notification.id === editingNotificationId.value);
    if (index > -1) {
      notifications.value[index].title = newNotification.value.title;
      notifications.value[index].content = newNotification.value.content;
      notifications.value[index].timestamp = new Date().toLocaleString(); // 更新当前时间
      ElMessage.success('通知更新成功！');
      resetForm();
    } else {
      ElMessage.error('更新失败，通知未找到！');
    }
  } else {
    ElMessage.error('请填写完整的通知信息！');
  }
};

// 删除通知
const deleteNotification = (id) => {
  const index = notifications.value.findIndex(notification => notification.id === id);
  if (index > -1) {
    notifications.value.splice(index, 1); // 从列表中删除通知
    ElMessage.success('通知删除成功！');
  } else {
    ElMessage.error('删除失败，通知未找到！');
  }
};

// 重置表单
const resetForm = () => {
  newNotification.value.title = '';
  newNotification.value.content = '';
  isEditing.value = false;
  editingNotificationId.value = null;
};
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f9f9f9;
  line-height: 20px;
}

.block-view {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.top {
  color: #333;
  margin-bottom: 20px;
}

.publish {
  margin-bottom: 30px;
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-input {
  margin-bottom: 10px;
  width: 100%;
  background-color: #f5f5f5;
}

.submit-btn {
  width: 100%;
}

.notice-list {
  margin-top: 20px;
}

.el-button {
  font-size: 14px;
}

.edit-btn,
.delete-btn {
  transition: color 0.3s;
}

.edit-btn:hover {
  color: #409EFF;
}

.delete-btn:hover {
  color: #f56c6c;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f2f2f2;
}

.el-table .cell {
  white-space: normal;
}

.el-alert {
  margin-top: 20px;
}




.center-col {
  display: flex;
  justify-content: center; /* 确保水平居中 */
  align-items: center;
  height: 70px;
  width: 100%;
}

</style>