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

<template>
	<view class="djhjTaskDetail">
		<!-- 任务进度 -->
		<view class="djhjTaskDetail_progress">
			<text class="djhjTaskDetail_progress_title">任务进度：<text class="djhjTaskDetail_progress_text">{{wcnumber()+'/'+hjTaskList.length}}</text></text>
			<text class="djhjTaskDetail_progress_title">不合格数<text class="djhjTaskDetail_progress_text">{{hjbhg}}</text></text>
		</view>
    <view v-if="props.hjTaskList.length!=0">
      <!-- 创建人 -->
      <view class="creator">
        <text class="creator_title">操作人<text class="creator_text">{{props.creatorName}}</text></text>
      </view>
			<!-- 检查结果 -->
			<uni-card padding="0" spacing="0" v-for="(item,index) in props.hjTaskList" class="djhjList">
				<view class="djhjList_title">
					<view class="djhjList_text">检查项目</view>
					<view class="djhjList_righttext">{{item.item}}</view>
				</view>
				<view class="djhjList_title">
					<view class="djhjList_text">检查方式</view>
					<view class="djhjList_righttext">{{item.assessmentCriteria}}</view>
				</view>
				<view class="djhjList_title">
					<view class="djhjList_text">检查内容</view>
					<view class="djhjList_righttext">{{item.assessmentContent}}</view>
				</view>
				<view class="djhjList_title">
					<view class="djhjList_text">检查结果</view>
					<view class="djhjList_righttext" :class="item.assessmentResult=='不合格'? 'djhjList_redtext' : item.assessmentResult=='待检' ? 'djhjList_bluetext':'djhjList_greentext'">{{item.assessmentResult}}</view>
				</view>
				<view class="djhjList_title" v-if="item.assessmentResult=='不合格'">
					<view class="djhjList_text">原因</view>
					<view class="djhjList_righttext">{{item.resultContent}}</view>
				</view>
			</uni-card>
			<!-- 图片 -->
			<view class="image_upload" v-if="props.imageUrl.length!=0">
				<uni-card>
					<uni-section title="图片" type="line"></uni-section>
					<view class="img_upload">
						<uni-file-picker :readonly="true" limit="4" :modelValue="showImage(props.imageUrl)"></uni-file-picker>
					</view>
				</uni-card>
			</view>
		</view>
		<view v-else>
			<dataEmpty></dataEmpty>
		</view>
		<!-- 开始质控 -->
		<view class="finish_button"
			v-if="props.taskStatus!='7004' && props.taskStatus!='7007' && props.taskStatus!='7008' && props.taskStatus!='7009' && props.taskStatus!='7010'">
			<button class="button" @click="startTask()">开始质控</button>
		</view>
	</view>
</template>

<script setup>
import { reactive } from "vue";
import {onLoad,onShow,onUnload,onPullDownRefresh} from "@dcloudio/uni-app";
import http from '@/utils/request';
import dataEmpty from "@/pages/ypczk/zkTask/zkTaskDetail/noStartTaskDetail.vue";
import {uploadImageModelValue} from '@/pages/controls/image/OssService'
import { UrlPath } from "@/utils/commonuni"

const props = defineProps({
	// 环境质控详情列表
	hjTaskList:  Array,
	// 图片url
	imageUrl:Array,
	// 环境质控不合格数
	hjbhg: Number,
	// 创建人
	creatorName:String,
	// 任务状态
	taskStatus:String
});

// 开始质控
const startTask=()=>{
	uni.$emit("startTaskInfo")
}

// 显示图片
const showImage=(urlStr)=>{
	const filesArray = urlStr.split(',');
	const rawPrefix = UrlPath.getBaseUrl()
	const prefix = rawPrefix.replace(/\/+$/, '');
	const result = filesArray.map(url => {
		return prefix + url;
	});
	return result;
}
const wcnumber = () =>{
	let wcNumber = 0;
	props.hjTaskList.forEach(a =>{
		if (a.assessmentResult != '待检') wcNumber ++;
	})
		return wcNumber;
}
</script>

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