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

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

从工单列表项中点击详情

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

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

复制代码
<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>
相关推荐
时雨__27 分钟前
利用AndVX6开发流程图——问题总结
前端
云枫晖1 小时前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_1 小时前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
春秋半夏1 小时前
vue2二次封装el-select支持collapse-tags-tooltip
前端
昔人'1 小时前
css`scrollbar-gutter`防止滚动条可见性变化时发生布局偏移
前端·css
掘金安东尼1 小时前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
小叫花子1 小时前
用 UniApp 开发微信小程序蓝牙通信功能
前端
勤奋菲菲1 小时前
深入理解HTML文本标签:构建网页内容的基础
前端·html
昔人'1 小时前
html`<mark>`
前端·javascript·html