pms-app/pages/inventory/index.vue

<template>
	<z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
		<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
		<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
		<template #top>
			<uni-row class="search-row flex-row align-center justify-between">
				<uni-col :span="18">
					<view class="search-bar" @click="searchList">
						<text>{{ $t('inventory.searchHint') }}</text>
					</view>
				</uni-col>
				<uni-col :span="6" class="flex-row justify-end">
					<button class="mini-btn" type="primary" size="mini" @click="searchList">
						{{ $t('operation.search') }}
					</button>
				</uni-col>
			</uni-row>
		</template>
		<view>
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="field-row">
					<text class="field-label">{{ $t('inventory.materialName') }}</text>
					<text class="field-value">{{ item.materialName }}</text>
				</view>
				<view class="field-row">
					<text class="field-label">{{ $t('inventory.costCenter') }}</text>
					<text class="field-value">{{ item.costCenter }}</text>
				</view>
				<view class="field-row">
					<text class="field-label">{{ $t('inventory.quantity') }}</text>
					<text class="field-value">{{ item.quantity }}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getInventoryList
	} from "@/api/inventory";

	// const materialName = ref('')
	// const placeholderStyle = ref('color:#797979; font-weight:500; font-size:16px')
	// const inputStyles = reactive({
	//   backgroundColor: '#FFFFFF',
	//   color: '#797979',
	// })
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		getInventoryList({
			pageNo,
			pageSize,
			...searchParams.value,
		}).then(res => {
			console.log('res', res)
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete(res.data.list);
		}).catch(() => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}

	// 跳转到高级搜索页
	const searchList = () => {
		// paging.value.reload()
		uni.navigateTo({
			url: '/pages/inventory/search/index?params=' + JSON.stringify(searchParams.value ?? '{}')
		})
	}

	const searchParams = ref()
	onMounted(() => {
		// 接收从高级搜索页返回的数据
		uni.$on('search', (params) => {
			searchParams.value = params
			paging.value.reload()
		})
	})
</script>

<style lang="scss" scoped>
	.page {
		box-sizing: border-box;
		padding: 10px !important;
	}

	.search-row {
		height: 35px;
		width: 100%;
		background: #F3F5F9;
		z-index: 10;

		.mini-btn {
			height: 35px;
			line-height: 35px;
			width: calc(100% - 10px);
			margin-left: 10px;
		}
	}

	.search-bar {
		width: auto;
		height: 32px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background-color: white;
		border-radius: 4px;
		color: #939393;
		font-size: 12px;
	}

	.item {
		width: 100%;
		background: #FFFFFF;
		border-radius: 6px;
		margin-top: 10px;
		padding: 14px 20px;
		font-size: 14px;
		line-height: 20px;
		box-sizing: border-box;
	}

	.field-row {
		display: flex;
		align-items: flex-start;
		width: 100%;

		& + .field-row {
			margin-top: 8px;
		}
	}

	.field-label {
		flex: 0 0 72px;
		color: #000000;
		white-space: nowrap;
	}

	.field-value {
		flex: 1;
		min-width: 0;
		color: #000000;
		word-break: break-all;
		overflow-wrap: anywhere;
	}

	.item-module {
		width: 100%;
		height: 42px;
		box-sizing: border-box;
		padding: 10px 15px 10px 10px;
		border-radius: 6px 6px 0 0;
		background: linear-gradient(270deg, #FFFFFF 0%, #8EBEFF 100%);

		&.tobeFilled {
			background: linear-gradient(270deg, #FFFFFF 0%, #FFF0F0 100%);
		}

		.module-status {
			// min-width: 60px;
			height: 23px;
			padding: 0 6px;
			background: #FFEBEB;
			border-radius: 3px;
			border: 1px solid #FFFFFF;
			text-align: center;
			font-weight: 500;
			font-size: 16px;
			line-height: 23px;
			color: #E7000D;
		}
	}

	.item-content {
		width: 100%;
		height: calc(100% - 42px - 32px - 15px);
		box-sizing: border-box;
		padding: 15px 20px 15px 10px;

		font-weight: 500;
		font-size: 14px;
		color: #333333;
		line-height: 20px;
	}

	.item-title {
		width: 100%;
		margin-bottom: 15px;
	}

	.item-title-width {
		min-width: 70px;
	}
</style>