ruoyi-vue开发消息中心

在 Ruoyi-Vue 中开发消息中心，可以按照以下步骤进行：

1. 创建消息中心组件

在 src/views/modules/system/notification 目录下创建 Notification.vue 组件。该组件将包含所有与消息中心相关的代码。

2. 创建消息中心路由

在 src/router/modules/system.js 中添加消息中心的路由配置：

{
  path: '/notification',
  component: Layout,
  redirect: '/notification/list',
  name: 'Notification',
  meta: { title: '消息中心', icon: 'message' },
  children: [
    {
      path: 'list',
      component: () => import('@/views/modules/system/notification/Notification.vue'),
      name: 'NotificationList',
      meta: { title: '消息列表' }
    }
  ]
},

3. 开发消息列表功能

在 Notification.vue 组件中，创建一个数据列表，用于显示所有的消息。可以使用 element-ui 的 Table 组件来实现。

<template>
  <div class="notification">
    <el-table :data="notifications" stripe>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: []
    }
  },
  created() {
    // 获取消息列表数据
    this.getNotifications()
  },
  methods: {
    getNotifications() {
      // 调用接口获取消息列表数据
      // ...
      this.notifications = responseData
    }
  }
}
</script>

4. 开发消息详情功能

在 Notification.vue 中添加一个方法，用于跳转到消息详情页。可以在消息列表中添加一个按钮，点击后跳转到消息详情页。

<template>
  <div class="notification">
    <el-table :data="notifications" stripe>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="viewNotification(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: []
    }
  },
  created() {
    // 获取消息列表数据
    this.getNotifications()
  },
  methods: {
    getNotifications() {
      // 调用接口获取消息列表数据
      // ...
      this.notifications = responseData
    },
    viewNotification(row) {
      // 跳转到消息详情页
      this.$router.push({ path: `/notification/${row.id}` })
    }
  }
}
</script>

5. 添加消息详情路由

在 src/router/modules/system.js 中添加消息详情路由配置：

{
  path: '/notification',
  component: Layout,
  redirect: '/notification/list',
  name: 'Notification',
  meta: { title: '消息中心', icon: 'message' },
  children: [
    {
      path: 'list',
      component: () => import('@/views/modules/system/notification/Notification.vue'),
      name: 'NotificationList',
      meta: { title: '消息列表' }
    },
    {
      path: ':id',
      component: () => import('@/views/modules/system/notification/NotificationDetail.vue'),
      name: 'NotificationDetail',
      meta: { title: '消息详情', hidden: true }
    }
  ]
},

6. 开发消息详情页面

在 Notification.vue 组件所在的目录下创建 NotificationDetail.vue 组件。该组件将用于显示消息的详细内容。

<template>
  <div class="notification-detail">
    <h2>{{ notification.title }}</h2>
    <p>{{ notification.content }}</p>
    <p>{{ notification.createTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notification: {}
    }
  },
  created() {
    // 获取消息详情数据
    this.getNotificationDetail()
  },
  methods: {
    getNotificationDetail() {
      // 获取消息详情数据
      // ...
      this.notification = responseData
    }
  }
}
</script>

7. 完成消息中心功能

至此，消息中心功能已经完成。用户可以在消息列表中查看所有的消息，同时也可以点击某条消息查看其详细内容。