pms-app/components/materials/view.vue

<template>
	<uni-drawer ref="drawerRightRef" mode="right" :mask-click="false" @change="change($event,'drawerRightRef')">
		<z-paging class="page-nopadding" ref="paging" style="top: 0px;" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="page-top justify-center">
					{{$t('workOrder.materialDetails')}}
				</view>
			</template>
			<view class="page-list">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="item-content flex-row align-center justify-between bold">
						<view class="item-title flex-row align-center">
							<span>{{$t('operationRecordFilling.belongToTeam')}}:</span>
							<span>{{item.orgName}}</span>
						</view>
					</view>
				</view>

			</view>
			<!-- 如果需要使用页脚，请使用slot="bottom"slot节点不支持通过v-if或v-show动态显示/隐藏，若需要动态控制，可将v-if添加在其子节点上 -->
			<template #bottom>
				<button style="border-radius: 0;" type="primary"
					@click="closeDrawer('drawerRightRef')">{{$t('operation.back')}}</button>
			</template>
		</z-paging>
	</uni-drawer>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import dayjs from 'dayjs'
	import {
		getMaterialDetail,
	} from '@/api/material.js';
	import {
		getUserId,
		getDeptId
	} from "@/utils/auth.js"

	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		getMaterialDetail({
			pageNo,
			pageSize,
			workOrderId: workOrderId,
			bomNodeId: bomNodeId
		}).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);
		})
	}



	const drawerRightRef = ref(null)
	const change = (e, ref) => {
		console.log(e, ref)
	}
	const openDrawer = (ref) => {
		drawerRightRef.value.open()
	}
	const closeDrawer = (ref) => {
		drawerRightRef.value.close()
	}
	defineExpose({
		openDrawer,
		closeDrawer
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-drawer__content) {
		width: 100% !important;
		min-width: 375px !important;
	}
</style>