公告详细和公告列表的修改
This commit is contained in:
WindowBird
parent
292e65a0c0
commit
cc3f12a980
|
|
@ -120,19 +120,35 @@
|
|||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 管理员操作按钮（固定在底部） -->
|
||||
<view class="admin-actions" v-if="isAdmin && !loading && noticeDetail.id">
|
||||
<uv-button type="warning" size="normal" @click="handleEdit">修改</uv-button>
|
||||
<uv-button type="error" size="normal" @click="handleDelete">删除</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { getNoticeDetail } from '@/api';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { getNoticeDetail, deleteNotice } from '@/api';
|
||||
import { useUserStore } from '@/store/user';
|
||||
|
||||
// 页面参数
|
||||
const noticeId = ref('');
|
||||
const noticeDetail = ref({});
|
||||
const loading = ref(false);
|
||||
|
||||
// 用户角色判断
|
||||
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 hasReceiveInfo = computed(() => {
|
||||
return (noticeDetail.value.receiveUserList && noticeDetail.value.receiveUserList.length > 0) ||
|
||||
|
|
@ -322,6 +338,72 @@ const previewAttachment = (attach) => {
|
|||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑公告
|
||||
const handleEdit = () => {
|
||||
if (!noticeId.value) {
|
||||
uni.showToast({
|
||||
title: '公告ID无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/notice/edit/index?id=${noticeId.value}`
|
||||
});
|
||||
};
|
||||
|
||||
// 删除公告
|
||||
const handleDelete = async () => {
|
||||
if (!noticeId.value) {
|
||||
uni.showToast({
|
||||
title: '公告ID无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content: '删除后将无法恢复，确认删除该公告吗？',
|
||||
confirmText: '删除',
|
||||
confirmColor: '#f56c6c',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return;
|
||||
try {
|
||||
await deleteNotice([noticeId.value]);
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 延迟返回，让用户看到成功提示
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error('删除公告失败:', error);
|
||||
uni.showToast({
|
||||
title: error?.message || '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听公告更新事件
|
||||
const handleNoticeUpdated = () => {
|
||||
loadNoticeDetail();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on('notice:updated', handleNoticeUpdated);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
uni.$off('notice:updated', handleNoticeUpdated);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -336,6 +418,7 @@ const previewAttachment = (attach) => {
|
|||
.content-scroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding-bottom: 80px; /* 为底部按钮留出空间 */
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
|
|
@ -612,5 +695,30 @@ const previewAttachment = (attach) => {
|
|||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 管理员操作按钮区域 */
|
||||
.admin-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: 10;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.admin-actions::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,101 +1,5 @@
|
|||
<template>
|
||||
<view class="notice-list-page">
|
||||
<!-- 搜索筛选区域 -->
|
||||
<view class="search-filter-section">
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="search-label">标题</text>
|
||||
<uv-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入标题"
|
||||
border="none"
|
||||
:custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
|
||||
/>
|
||||
</view>
|
||||
<view class="search-item">
|
||||
<text class="search-label">创建人</text>
|
||||
<uv-input
|
||||
v-model="searchForm.userName"
|
||||
placeholder="请输入创建人"
|
||||
border="none"
|
||||
:custom-style="{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '8px 12px' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">重要程度</text>
|
||||
<view class="picker-trigger" @click="showLevelPicker = true">
|
||||
<text :class="['picker-text', !searchForm.level && 'placeholder']">
|
||||
{{ getLevelText(searchForm.level) || '请选择重要程度' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 重要程度选择弹窗 -->
|
||||
<view v-if="showLevelPicker" class="modal-mask" @click="showLevelPicker = false">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-title">选择重要程度</view>
|
||||
<view class="picker-options">
|
||||
<view
|
||||
v-for="item in levelOptions"
|
||||
:key="item.value"
|
||||
class="picker-option"
|
||||
:class="{ active: searchForm.level === item.value }"
|
||||
@click="selectLevel(item.value)"
|
||||
>
|
||||
<text>{{ item.label }}</text>
|
||||
<text v-if="searchForm.level === item.value" class="check">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-buttons">
|
||||
<button class="modal-btn" @click="showLevelPicker = false">取消</button>
|
||||
<button class="modal-btn primary" @click="showLevelPicker = false">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">是否置顶</text>
|
||||
<view class="radio-group">
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === '' }"
|
||||
@click="searchForm.top = ''"
|
||||
>
|
||||
<text class="radio-text">全部</text>
|
||||
</view>
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === true }"
|
||||
@click="searchForm.top = true"
|
||||
>
|
||||
<text class="radio-text">是</text>
|
||||
</view>
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: searchForm.top === false }"
|
||||
@click="searchForm.top = false"
|
||||
>
|
||||
<text class="radio-text">否</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<uv-button type="primary" size="small" @click="handleSearch">搜索</uv-button>
|
||||
<uv-button type="primary" :plain="true" size="small" @click="handleReset">重置</uv-button>
|
||||
<template v-if="isAdmin">
|
||||
<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" @click="handleDelete">删除</uv-button>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<scroll-view
|
||||
|
|
@ -109,29 +13,11 @@
|
|||
class="notice-card"
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
:class="{
|
||||
'admin-selectable': isAdmin,
|
||||
'selected': isAdmin && isNoticeSelected(notice.id)
|
||||
}"
|
||||
@click="goToNoticeDetail(notice)"
|
||||
>
|
||||
|
||||
|
||||
<!-- 标题和标签行 -->
|
||||
<view class="notice-header">
|
||||
|
||||
<view class="notice-title-row">
|
||||
<template v-if="isAdmin">
|
||||
<view
|
||||
class="card-select-btn"
|
||||
@click.stop="toggleNoticeSelection(notice.id)"
|
||||
>
|
||||
<view
|
||||
class="checkbox-indicator"
|
||||
:class="{ checked: isNoticeSelected(notice.id) }"
|
||||
></view>
|
||||
</view>
|
||||
</template>
|
||||
<text class="notice-title" :class="{ 'pinned': notice.top }">
|
||||
{{ notice.title }}
|
||||
</text>
|
||||
|
|
@ -218,6 +104,9 @@
|
|||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 新增公告悬浮球 -->
|
||||
<FabPlus v-if="isAdmin" @click="handleCreate" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -228,6 +117,7 @@ import { getNoticeList, deleteNotice } from '@/api';
|
|||
import { usePagination } from '@/composables';
|
||||
import { truncateText } from '@/utils/textSolve/truncateText';
|
||||
import { useUserStore } from '@/store/user';
|
||||
import FabPlus from '@/components/FabPlus.vue';
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = ref({
|
||||
|
|
@ -297,50 +187,6 @@ 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);
|
||||
|
|
@ -356,7 +202,6 @@ const selectLevel = (value) => {
|
|||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
clearTableSelection();
|
||||
reset();
|
||||
getList();
|
||||
};
|
||||
|
|
@ -369,7 +214,6 @@ const handleReset = () => {
|
|||
level: '',
|
||||
top: ''
|
||||
};
|
||||
clearTableSelection();
|
||||
reset();
|
||||
getList();
|
||||
};
|
||||
|
|
@ -407,76 +251,6 @@ const handleCreate = () => {
|
|||
url: '/pages/notice/create/index'
|
||||
});
|
||||
};
|
||||
const handleEdit = () => {
|
||||
if (!selectedNoticeIds.value.length) {
|
||||
uni.showToast({
|
||||
title: '请先选择要修改的公告',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedNoticeIds.value.length > 1) {
|
||||
uni.showToast({
|
||||
title: '一次只能修改一条公告',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const id = selectedNoticeIds.value[0];
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
title: '请选择有效的公告',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/notice/edit/index?id=${id}`
|
||||
});
|
||||
};
|
||||
const handleDelete = async () => {
|
||||
if (!selectedNoticeIds.value.length) {
|
||||
uni.showToast({
|
||||
title: '请先选择要删除的公告',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const ids = selectedNoticeIds.value;
|
||||
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content:
|
||||
ids.length === 1
|
||||
? '删除后将无法恢复，确认删除该公告吗？'
|
||||
: `已选择 ${ids.length} 条公告，删除后将无法恢复，确认删除吗？`,
|
||||
confirmText: '删除',
|
||||
confirmColor: '#f56c6c',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return;
|
||||
try {
|
||||
await deleteNotice(ids);
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
clearTableSelection();
|
||||
reset();
|
||||
getList();
|
||||
} catch (error) {
|
||||
console.error('删除公告失败:', error);
|
||||
uni.showToast({
|
||||
title: error?.message || '删除失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 管理员视图接收对象描述
|
||||
const formatReceiveInfo = (notice) => {
|
||||
|
|
@ -494,7 +268,6 @@ const formatReceiveInfo = (notice) => {
|
|||
};
|
||||
|
||||
const handleNoticeUpdated = () => {
|
||||
clearTableSelection();
|
||||
reset();
|
||||
getList();
|
||||
};
|
||||
|
|
@ -519,8 +292,10 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
.search-filter-section {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
padding: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -618,11 +393,6 @@ onBeforeUnmount(() => {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.notice-scroll {
|
||||
flex: 1;
|
||||
|
|
@ -636,39 +406,6 @@ onBeforeUnmount(() => {
|
|||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-action-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #fff;
|
||||
|
|
@ -686,33 +423,6 @@ onBeforeUnmount(() => {
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.notice-card.admin-selectable {
|
||||
position: relative;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.notice-card.selected {
|
||||
box-shadow: 0 4px 18px rgba(40, 133, 255, 0.18);
|
||||
}
|
||||
|
||||
.card-select-btn {
|
||||
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-select-btn:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user