【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>
相关推荐
树上有只程序猿18 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥24 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸25 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin27 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊32 分钟前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆41 分钟前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术1 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git