aiot-app/pages/dispatchManage/taskWork/detail.vue

<template>
	<view class="maintenance-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="任务工单详情" @clickLeft="back"></uni-nav-bar>
		<view class="maintenance-wrapper">
			<view class="maintenance-content">
				<KdTabs v-model="active" :list="['基本信息']" />
				<scroll-view :scroll-y='true' class="kd-baseInfo" v-show="active === 0">
					<view class="kd-cell">
						<text class="kd-label">工单编号</text>
						<text class="kd-content">{{ info.code }}</text>
					</view>
					<template v-if="info.status === 0">
						<view class="kd-cell">
							<text class="kd-label">应开工时间</text>
							<text class="kd-content text-warning">{{ currentRow.planTimeStart }}</text>
						</view>
						<view class="kd-cell">
							<text class="kd-label" v-if="info.status === 0">应完成时间</text>
							<text class="kd-content text-warning">{{ currentRow.planTimeEnd }}</text>
						</view>
					</template>
					<template v-else>
						<view class="kd-cell">
							<text class="kd-label">开始时间</text>
							<text class="kd-content text-warning">{{ currentRow.realStartTime }}</text>
						</view>
						<view class="kd-cell">
							<text class="kd-label">完成时间</text>
							<text class="kd-content">{{ currentRow.realEndTime }}</text>
						</view>
					</template>



					<view class="kd-cell">
						<text class="kd-label">计划名称</text>
						<text class="kd-content">{{ currentRow.planName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">负责部门</text>
						<text class="kd-content">{{ currentRow.responsibleDeptName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">负责人</text>
						<text class="kd-content">{{ currentRow.responsiblePersonName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">车辆号</text>
						<text class="kd-content">{{ currentRow.trakNumber }}</text>
					</view>

					<view class="kd-cell">
						<text class="kd-label">司机</text>
						<text class="kd-content">{{ currentRow.driverName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">司机电话</text>
						<text class="kd-content">{{ info.phone }}</text>
					</view>

					<view class="kd-cell">
						<text class="kd-label">任务类型</text>
						<text class="kd-content">{{getDict('logistic_delivery_type',info.taskType ) }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">备注</text>
						<text class="kd-content">{{ info.remark }}</text>
					</view>

				</scroll-view>
				<template>
					<template v-if="info.status === 0">
						<button class="btn-execute" type="primary" @click="handleExecute(1)">开始执行</button>
						<button class="btn-reassignment" type="primary" @click="handleAssign">转派</button>
					</template>
					<template v-else-if="info.status === 1">
						<button class="btn-execute" type="primary" @click="handleReport('update')">报工</button>
					</template>
					<button v-else-if="info.status === 2" class="btn-execute" type="primary"
						@click="handleReport('view')">查看报工详情</button>

				</template>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="您当前已超出计划完成时间，请填写原因" placeholder="请输入内容"
				:before-close="true" @close="handleClose" @confirm="timeoutCauseConfirm"></uni-popup-dialog>
		</uni-popup>

		<transfer ref="transferRef" @success="back" />


	</view>
</template>

<script>
	import transfer from './transfer.vue'
	import KdTabs from '@/components/KdTabs.vue'
	import {
		logisticlistcostGetByIdAPI,
		logistictraklistnoteUpdateAPI
	} from '@/api/pda/dispatchManage/index.js'
	export default {
		components: {
			KdTabs,
			transfer,

		},
		data() {
			return {
				currentRow: {},
				active: 0,
				info: {}
			}
		},
		onLoad(options) {
			this.currentRow = JSON.parse(options.item)
			// 详情
			this.getInfo()

		},
		computed: {
			getDict() {
				return (dictName, val) => {
					let find = this.currentRow.dictList[dictName].find(item => item[val]) || {}
					return find[val] ? find[val] : ''
				}
			}
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getInfo() {
				logisticlistcostGetByIdAPI(this.currentRow.id).then(res => {
					this.info = res
				})

			},
			handleExecute(status) {
				this.currentRow.status = status
				logistictraklistnoteUpdateAPI(this.currentRow)
				uni.showModal({
					title: `此工单执行成功`,
					content: '',
					confirmText: '确认',
					showCancel: false, // 是否显示取消按钮，默认为 true
					success: res => {
						if (res.confirm) {
							this.back()
						}
					}
				})
			},
			handleReport() {
				this.info.dictList = this.currentRow.dictList
				let jsonItem = JSON.stringify(this.info)
				uni.navigateTo({
					url: `/pages/dispatchManage/taskWork/reportDetail?item=${jsonItem}`
				})
			},
			handleAssign() {
				this.$refs.transferRef.open(this.currentRow)
			},
		}
	}
</script>

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

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 10vh;
	}

	.btn-sparepart {
		width: 450rpx;
		margin-top: 20rpx;
	}

	.btn-reassignment {
		color: $uni-color-primary;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.maintenance-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.maintenance-wrapper {
		position: relative;
		flex: 1;
	}

	.maintenance-content {
		padding-top: 40rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		line-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		justify-content: space-between;

		.kd-label {
			display: inline-block;
			width: 7em;
			font-weight: bold;
		}

		.kd-content {
			flex: 1;
			text-align: left;
			word-break: break-all;
		}
	}

	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;
		height: 70%;
	}

	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;

			view {
				position: relative;
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #747474;
				margin: 0 20rpx;
				background-color: rgba(215, 215, 215, 0.5);

				&.type—active {
					background-color: #1e7f35;
					color: #fff;
				}

				.count {
					position: absolute;
					top: -9px;
					right: -9px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 12px;
					background-color: red;
					color: #fff;
				}
			}
		}

		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.spare-parts {
		flex: 1;
		overflow: hidden;
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;

		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}

		.kd-cell {
			line-height: 60rpx;
		}

		.kd-cell:last-of-type {
			border-bottom: none;
		}

		.status-box {
			margin-right: 16rpx;
		}

		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;

			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}

			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}

	.apply-box {
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>