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

<template>
	<view class="view_container leaderIndex">
		<!-- 列表 -->
		<view>
			<uni-card v-for="(item,index) in pageData.taskList" padding="0" spacing="0" class="leaderIndex_list">
				<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">
					<view class="list_item">任务编号</view>
					<view class="list_item_text">{{item.id}}</view>
				</view>
				<view class="list_content">
					<view class="list_item">组长</view>
					<view class="list_item_text">{{item.zzName}}</view>
				</view>
				<view class="list_content">
					<view class="list_item">待质控代煎企业</view>
					<view class="list_item_text">{{item.bzkOrgName}}</view>
				</view>
				<view class="list_content">
					<view class="list_item">地址</view>
					<view class="list_item_text">{{item.address}}</view>
				</view>
				<view class="list_content">
					<view class="list_item">完成日期</view>
					<view class="list_item_text">{{item.finishTime}}</view>
				</view>
				<view class="button_group">
					<view class="button_sign" @click="signTask(item)">签收</view>
					<view class="button_start" @click="startTask(item)">开始质控</view>
				</view>
			</uni-card>
		</view>
		<!-- 签收任务/开始质控对话框 -->
		<uni-popup ref="operatorDialog" type="dialog">
			<uni-popup-dialog type="info" confirmText="确定" cancelText="取消" :title="pageInfo.popupMessage.title" :content="pageInfo.popupMessage.showMessage" @confirm="operatorDialogConfirm" @close="operatorDialogClose"></uni-popup-dialog>
		</uni-popup>
		<view>
			<uni-load-more :status="loadingData.status" :contentText="loadingData.contentText"></uni-load-more>
		</view>
	</view>
</template>

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

	const props = defineProps({
		//接受父组件参数，当前要接质控任务状态
		state:  String,
	});

	const loadingData = reactive({
		// 加载true，到底false
		reload: false,
		status: 'more',
		contentText: {
			contentdown: '上拉加载更多',
			contentrefresh: '加载中',
			contentnomore: '已经全部加载完毕'
		}
	})

	const formData = reactive({
		pageSize: 10,
		pageNum: 1,
		status:props.state
	})

	const pageInfo = reactive({
		// 判断列表是否为空
		isEmpty: true,
		total: 0,
		value: 0,
		activeIndex: 0,
		detailStatus: '',
		// 对话框
		popupMessage:{
			// 标题
			title:'',
			// 提示内容
			showMessage:''
		}
	});

	const pageData = reactive({
		headImg: '/static/logo.png',
		userName: '王军',
		taskNum: 2,
		taskList: [],
		// 任务编号
		taskId:'',
	})

	// 签收接口输入参数
	const signFormData=reactive({
		// 任务id
		id:''
	})
	

	// 开始质控接口输入参数
	const startFormData=reactive({
		// 任务id
		id:''
	})

	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 operatorDialog=ref(null)
	
	// 签收任务/开始质控对话框确定事件
	const operatorDialogConfirm=()=>{
		if(pageInfo.popupMessage.title=='开始质控'){
			startFormData.id = pageData.taskId
			getStartTask()
		}else{
			signFormData.id=pageData.taskId
			getSignTask()
		}
		operatorDialog._value.close()
	}
	
	// 签收任务/开始质控对话框取消事件
	const operatorDialogClose=()=>{
		operatorDialog._value.close()
	}
	
	// 签收接口
	const getSignTask=()=>{
		http.get("app-api/index/qs",signFormData).then(res=>{
			console.log(res)
			if(res==true){
				uni.showToast({
					title:'签收成功',
					icon:'success'
				})
			}else{
				uni.showToast({
					title:'签收失败',
					icon:'error'
				})
			}
		})
	}
	
	// 开始质控接口
	const getStartTask=()=>{
		http.get("app-api/index/kszkByid",startFormData).then(res=>{
			console.log(res)
			if(res==true){
				uni.navigateTo({
					url:'/pages/ypczk/zkTask/zkTask?taskId='+pageData.taskId
				})
			}else{
				// 提示-只有组长能够开始质控
				uni.showModal({
					title: '提示',
					content: '只有组长能够开始质控',
					confirmColor: 'rgba(190, 163, 117, 1)', //确定字体颜色
					showCancel: false,//没有取消按钮的弹框
					buttonText: '确定',
					success: function (res) {
						console.log(res)
					}
				})
			}
		})
	}
	
	// 签收
	const signTask=(e)=>{
		console.log("签收")
		pageData.taskId=e.id
		operatorDialog._value.open()
		pageInfo.popupMessage.title='签收'
		pageInfo.popupMessage.showMessage='是否确认签收任务？'
	}
	
	// 开始质控
	const startTask=(e)=>{
		console.log("开始质控")
		pageData.taskId=e.id
		operatorDialog._value.open()
		pageInfo.popupMessage.title='开始质控'
		pageInfo.popupMessage.showMessage='是否确认开始质控任务？'
	}
	

	const getTaskData = () => {
		console.log("getTaskData");
		http.get("app-api/zkzy/findZkzyList",formData).then(res => {
			console.log(res)
			pageData.taskList = pageData.taskList.concat(res.data)
			pageData.taskList.forEach(item => {
				if (item.wcrq1 != null && item.wcrq2 != null) {
					item.finishTime = item.wcrq1 + ' ~ ' + item.wcrq2
				}
				if (item.status == '7003') {
					item.taskStatusIcon = statusIcon.daiIcon
				} else if (item.status == '7004') {
					item.taskStatusIcon = statusIcon.wanIcon
				} else {
					item.taskStatusIcon = statusIcon.zhiIcon
				}
			})
			if (formData.pageSize > res.data.length) {
				loadingData.reload = false
				loadingData.status = 'noMore'
				uni.stopPullDownRefresh();
			} else {
				loadingData.status = 'more'
				loadingData.reload = true
			}
				
		setTimeout(function() {
			uni.stopPullDownRefresh();
			}, 1000);
		})
	}
	
	
	// 上拉加载
	const reachBottom = ()=>{
		console.log("上拉加载");
		if (loadingData.reload) {
			formData.pageNum++;
			loadingData.status = 'loading'
			getTaskData();
		}
	}
	
	const propsState = ref("")
	onShow(() => {
		eyeIcon.nowIcon = eyeIcon.hideIcon
		showIcon.nowIcon = showIcon.hideIcon
		formData.pageNum = 1;
		loadingData.reload = true
		propsState.value = props.state
		// getTaskData();
	})

	//下拉刷新
	const pullDownRefresh = () => {
		console.log("下拉刷新");
		formData.pageNum = 1;
		loadingData.reload = true
		pageData.taskList = []
		getTaskData();
	}
	
	const fetch = ()=>{
		console.log(pageData.taskList);
		if(pageData.taskList == null || pageData.taskList.length == 0){
			pullDownRefresh()
		}
	}
	
	// 页面滚动触发事件
	onPageScroll((detail) => {
		//页面滚动事件
		uni.pageScrollTo({
			scrollTop: detail.scrollTop,
			duration: 0
		})
	})
	defineExpose({reachBottom,pullDownRefresh,fetch})
</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>