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

<template>
	<view>

		<view class="card_box" v-for="(item, index) in list" :key="index" @click="openDetails(item,'detail')">
			<view class="item_box rx-bc">
				<view class="orderId">{{item.code}} </view>
			</view>

			<view class="item_box rx-bc">
				<view class="item_one rx-sc">
					<view class="lable">工单编码：</view>
					<view>{{item.repairCode}}</view>
				</view>

			</view>

			<view class="item_box rx-bc">

				<view class="item_one  rx-sc">
					<view>工单名称：</view>
					<view>{{item.repairName}}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one  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 rx-sc">
					<view>固资编码：</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  rx-sc">
					<view class="lable">设备编码：</view>
					<view>{{item.deviceList.filter((val) => val.deviceCode).map((val) => val.deviceCode).toString()}}
					</view>
				</view>

			</view>

			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view>领用部门：</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>使用部门：</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>使用时间：</view>
					<view>{{item.usageTime}}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">状态：</view>
					<view>{{statusOpt[item.status]}}</view>
				</view>

			</view>




		</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>
	.card_box {
		width: 750rpx;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;



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

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

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}

			.status {
				font-size: 26rpx;

				&.FAA {
					color: #FFA929;
				}
			}


			/deep/ .uni-checkbox-input-checked {
				background-color: $theme-color !important;
				border-color: $theme-color !important;
			}
		}
	}
</style>