jiaoyuju_fawen/bureau-of-education/pages/tabbar/post/index.vue

<template>
	<view class="archive" v-if="roles.indexOf('user-admin') != -1">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle"
		 :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="topNav" :style="{top: topNav + 'px'}">
			<view class="item">
				<view class="text" :class="yidu == 1?'active':''" @click="onNav('1')">未完成发文</view>
			</view>
			<view class="item">
				<view class="text" :class="yidu == 2?'active':''" @click="onNav('2')">已完成发文</view>
			</view>
			<view class="item">
				<view class="text" :class="yidu == 3?'active':''" @click="onNav('3')">已撤回发文</view>
			</view>
		</view>
		<view class="searchBox">
			<view class="inputBox">
				<u-input class="input" v-model="searchVal" type="text" height="70" placeholder="请输入标题" placeholderStyle="{'color:#AAAAAA'}" />
				<view class="btn">查询</view>
			</view>
			<view class="toolBox">
				<view class="timeBox" @click="showTime = true">
					<image class="r" src="/static/img/icon_xzrq.png" mode=""></image>
					<view class="text">{{message_time || '选择日期'}}</view>
					<image class="d" src="/static/img/icon_xzrq_xl.png" mode=""></image>
				</view>
				<view v-if="yidu != 1" class="batchDelete" @click="allduDel = !allduDel">
					<image src="../../../static/img/icon_plsc.png"></image>
					<view class="text">批量删除</view>
				</view>
			</view>
		</view>
		<view class="contentMain" v-if="data.length">
			<u-swipe-action v-if="yidu == 1" :show="item.show" :index="index" v-for="(item, index) in data" :key="item.id"
			 @click="click" @open="open" :options="options" class="u-swipe-action " style="width: 100%;">
				<view class="item">
					<view class="title" @click.stop="jump(item)">{{item.message_title}}</view>
					<view class="userInfo">
						<view class="user">
							<view class="name">拟稿人：{{item.send_user_name}}</view>
							<view class="name">发文日期：{{item.message_time}}</view>
							<!-- <view class="name">流程结束日期：2021-04-28</view> -->
						</view>
						<view v-if="item.status == '审核中'" class="status" @click="approvalProcess(item)">发文审核中</view>
						<view v-else class="statusBtn" @click="viewProgress(item)">查看进度</view>
					</view>
				</view>
			</u-swipe-action>
			<view v-if="yidu == 2" v-for="(item, index) in data" :key="item.id" class="u-swipe-action-1">
				<view class="check" v-if="allduDel">
					<image v-if="!item.show" @click="selected(item)" class="normal" src="../../../static/img/icon_qx_normal.png"></image>
					<image v-else class="selected" @click="selected(item)" src="../../../static/img/icon_qx_selected.png"></image>
				</view>
				<view class="item">
					<view class="title" @click.stop="jump(item)">{{item.message_title}}</view>
					<view class="userInfo">
						<view class="user">
							<view class="name">拟稿人：{{item.send_user_name}}</view>
							<view class="name">发文日期：{{item.message_time}}</view>
							<!-- <view class="name">流程结束日期：2021-04-28</view> -->
						</view>
						<view v-if="item.status == '已驳回'" class="rejected">已驳回</view>
					</view>
				</view>
			</view>
			<view v-if="yidu == 3" v-for="(item, index) in data" :key="item.id" class="u-swipe-action-1">
				<view class="check" v-if="allduDel">
					<image v-if="!item.show" @click="selected(item)" class="normal" src="../../../static/img/icon_qx_normal.png"></image>
					<image v-else class="selected" @click="selected(item)" src="../../../static/img/icon_qx_selected.png"></image>
				</view>
				<view class="item">
					<view class="title" @click.stop="jump(item)">{{item.message_title}}</view>
					<view class="userInfo">
						<view class="user">
							<view class="name">拟稿人：{{item.send_user_name}}</view>
							<view class="name">发文日期：{{item.message_time}}</view>
							<!-- <view class="name">流程结束日期：2021-04-28</view> -->
						</view>
						<view class="statusBtn" @click="addPost(item)">编辑</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="no-data" v-else>暂无数据</view>
		<view style="height: 210rpx;"></view>
		<view class="btns" @click="addPost">新增发文</view>
		<view class="bottomBtn allduDel" v-if="allduDel && yidu != 1">
			<view class="all" @click="selectedAll">
				<image v-if="!isSelected"  class="normal" src="../../../static/img/icon_qx_normal.png"></image>
				<image v-else class="selected"  src="../../../static/img/icon_qx_selected.png"></image>
				<view class="text">全选</view>
			</view>
			<view class="btn" @click="delt">确定删除</view>
		</view>
		<u-picker mode="time" v-model="showTime" :params="params" @confirm="getTime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav: {
					backgroundColor: '#fff', //背景色
					color: '#333', //字体颜色
					bold: true,
					size: '36',
					backColor: '#333',
					isdisPlayNavTitle: false, //是否显示返回按钮
					navTitle: '发文' //导航标题
				},
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true
				},
				message_time: '',
				allduDel: false,
				isSelected: false,
				searchVal: '',
				topNav: 0,
				yidu: '1',
				disabled: false,
				btnWidth: 180,
				show: false,
				data: [],
				options: [{
					text: '撤回',
					style: {
						backgroundColor: '#FF3131'
					}
				}],
				userInfo: {},
				pageNo: 1,
				total: 0,
				roles: []
			}
		},
		onShow () {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
			this.roles = JSON.parse(uni.getStorageSync('roles'));
			if (this.roles.indexOf('user-admin') == -1) {
				return uni.showToast({
					title: '暂无权限',
					icon:  'none'
				})
			}
			this.getQueryList(this.yidu)
			setTimeout(() => {
				this.topNav = (this.$refs.uNavbar.navbarHeight) + (this.$refs.uNavbar.statusBarHeight)
			}, 10)
		},
		onReachBottom() {
			if (this.data.length >= this.total) {
				return
			}
			this.pageNo += 1
			this.getQueryList(this.yidu)
		},
		methods: {
			async getQueryList(message_situation) {
				let res = await this.$u.post(`boman-web-core/p/cs/queryList`, {
					"table": "boman_message",
					"pageNo": this.pageNo,
					"orderBy": "create_time desc",
					"isUi": false,
					"pageSize": 10,
					"fixedData": {
						"condition": {
							"message_situation": message_situation,
							"send_user_id": this.userInfo.id,
							"message_time": this.message_time,
							"is_del": "N"
						}
					}
				})
				if (res.data && res.data.rows) {
					res.data.rows = res.data.rows.map(item => {
						return Object.assign({}, item, {
							show: false
						})
					})
					if (this.pageNo == 1) {
						this.data = res.data.rows
						this.total = res.data.total
					} else {
						this.data = this.data.concat(res.data.rows)
					}
				}
			},
			getTime(e) {
				// console.log(e);
				this.message_time = `${e.year}-${e.month}-${e.day}`
				this.pageNo = 1
				this.getQueryList(this.yidu)
			},
			approvalProcess(item) {
				uni.navigateTo({
					url: '/pages/postView/approvalProcess/index?id=' + item.id + '&name=' + item.send_user_name
				})

			},
			viewProgress(item) {
				uni.navigateTo({
					url: '/pages/postView/viewProgress/index?id=' + item.id + '&name=' + item.send_user_name
				})
			},
			addPost(item) {
				if (item) {
					uni.navigateTo({
						url: '/pages/indexView/addPost/index?objId=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/indexView/addPost/index'
					})
				}
				
			},
			jump(item = {}) {
				if (this.allduDel) {
					return
				}
				uni.navigateTo({
					url: '/pages/postView/postDetails/index?active=' + this.yidu + '&id=' + item.id
				})
			},
			onNav(val) {
				this.allduDel = false
				this.yidu = val
				this.pageNo = 1
				this.getQueryList(this.yidu)
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				});
			},
			selectedAll() {
				this.isSelected = !this.isSelected
				this.data.forEach(item => {
					item.show = this.isSelected
				})
			},
			async delt () {
				let idList = []
				idList = this.data.filter(item => item.show)
				console.log(idList);
				if (idList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请至少选择一条数据'
					})
					return false
				}
				
				let res = await this.$u.post('boman-web-core/p/cs/objectLogicDelete', {
				 "table":"boman_message", // 固定值
				 "logicDelName":"is_del", // 固定值
				 "logicDelValue":"Y", // 固定值
				 "idList": idList.map(item => item.id)
				})
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功'
					})
					this.allduDel = false
					this.pageNo = 1
					this.getQueryList(this.yidu)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			selected(item) {
				item.show = !item.show
			},
			async click(index, index1) {
				let res = await this.$u.get('boman-web-core/message/withdraw/' + this.data[index].id)
				if (res.code == 200) {
					uni.showToast({
						title: res.msg
					})
					this.pageNo = 1
					this.getQueryList(this.yidu)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				// console.log(index, index1)
				// if (index1 == 1) {
				// 	this.data.splice(index, 1);
				// 	this.$u.toast(`删除了第${index}个cell`);
				// } else {
				// 	this.data[index].show = false;
				// 	this.$u.toast(`收藏成功`);
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.data[index].show = true;
				this.data.map((val, idx) => {
					if (index != idx) this.data[index].show = false;
				})
			}
		}
	}
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.topNav {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		height: 90rpx;
		box-shadow: 0px 14rpx 10rpx 0px rgba(218, 218, 218, 0.35);
		position: sticky;
		width: 100%;
		left: 0;
		z-index: 9;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				font-size: 26rpx;
				color: #191919;
				font-weight: 600;
			}

			.active {
				position: relative;

				&::after {
					content: '';
					position: absolute;
					width: 28rpx;
					height: 6rpx;
					background: #009FE8;
					border-radius: 6rpx;
					bottom: -14rpx;
					left: 50%;
					transform: translate(-50%, 0);
				}
			}
		}
	}

	.searchBox {
		padding: 30rpx;

		.inputBox {
			display: flex;
			align-items: center;

			.input {
				flex: 1;
				width: 100%;
				margin-right: 30rpx;
				background: #EDEDED;
				border-radius: 40rpx;
				padding: 0 30rpx !important;
			}

			.btn {
				background: #009FE8;
				color: #FFFFFF;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 30rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}

	}

	.toolBox {
		display: flex;
		justify-content: space-between;

		.batchDelete {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #FF3131;

			image {
				width: 20rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	.timeBox {
		padding: 30rpx 0 20rpx 0;
		display: flex;
		align-items: center;

		.r {
			width: 30rpx;
			height: 33rpx;
		}

		.text {
			font-size: 26rpx;
			color: #343434;
			margin: 0 14rpx;
		}

		.d {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.contentMain {
		padding: 0 20rpx;
		

		.u-swipe-action-1 {
			display: flex;
			align-items: center;
			border-bottom: solid 1rpx #DADADA;
		}

		.check {

			.normal,
			.selected {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.item {
			width: 100%;
			border-bottom: 1px solid #dadada;
			.title {
				font-size: 28rpx;
				font-weight: 700;
				color: #343434;
				padding: 30rpx 30rpx 0 30rpx;
				white-space: break-word;
				word-break:break-all;
			}

			.userInfo {
				display: flex;
				align-items: flex-end;
				padding: 30rpx;

				.user {
					flex: 1;
					color: #666;
					font-size: 24rpx;

					.name {
						margin-bottom: 10rpx;
					}
				}

				.status {
					color: #009FE8;
					font-size: 26rpx;
					margin-bottom: 4rpx;
				}

				.rejected {
					color: #AAAAAA;
					font-size: 26rpx;
					margin-bottom: 4rpx;
				}

				.statusBtn {
					color: #fff;
					font-size: 22rpx;
					margin-bottom: 4rpx;
					background: #61C320;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
				}
			}
		}
	}
	
	.btns {
		position: fixed;
		bottom: var(--window-bottom);
		width: 100%;
		height: 84rpx;
		background: #009FE8;
		color: #fff;
		text-align: center;
		line-height: 84rpx;
	}

	.bottomBtn {
		display: flex;
		align-items: center;
		height: 100rpx;
		width: 100%;
		left: 0;
		z-index: 9;
		bottom: var(--window-bottom);
		position: fixed;
		border-top: solid 1px #E5E5E5;

		.all {
			display: flex;
			align-items: center;
			flex: 0 0 200rpx;
			background: #FFFFFF;
			justify-content: center;
			line-height: 100rpx;

			.normal,
			.selected {
				width: 30rpx;
				height: 30rpx;
			}

			.text {
				font-size: 28rpx;
				color: #343434;
				margin-left: 20rpx;
			}
		}

		.btn {
			background: #FF3131;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 100rpx;
			text-align: center;
			flex: 1;
		}
	}
</style>