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