ybxf-security-uniapp/pages/s9Unit/task/index.vue

<template>
	<view class="container uni-container">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="rgb(25, 146, 148)"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">{{item.name}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">
								任务介绍：{{item.introduction}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：{{item.unit}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small"    :color="item.status==='0'||item.status==='3'?'red':item.status==='1'?'green':'blue'" style="width: 160rpx;">{{statusListTran(item.status)}}</u-button>
							</uni-col>
						</uni-row>
						<u-line></u-line>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 1">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">任务管理名称</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">
								任务介绍：好烦VN额覅额我去彷佛哦【鹏举了看到女方的妇女的妇女了肯定是离开了分开了圣诞福利MV查询VMvxvm</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：消防大队</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：2022/11/20</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" type="error" style="width: 160rpx;">未完成</u-button>
							</uni-col>
						</uni-row>
						<u-line></u-line>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 2">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">任务管理名称</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">
								任务介绍：好烦VN额覅额我去彷佛哦【鹏举了看到女方的妇女的妇女了肯定是离开了分开了圣诞福利MV查询VMvxvm</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：消防大队</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：2022/11/20</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" type="primary" style="width: 160rpx;">审核中</u-button>
							</uni-col>
						</uni-row>
						<u-line></u-line>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 3">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">任务管理名称</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">
								任务介绍：好烦VN额覅额我去彷佛哦【鹏举了看到女方的妇女的妇女了肯定是离开了分开了圣诞福利MV查询VMvxvm</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：消防大队</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：2022/11/20</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" type="success" style="width: 160rpx;">已完成</u-button>
							</uni-col>
						</uni-row>
						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- <view class=" ">
					<uni-card v-for="(item, index) in tableData" :key="index" title="已完成任务清单名称" :sub-title="item.code"
						extra="去完成" @click="onClick(item)">
						<view class=" flex  flex-direction">
							<text class="text-cut">任务介绍：{{item.name}}</text>
							<text class="text-cut">任务数量：{{item.dataScope}}</text>
							<text class="text-cut">截止日期：{{item.createTime}}</text>
						</view>
					</uni-card>
				</view> -->
			</view>
		</view>
	</view>
</template>
<script>
	let that = null; 
	import {
		getTask
	} from "@/api/task";
	import { getUserId} from '@/utils/auth' //获取UserId
	export default {
		data() {
			return {
				current: 0,
				items: ['全部', '未完成', '审核中', '已完成'],
				// 数据
				tableData: [],
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				statusList:{
					0: "未完成" ,
					1: "已完成" ,
					2: "审核中",
					3: "审核未通过"
				},
 
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.getData(1)
		},
		methods: {
			// =================数据转换==================
			statusListTran(val){   //status状态转换
				return this.statusList[val]
			},
			// ================================
			// tab头部点击
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				getTask({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId:2,
					// 'tenant-id':'',
					// status:'1',
				}).then(response => {
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.list]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false; 
				});
			},
			onClick(val) {
				uni.navigateTo({
					url: '/pages/fire/check_tasks/tasks_details/tasks_details?id='+val.id,
					// events: {
					// 	// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					// 	acceptDataFromOpenedPage: function(val) {
					// 		console.log(val)
					// 	},
					// },
					// 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() {
			// 	// 判断是否还有下一页数据
			// 	if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.pageNo += 1
			// 	this.getData(this.pageNo)
			// }
		}
	}
</script>
<style>
</style>