415 lines
9.5 KiB
Vue
415 lines
9.5 KiB
Vue
<!--公文阅办详情-->
|
||
<template>
|
||
<div class="page-view">
|
||
<div v-if="isShow">
|
||
<div class='content-card pb20'>
|
||
<view class="content-title">{{baseData.DOCUMENT_TITTLE}}</view>
|
||
<div class="content-top">
|
||
<div class="serverpart-name">
|
||
<text class="text-gray">发文：</text>
|
||
<text>{{baseData.STAFF_NAME}}</text>
|
||
</div>
|
||
<text class="ml30">{{baseData.OPERATE_DATE}}</text>
|
||
</div>
|
||
<view class="line-block between-circle"></view>
|
||
|
||
<div class="publicity-content" v-if="baseData.SuperiorData">
|
||
<b class="strong-text">
|
||
上级传阅人
|
||
</b>
|
||
<view>
|
||
<text>{{baseData.SuperiorData.READING_STAFF}}：</text>
|
||
<text class="ml30">{{baseData.SuperiorData.SUGGESTION}}</text>
|
||
</view>
|
||
</div>
|
||
<div class="publicity-content" v-if="baseData.fixedFileList.length>0">
|
||
<b class="strong-text">
|
||
附件文件
|
||
</b>
|
||
<div class="img-Box">
|
||
<fileUnit v-for="(arr,i) in baseData.fixedFileList" :fileItem="arr" :key="i" @tap="rememberReader(arr.name)"></fileUnit>
|
||
</div>
|
||
</div>
|
||
|
||
<view class="publicity-content mt30" v-if="baseData.READING_STAFF">
|
||
<b class="strong-text">
|
||
接收人员
|
||
</b>
|
||
<view class="support-box uni-flex">
|
||
<text :class="{'support-names':moreReader}" >{{baseData.READING_STAFF}}</text>
|
||
<view class="more-btn" @tap="moreReader = !moreReader" :style="!moreReader?'transform:rotate(180deg)':''" v-if="baseData.READING_STAFF.length>50">
|
||
<image src="../../static/images/xl.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<view class="button-box">
|
||
<navigator :url="'/pages/officialDocManagement/circulate?id='+baseData.DOCUMENT_ID+'&type='+documentListType"><image src="https://eshangtech.com/ShopICO/ahyd-BID/cy-btn.png" mode="aspectFit"></image> 传阅 </navigator>
|
||
|
||
</view>
|
||
<div class="publicity-content mt30 " v-if="baseData.readingList.length>0">
|
||
<div class="uni-flex ptb24" style="justify-content: space-between;" >
|
||
<b class="strong-text">阅办记录</b> <navigator class="text-blue" :url="'/pages/officialDocManagement/readerList?id='+baseData.DOCUMENT_ID+'&type='+documentListType">阅办详情 <text class="uni-icon uni-icon-arrowright"></text></navigator>
|
||
</div>
|
||
|
||
<view class="">
|
||
<view class="reading-list" v-for="(item,i) in baseData.readingList" :key="i">
|
||
<view class="uni-flex" style="justify-content: space-between;margin-bottom: 8upx;">
|
||
<view>
|
||
<text class="comment-name-text">{{item.READING_STAFF}}</text>
|
||
<text class="text-gray fs12" v-if="item.ISDOWN==1">【已下载】</text>
|
||
</view>
|
||
<view v-if="item.PRESCRIPTION">
|
||
|
||
<text class="fs12">【{{getDealTime(item.PRESCRIPTION)}}】</text>
|
||
<text class="text-gray fs12" v-if="item.PREVIEWDATE">{{$util.cutDate(item.PREVIEWDATE,'MM-DD hh:mm') }}</text>
|
||
</view>
|
||
<view v-else><text class="fs12">【未阅】</text></view>
|
||
</view>
|
||
<view class="uni-read-content" v-if="item.SUGGESTION">
|
||
<text>{{item.SUGGESTION}}</text>
|
||
</view>
|
||
<view class="uni-flex fs12" style="margin-bottom: 16upx;align-items: flex-start;" v-if="item.READPERSON || item.NOTREADPERSON">
|
||
<view class="uni-flex" style="align-items: center;">
|
||
<image src="/static/images/reader/read.png" mode="aspectFit"></image>
|
||
<text class="fs12">已阅：</text>
|
||
</view>
|
||
<text class="fs12 reader-text">{{item.READPERSON || '无'}}</text>
|
||
</view>
|
||
<view class="uni-flex fs12" style="align-items: flex-start;" v-if="item.READPERSON || item.NOTREADPERSON">
|
||
<view class="uni-flex" style="align-items: center;">
|
||
<image src="/static/images/reader/no-read.png" mode="aspectFit"></image>
|
||
<text class="fs12">未阅：</text>
|
||
</view>
|
||
<text class="reader-text fs12">{{item.NOTREADPERSON || '无'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import fileUnit from '@/components/filesComponent/fileUnit.vue'
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
data() {
|
||
|
||
return {
|
||
baseData: {
|
||
|
||
},
|
||
documentListType: 1000,
|
||
isShow: false,
|
||
|
||
isRead:true,
|
||
FileList:[],
|
||
refresh: 0,// 当前页面是否更新过数据
|
||
moreReader: true,
|
||
|
||
}
|
||
},
|
||
components:{
|
||
|
||
fileUnit
|
||
},
|
||
computed: {
|
||
...mapGetters({'users':'getUser'})
|
||
},
|
||
methods: {
|
||
|
||
getDetail (option) {
|
||
let _this = this
|
||
_this.$request.$get('getDocumentDetails',{
|
||
|
||
documentListType: this.documentListType,
|
||
documentId: option.id
|
||
}).then(rs => {
|
||
|
||
if(rs.ResultCode=='100'){
|
||
this.isShow = true
|
||
}
|
||
uni.hideLoading()
|
||
_this.baseData = rs.Data
|
||
|
||
_this.baseData.fixedFileList.map(v => {
|
||
let name= v.IMAGE_DESC.split('.')
|
||
v.type = name[name.length-1]
|
||
v.name = v.IMAGE_DESC
|
||
v.path = v.IMAGE_PATH
|
||
})
|
||
if(option.isread==0){
|
||
this.rememberReader()
|
||
}
|
||
})
|
||
},
|
||
getDealTime(_time){ // 处理时效格式化
|
||
_time = _time/60
|
||
if(_time<1){
|
||
return '1小时内'
|
||
}
|
||
|
||
else if(_time>1 && _time<24){
|
||
|
||
return parseInt(_time)+'小时内'
|
||
|
||
}
|
||
else if(_time>24){
|
||
return parseInt(_time/24)+'天内'
|
||
} else {
|
||
return parseInt(_time)+'小时内'
|
||
}
|
||
},
|
||
|
||
rememberReader(fileName){ // 公文传输新增阅览记录
|
||
|
||
let _this = this
|
||
let data = {}
|
||
|
||
_this.$request.$post("InserDocumentReading",{
|
||
|
||
documentId: _this.baseData.DOCUMENT_ID,
|
||
documentName: fileName||'',
|
||
readingType: 1000, // 浏览公文:1000,下载文件:2000
|
||
|
||
})
|
||
|
||
}
|
||
},
|
||
onUnload() { // 用户后退时若访问初始状态为未浏览（isread = 0） ，则把状态更变的信息通知列表页面进行更新
|
||
this.$util.addUserBehavior()
|
||
if(this.isRead==0 || this.refresh==1){
|
||
uni.$emit('needrefresh', true);
|
||
}
|
||
uni.$off('docCirculate');
|
||
},
|
||
onLoad(option) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.documentListType = option.type
|
||
this.isRead = option.isread
|
||
this.getDetail(option)
|
||
let _this = this
|
||
uni.$on('docCirculate', function (data){ // 检测公文状态若为true,则刷新页面
|
||
if(data) {
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
_this.refresh = 1
|
||
_this.getDetail({id:_this.baseData.DOCUMENT_ID})
|
||
|
||
}
|
||
});
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
|
||
onHide() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.page-view {
|
||
height: 100%;
|
||
/* background-color: #fff; */
|
||
}
|
||
.ptb24 {
|
||
padding: 24upx 0;
|
||
}
|
||
.mt30{
|
||
margin-top: 16upx;
|
||
}
|
||
|
||
.ml30 {
|
||
margin-left: 24upx;
|
||
}
|
||
.fs12 {
|
||
padding-left: 8upx;
|
||
font-size: 22upx;
|
||
}
|
||
.content-card {
|
||
margin: 24upx;
|
||
background-color: #fff;
|
||
border-radius: 9upx;
|
||
box-shadow: 0upx 2upx 8upx 0upx rgba(225,225,225,0.48);
|
||
padding-bottom: 32upx;
|
||
position: relative;
|
||
box-sizing: content-box;
|
||
}
|
||
.line-block {
|
||
border-bottom: 2upx dashed #E4E6EC;
|
||
|
||
width: 100%;
|
||
margin-top: 12upx;
|
||
|
||
}
|
||
.between-circle{
|
||
position: relative;
|
||
}
|
||
.between-circle:before {
|
||
content: '';
|
||
width: 20upx;
|
||
height: 20upx;
|
||
background-color: #f8f9fb;
|
||
box-shadow: -4upx 0upx 6upx rgb(234, 234, 234);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: -12upx;
|
||
top: -10upx;
|
||
z-index: 1;
|
||
transform: rotate(180deg);
|
||
}
|
||
.between-circle:after {
|
||
content: '';
|
||
width: 20upx;
|
||
height: 20upx;
|
||
background-color: #f8f9fb;
|
||
box-shadow: -4upx 0upx 6upx rgb(234, 234, 234);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: -12upx;
|
||
z-index: 1;
|
||
top: -10upx;
|
||
|
||
}
|
||
.content-title {
|
||
text-align: center;
|
||
padding-top: 24upx;
|
||
font-weight: bold;
|
||
line-height: 1.5;
|
||
margin-bottom: 24upx;
|
||
}
|
||
|
||
.content-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #A8A8A8;
|
||
padding: 0 36upx;
|
||
}
|
||
.content-top text {
|
||
font-size: 24upx;
|
||
}
|
||
.serverpart-name {
|
||
line-height: 1.7;
|
||
color: #626262;
|
||
}
|
||
|
||
.publicity-content {
|
||
padding: 16upx 32upx;
|
||
font-size: 26upx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.strong-text{
|
||
display: inline-block;
|
||
font-size: 24upx;
|
||
font-weight: bolder;
|
||
}
|
||
.text-blue {
|
||
color: #377EF6;
|
||
display: inline-block;
|
||
font-size: 24upx;
|
||
margin-left: 16upx;
|
||
}
|
||
.uni-icon-arrowright {
|
||
font-size: 24rpx;
|
||
}
|
||
.img-Box {
|
||
margin-left: 0;
|
||
/* padding-top: 24upx; */
|
||
font-size: 22upx;
|
||
width: 100%;
|
||
}
|
||
.reading-list {
|
||
margin-bottom: 30upx;
|
||
}
|
||
.text-gray {
|
||
color: #B1B3B8;
|
||
|
||
}
|
||
.comment-name-text {
|
||
color: #E49641;
|
||
}
|
||
.uni-read-content{
|
||
word-break: break-all;
|
||
font-size: 26upx;
|
||
margin: 0 0 12upx;
|
||
}
|
||
.reader-text {
|
||
color: #74838E;
|
||
max-width: 570upx;
|
||
}
|
||
.reading-list image {
|
||
width: 26upx;
|
||
height: 26upx;
|
||
}
|
||
|
||
.support-box:before{
|
||
content: '';
|
||
border-width: 0 16upx 16upx 16upx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #F8F9FB;
|
||
position: absolute;
|
||
top: -16upx;
|
||
left: 16upx;
|
||
}
|
||
.support-box {
|
||
background-color: #F8F9FB;
|
||
color: #586A8F;
|
||
font-size: 26upx;
|
||
padding: 12upx;
|
||
position: relative;
|
||
border-radius: 4upx;
|
||
margin-top: 30upx;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
.support-names {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
height: 98upx;
|
||
display: -webkit-box;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
width: 100%;
|
||
}
|
||
.all-names {
|
||
|
||
}
|
||
.more-btn {
|
||
text-align: center;
|
||
width: 100%;
|
||
line-height: 1;
|
||
transition: all 200ms ;
|
||
}
|
||
.more-btn image {
|
||
width: 22upx;
|
||
height: 12upx;
|
||
}
|
||
.button-box {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-bottom: 6upx;
|
||
}
|
||
.button-box image {
|
||
width: 100upx;
|
||
height: 100upx;
|
||
}
|
||
.button-box navigator {
|
||
font-size: 24upx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
</style>
|