tcm-cloud-uin-app/pages/ypczk/zkTask/zkTaskList.vue

<!-- 首页-组长 -->
<template>
	<view>
		<yui-tabs :tabs="pageInfo.tabs" :offsetTop="25" v-model="pageInfo.activeIndex" @change="tabChange" color="rgba(190, 163, 117, 1)"
			titleActiveColor="rgba(190, 163, 117, 1)" sticky swipeable line-width="60rpx" line-height="2px" animated>
			<template #pane0>
			<view class="view_container leaderIndex">
				<!-- 列表 -->
				<view class="leaderIndex_list">
					<uni-card v-for="(item,index) in pageData.taskList" padding="10rpx 0">
						<view class="list_title">
							<image :src="item.taskStatusIcon" class="statusIcon"></image>
							<view>{{item.name}}</view>
							<image :src="showIcon.nowIcon" class="showIcon" @click="changeState('list')"></image>
						</view>
						<view class="list_content">
							<text class="list_item">任务编号<text class="list_item_text">{{item.taskNumber}}</text></text>
							<text class="list_item">组长<text class="list_item_text">{{item.zzName}}</text></text>
							<text class="list_item">待质控代煎企业<text class="list_item_text">{{item.bzkOrgName}}</text></text>
							<text class="list_item">地址<text class="list_item_text">{{item.address}}</text></text>
							<text class="list_item">完成日期<text class="list_item_text">{{item.finishTime}}</text></text>
						</view>
						<view class="list_button">
							<view class="button_group">
								<view class="button_item" @click="signTask">签收</view>
								<view class="button_item" @click="starTask">开始质控</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
			</template>
			<template #pane1>
			<view class="view_container leaderIndex">
				<!-- 列表 -->
				<view class="leaderIndex_list">
					<uni-card v-for="(item,index) in pageData.waitTaskList" padding="10rpx 0">
						<view class="list_title">
							<image :src="item.taskStatusIcon" class="statusIcon"></image>
							<view>{{item.name}}</view>
							<image :src="showIcon.nowIcon" class="showIcon" @click="changeState('list')"></image>
						</view>
						<view class="list_content">
							<text class="list_item">任务编号<text class="list_item_text">{{item.taskNumber}}</text></text>
							<text class="list_item">组长<text class="list_item_text">{{item.zzName}}</text></text>
							<text class="list_item">待质控代煎企业<text class="list_item_text">{{item.bzkOrgName}}</text></text>
							<text class="list_item">地址<text class="list_item_text">{{item.address}}</text></text>
							<text class="list_item">完成日期<text class="list_item_text">{{item.finishTime}}</text></text>
						</view>
						<view class="list_button">
							<view class="button_group">
								<view class="button_item" @click="signTask">签收</view>
								<view class="button_item" @click="starTask">开始质控</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
			</template>
			
			<template #pane2>
			<view class="view_container leaderIndex">
				<!-- 列表 -->
				<view class="leaderIndex_list">
					<uni-card v-for="(item,index) in pageData.inTaskList" padding="10rpx 0">
						<view class="list_title">
							<image :src="item.taskStatusIcon" class="statusIcon"></image>
							<view>{{item.name}}</view>
							<image :src="showIcon.nowIcon" class="showIcon" @click="changeState('list')"></image>
						</view>
						<view class="list_content">
							<text class="list_item">任务编号<text class="list_item_text">{{item.taskNumber}}</text></text>
							<text class="list_item">组长<text class="list_item_text">{{item.zzName}}</text></text>
							<text class="list_item">待质控代煎企业<text class="list_item_text">{{item.bzkOrgName}}</text></text>
							<text class="list_item">地址<text class="list_item_text">{{item.address}}</text></text>
							<text class="list_item">完成日期<text class="list_item_text">{{item.finishTime}}</text></text>
						</view>
						<view class="list_button">
							<view class="button_group">
								<view class="button_item" @click="signTask">签收</view>
								<view class="button_item" @click="starTask">开始质控</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
			</template>
			
			<template #pane3>
			<view class="view_container leaderIndex">
				<!-- 列表 -->
				<view class="leaderIndex_list">
					<uni-card v-for="(item,index) in pageData.completeTaskList" padding="10rpx 0">
						<view class="list_title">
							<image :src="item.taskStatusIcon" class="statusIcon"></image>
							<view>{{item.name}}</view>
							<image :src="showIcon.nowIcon" class="showIcon" @click="changeState('list')"></image>
						</view>
						<view class="list_content">
							<text class="list_item">任务编号<text class="list_item_text">{{item.taskNumber}}</text></text>
							<text class="list_item">组长<text class="list_item_text">{{item.zzName}}</text></text>
							<text class="list_item">待质控代煎企业<text class="list_item_text">{{item.bzkOrgName}}</text></text>
							<text class="list_item">地址<text class="list_item_text">{{item.address}}</text></text>
							<text class="list_item">完成日期<text class="list_item_text">{{item.finishTime}}</text></text>
						</view>
						<view class="list_button">
							<view class="button_group">
								<view class="button_item" @click="signTask">签收</view>
								<view class="button_item" @click="starTask">开始质控</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
			</template>
		</yui-tabs>
	</view>
