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

<template>
	<view class="qualitycontrolTask">
		<!-- 飞行质控任务 -->
		<view class="flightTask">
			<uni-card>
				<uni-section title="飞行质控任务" type="line">
					<template v-slot:right>
						<image style="width: 50rpx; height: 50rpx;" :src="showIcon.nowIcon" @click="changeState()"></image>
					</template>
				</uni-section>
				<view class="flightTask_list">
					<text class="flightTask_list_item">被质控代煎企业<text class="flightTask_list_item_text">{{pageData.detailList.taskId}}</text></text>
					<text class="flightTask_list_item">组长<text class="flightTask_list_item_text">{{pageData.detailList.taskId}}</text></text>
					<text class="flightTask_list_item">组员<text class="flightTask_list_item_text">{{pageData.detailList.taskId}}</text></text>
					<text class="flightTask_list_item">地址<text class="flightTask_list_item_text">{{pageData.detailList.taskId}}</text></text>
				</view>
			</uni-card>
		</view>
		<!-- 代配作业质控 -->
		<view class="dp_or_dj_Task">
			<uni-card>
				<uni-section title="待配作业质控" type="line">
					<template v-slot:right>
						<view class="sub_title">不合格数<view class="sub_title_text">{{pageData.detailList.dpbhg}}</view></view>
					</template>
				</uni-section>
				<view class="sub_head">
					<view class="sub_head_title">代配7贴：<view class="sub_title_text">{{pageData.detailList.dp7twc+"/"+pageData.detailList.dp7t}}</view></view>
					<view class="sub_head_title">代配14贴：<view class="sub_title_text">{{pageData.detailList.dp14twc+"/"+pageData.detailList.dp14t}}</view></view>
				</view>
				<view>
					<button class="button" @click="addTask('dp')"> + 新增</button>
				</view>
				<uni-table class="dp_table">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="150rpx">处方编号</uni-th>
						<uni-th align="center" width="150rpx">贴数(贴)</uni-th>
						<uni-th align="center" width="150rpx">平均误差(%)</uni-th>
						<uni-th align="center" width="150rpx">创建人</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in pageData.detailList.dpCfDetail" :key="index">
						<uni-td>{{item.cfbh}}</uni-td>
						<uni-td>{{item.ts}}</uni-td>
						<uni-td>{{item.bhgx}}</uni-td>
						<uni-td>{{item.creatorName}}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="see_more" @click="seeMore('dp')">
					<text>查看更多</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</uni-card>
		</view>
		<!-- 代煎作业质控 -->
		<view class="dp_or_dj_Task">
			<uni-card>
				<uni-section title="待煎作业质控" type="line">
					<template v-slot:right>
						<view class="sub_title">不合格数<view class="sub_title_text">{{pageData.detailList.djbhg}}</view></view>
					</template>
				</uni-section>
				<view class="sub_head">
					<view class="sub_head_title">代煎7贴：<view class="sub_title_text">{{pageData.detailList.dj7twc+"/"+pageData.detailList.dj7t}}</view></view>
					<view class="sub_head_title">代煎14贴：<view class="sub_title_text">{{pageData.detailList.dj14twc+"/"+pageData.detailList.dj14t}}</view></view>
				</view>
				<view>
					<button class="button" @click="addTask('dj')"> + 新增</button>
				</view>
				<uni-table class="dp_table">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="150rpx">处方编号</uni-th>
						<uni-th align="center" width="150rpx">贴数(贴)</uni-th>
						<uni-th align="center" width="150rpx">平均误差(%)</uni-th>
						<uni-th align="center" width="150rpx">创建人</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in pageData.detailList.djCfDetail" :key="index">
						<uni-td>{{item.cfbh}}</uni-td>
						<uni-td>{{item.ts}}</uni-td>
						<uni-td>{{item.bhgx}}</uni-td>
						<uni-td>{{item.creatorName}}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="see_more" @click="seeMore('dj')">
					<text>查看更多</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</uni-card>
		</view>
		<!-- 代煎企业作业环境质控 -->
		<view class="djqyhj_Task">
			<uni-card>
				<uni-section title="代煎企业作业环境质控" type="line">
					<template v-slot:right>
						<view class="sub_title">不合格数<view class="sub_title_text">{{pageData.detailList.djqyzkbhg}}</view></view>
					</template>
				</uni-section>
				<view class="image_upload">
					<uni-file-picker limit="4" :v-model="pageData.imageList" @select="selectImg" @delete="deleteImg"></uni-file-picker>
				</view>
			</uni-card>
		</view>
		<!-- 完成质控 -->
		<view class="finish_button">
			<button class="button" @click="finishTask()">完成质控</button>
		</view>
	</view>
</template>

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

const pageData=reactive({
	detailList:{},
	// 图片列表
	imageList:[]
})

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

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

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

// 新增代配/代煎质控
const addTask=(type)=>{
	if(type=='dp'){
		// 新增代配
		console.log("新增代配")
	}else if(type=='dj'){
		// 新增代煎
		console.log("新增代煎")
		uni.navigateTo({
			url:"/pages/ypczk/zkTask/djTask?status=add"
		})
	}
}

// 查看更多
const seeMore =(type)=>{
	if(type=='dp'){
		// 代配跳转
		console.log("代配跳转")
		// uni.navigateTo({
		// 	url:''
		// })
	}else if(type=='dj'){
		// 代煎跳转
		console.log("代煎跳转")
		uni.navigateTo({
			url:'/pages/ypczk/zkTask/zkTaskDetail/djTaskDetail'
		})
	}
}

// 选中图片，将选中的图片添加列表
const selectImg=(e)=>{
	console.log(e)
	e.tempFiles.forEach(item=>{
		pageData.imageList.push(item)
	})
}

// 删除图片，并将其从列表中删除
const deleteImg=(e)=>{
	console.log(e)
	let index=0
	index = pageData.imageList.indexOf(e.tempFilePaths)
	pageData.imageList.splice(index, 1)
}

// 完成质控
const finishTask=()=>{
	console.log("完成质控")
}

// 查询质控作业--根据Id
const getZkData=()=>{
	http.get("app-api/findZkzy",formData).then(res=>{
		console.log(res)
		pageData.detailList=res
		// 获取图片
		if(pageData.detailList.imgUrl.length!=0){
			pageData.imageList=pageData.detailList.imgUrl
		}
	})
}

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

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