pms-app/pages/ledger/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">
					<uni-easyinput
            v-model="keywords"
            :styles="inputStyles"
            :placeholderStyle="placeholderStyle"
						:placeholder="$t('common.searchHint')" />
				</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 flex-row" v-for="(item, index) in dataList" :key="index">
				<!-- 当数据存在图片时显示，否则使用默认图片 -->
				<image v-if="item.picUrl" :src="item.picUrl" style="width: 48px; height: 48px; margin-right: 20px"
					@click="previewImage(item.picUrl)" />
				<image v-else src="~@/static/ledger/label.png" style="width: 48px; height: 48px; margin-right: 20px"
					@click="previewImage('')" />
				<uni-row class="flex-row flex-wrap">
					<!-- 设备名称 -->
					<uni-col :span="24">
						{{ $t('statusChange.deviceName') + ': ' + item.deviceName }}
					</uni-col>
					<!-- 设备代码 -->
					<uni-col :span="24" style="margin-top: 5px">
						{{ $t('statusChange.assetCode') + ': ' + item.deviceCode }}
					</uni-col>
					<!-- 设备状态 -->
					<uni-col :span="24" style="margin-top: 5px">
						{{ $t('ledger.deviceStatus') + getStatusName(item.deviceStatus) }}
					</uni-col>
          <uni-col class="flex-row" :span="24" style="justify-content: end; margin-top: 5px; margin-right: 10px">
            <button class="item-button" size="mini" plain="true" @click="viewDetail(item)">
              {{ $t('operation.view') }}
            </button>
          </uni-col>
				</uni-row>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import {
		useDataDictStore
	} from "@/store/modules/dataDict";
	import {
		getDeviceLedgerList
	} from "@/api/ledger";

	const keywords = 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) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		getDeviceLedgerList({
			pageNo,
			pageSize,
      commonParam: keywords.value
		}).then(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()
	}

	const viewDetail = (item) => {
	  uni.navigateTo({ url: '/pages/ledger/detail/index?id=' + item.id })
	}

	onNavigationBarButtonTap(() => {
		uni.navigateTo({
			url: '/pages/ledger/form/index'
		}) // 跳转表单页面新增台账
	})

	const deviceStatusList = ref([])
	// 根据状态code获取名称
	const getStatusName = (code) => {
		for (const item of deviceStatusList.value) {
			if (item.value === code) {
				return item.label
			}
		}
	}

	// 点击预览大图
	const previewImage = (url) => {
		uni.previewImage({
			urls: [url || '../../static/ledger/label.png']
		})
	}

	const {
		getDataDictList
	} = useDataDictStore()
	onMounted(async () => {
		// 获取设备状态字典
		deviceStatusList.value = getDataDictList('pms_device_status')
		uni.$once('update', () => searchList())
	})
</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;
		}
	}

	.item {
		width: auto;
		background: #FFFFFF;
		border-radius: 6px;
		margin-top: 10px;
		font-size: 14px;
		padding: 14px;
	}

	.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-title-width {
		min-width: 70px;
	}

	.item-title-bg {
		background: linear-gradient(270deg, #FFFFFF 0%, #8EBEFF 100%);
		border-radius: 6px 6px 0 0;
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}

	.item-title {
		font-size: 16px;
		color: #333333;
		flex: 1;
	}

	.item-status {
		padding: 4px 14px;
		background: #EBF5FF;
		border-radius: 3px;
		border: 1px solid #FFFFFF;
		color: #004098;
		font-size: 14px;
	}

	.item-button {
		background: #FFFFFF;
		border-radius: 3px;
		border: 1px solid #004098;
		color: #004098;
		margin-right: 0;
	}
</style>