|
|
@@ -1,18 +1,389 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
+ <!-- 筛选标签条 -->
|
|
|
+ <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!=4" 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==4" 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="popupShow">
|
|
|
+ <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="keyword" 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="residentailConfirm(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="buildingShow">
|
|
|
+ <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="buildingKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view v-if="!$isEmpty(buildingList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
|
|
|
+ <view @click="buildingConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom" v-for="(item,index) in buildingList" :key="index">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <u-divider v-if="buildingList.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>
|
|
|
+
|
|
|
+ <!-- 单元选择器 -->
|
|
|
+ <u-picker @confirm="unitConfirm" range-key="name" :range="unitList" v-model="unitShow" mode="selector"></u-picker>
|
|
|
+
|
|
|
+ <!-- 添加按钮 -->
|
|
|
+ <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";
|
|
|
+ let that;
|
|
|
export default {
|
|
|
+ // components:{
|
|
|
+ // card
|
|
|
+ // },
|
|
|
+ mixins:[MescrollMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+
|
|
|
+ //顶部菜单栏
|
|
|
+ filterMenu: ["地区","小区","楼栋","单元","筛选"],
|
|
|
+ data:['','','','',''],
|
|
|
+
|
|
|
+ //地区
|
|
|
+ regionShow:false,
|
|
|
+ areaValue:'',
|
|
|
+
|
|
|
+ //底部弹出框
|
|
|
+ popupShow:false,
|
|
|
+ searchList:[],
|
|
|
+ //筛选框
|
|
|
+ filterShow:false,
|
|
|
+ filterCount:0,
|
|
|
+
|
|
|
+ // 列表数据
|
|
|
+ params:{},
|
|
|
+ keyword:'',
|
|
|
+
|
|
|
+ //单元
|
|
|
+ unitShow:false,
|
|
|
+ unitList:[],
|
|
|
+
|
|
|
+ //楼栋
|
|
|
+ buildingShow:false,
|
|
|
+ buildingKeyWord:'',
|
|
|
+ buildingList:[],
|
|
|
+
|
|
|
+ list: [],
|
|
|
+ downOption: {
|
|
|
+ use: true,
|
|
|
+ auto: false
|
|
|
+ },
|
|
|
+ upOption: {
|
|
|
+ page: {
|
|
|
+ page: 0,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ noMoreSize: 5,
|
|
|
+ empty: {
|
|
|
+ tip: '暂无相关数据'
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(){
|
|
|
+ that=this
|
|
|
+ this.getResidentailList({isSelect:true})
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.canReset) {
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ }
|
|
|
+ this.canReset=true
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ keyword(){
|
|
|
+ let that=this
|
|
|
+ //节流函数
|
|
|
+ if (this.timer){
|
|
|
+ clearTimeout(this.timer)//阻止setTimeout函数的执行
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ that.searchList=[]
|
|
|
+ let params = {
|
|
|
+ isSelect: true,
|
|
|
+ regionArea: that.areaValue,
|
|
|
+ name: that.keyword
|
|
|
+ }
|
|
|
+ this.getResidentailList(params)
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ buildingKeyWord(){
|
|
|
+ let that=this
|
|
|
+ //节流函数
|
|
|
+ if (this.timer){
|
|
|
+ clearTimeout(this.timer)//阻止setTimeout函数的执行
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ that.buildingList=[]
|
|
|
+ let params={
|
|
|
+ residentialId:that.params.residentialId,
|
|
|
+ name:that.buildingKeyWord
|
|
|
+ }
|
|
|
+ that.fetchBuildingList(params)
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 获取筛选的条件数
|
|
|
+ */
|
|
|
+ getFilterCount(){
|
|
|
+ let n=0
|
|
|
+ if (!this.$isEmpty(this.params.residentialId)) {
|
|
|
+ //小区
|
|
|
+ n++
|
|
|
+ }
|
|
|
+ if (!this.$isEmpty(this.params.buildingId)) {
|
|
|
+ //楼栋
|
|
|
+ n++
|
|
|
+ }
|
|
|
+ if (!this.$isEmpty(this.params.unitId)) {
|
|
|
+ //单元
|
|
|
+ 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()
|
|
|
+ try{
|
|
|
+ this.$api.room.page(params).then(res=>{
|
|
|
+ let data=res.data.records
|
|
|
+ let length=data.length
|
|
|
+ let total=res.data.total
|
|
|
+ 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.keyword=''
|
|
|
+ this.unitList=[]
|
|
|
+ this.buildingKeyWord='',
|
|
|
+ this.buildingList=[],
|
|
|
+ this.list=[],
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击选择小区,获取楼栋列表
|
|
|
+ */
|
|
|
+ residentailConfirm(res){
|
|
|
+ //筛选标题
|
|
|
+ this.params.residentialId =res.value
|
|
|
+ this.data[1] = res.label
|
|
|
+ this.popupShow = false
|
|
|
+ //获取楼栋列表
|
|
|
+ let params={
|
|
|
+ residentialId:this.params.residentialId
|
|
|
+ }
|
|
|
+ this.fetchBuildingList(params)
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ //点击选择楼栋,获取单元列表
|
|
|
+ buildingConfirm(res){
|
|
|
+ this.params.buildingId=res.id
|
|
|
+ this.data[2] = res.name
|
|
|
+ this.buildingShow = false
|
|
|
+ let params={
|
|
|
+ residentialId:this.params.residentialId,
|
|
|
+ buildingId:res.id
|
|
|
+ }
|
|
|
+ this.getUnitByResidentialId(params)
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取楼栋列表
|
|
|
+ * @param {Object}
|
|
|
+ */
|
|
|
+ fetchBuildingList(params){
|
|
|
+ this.$api.building.page(params).then(res=>{
|
|
|
+ this.buildingList=res.data.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据小区id获取单元列表
|
|
|
+ */
|
|
|
+ getUnitByResidentialId(params){
|
|
|
+ this.$api.unit.page(params).then(res=>{
|
|
|
+ this.unitList=res.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+ unitConfirm(index){
|
|
|
+ this.data[3]=this.unitList[index].name
|
|
|
+ this.params.unitId=this.unitList[index].id
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 顶部菜单选择
|
|
|
+ * @param {Object} index 菜单下标
|
|
|
+ */
|
|
|
+ showDown(index){
|
|
|
+ if (index==0) {
|
|
|
+ //地区
|
|
|
+ this.regionShow=true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(index==1){
|
|
|
+ //小区
|
|
|
+ this.popupShow = true;
|
|
|
+ return;
|
|
|
+ }else if(index==2){
|
|
|
+ //楼栋
|
|
|
+ if (this.$isEmpty(this.data[1])) {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '请先选择小区',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.buildingShow=true
|
|
|
+ }else if (index==3) {
|
|
|
+ //单元
|
|
|
+ if(this.$isEmpty(this.data[2])){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '请先选择楼栋',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.unitShow=true
|
|
|
+ }else if (index==4) {
|
|
|
+ //筛选
|
|
|
+ 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 = {
|
|
|
+ isSelect: true,
|
|
|
+ regionArea: this.areaValue
|
|
|
+ };
|
|
|
+ this.getResidentailList(params);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取小区列表
|
|
|
+ * @param {Object} params
|
|
|
+ */
|
|
|
+ getResidentailList(params){
|
|
|
+ let list = [];
|
|
|
+ this.$api.residential.page(params).then(res=>{
|
|
|
+ let list=[]
|
|
|
+ res.list.forEach(item=>{
|
|
|
+ let obj={
|
|
|
+ label:item.name,
|
|
|
+ value:item.id
|
|
|
+ }
|
|
|
+ list.push(obj)
|
|
|
+ })
|
|
|
+ this.searchList = list;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 添加房间
|
|
|
+ */
|
|
|
+ add(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"./add"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delItem(item){
|
|
|
+ this.$dialog.showModal('确定要删除此项吗?').then(res=>{
|
|
|
+ this.$api,room.del({id:item.id}).then(res=>{
|
|
|
+ if (res.data) {
|
|
|
+ this.$showToast('删除成功')
|
|
|
+ that.mescroll.resetUpScroll()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|