tcm-cloud-uin-app/pages/ypczk/zkTask/zkTaskDetail/detailsList.vue

<template>
	<view>
		<yui-tabs :tabs="pageInfo.tabs" :offsetTop="20" 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="taskInfo">
					<!-- 质控信息 -->
					<uni-card>
						<view style="color: rgba(51, 51, 51, 1);font-size: 17px;">{{pageInfo.detailList.name}}</view>
						<template v-slot:right>
							<image style="width: 50rpx; height: 50rpx;" :src="showIcon.nowIcon" @click="changeState()">
							</image>
						</template>
						<view class="detail_list">
							<view class="List_title">
								<view class="detail_text">任务编号</view>
								<view class="detail_righttext">{{pageInfo.detailList.taskNumber}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">任务状态</view>
								<view class="detail_righttext">{{pageInfo.detailList.status}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">被质控代煎企业</view>
								<view class="detail_righttext">{{pageInfo.detailList.bzkOrgName}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">地址</view>
								<view class="detail_righttext">{{pageInfo.detailList.address}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">完成日期</view>
								<view class="detail_righttext">{{pageInfo.detailList.wcrq2}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">任务发布人</view>
								<view class="detail_righttext">{{pageInfo.detailList.creator}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">发布日期</view>
								<view class="detail_righttext">{{pageInfo.detailList.wcrq1}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">质控日期</view>
								<view class="detail_righttext">{{pageInfo.detailList.zkrq}}</view>
							</view>
						</view>
					</uni-card>
					<!-- 详情 -->
					<uni-card>
						<view class="detail_list">
							<view class="List_title">
								<view class="detail_text">代配抽样数量</view>
								<view class="detail_righttext">{{pageInfo.detailList.dpCyCount}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">代煎抽样数量</view>
								<view class="detail_righttext">{{pageInfo.detailList.djCyCount}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">抽样总数</view>
								<view class="detail_righttext">{{pageInfo.detailList.totalCyCount}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">组长</view>
								<view class="detail_righttext">{{pageInfo.detailList.zzName}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">组员</view>
								<view class="detail_righttext">{{pageInfo.detailList.zyNames}}</view>
							</view>
							<view class="List_title">
								<view class="detail_text">备注</view>
								<view class="detail_righttext">{{pageInfo.detailList.bz}}</view>
							</view>
						</view>
					</uni-card>
					<!-- 开始质控 -->
					<view class="finish_button" v-if="pageInfo.detailList.status!='已质控'">
						<button class="button" @click="startTask()">开始质控</button>
					</view>
				</view>
			</template>
			<!-- 代配质控 -->
			<template #pane1>
				<DPTaskDetail :dpTaskList="pageInfo.dpTaskList" :dpbhg="pageInfo.dpbhg"
					:taskStatus="pageInfo.taskStatus" :dpCyCount="pageInfo.dpCyCount" :dpWcCount="pageInfo.dpWcCount">
				</DPTaskDetail>
			</template>
			<!-- 代煎质控 -->
			<template #pane2>
				<DJTaskDetail :djTaskList="pageInfo.djTaskList" :djbhg="pageInfo.djbhg"
					:taskStatus="pageInfo.taskStatus" :djCyCount="pageInfo.djCyCount" :djWcCount="pageInfo.djWcCount">
				</DJTaskDetail>
			</template>
			<!-- 环境质控 -->
			<template #pane3>
				<DPhjTaskDetail :hjTaskList="pageInfo.hjTaskList" :imageUrl="pageInfo.imageUrl" :hjbhg="pageInfo.hjbhg"
					:creatorName="pageInfo.creatorName" :taskStatus="pageInfo.taskStatus"></DPhjTaskDetail>
			</template>
		</yui-tabs>
		<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>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import http from '@/utils/request';
	import {
		onLoad,
		onShow,
		onUnload,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import DJTaskDetail from "./djTaskDetail.vue"
	import DPTaskDetail from "./dpTaskDetail.vue"
	import DPhjTaskDetail from "./djhjTaskDetail.vue"
	import {
		uploadImageModelValue
	} from '@/pages/controls/image/OssService'

	const pageInfo = reactive({
		// 判断列表是否为空
		isEmpty: true,
		total: 0,
		value: 0,
		tabs: ["任务信息", "代配质控", "代煎质控", "环境质控"],
		activeIndex: 0,
		// 任务状态
		taskStatus: '',
		// 任务信息
		detailList: {},
		// 代配质控列表
		dpTaskList: [],
		// 代煎质控列表
		djTaskList: [],
		// 环境质控
		hjTaskList: [],
		imageUrl: "",
		// 代配不合格数
		dpbhg: "",
		// 代煎不合格数
		djbhg: "",
		// 环境质控不合格数
		hjbhg: 0,
		// 代配抽样数量
		dpCyCount: '',
		// 代配完成数量
		dpWcCount: '',
		// 代煎抽样数量
		djCyCount: '',
		// 代煎完成数量
		djWcCount: '',
		// 创建人
		creatorName: '',
		// 对话框
		popupMessage: {
			// 标题
			title: '开始质控',
			// 提示内容
			showMessage: '是否确认开始质控任务'
		}
	});

	const formData = reactive({
		id: ''
	})

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

	// 开始质控
	const startTask = () => {
		if (pageInfo.detailList.isKszk == true) {
			uni.navigateTo({
				url: '/pages/ypczk/zkTask/zkTask?taskId=' + formData.id
			});
		} else {
			operatorDialog.value.open()
		}
	}

	// 定义/开始质控对话框
	const operatorDialog = ref(null)

	// 开始质控对话框确定事件
	const operatorDialogConfirm = () => {
		getStartTask()
	}

	// 开始质控对话框取消事件
	const operatorDialogClose = () => {
		operatorDialog.value.close()
	}

	// 开始质控接口
	const getStartTask = () => {
		http.get("app-api/index/kszkByid", {
			taskId: formData.id
		}).then(res => {
			console.log(res)
			// 1表示开始质控，-1表示不是组长不能质控，其他表示开始质控失败
			if (res == 1) {
				uni.navigateTo({
					url: '/pages/ypczk/zkTask/zkTask?taskId=' + formData.id
				})
			} else if (res = -1) {
				// 提示-只有组长能够开始质控
				uni.showModal({
					title: '提示',
					content: '只有组长能够开始质控',
					confirmColor: 'rgba(190, 163, 117, 1)', //确定字体颜色
					showCancel: false, //没有取消按钮的弹框
					buttonText: '确定'
				})
			} else {
				uni.showToast({
					title: '开始质控失败',
					icon: 'none'
				});
			}
		})
		operatorDialog.value.close()
	}

	// 切换显示状态
	const changeState = () => {
		if (showIcon.nowIcon == showIcon.showIcon) {
			showIcon.nowIcon = showIcon.hideIcon
		} else {
			showIcon.nowIcon = showIcon.showIcon
		}
	}

	// 切换tab
	const tabChange = (e) => {
		switch (e) {
			case 0: {
				getTaskData();
				break;
			}
			case 1: {
				getDpTaskData();
				break;
			}
			case 2: {
				getDjTaskData();
				break;
			}
			case 3: {
				getDjhjTaskData();
				break;
			}
		}
	}

	// 获取任务信息
	const getTaskData = () => {
		http.get("app-api/taskDetail/getTaskDetailById", formData).then(res => {
			console.log(res)
			pageInfo.detailList = res
			if (res.status == '7002') {
				pageInfo.detailList.status = '待确认'
			} else if (res.status == '7003') {
				pageInfo.detailList.status = '质控中'
			} else {
				pageInfo.detailList.status = '已质控'
			}
		})
	}
	

	// 获取代配质控
	const getDpTaskData = () => {
		http.get("app-api/taskDetail/getTaskDpDetailById", formData).then(res => {
			console.log(res)
			pageInfo.dpTaskList = res.dpCfDetail
			pageInfo.dpCyCount = res.dpCyCount
			pageInfo.dpWcCount = res.dpWcCount
		})
	}

	// 获取代煎质控
	const getDjTaskData = () => {
		http.get("app-api/taskDetail/getTaskDjDetailById", formData).then(res => {
			console.log(res)
			pageInfo.djbhg = res.djbhg
			pageInfo.djTaskList = res.djCfDetail
			pageInfo.djCyCount = res.djCyCount
			pageInfo.djWcCount = res.djWcCount
		})
	}

	// 获取环境质控
	const getDjhjTaskData = () => {
		http.get("app-api/taskDetail/getTaskHzZkDetailById", formData).then(res => {
			console.log(res)
			if (res != null) {
				pageInfo.hjTaskList = res.results
				pageInfo.hjTaskList.forEach(item => {
					// 检查内容（分数与总分相同为合格，反之不合格）
					if (item.score == item.totalScore) {
						item.assessmentResult = '合格'
					} else {
						item.assessmentResult = '不合格'
						pageInfo.hjbhg = pageInfo.hjbhg + 1
					}
				})
				if (res.detail.imageIds != null) {
					pageInfo.imageUrl = res.detail.imageIds
				}
				pageInfo.creatorName = res.detail.creatorName
				console.log(pageInfo.imageUrl);
			}
		})
	}

	// 显示图片
	const showImage = (id) => {
		return uploadImageModelValue(id)
	}


	// 获取taskId
	const getTaskId = () => {
		uni.getStorage({
			key: 'saveTaskId',
			success: (res) => {
				formData.id = res.data.taskId
			}
		})
	}

	onShow(() => {
		showIcon.nowIcon = showIcon.hideIcon
		getTaskId();
		getTaskData();
		uni.$off("startTaskInfo")
		uni.$on("startTaskInfo", () => {
			startTask()
		})
	})

	onLoad((data) => {
		console.log(data);
		if (data.taskInfo != null) {
			pageInfo.taskStatus = JSON.parse(decodeURIComponent(data.taskInfo)).status
		}
	})
</script>

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