You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
12 KiB
476 lines
12 KiB
<template>
|
|
<view class="notice-list-page">
|
|
<view class="content">
|
|
<!-- 搜索与筛选 -->
|
|
<view class="search-section">
|
|
<view class="search-box">
|
|
<input v-model="query.noticeTitle" type="text" placeholder="请输入通知标题" />
|
|
<view class="search-btn" @click="refreshList">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tab-row">
|
|
<view class="tab" :class="typeTab === 'all' ? 'active' : ''" @click="switchType('all')">全部</view>
|
|
<view class="tab" :class="typeTab === '1' ? 'active' : ''" @click="switchType('1')">内部</view>
|
|
<view class="tab" :class="typeTab === '2' ? 'active' : ''" @click="switchType('2')">外部</view>
|
|
</view>
|
|
|
|
<!-- <view class="tab-row" style="margin-top: 20rpx;">
|
|
<view class="tab" :class="statusTab === 'all' ? 'active' : ''" @click="switchStatus('all')">全部状态</view>
|
|
<view class="tab" :class="statusTab === '0' ? 'active' : ''" @click="switchStatus('0')">草稿</view>
|
|
<view class="tab" :class="statusTab === '1' ? 'active' : ''" @click="switchStatus('1')">提交</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- 列表 -->
|
|
<scroll-view scroll-y class="list-scroll" @scrolltolower="loadMore">
|
|
<view class="empty" v-if="!loading && records.length === 0">
|
|
<text class="iconfont icon-wushuju"></text>
|
|
<text class="text">暂无通知公告</text>
|
|
</view>
|
|
|
|
<view
|
|
v-for="item in records"
|
|
:key="item.noticeId"
|
|
class="record-card"
|
|
@click="openDetail(item.noticeId)"
|
|
>
|
|
<view class="card-header">
|
|
<view class="left">
|
|
<view class="title-row">
|
|
<text class="type line1">{{ item.noticeTitle || '未命名通知' }}</text>
|
|
</view>
|
|
|
|
<view class="tag-row">
|
|
<text class="tag kind" :class="typeClassMap[item.type] || ''">
|
|
{{ typeText(item.type) }}
|
|
</text>
|
|
<text class="tag status" :class="statusClassMap[item.status] || statusClassMap['__default__']">
|
|
{{ statusText(item.status) }}
|
|
</text>
|
|
<text class="tag sms" :class="smsClassMap[item.smsStatus] || ''">
|
|
{{ smsText(item.smsStatus) }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="time">{{ formatDate(item.noticeTime) }}</text>
|
|
</view>
|
|
|
|
<view class="card-body">
|
|
<view class="row">
|
|
<text class="label">通知类型：</text>
|
|
<text class="value">{{ item.noticeType || '—' }}</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="label">通知范围：</text>
|
|
<text class="value">{{ item.noticeScope || '—' }}</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="label">拟稿单位：</text>
|
|
<text class="value">{{ item.draftDept || '—' }}</text>
|
|
</view>
|
|
<view class="row" v-if="item.noticeSource">
|
|
<text class="label">通知来源：</text>
|
|
<text class="value">{{ item.noticeSource }}</text>
|
|
</view>
|
|
|
|
<view class="preview" v-if="item.noticeContent">
|
|
{{ contentPreview(item.noticeContent) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-footer">
|
|
<view class="detail-btn" @click.stop="openDetail(item.noticeId)">查看详情</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="load-more" v-if="loading">加载中...</view>
|
|
<view class="load-more" v-else-if="finished && records.length > 0">已加载全部</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { pubnoticeListApi } from '@/api/pubnotice.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
query: {
|
|
noticeTitle: '',
|
|
},
|
|
typeTab: 'all', // all | 1 | 2
|
|
statusTab: '1', // all | 0 | 1
|
|
records: [],
|
|
page: 1,
|
|
limit: 10,
|
|
loading: false,
|
|
finished: false,
|
|
typeClassMap: {
|
|
1: 'tag-internal',
|
|
2: 'tag-external',
|
|
'__default__': ''
|
|
},
|
|
statusClassMap: {
|
|
0: 'status-draft',
|
|
1: 'status-submit',
|
|
'__default__': ''
|
|
},
|
|
smsClassMap: {
|
|
0: 'sms-unsent',
|
|
1: 'sms-sent',
|
|
'__default__': ''
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.refreshList();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refreshList();
|
|
},
|
|
methods: {
|
|
switchType(type) {
|
|
this.typeTab = type;
|
|
this.refreshList();
|
|
},
|
|
switchStatus(status) {
|
|
this.statusTab = status;
|
|
this.refreshList();
|
|
},
|
|
async refreshList() {
|
|
this.page = 1;
|
|
this.records = [];
|
|
this.finished = false;
|
|
await this.fetchList();
|
|
uni.stopPullDownRefresh && uni.stopPullDownRefresh();
|
|
},
|
|
async loadMore() {
|
|
if (this.loading || this.finished) return;
|
|
this.page += 1;
|
|
await this.fetchList();
|
|
},
|
|
buildParams() {
|
|
const params = {
|
|
page: this.page,
|
|
limit: this.limit,
|
|
delFlag: '1',
|
|
};
|
|
const noticeTitle = (this.query.noticeTitle || '').trim();
|
|
if (noticeTitle) params.noticeTitle = noticeTitle;
|
|
if (this.typeTab !== 'all') params.type = this.typeTab;
|
|
if (this.statusTab !== 'all') params.status = this.statusTab;
|
|
return params;
|
|
},
|
|
async fetchList() {
|
|
this.loading = true;
|
|
try {
|
|
const params = this.buildParams();
|
|
const res = await pubnoticeListApi(params);
|
|
|
|
const data = res?.data || {};
|
|
const list = data?.list || [];
|
|
if (this.page === 1) {
|
|
this.records = list;
|
|
} else {
|
|
this.records = this.records.concat(list);
|
|
}
|
|
|
|
const total = data?.total ?? data?.count ?? res?.total ?? res?.count;
|
|
if (!list.length) {
|
|
this.finished = true;
|
|
} else if (typeof total === 'number' && total <= this.records.length) {
|
|
this.finished = true;
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({
|
|
title: typeof e === 'string' ? e : '获取通知公告失败',
|
|
icon: 'none',
|
|
});
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
openDetail(noticeId) {
|
|
if (!noticeId) return;
|
|
uni.navigateTo({
|
|
url: `/pages/supply_chain/notice_detail/index?noticeId=${noticeId}`,
|
|
});
|
|
},
|
|
contentPreview(content) {
|
|
if (content === undefined || content === null) return '';
|
|
const s = String(content).replace(/\s+/g, ' ').trim();
|
|
if (!s) return '';
|
|
return s.length > 80 ? s.slice(0, 80) + '...' : s;
|
|
},
|
|
formatDate(val) {
|
|
if (!val) return '';
|
|
if (typeof val === 'string') {
|
|
return val.replace('T', ' ').slice(0, 19);
|
|
}
|
|
if (val instanceof Date) {
|
|
const pad = (n) => (n < 10 ? '0' + n : '' + n);
|
|
return `${val.getFullYear()}-${pad(val.getMonth() + 1)}-${pad(val.getDate())} ${pad(
|
|
val.getHours()
|
|
)}:${pad(val.getMinutes())}`;
|
|
}
|
|
return String(val);
|
|
},
|
|
typeText(type) {
|
|
if (type === 1 || type === '1') return '内部';
|
|
if (type === 2 || type === '2') return '外部';
|
|
return type || '—';
|
|
},
|
|
statusText(status) {
|
|
if (status === 0 || status === '0') return '草稿';
|
|
if (status === 1 || status === '1') return '提交';
|
|
return status ?? '—';
|
|
},
|
|
smsText(smsStatus) {
|
|
if (smsStatus === 0 || smsStatus === '0') return '未发';
|
|
if (smsStatus === 1 || smsStatus === '1') return '已发';
|
|
return smsStatus ?? '—';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notice-list-page {
|
|
.content {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.search-section {
|
|
margin-bottom: 20rpx;
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
padding: 14rpx 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 64rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.search-btn {
|
|
height: 64rpx;
|
|
padding: 0 18rpx;
|
|
background-color: #409eff;
|
|
color: #fff;
|
|
border-radius: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.tab-row {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
|
|
.tab {
|
|
flex: 1;
|
|
height: 72rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
position: relative;
|
|
|
|
&.active {
|
|
color: #409eff;
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60rpx;
|
|
height: 4rpx;
|
|
background-color: #409eff;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-scroll {
|
|
max-height: calc(100vh - 310rpx);
|
|
}
|
|
|
|
.record-card {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 24rpx 26rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
|
|
.left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.title-row {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.type {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
max-width: 520rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.tag {
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tag-internal {
|
|
background-color: #e6f7ff;
|
|
color: #409eff;
|
|
}
|
|
|
|
.tag-external {
|
|
background-color: #fff7e6;
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.status-draft {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
.status-submit {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.sms-unsent {
|
|
background-color: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
|
|
.sms-sent {
|
|
background-color: #e6fffb;
|
|
color: #13c2c2;
|
|
}
|
|
|
|
.card-body {
|
|
.row {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
|
|
.label {
|
|
width: 170rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.preview {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.card-footer {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.detail-btn {
|
|
padding: 8rpx 16rpx;
|
|
background-color: #409eff;
|
|
color: #fff;
|
|
border-radius: 16rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
margin-top: 80rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #999;
|
|
|
|
.iconfont {
|
|
font-size: 80rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 20rpx 0 10rpx;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.line1 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
|