【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>
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript