公告列表

2025-11-19 15:09:27 +08:00 · 2025-11-19 15:09:27 +08:00 · fe0f251c71
commit fe0f251c71
parent 2a88c4ecc6
3 changed files with 338 additions and 61 deletions
--- a/api/dashboard.js
+++ b/api/dashboard.js
@ -112,3 +112,24 @@ export const getNoticeDetail = (id) => {
  });
 };

+/**
+ * 新增公告
+ * @param {Object} payload 公告数据
+ * @param {string} payload.title 标题
+ * @param {string} payload.content 内容
+ * @param {string} payload.level 重要程度：1-一般 2-重要 3-紧急
+ * @param {boolean} payload.top 是否置顶
+ * @param {string} payload.type 类型：1-通知 2-公告
+ * @param {Array<string>} payload.receiveUserIds 接收用户ID集合
+ * @param {Array<string>} payload.receiveDeptIds 接收部门ID集合
+ * @param {string|Array} payload.attaches 附件，可为字符串或数组
+ * @returns {Promise}
+ */
+export const createNotice = (payload) => {
+  return uni.$uv.http.post('bst/notice', payload, {
+    custom: {
+      auth: true
+    }
+  });
+};
+
--- a/pages.json
+++ b/pages.json
@ -157,6 +157,12 @@
 				"navigationBarTitleText": "公告列表"
 			}
 		},
