aiot-app/pages/equipment_ledger/components/Assign.vue

<template>
	<view class="assign-container">
		<u-popup :show="popShow" @close="close">
			<view class="choose-container" v-if="list.length > 0">
				<view class="container-title">当前设备您有以下工单待处理</view>
				<u-list height="750rpx" class="u-list">
					<u-list-item v-for="(item, index) in list" :key="index">
						<CardTime :time="item.createTime" />
						<KdCard :orderTitle="orderTitle(item.workOrderType)" :title="item.workOrderCode"
							@handleDetail="handleDetail" :status="true" :item="item"
							:type="getType(item.workOrderType)" />
					</u-list-item>
					<u-list-item v-if="list.length === 0">
						<view class="nodata"> 暂无数据 </view>
					</u-list-item>
				</u-list>
				<view class="container-button" @click="close">稍候处理</view>
			</view>
			<u-empty style="padding: 20rpx 0;" textSize="24rpx" text="暂无待处理工单" v-else></u-empty>
		</u-popup>
	</view>
</template>

<script>
	import {
		post,
		get,
		postJ
	} from '@/utils/api.js'
	import KdCard from '@/pages/home/components/KdCard/index.vue'
	import CardTime from '@/pages/home/components/CardTime.vue'
	export default {
		props:['qrContent','list'],
		components: {
			KdCard,
			CardTime
		},
		data() {
			return {
				popShow: false,
			}
		},

		methods: {
			open(code) {
				this.popShow = true
				this.equiCode = code
			},
			close() {
				this.popShow = false
			},
			getType(workOrderType) {
				switch (workOrderType.code) {
					case 1:
						return 'patrol'
						break;
					case 2:
						return 'maintenance'
						break;
					case 3:
						return 'repair'
						break;
					default:
						break;
				}
			},
			orderTitle(workOrderType) {
				switch (workOrderType.code) {
					case 1:
						return '巡点检工单'
						break;
					case 2:
						return '保养工单'
						break;
					case 3:
						return '维修工单'
						break;
					default:
						break;
				}
			},
			handleDetail(item) {
				let url = ''
				switch (item.workOrderType.code) {
					case 1:
						url = '/pages/tour_tally/detail/detail?'
						break;
					case 2:
						url = '/pages/maintenance/detail/detail?'
						break;
					case 3:
						url = '/pages/maintain_service/detail/detail?'
						break;
					default:
						break;
				}
				if (!url) return

				url += `id=${item.id}&workOrderCode=${item.workOrderCode}&BizType=${item.bizType}`
				
				if (item.status.descp == '执行中') {
					url += `&qrContent=${this.qrContent}`
				}
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choose-container {
		max-height: 70vh;
		background: #e7e7e7;

		.container-title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #000;
			font-weight: bold;
		}

		.container-scroll {
			width: 100%;
			max-height: 55vh;

			// background:#fff;
			.kd-card {
				font-size: 28rpx;
				color: #333;
				background-color: #fff;
				border-radius: 8rpx;
				word-break: break-all;
				width: 98%;
				background: #fff;
				margin: 0 auto 16rpx;

				.status {
					font-weight: normal;
				}

				.card-title {
					font-weight: bold;
				}

				.card-footer,
				.card-title {
					display: flex;
					justify-content: space-between;
					padding: 12rpx 16rpx;
				}

				.card-body {
					padding: 0 28rpx;
					border-top: 1rpx solid #f2f2f2;
					border-bottom: 1rpx solid #f2f2f2;

					.card-col {
						padding: 8rpx 0;
						display: flex;

						// line-height: ;
						.label {
							display: inline-block;
							width: 6em;
							color: #555;
							text-align: right;
							margin-right: 14rpx;
						}

						.content {
							flex: 1;
						}
					}
				}
			}
		}

		.container-button {
			width: 180rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border: 1rpx solid #333;
			border-radius: 10rpx;
			margin: 16rpx auto;
			color: #333;
			text-align: center;
		}
	}
</style>