ybxf-security-uniapp/pagesA/fire/remind/index.vue

<template>
	<view class="uni-container-bg uni-container ">
		<view class="padding-tb-sm" style="">
			<uni-row class="demo-uni-row " :gutter="20" width="100%">
				<uni-col :span="24">
					<view class="u-page__tag-item">
						<u-search v-model="keyword" :show-action="true" @custom="handleQuery"></u-search>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="" v-if="tableData.length>0 && isLoaded">
			<uni-card v-for="(item, index) in tableData" :key="index">
				<view class="titles">{{item.remind_title}}</view>
				<view style="float: left" v-if="item.remind_content">重要提醒内容:</view>
				<!-- <text class="conts">{{item.taskContent}}</text> -->
				<rich-text :nodes="item.remind_content?item.remind_content:''" class="font-12"></rich-text>
				<view style="float: left;">发布日期:{{item.pubDate}}</view>
				<view class="an-niu">
					<view class="an-niu-street" @click.native="uploadButton(item)" link>
						<text class="bianji" v-if="item.is_done==0">上传</text>
					</view>
					<text @click="isRead(item)" class="detail isread " v-if="item.is_read==0&&item.is_done==0">已阅</text>
					<text @click.native="onNoticeClick(item)" class="detail">查看详情</text>
				</view>
			</uni-card>
		</view>
		<view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;">
				<img :src="tan90" alt="暂无数据" />
			</view>
		</view>
		<view>
			<!-- <image :src="Group" @click="addClick" class="tiantupian"></image> -->
		</view>


		<!-- 		
		<u-list @scrolltolower="scrolltolower" class="card">

			<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onNoticeClick(item)" link>
				<uni-row class="demo-uni-row padding-top text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-1cut">
						<rich-text :nodes="item.title" class="font-12"></rich-text>
						<text class="uni-body font-14 text-bold ">{{item.title}}</text>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row padding-top text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-2cut">
						<rich-text :nodes="item.content" class="font-12"></rich-text>
						<text class="uni-body">{{item.comContent}}</text>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row padding-tb-sm text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class=" text-grey1   ">
						<text class="uni-body flex justify-end ">{{item.createTime}}</text>
						<text class="uni-body flex justify-end ">09-26</text>
					</uni-col>
				</uni-row>
				<u-button type="primary" text="详情" plain size="small" style="width: 20%;float: right;"></u-button>
			</u-list-item>
		</u-list> -->
		<tarBar :totarBer='tar'></tarBar>
		<u-popup :show="showComplete" title="完成提醒" mode="center">
			<view style="width:550rpx;height: 900rpx;margin: 20rpx 20rpx;position: relative;overflow-y: auto;">
				<view class="titles-popup">完成描述:</view>
				<u--textarea v-model="formData.donetext" placeholder="请输入内容" :maxlength="500" count
					height="150">
				</u--textarea>
				<view class="titles-popup">
					附件上传:
				</view>
				<uni-file-picker v-model="formData.fileUrls" del-icon limit="5" file-mediatype="all"
					@select="selectFile" @delete="deleteFile">
					<button type="primary" class="selectBtn">选择文件</button>
					<!-- 加载中 -->
					<isLodingModel v-if="loading"></isLodingModel>
				</uni-file-picker>
			    <view style="position:absolute;bottom:20px;width: 100%;">
			    	<view style="display: flex;justify-content: space-around;align-items: center;width: 100%;">
			    		<button class="antherBtn" @click="makeSure" style="background-color: #4cb2b6;color: #fff;">确认</button>
			    		<button class="antherBtn" @click="showComplete = false">取消</button>
			    	</view>
			    </view>
			</view>
		</u-popup>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import tarBar from '@/components/tabBar/index' //先把tabBar.vue组件导入
	import {
		getRemindBroadPage,// 重要通知列表 
		setisread,//是否已阅
		remindBroadFinish,
		getRemindOlnyRead
	} from "@/api/remind";
	import {
		uploadFileComp
	} from '@/utils/common.js';
	import {
		parseTime // 时间戳转换
	} from '@/utils/ruoyi';
		import config from '@/config'
	let that = null;
	const baseUrlImg = config.baseUrlImg
	export default {
		components: {
			tarBar
		},
		data() {
			return {
				isLoaded: false,
				tar: {
					color: '#07A7E3',
					id: 1
				}, //向子组件发送的值
				// 数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				ids: '0',
				title: '1',
				tan90: `${baseUrlImg}/tan90.png`,
				formData: {
					fileUrls: [],
					donetext: '', //上传描述内容
					doneDate:'',//完成时间
					attId:[],
					broadId:null,
					broadType:null
					
				},
				showComplete:false
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.ids = option.id
		},
		onShow() {
			this.tableData = []
			// this.tableD
			this.getData(1)
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			handleQuery() { //搜索
				this.isLoaded = false
				this.loading = true
				this.tableData = []
				this.getData(1)
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				const deptId =  uni.getStorageSync('getUserInfo_key')?.streetInfo?uni.getStorageSync('getUserInfo_key').streetInfo.id:uni.getStorageSync('getUserInfo_key').userInfo.deptId;
				const userId = uni.getStorageSync('getUserInfo_key')?.userInfo?.id;
				console.log(pageNo,'00000000');
				getRemindBroadPage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					reciver: deptId,
					userId: userId,
					remindTitle:this.keyword
				}).then(response => {
					this.isLoaded = true
					response.data.records.forEach(item=>{
						item.pubDate = parseTime(item.pub_date,"{y}-{m}-{d}")
					})
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.records]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
				});
			},
			isRead(item){
				const arr = [];
				arr[0]=item.broad_id
				setisread({broadIds:arr}).then(res=>{
					this.tableData = [];
					this.getData(1);
					this.$forceUpdate()
				})
			},
				
			uploadButton(item){
				this.showComplete=true;
				this.formData.attId = [];
				this.formData.broadId = item.broad_id;
				this.formData.broadType = item.broad_type
				this.formData.fileUrls=[];
				this.formData.donetext = ''
			},
			// 移出图片函数
			async deleteFile(e) {
				this.formData.attId.forEach((item,index)=>{
					console.log(e.tempFilePath,'-------------');
					if(item.id==e.tempFilePath){
						this.formData.attId.splice(index, 1);

					}
				})
				// this.formData.fileUrls = [];
			},
			selectFile(e) {
				console.log(e.tempFilePaths,'e.tempFilePaths');
				let promises = [];
				for (let i = 0; i < e.tempFilePaths.length; i++) {
					const promise2 = uploadFileComp(e.tempFilePaths, i, this,this.formData.attId.length);
					this.$forceUpdate()
					promises.push(promise2);
				}
				Promise.all(promises).then(result => {
									console.log(result,'result====');
					// 处理上传文件成功的结果
				}).catch(error => {
					// 处理上传文件失败的错误
				});
			},
			//上传文件点击确认	
			makeSure(){
				this.formData.doneDate = parseTime(new Date(),"{y}-{m}-{d}");
				 this.formData.attId.forEach(item=>{
					 this.formData.fileUrls.push(item.path)
				 })
				console.log('sdfsf',this.formData);
				remindBroadFinish(this.formData).then(res=>{
					this.$modal.msgSuccess('上传成功');
					this.showComplete=false;
					this.tableData = [];
					this.getData(1);
					this.$forceUpdate()
				}).catch(err=>{
						this.$modal.msgSuccess('上传失败');
						this.showComplete=false;
				})
			},
			// 单个公告详情点击事件
			onNoticeClick(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/remind/details/details?id=${val.broad_id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val)
					}
				})
			},
			// scrolltolower() {
			// 	// 判断是否还有下一页数据
			// 	if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.pageNo += 1
			// 	this.getData(this.pageNo)
			// },
		},
		// 触底的事件
		onReachBottom() {
			console.log(this.pageSize,this.pageNo,this.total);
			// 判断是否还有下一页数据
			if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
				title: `数据加载完毕`
			})
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return
			this.pageNo += 1
			this.getData(this.pageNo)
		},
	}
</script>
<style lang="scss" scoped>
	body {
		background-color: #F5F7F9;
	}

	page {
		background-color: #F5F7F9;
	}

	.an-niu {
		float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		padding-bottom: 30rpx;
		margin-top: 50rpx;
		color: #fff;
		cursor: pointer;

		.detail {
			width: 72px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #F7C41E;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.isread {
			background-color: #18a2f7;
		}
	}

	//列表样式
	.titles {
		font-weight: 600;
		margin-bottom: 10rpx;
		font-size: 14px;
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}

	rich-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.selectBtn {
		width: 200rpx;
		margin-left: 0;
		font-size: 30rpx;
		background-color: #4cb2b6;
	}
		
	.titles-popup{
		margin: 10px 10px;
		font-weight: 600;
		font-size: 14px;
	}
	::v-deep .uni-file-picker__lists{
		height: 200rpx;
		overflow-y: auto;
	}
</style>