tcm-cloud-uin-app/pages/ypczk/index/leaderIndex.vue

<!-- 首页-组长 -->
<template>
	<view class="view_container leaderIndex">
		<!-- 头部 -->
		<view class="leaderIndex_header">
			<view class="info">
				<view class="info_img">
					<image :src="pageData.headImg" class="headImg"></image>
				</view>
				<text class="userName">{{pageData.userName}}</text>
				<image :src="eyeIcon.nowIcon" class="eyeIcon" @click="changeState('header')"></image>
			</view>
			<view class="slogan">
				<image src="/static/slogan_header_img.png" class="slogan_img"></image>
			</view>
		</view>
		<!-- 标题 -->
		<view class="leaderIndex_title">
			<view class="title_left">
				<text>任务列表</text>
				<!-- <uni-badge class="uni-badge-left-margin" :text="pageData.taskNum" /> -->
			</view>
			<view class="title_right" @click="toDetail">
				<text class="right_text">查看全部</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<!-- 列表 -->
		<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="pageData.popupMessage.title" :content="pageData.popupMessage.showMessage" @confirm="operatorDialogConfirm" @close="operatorDialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

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

const pageData=reactive({
	// 任务编号
	taskId:'',
	headImg:'/static/logo.png',
	userName:'王军',
	taskNum:2,
	taskList:[],
	// 对话框
	popupMessage:{
		// 标题
		title:'',
		// 提示内容
		showMessage:''
	}
})

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 signFormData=reactive({
	// 任务id
	id:''
})

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

// 定义签收任务/开始质控对话框
const operatorDialog=ref()

// 签收任务/开始质控对话框确定事件
const operatorDialogConfirm=()=>{
	if(pageData.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 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("跳转到任务详情")
	uni.switchTab({
		url:'/pages/ypczk/zkTask/zkTaskList'
	})
}

// 签收
const signTask=(e)=>{
	console.log("签收")
	pageData.taskId=e.id
	operatorDialog._value.open()
	pageData.popupMessage.title='签收'
	pageData.popupMessage.showMessage='是否确认签收任务？'
}

// 开始质控
const startTask=(e)=>{
	console.log("开始质控")
	pageData.taskId=e.id
	operatorDialog._value.open()
	pageData.popupMessage.title='开始质控'
	pageData.popupMessage.showMessage='是否确认开始质控任务？'
}

// 获取任务列表
const getTaskData=()=>{
	http.get("app-api/index/findList").then(res=>{
		console.log(res)
		pageData.taskList=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
			}
		})
		console.log(pageData.taskList)
	})
}

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

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


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