pms-app/pages/material/repair-view.vue

<template>
	<z-paging class="page material" ref="paging" v-model="dataList" @query="queryList">
		<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
		<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
		<view class="paging-list">
			<view class="material-item" v-for="(item,index) in dataList">
				<view class="item-content flex-row align-center justify-between">
					<view class="item-title">
						<span class="item-title-width">{{$t('workOrder.materialName')}}:</span>
					</view>
					<view class="item-title">
						<span>{{item.materialName || item.name}}</span>
					</view>
				</view>
				<view class="item-content flex-row align-center justify-between">
					<view class="item-title">
						<span class="item-title-width">{{$t('workOrder.materialCode')}}:</span>
					</view>
					<view class="item-title">
						<span>{{item.materialCode}}</span>
					</view>
				</view>
				<view class="item-content flex-row align-center justify-between">
					<view class="item-title">
						<span class="item-title-width">{{$t('workOrder.unit')}}:</span>
					</view>
					<view class="item-title">
						<span>{{item.unit}}</span>
					</view>
				</view>
				<view class="item-content flex-row align-center justify-between">
					<view class="item-title">
						<span class="item-title-width">{{$t('workOrder.consumptionQuantity')}}:</span>
					</view>
					<view class="item-title">
						<span>{{item.quantity}}</span>
					</view>
				</view>
				<view class="item-content flex-row align-center justify-between">
					<view class="item-title">
						<span class="item-title-width">{{$t('workOrder.inventoryType')}}:</span>
					</view>
					<view class="item-title">
						<span>{{item.materialSource}}</span>
					</view>
				</view>
			</view>
		</view>
	</z-paging>

</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getRepairMaterialDetail,
		getMaterialDetail
	} from '@/api/material'
	import dayjs from 'dayjs'
	//  --- 列表 ---start---
	const name = ref('')
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		console.log('quewryList', optionParams.value.bomId)
		if (optionParams.value.bomId) {
			getRepairMaterialDetail({
				pageNo,
				pageSize,
				// workOrderId: optionParams.value.workOrderId,
				bomId: optionParams.value.bomId
			}).then(res => {
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				paging.value.complete(res.data.list);
			}).catch(res => {
				// 如果请求失败写paging.value.complete(false);
				// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				paging.value.complete(false);
			})
		}else{
			paging.value.complete(materialList.value);
		}
	}
	const onSearch = () => {
		paging.value.reload()
	}
	const formatDate = (time) => {
		return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	}
	// -- end --
	const optionParams = ref({})
	onLoad((option) => {
		optionParams.value = option
		console.log('onLoad' + optionParams.value)
	})
	const materialList = ref([])
	onMounted(() => {
		// 监听子页面提交的事件
		console.log('onMounted')
		uni.$on('material-view', (data) => {
			console.log('接收到子页面数据:', data);
			materialList.value = data
			paging.value.reload()
		});
	})
	onBeforeUnmount(() => {
		// 移除监听
		console.log('onBeforeUnmount')
		uni.$off('material-view');
	})

	const navigatorBack = () => {
		uni.navigateBack();
	};
</script>
<style lang="scss" scoped>
	@import "@/style/work-order-detail.scss";

	.material-item {
		box-sizing: border-box;
		padding: 20px;
		background-color: #fff;
		margin-bottom: 5px;
	}
</style>