+		{
+			"path": "pages/notice/create/index",
+			"style": {
+				"navigationBarTitleText": "新增公告"
+			}
+		},
 		{
 			"path": "pages/notice/detail/index",
 			"style": {
--- a/pages/notice/list/index.vue
+++ b/pages/notice/list/index.vue
@ -99,17 +99,37 @@
      @scrolltolower="handleScrollToLower"
    >
      <view class="notice-container">
-        <!-- 公告卡片列表 -->
-        <view 
-          class="notice-card" 
-          v-for="notice in notices" 
-          :key="notice.id"
-          @click="goToNoticeDetail(notice)"
-        >
-          <!-- 标题和标签行 -->
-          <view class="notice-header">
-            <view class="notice-title-row">
-              <text class="notice-title" :class="{ 'pinned': notice.top }">
+        <template v-if="isAdmin">
+          <!-- 管理员操作按钮 -->
+          <view class="admin-action-row">
+            <uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
+            <uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
+            <uv-button type="error" size="small" plain @click="handleDelete">删除</uv-button>
+          </view>
+
+          <!-- 管理员表格视图 -->
+          <view class="notice-table">
+            <view class="table-header">
+              <text class="table-cell select" @click.stop="handleSelectAll">
+                <view class="checkbox-indicator" :class="{ checked: isAllSelected }"></view>
+              </text>
+              <text class="table-cell title">标题</text>
+              <text class="table-cell level">重要程度</text>
+<!--              <text class="table-cell receive">接收对象</text>-->
+<!--              <text class="table-cell creator">创建人</text>-->
+              <text class="table-cell time">创建时间</text>
+            </view>
+            <view 
+              class="table-row" 
+              v-for="notice in notices" 
+              :key="notice.id"
+              :class="{ selected: isNoticeSelected(notice.id) }"
+              @click="goToNoticeDetail(notice)"
+            >
+              <view class="table-cell select" @click.stop="toggleNoticeSelection(notice.id)">
+                <view class="checkbox-indicator" :class="{ checked: isNoticeSelected(notice.id) }"></view>
+              </view>
+              <text class="table-cell title" :class="{ pinned: notice.top }">
                {{ notice.title }}
              </text>
              <view class="notice-tags">
@ -117,63 +137,96 @@
                <view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
                <view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
              </view>
+<!--              <text class="table-cell receive">-->
+<!--                {{ formatReceiveInfo(notice) }}-->
+<!--              </text>-->
+<!--              <text class="table-cell creator">-->
+<!--                {{ notice.userName || '未知' }}-->
+<!--              </text>-->
+              <text class="table-cell time">
+                {{ formatTime(notice.createTime) }}
+              </text>
            </view>
          </view>
-          
-          <!-- 内容预览 -->
-          <view class="notice-content">
-            <text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
-          </view>
-          
-          <!-- 元信息 -->
-          <view class="notice-meta">
-            <view class="meta-item">
-              <text class="meta-icon">👤</text>
-              <text class="meta-text">{{ notice.userName || '未知' }}</text>
-            </view>
-            <view class="meta-item">
-              <text class="meta-icon">🕐</text>
-              <text class="meta-text">{{ formatTime(notice.createTime) }}</text>
-            </view>
-          </view>
-          
-          <!-- 接收信息 -->
-          <view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
-            <view class="receive-item" v-if="notice.receiveUserList?.length > 0">
-              <text class="receive-label">接收用户:</text>
-              <view class="receive-users">
-                <view 
-                  class="user-avatar" 
-                  v-for="(user, index) in notice.receiveUserList.slice(0, 3)" 
-                  :key="user.userId"
-                >
-                  <image 
-                    v-if="user.avatar" 
-                    :src="user.avatar" 
-                    class="avatar-img"
-                    mode="aspectFill"
-                  />
-                  <text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
-                </view>
-                <text v-if="notice.receiveUserList.length > 3" class="more-text">
-                  等{{ notice.receiveUserList.length }}项
+        </template>
+
+        <template v-else>
+          <!-- 公告卡片列表 -->
+          <view 
+            class="notice-card" 
+            v-for="notice in notices" 
+            :key="notice.id"
+            @click="goToNoticeDetail(notice)"
+          >
+            <!-- 标题和标签行 -->
+            <view class="notice-header">
+              <view class="notice-title-row">
+                <text class="notice-title" :class="{ 'pinned': notice.top }">
+                  {{ notice.title }}
                </text>
+                <view class="notice-tags">
+                  <view v-if="notice.top" class="notice-tag tag-pinned">置顶</view>
+                  <view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
+                  <view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
+                </view>
              </view>
            </view>
-            <view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
-              <text class="receive-label">接收部门:</text>
-              <view class="receive-depts">
-                <view 
-                  class="dept-tag" 
-                  v-for="dept in notice.receiveDeptList" 
-                  :key="dept.deptId"
-                >
-                  {{ dept.deptName }}
+            
+            <!-- 内容预览 -->
+            <view class="notice-content">
+              <text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
+            </view>
+            
+            <!-- 元信息 -->
+            <view class="notice-meta">
+              <view class="meta-item">
+                <text class="meta-icon">👤</text>
+                <text class="meta-text">{{ notice.userName || '未知' }}</text>
+              </view>
+              <view class="meta-item">
+                <text class="meta-icon">🕐</text>
+                <text class="meta-text">{{ formatTime(notice.createTime) }}</text>
+              </view>
+            </view>
+            
+            <!-- 接收信息 -->
+            <view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
+              <view class="receive-item" v-if="notice.receiveUserList?.length > 0">
+                <text class="receive-label">接收用户:</text>
+                <view class="receive-users">
+                  <view 
+                    class="user-avatar" 
+                    v-for="(user, index) in notice.receiveUserList.slice(0, 3)" 
+                    :key="user.userId"
+                  >
+                    <image 
+                      v-if="user.avatar" 
+                      :src="user.avatar" 
+                      class="avatar-img"
+                      mode="aspectFill"
+                    />
+                    <text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
+                  </view>
+                  <text v-if="notice.receiveUserList.length > 3" class="more-text">
+                    等{{ notice.receiveUserList.length }}项
+                  </text>
+                </view>
+              </view>
+              <view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
+                <text class="receive-label">接收部门:</text>
+                <view class="receive-depts">
+                  <view 
+                    class="dept-tag" 
+                    v-for="dept in notice.receiveDeptList" 
+                    :key="dept.deptId"
+                  >
+                    {{ dept.deptName }}
+                  </view>
                </view>
              </view>
            </view>
          </view>
-        </view>
+        </template>

        <!-- 加载状态 -->
        <view class="empty-state" v-if="loading">
@ -198,11 +251,12 @@
 </template>

 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import { getNoticeList } from '@/api';
 import { usePagination } from '@/composables';
 import { truncateText } from '@/utils/textSolve/truncateText';
+import { useUserStore } from '@/store/user';

 // 搜索表单
 const searchForm = ref({
@ -271,6 +325,58 @@ const {
 // 公告列表
 const notices = computed(() => list.value);

+// 表格选择
+const selectedNoticeIds = ref([]);
+const isAllSelected = computed(() => {
+  const data = notices.value;
+  if (!data.length) return false;
+  return data.every((notice) => selectedNoticeIds.value.includes(notice.id));
+});
+
+const isNoticeSelected = (noticeId) => selectedNoticeIds.value.includes(noticeId);
+
+const toggleNoticeSelection = (noticeId) => {
+  if (!noticeId) return;
+  if (isNoticeSelected(noticeId)) {
+    selectedNoticeIds.value = selectedNoticeIds.value.filter((id) => id !== noticeId);
+  } else {
+    selectedNoticeIds.value = [...selectedNoticeIds.value, noticeId];
+  }
+};
+
+const handleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedNoticeIds.value = [];
+  } else {
+    selectedNoticeIds.value = notices.value.map((notice) => notice.id);
+  }
+};
+
+const clearTableSelection = () => {
+  selectedNoticeIds.value = [];
+};
+
+watch(
+  notices,
+  (newList) => {
+    if (!newList?.length) {
+      selectedNoticeIds.value = [];
+      return;
+    }
+    const ids = newList.map((item) => item.id);
+    selectedNoticeIds.value = selectedNoticeIds.value.filter((id) => ids.includes(id));
+  },
+  { immediate: true }
+);
+
+// 用户角色判断
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const isAdmin = computed(() => {
+  if (!userInfo.value || !Array.isArray(userInfo.value.roles)) return false;
+  return userInfo.value.roles.some((role) => ['admin', 'sys_admin'].includes(role));
+});
+
 // 选择重要程度
 const selectLevel = (value) => {
  searchForm.value.level = value;
@ -278,6 +384,7 @@ const selectLevel = (value) => {

 // 搜索
 const handleSearch = () => {
+  clearTableSelection();
  reset();
  getList();
 };
@ -290,6 +397,7 @@ const handleReset = () => {
    level: '',
    top: ''
  };
+  clearTableSelection();
  reset();
  getList();
 };
@ -314,8 +422,50 @@ const goToNoticeDetail = (notice) => {
  });
 };

+// 管理员操作占位
+const showFeaturePending = (action) => {
+  uni.showToast({
+    title: `${action}功能待接入`,
+    icon: 'none'
+  });
+};
+
+const handleCreate = () => {
+  uni.navigateTo({
+    url: '/pages/notice/create/index'
+  });
+};
+const handleEdit = () => showFeaturePending('修改公告');
+const handleDelete = () => showFeaturePending('删除公告');
+
+// 管理员视图接收对象描述
+const formatReceiveInfo = (notice) => {
+  const userCount = Array.isArray(notice.receiveUserList) ? notice.receiveUserList.length : 0;
+  const deptCount = Array.isArray(notice.receiveDeptList) ? notice.receiveDeptList.length : 0;
+
+  if (!userCount && !deptCount) {
+    return '全部人员';
+  }
+
+  const info = [];
+  if (userCount) info.push(`用户${userCount}人`);
+  if (deptCount) info.push(`部门${deptCount}个`);
+  return info.join(' / ');
+};
+
+const handleNoticeUpdated = () => {
+  clearTableSelection();
+  reset();
+  getList();
+};
+
 onMounted(() => {
  getList();
+  uni.$on('notice:updated', handleNoticeUpdated);
+});
+
+onBeforeUnmount(() => {
+  uni.$off('notice:updated', handleNoticeUpdated);
 });
 </script>

@ -445,6 +595,106 @@ onMounted(() => {
  gap: 12px;
 }

+.admin-action-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.notice-table {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 0.6fr 1fr 1fr 2fr;
+  gap: 12px;
+  padding: 14px 16px;
+  align-items: center;
+}
+
+.table-header {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #333;
+}
+
+.table-row {
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+  transition: background 0.2s;
+}
+
+.table-row:active {
+  background: #f5f5f5;
+}
+
+.table-row.selected {
+  background: #f0f6ff;
+}
+
+.table-cell {
+  font-size: 14px;
+  color: #555;
+}
+
+.table-cell.select {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-indicator {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 2px solid #c0c4cc;
+  background: #fff;
+  transition: all 0.2s;
+}
+
+.checkbox-indicator.checked {
+  border-color: #2885ff;
+  background: #2885ff;
+  position: relative;
+}
+
+.checkbox-indicator.checked::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  width: 5px;
+  height: 9px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg);
+}
+
+.table-cell.title {
+  font-weight: 500;
+  color: #333;
+}
+
+.table-cell.title.pinned {
+  color: #f56c6c;
+}
+
+.table-cell.level {
+  color: #ff9800;
+}
+
+.table-cell.time,
+.table-cell.creator {
+  font-size: 13px;
+  color: #888;
+}
+
 .notice-card {
  background: #fff;
  border-radius: 12px;