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>
				<custom-nav-bar :left="true" title="地块管理">
					<template v-slot:right>
						<view class="fixed">
							<view align="right" class="iconfont icon-jia icon" v-hasPermi="['system:land:add']" @click="onAdd">
							</view>
						</view>
					</template>
				</custom-nav-bar>
				<!--搜索框-->
				<view class="search">
					<u-search placeholder="请输入地块名称/编号" @search="onSearchValue" @custom="onSearchValue"
						@clear="onSearchValue(null)" shape="square"></u-search>
					<uni-forms ref="form" :model="form" labelWidth="0px" style="margin-top: 5px;">
						<uni-forms-item label="" name="">
							<cxk-dropdown-tree :dataOptions="treeList" labelField="label" valueField="id"
								:defaultCheckedKeys="defaultCheckedKeys" @change="handleTreeChange"
								style="width: 78%;float: left;margin-right: 2px;"></cxk-dropdown-tree>
							<u-checkbox-group style="width: 20%;float: right;" icon-placement="left"
								@change="handleChange">
								<u-checkbox active-color="#35842E" label="查全部" name="all"></u-checkbox>
							</u-checkbox-group>
						</uni-forms-item>

					</uni-forms>
				</view>
				<u-gap height="1" bgColor="#F3F3F3"></u-gap>
				<view class="list-size">
					<view v-show="list.length > 0">地块数量：({{ list.length }}块)</view>
				</view>
			</template>
			<template #cell="{ item }">
				<view class="item-container">
					<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 style="margin-right: 5px;" v-hasPermi="['system:land:edit']">
							<u-button text="编辑" type="primary" plain plainFill @click="edit(item)"></u-button>
						</view>
					</view>
					<u-gap height="1" bgColor="#D2D2D2"></u-gap>
					<view style="display: flex;justify-content: space-between;align-items: center;"
						@click="onItemClick(item)">
						<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">
								<view class="flex-text-one">地块面积：</view>
								<view>{{item.landArea}}</view>
							</view>
							<view class="flex-text global-font-size-1" style="margin-top: 5px;">
								<view class="flex-text-one">负责人：</view>
								<view v-if="item.user && item.user.userName">{{item.user.userName}}</view>
							</view>
							<!-- <view class="flex-text global-font-size-1" style="margin-top: 5px;">
								<view class="flex-text-one">手机号码：</view>
								<view v-if="item.user && item.user.mobilePhone">{{item.user.mobilePhone}}</view>
							</view> -->
							<view class="flex-text global-font-size-1" style="margin-top: 5px;">
								<view class="flex-text-one">所属公司：</view>
								<view v-if="item.companyGroup && item.companyGroup.companyFullName">
									{{item.companyGroup.companyFullName}}
								</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>
	import {
		checkPermi
	} from "@/utils/permission"
	import store from "@/store"
	import plugin from "@/plugins"
	export default {
		data() {
			return {
				isFirst: true,
				user: store.state.user.user,
				windowHeight: null,
				defaultCheckedKeys: "",
				paging: null,
				form: null,
				list: [],
				all: false,
				treeList: [],
				companyGroupId: null,
				query: {
					companyGroupIds: "",
					landName: null
				},
				selectCompanyObj: {}
			}
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			let companyId = null;
			if (getApp().ijs.land) {
				companyId = getApp().ijs.land.companyGroup.companyId
			}
			this.getCompanyTree(companyId);
		},
		onShow() {
			if (this.paging != null) {
				this.$refs.paging.reload()
			}
			this.getListData();
		},
		methods: {
			/** 查询公司下拉树结构 */
			getCompanyTree(companyId) {
				const obj = {
					status: 0,
					delFlag: "0",
					companyTypes: [1, 2, 3],
				}
				store
					.dispatch("companyTreeSelect", obj)
					.then(res => {
						this.treeList = res.data;
						if (this.treeList && this.treeList.length) {
							if (companyId) {
								this.defaultCheckedKeys = companyId + "";
							} else {
								let companyList = this.treeList[0].children.filter(x => x.id != 100);
								if (companyList && companyList.length) {
									this.defaultCheckedKeys = companyList[0].id + "";
								}
							}
						}
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			getListData() {
				if (!checkPermi(["system:land:list"])) {
					plugin.modal.msgError("抱歉暂无权限")
					return
				}
				if (!this.query.companyGroupIds || this.query.companyGroupIds == "" || this.query.companyGroupIds ==
					"101") {
					return;
				}
				plugin.modal.loading("获取地块列表...")
				if (this.query.landName == null || this.query.landName == "") {
					delete this.query["landName"]
				}
				store
					.dispatch("getLandList", this.query)
					.then(res => {
						this.list = res.data;
						this.$refs.paging.complete(this.list)
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			onAdd() {
				if (!this.selectCompanyObj) {
					plugin.modal.msgError("请选择要添加地块的公司")
					return;
				}
				if (checkPermi(["system:land:add"])) {
					uni.navigateTo({
						url: "/pages/work/land/create-new?companyObj=" + encodeURIComponent(JSON.stringify(this
							.selectCompanyObj))
					})
				} else {
					plugin.modal.msgError("抱歉暂无权限")
				}
			},
			onItemClick(item) {
				uni.navigateTo({
					url: "/pages/work/land/index-detail?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			onSearchValue(e) {
				this.query.landName = e;
				this.getListData();
			},
			handleTreeChange(values, currentItem) {
				this.query.companyGroupIds = "";
				this.companyGroupId = values;
				this.isFirst = false;
				this.selectCompanyObj = currentItem;
				if (this.all) {
					this.getCompanyGroupIds();
				}
				this.query.companyGroupIds += values;
				this.getListData();
			},
			getCompanyGroupIds() {
				if (this.selectCompanyObj && this.selectCompanyObj.childrenKeys) {
					this.selectCompanyObj.childrenKeys.forEach(property => {
						if (property) {
							this.query.companyGroupIds += property + ",";
						}
					});
				}
			},
			edit(item) {
				if (checkPermi(["system:land:edit"])) {
					uni.navigateTo({
						url: "/pages/work/land/create-new?item=" + encodeURIComponent(JSON.stringify(item))
					})
				} else {
					plugin.modal.msgError("抱歉暂无权限")
				}
			},
			handleChange(e) {
				this.all = e && e.length ? true : false;
				this.query.companyGroupIds = "";
				if (this.all) {
					this.getCompanyGroupIds();
				}
				if (this.companyGroupId) {
					this.query.companyGroupIds += this.companyGroupId;
				}
				this.getListData();
			},
			// 缓存数据
			setStorage(type, data) {
				uni.setStorageSync(type, {
					userId: this.user.userId,
					data: data,
				});
			}
		}
	}
</script>

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

		.list {
			margin: 0px 10px;
		}

		.list-size {
			display: flex;
			padding: 5px 5px;
			background: white;
			justify-content: center;
		}

		.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>