【类 型】：feat

【原  因】：添加公告模块
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/router/index.js

@@ -415,6 +415,39 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/message',
+    component: Layout,
+    redirect: '/message/index',
+    meta: {
+      title: '公告管理',
+      icon: 'iconfont icon-guanliyuan',
+      roles: ['admin', 'editor'],
+      tapName: 'admin'
+    },
+    children: [
+      {
+        path: '/message/index',
+        component: () => import('@/views/layout/components/main/message/index'),
+        meta: {
+          title: '公告列表',
+          icon: 'iconfont icon-yonghuguanli',
+          roles: ['admin', 'editor'],
+          tapName: 'admin'
+        }
+      },
+      {
+        path: '/message/pub',
+        component: () => import('@/views/layout/components/main/message/pub'),
+        meta: {
+          title: '发布公告',
+          icon: 'iconfont icon-yonghuguanli',
+          roles: ['admin', 'editor'],
+          tapName: 'admin'
+        }
+      }
+    ]
+  },
   {
     path: '/category',
     component: Layout,

src/store/index.js

@@ -6,6 +6,7 @@ import settings from './modules/settings'
 import user from './modules/user'
 import api from '@/utils/api'
 import { Message, MessageBox, Notification } from 'element-ui'
+import { parseTime } from '@/utils/index'
 
 // 把vuex作为插件引入到Vue示例中 ps:注册
 Vue.use(Vuex)
@@ -1143,6 +1144,7 @@ const store = new Vuex.Store({
       }
       return res
     },
+
     /**
      * @description: 异步获取管理员消息列表 成功获取之后 弹出通知框 显示列表
      */
@@ -1153,14 +1155,24 @@ const store = new Vuex.Store({
         const list = res.data.messageList || []
         commit('setMessageList', list)
 
-        // 每条通知之间延迟 800ms，显示时间为 8000ms
+        // 弹出通知
         list.forEach((item, index) => {
+          const formattedTime = parseTime(item.add_time, '{m}-{d} {h}:{i}')
+          const sender = item.admin_uname || '管理员'
+
           setTimeout(() => {
             Notification({
               title: item.tit || '通知',
-              message: item.message || '',
-              duration: 8000, // 显示时间 8 秒
-              type: 'info' // 可选类型: success / warning / error / info
+              message: `
+                <div>
+                  <div>${item.message || ''}</div>
+                  <div style="display: flex; justify-content: flex-end;">
+                    <div style="color: #aaa;">BY. ${sender} ${formattedTime}</span>
+                  </div>
+                </div>
+              `,
+              duration: 8000,
+              dangerouslyUseHTMLString: true // 启用 HTML 格式
             })
           }, index * 800)
         })

src/store/modules/app.js

@@ -9,6 +9,7 @@ const defaultModuleVisibilityMap = {
   site: true,
   shop: true,
   admin: true,
+  message: true,
   category: true,
   broadcast: true,
   order: true,

src/utils/api/table.js

@@ -162,6 +162,15 @@ export async function pubMessage (tit, message, idArr, endTime) {
   return res
 }
 
+/**
+ * @description 获取全部公告列表（不限制过期、无admin_id限制）
+ * @returns {Promise} 返回接口响应对象
+ */
+export async function getAllMessageList () {
+  const res = await api.get('getAllMessageList', 'Admin')
+  return res
+}
+
 /**
  * @abstract 获取指定飞机组的飞行数据（按时间范围）
  * @param {Array} idArr 飞机ID数组

src/views/layout/components/main/admin/index.vue

@@ -14,7 +14,7 @@
     </el-button-group>
     <!-- 管理员列表 -->
     <el-table class="w-100" ref="myTable"
-      :data="adminListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      :data="adminListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark" @selection-change="handleSelectionChange">
       <el-table-column align="center" type="selection" width="40">
       </el-table-column>
       <el-table-column align="center" prop="id" label="id" width="50">

src/views/layout/components/main/home/set.vue

@@ -56,6 +56,7 @@ export default {
         { value: 'planes', label: '无人机' },
         { value: 'shop', label: '商铺管理' },
         { value: 'admin', label: '账户列表' },
+        { value: 'message', label: '公告管理' },
         { value: 'category', label: '分类管理' },
         { value: 'product', label: '商品管理' },
         { value: 'broadcast', label: '广告管理' },

src/views/layout/components/main/message/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="app-container">
+    <!-- 组合按钮 -->
+    <el-button-group class="m-b-20 m-r-20">
+      <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin(countSelIdArr($refs.myTable.selection))">删除
+      </el-button>
+      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
+    </el-button-group>
+    <!-- 用户select选项 -->
+    <el-button-group class="m-b-20">
+      <SelectionShopId v-model="form.shop_id" :allSel="true" />
+    </el-button-group>
+
+    <!-- 公告列表 -->
+    <el-table class="w-100" ref="myTable"
+      :data="messageListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      <!-- 多选框 -->
+      <el-table-column type="selection" width="55" />
+
+      <!-- 公告标题 -->
+      <el-table-column prop="tit" label="标题" min-width="120" show-overflow-tooltip />
+
+      <!-- 公告内容 -->
+      <el-table-column prop="message" label="内容" min-width="200" show-overflow-tooltip />
+
+      <!-- 添加人 -->
+      <el-table-column prop="admin_uname" label="发布人" min-width="100" />
+
+      <!-- 接收人 -->
+      <el-table-column prop="by_admin_uname" label="接收人" min-width="100" />
+
+      <!-- 添加时间 -->
+      <el-table-column prop="add_time" label="发布时间" min-width="150">
+        <template slot-scope="scope">
+          {{ parseTime(scope.row.add_time) }}
+        </template>
+      </el-table-column>
+
+      <!-- 结束时间 -->
+      <el-table-column prop="end_time" label="截止时间" min-width="150">
+        <template slot-scope="scope">
+          {{ parseTime(scope.row.end_time) }}
+        </template>
+      </el-table-column>
+
+      <!-- 操作 -->
+      <el-table-column label="操作" width="220" fixed="right">
+        <el-button-group>
+          <el-button type="warning" icon="el-icon-edit"
+            @click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
+          <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
+        </el-button-group>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
+      :total="messageListArr.length">
+    </el-pagination>
+
+  </div>
+</template>
+
+<script>
+import { parseTime, countSelIdArr } from '@/utils'
+import SelectionShopId from '@/components/SelectionShopId'
+import { getAllMessageList } from '@/utils/api/table'
+
+export default {
+  name: 'Admin',
+  data () {
+    return {
+      pageSize: 8, // 每页显示记录条数
+      currentPage: 1, // 当前页
+      form: {
+        shop_id: ''
+      },
+      messageList: []
+    }
+  },
+  components: {
+    SelectionShopId
+  },
+  computed: {
+    // 获取公告列表
+    messageListArr () {
+      if (this.form.shop_id !== '') {
+        return this.messageList.filter((item) => item.shop_id === this.form.shop_id)
+      } else {
+        return this.messageList
+      }
+    }
+  },
+  created () {
+    this.getAllMessageList()
+  },
+  methods: {
+    parseTime,
+    // 获取公告列表
+    async getAllMessageList () {
+      const res = await getAllMessageList()
+      if (res.data.status === 1) {
+        this.messageList = res.data.messageList
+      } else {
+        this.$message.error(res.msg)
+      }
+    }
+  },
+  filters: {
+    countSelIdArr
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+</style>

src/views/layout/components/main/message/pub.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-row class="m-t-0">
+      <el-col :span="24">
+        <el-container>
+          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+            <div class="l">
+              <i class="iconfont el-icon-link f-s-20"></i>
+              <font class="m-l-10 f-s-18 fb">发布公告</font>
+            </div>
+          </el-header>
+          <el-main class="border p-20">
+            <el-form label-width="120px">
+              <el-form-item label="公告标题">
+                <el-input v-model="form.tit" placeholder="请输入公告标题" maxlength="50" show-word-limit />
+              </el-form-item>
+              <el-form-item label="公告信息">
+                <el-input v-model="form.message" type="textarea" placeholder="请输入公告内容" :rows="5" maxlength="80"
+                  show-word-limit />
+              </el-form-item>
+              <el-form-item label="显示截止日期">
+                <el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
+                  value-format="timestamp" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-edit" :loading="loading" @click="pubMessage()">
+                  发布公告
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { pubMessage } from '@/utils/api/table'
+
+export default {
+  name: 'message',
+  data () {
+    return {
+      form: {
+        date: '',
+        message: '',
+        tit: ''
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 从 Vuex 中获取用户 ID 列表
+    idArr () {
+      return this.$store.state.app.toMessageIdArr
+    }
+  },
+  created () {
+  },
+  methods: {
+    async pubMessage () {
+      // 判断 idArr 是否为空
+      if (!this.idArr || this.idArr.length === 0) {
+        this.$message.warning('接收用户为空，请重新操作')
+        this.$router.push('/admin/index')
+        return
+      }
+      if (!this.form.tit) {
+        this.$message.error('请输入公告标题')
+        return
+      }
+      if (!this.form.message) {
+        this.$message.error('请输入公告内容')
+        return
+      }
+      if (!this.form.date) {
+        this.$message.error('请选择截止日期')
+        return
+      }
+
+      const endTime = Math.floor(new Date(this.form.date).setHours(23, 59, 59, 999) / 1000)// 取日历选择的 当天最后一秒
+
+      const res = await pubMessage(this.form.tit, this.form.message, this.idArr, endTime)
+
+      if (res.data.status === 1) {
+        this.$message.success(res.data.msg)
+        this.form.message = ''
+        this.form.date = ''
+        this.form.tit = ''
+        // 跳转到首页
+        this.$router.push('/admin/index')
+      } else {
+        this.$message.error(res.data.msg || '公告发布失败')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rspan {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>