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

<!-- 首页-组长 -->
<template>
	<view class="view_container leaderIndex">
		<!-- 头部 -->
		<view class="leaderIndex_header">
			<view class="info">
				<image :src="pageData.headImg" mode="center" class="headImg"></image>
				<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" mode="aspectFit" 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 v-if="pageData.taskList.length!=0">
			<uni-card :isShadow="false" v-for="(item,index) in pageData.taskList" padding="0" spacing="0" class="leaderIndex_list">
				<view @click="showDetail(item)">
					<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>
				<view class="button_group">
					<view class="button_sign" @click="signTask(item)">签收</view>
					<view class="button_start" @click="startTask(item)">开始质控</view>
				</view>
			</uni-card>
			<!-- 更多点击查看全部 -->
			<view class="seeAll" v-if="pageData.taskList.length!=0">
				—————   更多点击查看全部   —————
			</view>
		</view>
		<view v-else class="empty_data">
			<image src="@/static/empty_data.png" mode="aspectFit"></image>
		</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 {ystabbar} from '@/pages/index/tabShow.js';
import { ref,reactive } from "vue";
import {onLoad,onShow,onUnload,onPullDownRefresh} from "@dcloudio/uni-app";

const pageData=reactive({
	// 任务编号
	taskId:'',
	headImg:'/static/header.png',
	userName:'',
	taskNum:0,
	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
	taskId:''
})

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

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

// 签收任务/开始质控对话框确定事件
const operatorDialogConfirm=()=>{
	if(pageData.popupMessage.title=='开始质控'){
		// 开始质控
		startFormData.taskId = pageData.taskId
		getStartTask()
	}else{
		// 签收
		signFormData.taskId=pageData.taskId
		getSignTask()
	}
	operatorDialog._value.close()
}

// 签收任务/开始质控对话框取消事件
const operatorDialogClose=()=>{
	operatorDialog._value.close()
}

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

// 切换显示与隐藏
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=()=>{
	uni.switchTab({
		url:'/pages/ypczk/zkTask/zkTaskList'
	})
}

// 存入taskData(taskId)
const setTaskId=(id)=>{
	uni.setStorageSync("saveTaskId",{taskId:id})
}

const showDetail=(e)=>{
	setTaskId(e.id)
	uni.navigateTo({
		url: '/pages/ypczk/zkTask/zkTaskDetail/detailsList'
	});
}

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

// 开始质控
const startTask=(e)=>{
	pageData.taskId=e.id
	if(e.isKszk==false){
		operatorDialog._value.open()
		pageData.popupMessage.title='开始质控'
		pageData.popupMessage.showMessage='是否确认开始质控任务？'
	}else{
		uni.navigateTo({
			url:'/pages/ypczk/zkTask/zkTask?taskId='+pageData.taskId
		})
	}
}

// 获取任务列表
const getTaskData=()=>{
	uni.showLoading({
		title: '',
		mask: true
	});
	http.get("app-api/index/findList").then(res=>{
		uni.hideLoading()
		pageData.taskList=res.data
		pageData.taskList.forEach(item=>{
			if(item.wcrq1!=null && item.wcrq2!=null){
				item.finishTime=item.wcrq1 +' ~ '+item.wcrq2
			}
			if(item.status=='7002'){
				// 7002待质控
				item.taskStatusIcon=statusIcon.daiIcon
			}else if(item.status=='7003'){
				// 7003质控中
				item.taskStatusIcon=statusIcon.zhiIcon
			}else{
				item.taskStatusIcon=statusIcon.wanIcon
			}
		})
	})
}

// 获取用户信息
const getUserInfo=()=>{
	try{
		const value=uni.getStorageSync("userInfo")
		pageData.userName = value.nickname
	}catch(e){
		//TODO handle the exception
	}
}

// 获取待质控数量
const getZkNumber=()=>{
	http.get("app-api/index/getZkNumber").then(res=>{
		pageData.taskNum=res
		if(res==0){
			uni.removeTabBarBadge({
				index:1
			})
		}else{
			uni.setTabBarBadge({
				index:1,
				text:res.toString()
			})
		}
	})
}

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

onPullDownRefresh(()=>{
	getTaskData()
	setTimeout(uni.stopPullDownRefresh(),1000)
})
</script>


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