</template>

<script setup>
	import http from '@/utils/request';
	import {
		reactive
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload,
		onPullDownRefresh
	} from "@dcloudio/uni-app";

	const pageInfo = reactive({
		// 判断列表是否为空
		isEmpty: true,
		total: 0,
		value: 0,
		orderList: [],
		tabs: ["所有", "待质控", "质控中", "完成"],
		activeIndex: 0,
		orderId: '',
		detailStatus: ''
	});

	const pageData = reactive({
		headImg: '/static/logo.png',
		userName: '王军',
		taskNum: 2,
		taskList: [],
		waitTaskList: [],
		inTaskList: [],
		completeTaskList: []
	})

	const eyeIcon = reactive({
		nowIcon: '',
		showIcon: '/static/whiteDisplay.png',
		hideIcon: '/static/whiteHide.png'
	})

	const showIcon = reactive({
		nowIcon: '',
		showIcon: '/static/blackDisplay.png',
		hideIcon: '/static/blackHide.png'
	})

	const statusIcon = reactive({
		daiIcon: '/static/dai_icon.png',
		wanIcon: '/static/wan_icon.png',
		zhiIcon: '/static/zhi_icon.png'
	})

	// 切换显示与隐藏
	const changeState = (type) => {
		if (type == 'header') {
			console.log("头部切换")
			if (eyeIcon.nowIcon == eyeIcon.hideIcon) {
				eyeIcon.nowIcon = eyeIcon.showIcon
			} else {
				eyeIcon.nowIcon = eyeIcon.hideIcon
			}
		} else if (type == 'list') {
			console.log("列表切换")
			if (showIcon.nowIcon == showIcon.hideIcon) {
				showIcon.nowIcon = showIcon.showIcon
			} else {
				showIcon.nowIcon = showIcon.hideIcon
			}
		}
	}

	// 跳转到任务详情
	const toDetail = () => {
		console.log("跳转到任务详情")
	}

	// 签收
	const starTask = () => {
		console.log("签收")
	}

	// 开始质控
	const signTask = () => {
		console.log("开始质控")
	}

	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(uni.stopPullDownRefresh(), 2000)

	})

	const getTaskData = () => {
		http.get("app-api/findList").then(res => {
			console.log(res)
			pageData.taskList = res
			pageData.taskList.forEach(item => {
				item.finishTime = item.wcrq1.slice(2) + ' ~ ' + item.wcrq2.slice(0, -2)
				if (item.status == '7003') {
					item.taskStatusIcon = statusIcon.daiIcon
					pageData.waitTaskList.push(item)
				} else if (item.status == '7004') {
					item.taskStatusIcon = statusIcon.wanIcon
					pageData.completeTaskList.push(item)
				} else {
					item.taskStatusIcon = statusIcon.zhiIcon
					pageData.inTaskList.push(item)
				}
			})
			console.log(pageData.taskList)
		})
	}

	onShow(() => {
		eyeIcon.nowIcon = eyeIcon.hideIcon
		showIcon.nowIcon = showIcon.hideIcon
		getTaskData()
	})
</script>


<style lang="scss" scoped>
	@import 'indexList.scss';

	.yui-tabs {
		position: relative;
	}
	::v-deep.uni-view.yui-tabs__wrap {
	    margin-top: 25px!important;
	}
	.yui-tabs__wrap{
		top: 50px !important;
	}
</style>