【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>
相关推荐
翻滚吧键盘6 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹12 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军33 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试