8 changed files with 650 additions and 6 deletions
@ -0,0 +1,38 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
|
||||||
|
// 工作汇报 API
|
||||||
|
export const JobInfoApi = { |
||||||
|
// 查询工作汇报分页
|
||||||
|
getJobInfoPage: (params) => { |
||||||
|
return request({ url: `/system/job-info/page`, params ,method: 'get'}) |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
// 查询工作汇报详情
|
||||||
|
getJobInfo: (id) => { |
||||||
|
return request({ url: `/system/job-info/get?id=` + id,method: 'get' }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 模板信息
|
||||||
|
jobDetail: (id) => { |
||||||
|
return request({ url: `/system/job-info/jobDetail?id=` + id,method: 'get' }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 新增工作汇报
|
||||||
|
createJobInfo: (data) => { |
||||||
|
return request({ url: `/system/job-info/create`, data, method: 'post' }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 修改工作汇报
|
||||||
|
updateJobInfo: (data) => { |
||||||
|
return request({ url: `/system/job-info/update`, data , method: 'put'}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除工作汇报
|
||||||
|
deleteJobInfo: (id) => { |
||||||
|
return request({ url: `/system/job-info/delete?id=` + id , method: 'delete' }) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,143 @@ |
|||||||
|
<template> |
||||||
|
<view class="jobInfo-detail"> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 详情内容区 --> |
||||||
|
<view class="content-wrap"> |
||||||
|
<view class="jobInfo-title">{{ jobInfoDetail.title }}</view> |
||||||
|
<view class="jobInfo-time">生效时间：{{ jobInfoDetail.jobDate }}</view> |
||||||
|
|
||||||
|
<!-- 富文本内容 --> |
||||||
|
<view class="jobInfo-content"> |
||||||
|
<rich-text :nodes="jobInfoDetail.context"></rich-text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { jobInfoApi } from '@/api/jobinfo/index.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: '', // 政策ID |
||||||
|
jobInfoDetail: { |
||||||
|
name: '', |
||||||
|
createTime: '', |
||||||
|
context: '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
if (options.id) { |
||||||
|
this.id = options.id |
||||||
|
this.getjobInfoDetail() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取详情数据 |
||||||
|
async getjobInfoDetail() { |
||||||
|
try { |
||||||
|
const res = await jobInfoApi.getjobInfo(this.id) |
||||||
|
if (res.code === 0) { |
||||||
|
this.jobInfoDetail = { |
||||||
|
...res.data, |
||||||
|
jobDate: this.formatTime(res.data.jobDate), |
||||||
|
// 处理富文本内容，确保样式正确显示 |
||||||
|
context: this.formatRichText(res.data.context) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
uni.showToast({ |
||||||
|
title: '获取详情失败', |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 格式化时间 |
||||||
|
formatTime(time) { |
||||||
|
if (!time) return '' |
||||||
|
const date = new Date(time) |
||||||
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` |
||||||
|
}, |
||||||
|
// 处理富文本内容 |
||||||
|
formatRichText(html) { |
||||||
|
if (!html) return '' |
||||||
|
// 添加样式以确保图片自适应 |
||||||
|
return html.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;"') |
||||||
|
}, |
||||||
|
// 返回上一页 |
||||||
|
handleBack() { |
||||||
|
uni.navigateBack() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.jobInfo-detail { |
||||||
|
height: 100vh; |
||||||
|
background: #fff; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.nav-bar { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
height: 88rpx; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0 30rpx; |
||||||
|
border-bottom: 1rpx solid #eee; |
||||||
|
z-index: 100; |
||||||
|
|
||||||
|
.back-btn { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
flex: 1; |
||||||
|
text-align: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
padding-right: 60rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content-wrap { |
||||||
|
padding: 30rpx 30rpx 30rpx; |
||||||
|
|
||||||
|
.jobInfo-title { |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: bold; |
||||||
|
color: #333; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-time { |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-content { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 1.8; |
||||||
|
color: #333; |
||||||
|
|
||||||
|
:deep(img) { |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(p) { |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,143 @@ |
|||||||
|
<template> |
||||||
|
<view class="jobInfo-detail"> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 详情内容区 --> |
||||||
|
<view class="content-wrap"> |
||||||
|
<view class="jobInfo-title">{{ jobInfoDetail.title }}</view> |
||||||
|
<view class="jobInfo-time">生效时间：{{ jobInfoDetail.jobDate }}</view> |
||||||
|
|
||||||
|
<!-- 富文本内容 --> |
||||||
|
<view class="jobInfo-content"> |
||||||
|
<rich-text :nodes="jobInfoDetail.context"></rich-text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { jobInfoApi } from '@/api/jobinfo/index.js' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: '', // 政策ID |
||||||
|
jobInfoDetail: { |
||||||
|
name: '', |
||||||
|
createTime: '', |
||||||
|
context: '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
if (options.id) { |
||||||
|
this.id = options.id |
||||||
|
this.getjobInfoDetail() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取详情数据 |
||||||
|
async getjobInfoDetail() { |
||||||
|
try { |
||||||
|
const res = await jobInfoApi.getjobInfo(this.id) |
||||||
|
if (res.code === 0) { |
||||||
|
this.jobInfoDetail = { |
||||||
|
...res.data, |
||||||
|
jobDate: this.formatTime(res.data.jobDate), |
||||||
|
// 处理富文本内容，确保样式正确显示 |
||||||
|
context: this.formatRichText(res.data.context) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
uni.showToast({ |
||||||
|
title: '获取详情失败', |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 格式化时间 |
||||||
|
formatTime(time) { |
||||||
|
if (!time) return '' |
||||||
|
const date = new Date(time) |
||||||
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` |
||||||
|
}, |
||||||
|
// 处理富文本内容 |
||||||
|
formatRichText(html) { |
||||||
|
if (!html) return '' |
||||||
|
// 添加样式以确保图片自适应 |
||||||
|
return html.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;"') |
||||||
|
}, |
||||||
|
// 返回上一页 |
||||||
|
handleBack() { |
||||||
|
uni.navigateBack() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.jobInfo-detail { |
||||||
|
height: 100vh; |
||||||
|
background: #fff; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.nav-bar { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
height: 88rpx; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0 30rpx; |
||||||
|
border-bottom: 1rpx solid #eee; |
||||||
|
z-index: 100; |
||||||
|
|
||||||
|
.back-btn { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
flex: 1; |
||||||
|
text-align: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
padding-right: 60rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.content-wrap { |
||||||
|
padding: 30rpx 30rpx 30rpx; |
||||||
|
|
||||||
|
.jobInfo-title { |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: bold; |
||||||
|
color: #333; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-time { |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-content { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 1.8; |
||||||
|
color: #333; |
||||||
|
|
||||||
|
:deep(img) { |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(p) { |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,266 @@ |
|||||||
|
<template> |
||||||
|
<!-- 政策法规列表页面容器 --> |
||||||
|
<view class="jobInfo-container"> |
||||||
|
<!-- 搜索框区域 --> |
||||||
|
<view class="search-box"> |
||||||
|
<van-search |
||||||
|
:value="abc" |
||||||
|
placeholder="输入关键字查询" |
||||||
|
id="sreach" |
||||||
|
@clear="handleClear" |
||||||
|
@change="handleSearch" |
||||||
|
/> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 政策法规列表区域 --> |
||||||
|
<!-- 修改列表项部分 --> |
||||||
|
<view class="jobInfo-list"> |
||||||
|
<scroll-view |
||||||
|
class="jobInfo-scroll" |
||||||
|
scroll-y |
||||||
|
@scrolltolower="loadNextPage" |
||||||
|
@refresherrefresh="onRefresh" |
||||||
|
refresher-enabled |
||||||
|
:refresher-triggered="isRefreshing" |
||||||
|
> |
||||||
|
<view |
||||||
|
class="jobInfo-item" |
||||||
|
v-for="item in jobInfoList" |
||||||
|
:key="item.id" |
||||||
|
@click="btnView (item)" |
||||||
|
> |
||||||
|
<view class="item-left"> |
||||||
|
<image :src="itemImgUrl" class="jobInfo-icon"></image> |
||||||
|
</view> |
||||||
|
<view class="item-right"> |
||||||
|
<view class="jobInfo-title">{{ item.title }}</view> |
||||||
|
<view class="jobInfo-time">汇报日期: {{ item.jobDate }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 加载更多状态组件 --> |
||||||
|
<uni-load-more :status="loadMoreStatus" /> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDate } from '@/utils/ruoyi.js' |
||||||
|
import config from '@/config' |
||||||
|
import { JobInfoApi } from '@/api/jobinfo/index.js' |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isRefreshing: false, // 是否正在刷新 |
||||||
|
searchValue: '', // 搜索关键字 |
||||||
|
abc: '', |
||||||
|
jobInfoList: [], // 政策法规列表数据 |
||||||
|
pageNum: 1, // 当前页码 |
||||||
|
pageSize: 10, // 每页显示条数 |
||||||
|
total: 0, // 总数据条数 |
||||||
|
loadMoreStatus: 'more' ,// 加载更多状态：more-加载前 loading-加载中 noMore-没有更多 |
||||||
|
itemImgUrl: config.imgUrl + '/miniohb/c103c92335bdd30d33ff8a062c219ead0626bf0a1898536bd7590285ca11c9db.png' |
||||||
|
} |
||||||
|
}, |
||||||
|
// 页面加载时获取列表数据 |
||||||
|
onShow() { |
||||||
|
console.log(this.itemImgUrl) |
||||||
|
this.getjobInfoList() |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
methods: { |
||||||
|
btnView(itml){ |
||||||
|
console.log('查看',itml) |
||||||
|
let url = itml.pdfUrl |
||||||
|
// 示例代码 |
||||||
|
wx.downloadFile({ |
||||||
|
// 替换为你的PDF文件URL |
||||||
|
url: url, |
||||||
|
success: function (res) { |
||||||
|
const filePath = res.tempFilePath; |
||||||
|
wx.openDocument({ |
||||||
|
filePath: filePath, |
||||||
|
fileType: 'pdf', // 指定文件类型为PDF |
||||||
|
success: function (res) { |
||||||
|
console.log('打开文档成功'); |
||||||
|
}, |
||||||
|
fail: function (err) { |
||||||
|
console.error('打开文档失败', err); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail: function (err) { |
||||||
|
console.error('下载文件失败', err); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 下拉刷新 |
||||||
|
onRefresh() { |
||||||
|
this.isRefreshing = true |
||||||
|
this.pageNum = 1 |
||||||
|
this.getjobInfoList() |
||||||
|
}, |
||||||
|
loadNextPage() { |
||||||
|
console.log('列表值',this.jobInfoList.length) |
||||||
|
if (this.jobInfoList.length < this.total) { |
||||||
|
this.pageNum++ |
||||||
|
this.getjobInfoList() |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取政策法规列表数据 |
||||||
|
async getjobInfoList() { |
||||||
|
try { |
||||||
|
console.log('jobInfoApi',JobInfoApi) |
||||||
|
this.loadMoreStatus = 'loading' |
||||||
|
const res = await JobInfoApi.getJobInfoPage({ |
||||||
|
pageNum: this.pageNum, |
||||||
|
pageSize: this.pageSize, |
||||||
|
title: this.searchValue // 搜索关键字 |
||||||
|
}) |
||||||
|
|
||||||
|
if (res.code === 0 && res.data.total > 0) { |
||||||
|
// 限制标题长度，超出显示省略号 |
||||||
|
const formattedData = res.data.list.map(item => ({ |
||||||
|
...item, |
||||||
|
title: item.title.length > 15 ? item.title.slice(0, 15) + '...' : item.title, |
||||||
|
jobDate: formatDate(item.jobDate,'YYYY年MM月DD日') |
||||||
|
})) |
||||||
|
|
||||||
|
// 判断是首次加载还是加载更多 |
||||||
|
if (this.pageNum === 1) { |
||||||
|
this.jobInfoList = formattedData |
||||||
|
} else { |
||||||
|
this.jobInfoList = [...this.jobInfoList, ...formattedData] |
||||||
|
} |
||||||
|
console.log('列表信息',res) |
||||||
|
this.total = res.data.total |
||||||
|
// 更新加载状态 |
||||||
|
this.loadMoreStatus = this.jobInfoList.length >= this.total ? 'noMore' : 'more' |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
console.error(error) |
||||||
|
this.loadMoreStatus = 'more' |
||||||
|
uni.showToast({ |
||||||
|
title: '获取列表失败', |
||||||
|
icon: 'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
finally { |
||||||
|
this.loadMoreStatus = this.jobInfoList.length >= this.total? 'noMore' :'more' |
||||||
|
// 无论成功失败都关闭刷新状态 |
||||||
|
// 确保在数据加载完成后关闭刷新状态 |
||||||
|
setTimeout(() => { |
||||||
|
this.isRefreshing = false |
||||||
|
}, 300) // 添加短暂延时，确保动画效果完整 |
||||||
|
} |
||||||
|
}, |
||||||
|
// 搜索事件处理 |
||||||
|
handleSearch(e) { |
||||||
|
if(e.detail && e.detail.length > 1){ |
||||||
|
this.pageNum = 1 // 重置页码 |
||||||
|
this.searchValue = e.detail // 更新搜索关键字 |
||||||
|
this.getjobInfoList() |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
// 清除搜索事件处理 |
||||||
|
handleClear() { |
||||||
|
this.pageNum = 1 // 重置页码 |
||||||
|
this.searchValue = '' // 清空搜索关键字 |
||||||
|
this.getjobInfoList() |
||||||
|
}, |
||||||
|
// 点击政策条目跳转详情 |
||||||
|
handlejobInfoClick(item) { |
||||||
|
uni.navigateTo({ |
||||||
|
url: `/sub/owner/job-detail?id=${item.id}` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.jobInfo-container { |
||||||
|
background: var(--LightMode-Secondary-Secondary, #F9F9F9); |
||||||
|
min-height: 100vh; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.search-box { |
||||||
|
padding: 20rpx; |
||||||
|
background: #fff; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-list { |
||||||
|
margin-top: 120rpx; // 为搜索框留出空间 |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
.jobInfo-scroll { |
||||||
|
height: calc(100vh - 120rpx); |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-item { |
||||||
|
display: flex; |
||||||
|
padding: 24rpx; |
||||||
|
align-items: center; |
||||||
|
gap: 24rpx; |
||||||
|
background: #fff; |
||||||
|
margin: 24rpx; |
||||||
|
margin-bottom: 0; |
||||||
|
border-radius: 16rpx; |
||||||
|
|
||||||
|
.item-left { |
||||||
|
border-radius: 100rpx; |
||||||
|
background: var(--LightMode-Grey-Grey-100, #F9F9F9); |
||||||
|
padding: 16rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.jobInfo-icon { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item-right { |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.jobInfo-title { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
margin-bottom: 12rpx; |
||||||
|
line-height: 1.4; |
||||||
|
} |
||||||
|
|
||||||
|
.jobInfo-time { |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999; |
||||||
|
line-height: 1.2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 加载更多组件样式 |
||||||
|
::v-deep .uni-load-more { |
||||||
|
padding: 24rpx 0; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue