PropertyApp/pages/residential/residential.vue

<template>
	<view>
		<!-- 修改 -->
		<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 40rpx 10rpx;">
				<u-form label-width="150" :model="form">
					<u-form-item label="小区名称" :required="true"><u-input v-model="form.name" /></u-form-item>
					<u-form-item label="所属机构" :required="true">
						<u-input type="select" disabled @click="operaType=1;agencypopupShow=true" v-model="form.agencyName" />
					</u-form-item>
					<u-form-item label="负责人" ><u-input v-model="form.personName" /></u-form-item>
					<u-form-item label="联系电话" ><u-input v-model="form.personTel" /></u-form-item>
				</u-form>
				<view @click="submit" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
					提交
				</view>
			</view>
		</u-popup>
		<!-- 筛选标签条 -->
		<view class="cu-bar bg-white flex" style="z-index: 100;width: 100%;position: fixed;top: -2rpx;">
			<view class="u-line-1" @click="showDown(index)" v-for="(item,index) in filterMenu" :key="index" style="width: 20%;text-align: center;height: 100%;">
				<text v-text="data[index]==''?item:data[index]" :class="data[index]==''?'':'text-red'"></text>
				<u-icon v-if="index!=3" name="arrow-down-fill" size="20" style="padding-left: 10rpx;"></u-icon>
				<text class="cuIcon-filter padding-left-10" v-else></text>
				<u-badge :offset="[10, 8]" v-if="index==3" size="mini" type="error" :count="filterCount"></u-badge>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view style="margin-top: 110rpx;">
				<card @delItem="delItem" :list="list"></card>
			</view>
		</mescroll-body>
		<!-- 所属机构 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="agencypopupShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="agencyKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(searchList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="agencyConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in searchList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider v-if="searchList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<!-- 物业名称筛选 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="estateShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="estateKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(searchList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="estateComfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in searchList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider v-if="searchList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		<!-- 地区选择器 -->
		<u-picker  @confirm="regionConfirm"  mode="region" v-model="regionShow"></u-picker>
		
		<!-- 筛选 -->
		<u-modal :show-cancel-button="true" cancel-text="重置"   @cancel="reset" @confirm="filterConfirm" title="筛选" :mask-close-able="true" v-model="filterShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150" :model="params" ref="uForm">
					<u-form-item label="小区名"><u-input v-model="params.name" /></u-form-item>
					<!-- <u-form-item :border-bottom="false" label="门牌号"><u-input v-model="params.houseNumber" /></u-form-item> -->
				</u-form>
			</view>
		</u-modal>
		
		<!-- 添加按钮 -->
		<add-btn @click.native="add"></add-btn>
		<!-- 通知alert -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import card from "./card.vue"
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import util from "../../utils/util";
	let that;
	export default {
		components:{
			card
		},
		mixins:[MescrollMixin],
		data() {
			return {
				//新增修改详情弹窗
				agencypopupShow:false,
				form:{},
				operaType:0,

				//顶部菜单栏
				filterMenu: ["地区","归属","物业名称","筛选"],
				data:['','','',''],
				
				//地区
				regionShow:false,
				areaValue:'',
				
				//底部弹出框
				popupShow:false,
				searchList:[],
				//筛选框
				filterShow:false,
				filterCount:0,
				
				// 列表数据
				params:{},
				agencyKeyword:'',
				
				//小区
				estateShow:false,
				estateKeyWord:'',
				list: [],
				downOption: { 
					use: true,
					auto: false
				},
				upOption: {
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 5, 
					empty: {
						tip: '暂无相关数据'
					}
				},
				
			}
		},
		onLoad(){
			that=this
			this.getAgencyList()
		},
		onShow() {
			if (this.canReset) {
				this.mescroll.resetUpScroll()
			}
			this.canReset=true
		},
		watch:{
			agencyKeyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.searchList=[]
					let params = {
						isSelect: true,
						regionArea: that.areaValue,
						agencyName: that.agencyKeyword
					}
					this.getAgencyList(params)
				}, 500)
			},
			estateKeyWord(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.residentialList=[]
					let params={
						agencyId:that.params.agencyId,
						estatePidName:that.estateKeyWord
					}
					that.getResidentailList(params)
				}, 500)
			},
		},
		methods: {
			/**
			 * 获取筛选的条件数
			 */
			getFilterCount(){
				let n=0
				if (!this.$isEmpty(this.params.agencyId)) {
					//机构
					n++
				}
				if (!this.$isEmpty(this.params.estatePid)) {
					//物业
					n++
				}
				if (!this.$isEmpty(this.params.name)) {
					//小区名
					n++
				}
				this.filterCount=n
			},
			/**
			 * 下拉回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},1500)
			},
			/**
			 * 上拉回调
			 * @param {Object} mescroll
			 */
			upCallback(mescroll) {
				let params=this.params
				params.current=mescroll.num
				params.size=mescroll.size
				this.getFilterCount()
				console.log(111)
				try{
					this.$api.residential.pageBycondition(params).then(res=>{
						console.log(res)
						let data=res.data.records
						// let data=res.list
						let length=data.length
						let total=res.data.total
						// let total = res.list.length
						mescroll.endBySize(length, total);
						if(mescroll.num == 1) this.list = []; 
						this.list=this.list.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
			/**
			 * 重置
			 */
			reset(){
				this.params={}
				this.data=['','','','']
				this.areaValue=''
				this.searchList=[]
				this.agencyKeyword=''
				this.estateKeyWord='',
				this.list=[],
				this.mescroll.resetUpScroll()
			},
			/**
			 * 获取小区列表
			 * @param {Object} params
			 */
			getResidentailList(params){
				console.log(params)
				// this.$api.residential.page(params).then(res=>{
				// 	console.log(122,res)
				// 	this.list =  res.list;
				// })
				this.$api.residential.pageBycondition(params).then(res=>{
					console.log(122,res)
					this.list =  res.data.records;
				})
			},
			/**
			 * 顶部菜单选择
			 * @param {Object} index 菜单下标
			 */
			showDown(index){
				if (index==0) {
					//地区
					this.regionShow=true
					return
				}
				if(index==1){
					//归属
					this.agencypopupShow = true;
				 return;
				}else if(index==2){
					//物业名称
					this.estateShow=true
				}else if (index==3) {
					//筛选
					this.filterShow=true
				}
				
			},
			/**
			 * 确认筛选
			 */
			filterConfirm(){
				this.mescroll.resetUpScroll()
			},
			/**
			 * 地区确认回调
			 * @param {Object} object
			 */
			regionConfirm(object){
				this.data[0]= object.area.label;
				this.areaValue = object.area.value;
				let params = {
					regionArea: this.areaValue
				};
				this.getAgencyList(params)
				this.getResidentailList(params)
			},
			/**
			 * 获取物业列表
			 * @param {Object} params
			 */
			getListByLikeName(params){
				let list = [];
				this.$api.permissions.orgList(params).then(res=>{
					console.log(res)
					let list = [];
						for(let item of res.data.records){
							let element = {
								label: item.name,
								value: item.id
							}
							list.splice(list.length,0,element);
							// list.push(obj);
						}
						this.searchList = list;
						// this.mescroll.resetUpScroll()
				})
			},
			/**
			 * 物业确认
			 */
			estateComfirm(res){
				console.log("物业确认：",res)
				this.params.estatePid =res.value
				this.data[2] = res.label
				this.estateShow = false
				console.log(res)
				//获取小区
				let params={
					agencyId:this.params.agencyId,
					estatePid:this.params.estatePid
				}
				this.$api.residential.pageBycondition(params).then(res=>{
					console.log(333,res)
					this.list =  res.data.records;
				})
				this.mescroll.resetUpScroll()
			},
			/**
			 * 获取机构列表
			 * @param {Object} params
			 */
			getAgencyList(params){
				let list = [];
				let param = {
					// flag:1,
					// orgType:1,
					// isSelect:true
					regionArea:this.params.regionArea,
					current:1,
					size:10
				}
				this.$api.permissions.orgList(param).then(res=>{
					console.log("旧机构列表：",res)
					let list = [];
						for(let item of res.data.records){
							let element = {
								label: item.name,
								value: item.id
							}
							list.splice(list.length,0,element);
							// list.push(obj);
						}
						this.searchList = list;
						// this.mescroll.resetUpScroll()
				})
			},
			/**
			 * 点击确认选择归属
			 */
			agencyConfirm(res){
				//筛选标题
				this.params.agencyId =res.value
				this.data[1] = res.label
				this.agencypopupShow = false
				console.log(res)
				//获取小区
				let params={
					regionArea:this.params.regionArea,
					agencyId:this.params.agencyId
				}
				this.$api.residential.pageBycondition(params).then(res=>{
					console.log(333,res)
					this.list =  res.data.records;
				})
				this.mescroll.resetUpScroll()
			},
			/**
			 * 添加小区
			 */
			add(){
				uni.navigateTo({
					url:"./add"
				})
			},
			delItem(item){
				this.$dialog.showModal('确定要删除此项吗?').then(res=>{
					this.$api.residential.del({id:item.id}).then(res=>{
						if (res.data) {
							this.$showToast('删除成功')
							that.mescroll.resetUpScroll()
						}
					})
				})
			}
		}
	}
</script>

<style>

</style>