aiot-app/pages/maintenance/check/detail.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="检查详情" @clickLeft="back">
			<!-- <view class="nav-right" slot="right">
        <view class="text-box" @click="$refs.PopSparePart.open()"
          >备件明细
        </view>
      </view> -->
		</uni-nav-bar>
		<view class="check-content">
			<view class="title">
				{{ equiName }}
				<text>{{ equiCode }}</text>
			</view>
			<view class="check-list">
				<CheckCard v-for="(item, index) in equipList" :item="item" class="mb20" :index="index" type="view"></CheckCard>
			</view>
		</view>
		<!-- <SparepartDetail
      ref="sparepartRef"
      numKey="usedNum"
      :list="stockOutApplyDetailList"
    /> -->
		<PopSparePart ref="PopSparePart" :workOrderCode="workOrderCode" :equipmentCode="equiCode"></PopSparePart>
	</view>
</template>

<script>
	import { getDeviceInfo, mattersChecked } from '@/api/myTicket/index.js'
	import PopSparePart from './components/PopSparePart.vue'
	import { post } from '@/utils/api.js'
	import SparepartDetail from '@/components/sparepart/detail.vue'
	import CheckCard from './components/CheckCard.vue'
	export default {
		components: { CheckCard, SparepartDetail, PopSparePart },
		data() {
			return {
				id: '',
				pageId: '',
				page: 1,
				equipList: [],
				stockOutApplyDetailList: [],
				isEnd: false,
				equiName: '',
				equiCode: '',
				workOrderId: '',
				workOrderCode: ''
			}
		},
		onLoad(options) {
			// this.pageId = options.id
			// this.equiName = options.equiName
			// this.equiCode = options.equiCode
			// this.workOrderId = +options.workOrderId
			// this.workOrderCode = options.workOrderCode
			this.id = options.id
			this.getList()
			// if (options.applyOrder && options.applyOrder !== 'null')
			//   this.getSparepartInfo(options.applyOrder, options.workOrderId)
		},
		onReachBottom() {
			if (this.isEnd) return
			this.page++
			this.getList()
		},
		methods: {
			getList() {
				getDeviceInfo({ id: this.id }).then(data => {
					this.equiName = data.name
					this.equiCode = data.code
					this.equipList = data.workItems.map(item => {
						return {
							...item,
							id: data.id,
							executeStatus: 1
						}
					})
				})
				// const { page } = this
				// post(this.apiUrl + `/workOrder/getEquipmentItemsListApp?size=10&page=${page}`, { planEquiId: +this.pageId, workOrderId: this.workOrderId }, true).then(res => {
				// 	if (res?.success) {
				// 		if (page === 1) {
				// 			this.equipList = res.data.records
				// 		} else {
				// 			this.equipList.push(...res.data.records)
				// 		}

				// 		this.isEnd = this.equipList.length >= res.data.total
				// 	}
				// })
			},
			getSparepartInfo(applyOrder, workOrderId) {
				post(this.apiUrl + '/stockOutApply/getdetails', {
					applyOrder,
					workOrderId
				}).then(res => {
					if (res.success) {
						this.stockOutApplyDetailList = res.data.stockOutApplyDetailList || []
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-content {
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		display: flex;
		flex-direction: column;
		.title {
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
		}
		.check-list {
			flex: 1;
			overflow: auto;
			padding: 0 30rpx 30rpx;
		}
		.footer {
			height: 100rpx;
			display: flex;
			border: 1rpx solid $j-primary-border-green;
			.btn {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				border-radius: 0;
				&.primary {
					background-color: $j-primary-border-green;
					color: #fff;
				}
			}
		}

		.mb20 {
			margin-bottom: 20rpx;
		}
	}
</style>