【Vue】【uni-app】实现工单列表项详情页面

叶茂林

发布于 2023-11-30 09:31:47

4930

发布于 2023-11-30 09:31:47

文章被收录于专栏：叶子的开发者社区

这次主要实现的是一个工单详情页面

从工单列表项中点击详情

跳转到工单详情页面，这个详情页面就是这次我们要实现的页面，并可以通过点击这个关闭按钮返回到工单列表页面

首先是在我们原有的工单列表页面的按钮增加一个点击跳转

<button size="mini" type="primary" @click="goToDetail(item)">详情</button>

跳转函数导航到新页面，这里要传递参数过去，因为得知道要展示哪个工单列表项的详情，一开始是想传递参数过去的，因为这个列表项不是基本数据类型，所以不能直接传递，比较复杂，后来我就放弃了这种方法，改用全局变量的方法，用uni.setStorageSync把列表项存起来

			goToDetail(item) {
				uni.setStorageSync('workOrderDetailItem',item)
				uni.navigateTo({
					url: '/pages/WorkOrderManagement/WorkOrderDetail'
				})
			}

然后到新页面的加载中取出来

		onLoad(option) {
			this.item = uni.getStorageSync('workOrderDetailItem')
		},

然后是实现页面，这次的页面主要是一个布局的实现

<template>
	<navgation />
	<view class="right">
		<h2 class="section">工单详情</h2>
		<view class="section">
			<view class="block">
				<view>
					<text class="column">工单ID：</text>
					<text class="column">{{ item.ID }}</text>
				</view>
			</view>
			<view class="block">
				<view>
					<text class="column">工单标题：</text>
					<text class="column">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="block">
				<view>
					<text class="column">工单类型：</text>
					<text class="column">{{ item.kind }}</text>
				</view>
				<view>
					<text class="column">负责人ID：</text>
					<text class="column">{{ item.personID }}</text>
				</view>
				<view>
					<text class="column">关联养殖场ID：</text>
					<text class="column">{{ item.associateID }}</text>
				</view>
				<view>
					<text class="column">派发日期：</text>
					<text class="column">{{ item.dispatchDate }}</text>
				</view>
				<view>
					<text class="column">指定完成日期：</text>
					<text class="column">{{ item.taskDate }}</text>
				</view>
				<view>
					<text class="column">实际完成日期：</text>
					<text class="column">{{item.finishDate}}</text>
				</view>
			</view>
			<view class="block">
				<view style="display: flex;align-items: baseline;">
					<text class="column">工单内容：</text>
					<view style="width: 800rpx;height: 400rpx;background-color: #dcdcdc;"> <text>{{ item.content }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="block">
				<view>
					<text class="column">是否逾期：</text>
					<text class="column">{{ item.overdue }}</text>
				</view>
				<view>
					<text class="column">是否处理：</text>
					<text class="column">{{ item.state }}</text>
				</view>
			</view>
			<view class="block">
				<view>
					<text class="column">图片：</text>
				</view>
			</view>
		</view>
		<view class="section" style="align-items: baseline;">
			<text class="column">备注：</text>
			<view style="width: 500rpx;height: 300rpx;background-color: #dcdcdc;"> <text>{{ item.note }}</text></view>
		</view>
		<view class="section">
			<button type="primary" size="mini" @click="goback">关闭</button>
		</view>
	</view>
</template>

<script>
	import navigation from '../../components/navgation/navgation.vue';
	export default {
		data() {
			return {
				item: ''
			};
		},
		onLoad(option) {
			this.item = uni.getStorageSync('workOrderDetailItem')
		},
		methods: {
			goback() {
				uni.navigateTo({
					url: '/pages/WorkOrderManagement/WorkOrderManagement'
				})
			}
		}
	}
</script>

<style lang="scss">
	.right {
		margin-top: 40rpx;
		margin-left: 440rpx;
	}

	.section {
		display: flex;
		align-items: center;
		margin: 30rpx;
	}

	.block {
		width: 50%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		row-gap: 30rpx;
	}

	.column {
		margin: 20rpx;
		background-color: #dcdcdc;
	}

	button {
		border-radius: 20rpx;
	}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-11-29，如有侵权请联系 cloudcommunity@tencent.com 删除

app