aiot-app/pages/maintenanceWorkorder/components/pickCard.vue

<template>

	<view class="content_box">
		<view class="list_box">
			<u-list>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_box" @click="openDetails(item,'detail')">
						<view class="item_box flex_between">
							<view class="rx-sc">
								<view class="round">{{Number(index)+1}}</view>
								<view class="orderId">{{item.code}} </view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce100 rx-sc">
								<view class="lable">工单编码：</view>
								<view>{{item.repairCode}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce100 rx-sc">
								<view class="lable">工单名称：</view>
								<view>{{item.repairName}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce100 rx-sc">
								<view class="lable">设备名称：</view>
								<view>{{item.deviceList.filter((val) => val.name).map((val) => val.name).toString()}}
								</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce100 rx-sc">
								<view class="lable">固资编码：</view>
								<view>
									{{item.deviceList.filter((val) => val.fixCode).map((val) => val.fixCode).toString()}}
								</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce100 rx-sc">
								<view class="lable">设备编码：</view>
								<view>
									{{item.deviceList.filter((val) => val.code).map((val) => val.code).toString()}}
								</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">领用部门：</view>
								<view>{{item.receivingDeptName}}</view>
							</view>
							<view class="item_one perce50 rx-sc">
								<view class="lable">领用人：</view>
								<view>{{item.recipientName}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">使用部门：</view>
								<view>{{item.useDeptName}}</view>
							</view>
							<view class="item_one perce50 rx-sc">
								<view class="lable">使用人：</view>
								<view>{{item.userName}}</view>
							</view>
						</view>
						<view class="item_box rx-bc">
							<view class="item_one perce50 rx-sc">
								<view class="lable">使用时间：</view>
								<view>{{item.usageTime}}</view>
							</view>
							<view class="item_one perce50 rx-sc">
								<view class="lable">状态：</view>
								<view>{{statusOpt[item.approvalStatus]}}</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-list-item v-if="list.length === 0">
					<view style='margin-top: 20vh;'>
						<u-empty iconSize='150' textSize='32' text='暂无工单'>
						</u-empty>
					</view>
				</u-list-item>

			</u-list>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},

		data() {
			return {
				outputSceneState: [{
						code: 1,
						label: '退供出库'
					},
					{
						code: 2,
						label: '调拨出库'
					},
					{
						code: 3,
						label: '销售出库'
					},
					{
						code: 4,
						label: '领用出库'
					},
					{
						code: 5,
						label: '报废出库'
					},
					{
						code: 6,
						label: '外协出库'
					},
					{
						code: 7,
						label: '委外出库'
					},
					{
						code: 8,
						label: '受托退货出库'
					},
					{
						code: 9,
						label: '仓库委外出库'
					},
					{
						code: 10,
						label: '采购退货出库'
					},
					{
						code: 11,
						label: '自选领用出库'
					},
					{
						code: 12,
						label: '配料出库'
					}
				],
				statusOpt: {
					0: '审核中',
					1: '审核通过',

				}
			}
		},
		methods: {


			openDetails(data, id) {
				data['pageType'] = 'detail'
				uni.navigateTo({
					url: `/pages/maintenanceWorkorder/sparepart/sparepart?data=${JSON.stringify(data)}`
				})
			}
		}

	}
</script>


<style lang="scss" scoped>
	.marginTop {
		border-top: 20rpx solid $page-bg;
	}

	// .content_box {
	// 	height: 100vh;
	// 	overflow: hidden;
	// 	display: flex;
	// 	flex-direction: column;
	// 	background-color: $page-bg;
	// }

	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 16rpx 0;

		.u-list {
			height: 100% !important;
		}
	}

	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;



			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce100 {
				width: 100%;
			}

			.perce50 {
				width: 50%;
			}
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
		}
	}

	.state {
		font-size: 28rpx;
		color: #7f7f7f;
		background: #f1f1f1;
		display: inline;
		padding: 2px 5px;
		border-radius: 10px;
	}
</style>