jsy-app/pages/work/land/index.vue

<template>
	<view class="index-container" :style="{ height: `${windowHeight}px` }" @touchmove.stop.prevent="() => {}">
		<z-paging ref="paging" use-virtual-list @query="getListData" bg-color="#F3F3F3" :loading-more-enabled="false">
			<template #top>
				<!--搜索框-->
				<view class="search">
					<u-search placeholder="请输入地块名称/编号" @search="onSearchValue" @custom="onSearchValue"
						@clear="onSearchValue(null)" shape="square"></u-search>
				</view>
			</template>
			<template #cell="{ item }">
				<view class="item-container" @click="onItemClick(item)">
					<view style="display: flex; align-items: center; justify-content: space-between;">
						<view class="flex-text" style="margin: 15px;">
							<view class="flex-text-one" style="color: black;">地块编号：</view>
							<view>{{item.landNum}}</view>
						</view>
						<view style="margin-right: 10px;">
							<u-tag text="启用" type="success" v-if="item.status == 0" plain plainFill></u-tag>
							<u-tag text="禁用" type="error" v-if="item.status == 1" plain plainFill></u-tag>
						</view>
					</view>
					<u-gap height="1" bgColor="#D2D2D2"></u-gap>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view class="data">
							<view class="flex-text global-font-size-1">
								<view class="flex-text-one">地块名称：</view>
								<view>{{item.landName}}</view>
							</view>
							<view class="flex-text global-font-size-1" style="margin-top: 5px;">
								<view class="flex-text-one">负责人：</view>
								<view>{{item.userName}}</view>
							</view>
							<view class="flex-text global-font-size-1" style="margin-top: 5px;">
								<view class="flex-text-one">手机号码：</view>
								<view>{{item.mobilePhone}}</view>
							</view>
						</view>
						<view>
							<view v-hasPermi="['land:land:query']" style="margin-right: 10px;">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onShow,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app"
	import {
		checkPermi
	} from "@/utils/permission"
	import store from "@/store"
	import plugin from "@/plugins"
	const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
	const paging = ref(null)
	const query = ref({
		landName: null
	})
	const list = ref([]);
	onNavigationBarButtonTap(e => {
		//如果点击了添加地块
		if (e.index == 0) {
			if (checkPermi(["system:land:add"])) {
				uni.navigateTo({
					url: "/pages/work/land/create-new"
				})
			} else {
				plugin.modal.msgError("抱歉暂无权限")
			}
		}
	})
	onShow(() => {
		if (paging.value != null) {
			paging.value.reload()
		}
	})
	//获取列表数据
	function getListData() {
		if (!checkPermi(["system:land:list"])) {
			plugin.modal.msgError("抱歉暂无权限")
			return
		}
		plugin.modal.loading("获取地块列表...")
		if (query.value.landName == null || query.value.landName == "") {
			delete query.value["landName"]
		}
		store
			.dispatch("getLandList", query.value)
			.then(res => {
				list.value = res.data;
				paging.value.complete(list.value)
			})
			.catch(error => {
				plugin.modal.msgError(error)
			})
			.finally(() => {
				plugin.modal.closeLoading()
			})
	}
	//跳转到详情
	function onItemClick(item) {
		if (!checkPermi(["land:land:query"])) {
			plugin.modal.msgError("抱歉暂无权限")
			return
		}
		uni.navigateTo({
			url: "/pages/work/land/index-detail?item=" + encodeURIComponent(JSON.stringify(item))
		})
	}

	//当用户搜索了之后
	function onSearchValue(keyword) {
		query.value.landName = keyword;
		getListData();
	}
</script>

<style lang="scss">
	.index-container {
		height: 100%;
		background-color: #f3f3f3;

		.list {
			margin: 0px 10px;
		}

		.search {
			background-color: white;
			padding: 10px;
		}

		.item-container {
			margin: 10px 10px;
			background-color: white;
			padding-bottom: 10px;
			border-radius: 10px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
		}

		.flex-text {
			display: flex;
			align-items: center;

			.flex-text-one {
				color: #939393;
				font-weight: bold;
			}
		}

		.data {
			margin: 10px 20px;
		}
	}
</style>