tqApp-webView/pagesMine/driverTask/module/item.vue

<template>
	<view class="box-container">
		<view class="box-head">
			<u-row>
				<u-col :span="6">
					{{renderItem(item,'taskName','--')}}
				</u-col>
				<u-col :span="6" style="align-items: flex-end;">
					<view class="tip"
						:class="{
							'bg-yellow': item.taskSts==0,
							'bg-red': item.taskSts==1,
							'bg-gray': item.taskSts==2,
						}"
					>
						{{renderItem(item,'taskStsName','--')}}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="box-body">
			<u-row>
				<u-col :span="12">
					
					<view class="item">
						<view class="label">车辆：</view>
						<view class="value primary">{{renderItem(item,'plate','--')}}</view>
					</view>
					<view class="item">
						<view class="label">部门：</view>
						<view class="value">{{renderItem(item,'deptName','--')}}</view>
					</view>
					
					<view class="item">
						<view class="label">司机：</view>
						<view class="value primary">{{renderItem(item,'driverName','--')}}, {{renderItem(item,'driverTel','--')}}</view>
					</view>
					
					<view class="item">
						<view class="label">计划开始时间：</view>
						<view class="value ">{{renderItem(item,'planStartTime','--')}}</view>
					</view>
					
					<view class="item">
						<view class="label">预计完工时间：</view>
						<view class="value">{{renderItem(item,'planEndTime','--')}}</view>
					</view>
					
					<view class="item">
						<view class="label">装料点：</view>
						<view class="value fw-700">{{renderItem(item,'loadAddr','--')}}</view>
					</view>
					<view class="item">
						<view class="label">卸料点：</view>
						<view class="value fw-700">{{renderItem(item,'unLoadAddr','--')}}</view>
					</view>					
				</u-col>				
			</u-row>
			
			<u-row>
				<u-col :span="6">
					<view class="link" @click="goViewRoute(item)">
						查看路线规划
					</view>
				</u-col>
				
				<u-col :span="6">
					<view class="link" @click="goHistory(item,'vehicle')">
						查看实际行驶路线
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="box-footer" v-if="current==0 && $hasPermi('mobile:index:mine:task:driverExTask')">
			<u-row style="justify-content: flex-end;">
				
				<u-col :span="12" style="padding: 20rpx 30rpx;" v-if="item.taskSts==0">
					<u-button type="primary" :plain="true" :custom-style="{
							width: '100%',
							height: '38px'
						  }"  @click="handleOper(item,1)">开始任务
					</u-button>
				</u-col>	
				
				<u-col :span="12" style="padding: 20rpx 30rpx;" v-if="item.taskSts==1">
					<u-button type="error" :plain="true" :custom-style="{
							width: '100%',
							height: '38px',
						  }"  @click="handleOper(item,2)">结束任务
					</u-button>
				</u-col>	
				
				<u-col :span="12" style="padding: 20rpx 30rpx;" v-if="item.taskSts==2">
					<u-button type="info" :disabled="true" :plain="true" :custom-style="{
							width: '100%',
							height: '38px',
						  }" >已完结
					</u-button>
				</u-col>	
				
			</u-row>
		</view>
		
	</view>
</template>

<script>
import { renderItem } from '@/utils/gdtq'
import {cancel} from '@/api/mine/driverTask.js'

export default {
	components: {
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		},
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {}
	},
	methods: {
		
		handleOper(item,type) {
			this.$emit('handleOper',item,type)
		},
		
		// 跳到历史轨迹
		goHistory(item,tabStyleType) {
			const {vehicleId,realStartTime,realEndTime} = item
			if(this.isNull(realStartTime) || this.isNull(realEndTime)) {
				this.$modal.msg('暂无实际任务时间！')
				return
			}
		   let params = {
		      tabStyleType
		   }
		   if (tabStyleType == 'vehicle') {
		      params.vehicleId = vehicleId
		   } 
		   
		   
		   let startTime = this.dayjs(realStartTime).format('YYYY-MM-DD HH:mm');
		   let endTime = this.dayjs(realEndTime).format('YYYY-MM-DD HH:mm');
		   params.time = [startTime,endTime]
			
			this.$store.dispatch('setParams',params)
			
			uni.navigateTo({
			  url: '/pagesMap/pastRoute/pastRoute',
			});
		  
		},
		goViewRoute(row) {
			const {routeId} = row
			uni.navigateTo({
			  url: `/pagesMap/viewRoute/viewRoute?id=${routeId}`,
			});
		}
	},
}
</script>

<style lang="scss" scoped>
	.box-container {
		background: #fff;
		margin: 20rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		.box-head {
			border-bottom: 1px solid #ddd;
			padding: 20rpx;
			font-weight: 700;
			
			.tip {
				width: 100rpx;
				height: 42rpx;
				line-height: 42rpx;
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				border-radius: 10rpx;
			}
		}
		.box-body {
			padding: 20rpx;
			.item {
				margin: 8rpx 4rpx;
				display: flex;
				.label {
					
				}
				.value {
					flex: 1;
				}
			}
		}
		.box-footer {
			// border-top: 1px solid #ddd;
			// padding: 20rpx;
		}
	}
	
	.primary {
		color: $uni-color-primary;
	}
	.fw-700 {
		font-weight: 700;
	}
	.bg-yellow {
		background: #DFD867;
	}
	.bg-red {
		background: #F40808;
	}
	.bg-gray {
		background: #B0B0B0;
	}
	.link {
		color: $uni-color-primary;
		text-decoration: underline;
		margin: 20rpx 0;
	}
</style>