property/property_ui/manage/pages/community/sqmoney.vue

<template>
	<view class="car">
		<view class="cartop">
			<view class="topa flexc">
				<view class="allbox flexc" >
					<!-- @click="getReset" -->
					<image :src="allimg" class="resetimg"  @click="showDrawer('showLeft')"></image>
					<view class="over" :class="tabval=='all'?'act':''" @click="getAllFn">全部资产</view>
				</view>
				<view class="search flexc">
					<image :src="search"></image>
					<!-- confirm-type="search" @confirm="getConfirm" -->
					<input placeholder="请输入关键字进行搜索"  v-model="text"/>
					<view class="btn" @click="getConfirm">搜索</view>
				</view>
			</view>
			<view class="tabtop flexc">
				<view class="tabt" :class="tabval==ite.id?'act':''" v-for="(ite,idx) in assetTree" :key="ite.id" @click="getTabFn(ite.id,idx)">{{ite.label}}</view>
			</view>
			<view class="tablst flexc">
				<view class="tabs" :class="tabvala==ite.id?'act':''" v-for="(ite,idx) in tablist" :key="ite.id" @click="getTabFna(ite.id,ite.parentId)">{{ite.label}}</view>
			</view>
		</view>
		<!-- 左侧展示 -->
		<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
			<view class="drwbox">
				<view class="leftbox" v-for="(ite,idx) in assetTree">
					<view class="tit">{{ite.label}}</view>
					<view class="txts">
						<view class="txt" @click="getTabFnb(aite.id,ite.id,idx)" v-for="(aite,aidx) in ite.children">{{aite.label}}（{{ite.children.length}}）</view>
					</view>
				</view>
			</view>
		</uni-drawer>
		<!-- 列表 -->
		<view class="carlists">
			<view class="listbox" :style="tabflag?'height:calc(100vh - '+tabscheight+'rpx)':''">
				<block v-if="list&&list.length">
				<zb-table
				  :show-header="true"
				  :columns="columns"
				  :stripe="true"
				  :fit="true"
				  :isShowLoadMore="reachflag"
				  :parameter="parameter"
				  @pullUpLoading="pullUpLoading"
				  @edit="getDetail"
				  @dele="getDelFn"
				  :data="list"></zb-table>
				</block>
				<block v-else>
					<no-data padtop="0" padbottom="20"></no-data>
				</block>
			</view>
			
			<!-- <car-list :datainfo="list" :wtdt="wtdt" type='sqmoney'></car-list> -->
		</view>
		<view class="rfbtn" @click="getAddFn">录入资产</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	// import {column1} from '@/manage/components/zb-table/all.js'
	import zbTable from "@/manage/components/zb-table/zb-tables.vue"
	import noData from "@/manage/components/nodata/nodata.vue"
	import carList from "@/manage/components/car/list.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {assetTypeTree,assetsList,assetsDel} from "@/api/work/manage.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	export default{
		components:{carList,zbTable,noData},
		data(){
			return{
				// column1,
				allimg:require('@/manage/static/community/all.png'),
				// up:require('@/car/static/car/up.png'),
				// car:require('@/car/static/car/car.png'),
				// cara:require('@/car/static/car/cara.png'),
				// carb:require('@/car/static/car/carb.png'),
				search:require('@/car/static/car/search.png'),
				tabscheight:0,//减去的部
				text:'',
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				
				tabflag:true,
				columns: [
					{ name: 'equipmentName', label: '设备名称',fixed:true,width:160,align:'center',},
					{ name: 'equipmentNumber', label: '设备编码',align:'center',},
					// { name: 'sex', label: '性别',filters:{1:'男',2:'女'}},
					{ name: 'equipmentQrCode', label: '设备二维码',align:'center',type:'img', },
					// { name: 'equipmentQrCode', label: '设备二维码',align:'center' },
					{ name: 'equipmentStatus', label: '状态',align:'center',type:"format",key:"sbztList"},
					{ name: 'operation', type:'operation',label: '操作',width:360,renders:[
						{
						    name:'查看',
						    func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
						  },
						  {
						    name:'删除',
						    type:'warn',
						    func:"dele"
						  },
					]},
					
				 //    { name: 'sqmyNumber', label: '编号',width:230,align:'center', },
				 //    { name: 'title', label: '信息标题 ',width:230,align:'center', },
				 //    { name: 'topicType', label: '主题类型',align:'center',type:"format",key:"ztlxlist"},
					// { name: 'isRecord', label: '是否采用',align:'center',type:"format",key:"sflalist"},
					// { name: 'sqmyProgress', label: '社情进度',align:'center',type:"format",key:"sqjdlist"},
				],
				parameter:{
					sbztList:[ {label: '正常',value:'1'},{label: '停用',value:'2'},]
				},
				tabval:'0',
				tablist:[],
				tabvala:'0',
				tablist:[],
				showRight: false,
				showLeft: false,
				assetTree:[],//资产类型树
			}
		},
		onUnload() {
			uni.$off('assetsList')
		},
		onLoad: function() {
			this.init()
			uni.$on('assetsList',(res)=>{
				this.getrefreshData()
			})
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		mounted() {
			var that=this;
			setTimeout(function(){
				that.getHeightFn()
			},200)
		},
		methods:{
			checkPermi, checkRole,
			confirm() {},
			init(){
				assetTypeTree().then(res=>{
					if(res.code==200){
						this.assetTree=res.data;
						if(res.data&&res.data.length){
							this.tabval=res.data[0].id;
							var children=JSON.parse(JSON.stringify(res.data[0].children))
							this.tablist=children;
							this.tabvala=children[0].id;
							this.getDataFn()
						}
					}
				})
				//设备状态
				getDictionaryFn('shebei_status').then(res=>{
					if(res.code==200){
						if(res.data){
							this.sbztList = res.data.map(v => {
								return {
									dictLabel: v.dictLabel,
									dictValue: v.dictValue
								}
							})
							this.parameter.sbztList=JSON.parse(JSON.stringify(this.sbztList))
						}
					}
				})	
			},
			pullUpLoading(e){
				
			},
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				var that=this;
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.cartop').boundingClientRect(data => {
					var height=Number(data.height)+60;
					that.tabscheight=Number(height)*2
					console.log(that.tabscheight)
				}).exec();
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			getDetail(data){
				var id=data.communityAssetId;
				this.$tab.navigateTo("/manage/pages/community/sqmoneydetail?from=list&id="+id)
			},
			getAddFn(){
				this.$tab.navigateTo("/manage/pages/community/sqmoneyadd")
			},
			
			getConfirm(){
				this.getrefreshData()
			},
			getReset(){
				this.text='';
				this.getrefreshData()
			},
			getAllFn(){
				this.tabval='all'
				this.tabvala=''
				this.getrefreshData()
			},
			getrefreshData(){
				this.pageNum=1;
				this.list=[];
				this.reachflag=true;
				this.getDataFn()
			},
			getTabFn(val,idx){
				var list=JSON.parse(JSON.stringify((this.assetTree)))
				this.tabval=val;
				var children=list[idx].children
				if(children&&children.length>0){
					this.tablist=children;
					this.tabvala=children[0].id;
				}else{
					this.tablist='';
					this.tabvala=val;
				}
				this.getrefreshData()
			},
			getTabFna(val,parentId){
				this.tabval=parentId
				this.tabvala=val;
				this.getrefreshData()
			},
			getTabFnb(val,aid,idx){
				var list=JSON.parse(JSON.stringify((this.assetTree)))
				var children=list[idx].children
				this.tablist=children;
				this.$refs['showLeft'].close()
				this.tabvala=val;
				this.tabval=aid
				this.getrefreshData()
			},
			getDelFn(data){
				var id=data.communityAssetId;
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							assetsDel(id).then(res=>{
								if(res.code==200){
									that.$toast("删除成功");
									setTimeout(function(){
										that.getrefreshData()
									},1500)
								}
							})
						} else if (res.cancel) {
						}
					}
				});
				
			},
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.assetId=this.tabvala;
				if(this.text){
					params.equipmentName=this.text;
				}
				// params.parentId=this.tabval
				assetsList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.car{padding: 310rpx 0 110rpx;}
.cartop{position: fixed;left: 0;right: 0;top: 0;background-color: #ffffff;z-index: 2;
	.topa{padding: 20rpx 20rpx 32rpx;
		
		.allbox{width: 180rpx;overflow: hidden;
			view{font-weight: 500;font-size: 26rpx;color: #272727;flex: 1;text-align: center;line-height: 40rpx;box-sizing: border-box;
				&.act{border: 2rpx solid #0256FD;border-radius: 10rpx;background: #FFFFFF;color: #0256FD;
					
				}
			}
			image{width: 30rpx;height: 24rpx;margin-right: 20rpx;flex: 0 0 auto;}
		}
		.search{flex: 1;margin-left: 16rpx;height: 64rpx;background: #EEEEEE;border-radius: 32rpx;border: 2rpx solid #E6E6E6;padding-left: 24rpx;box-sizing: border-box;
		image{width: 32rpx;height: 34rpx;margin-right: 22rpx;flex: 0 0 auto;}
		input{flex: 1;font-size: 26rpx;color: #272727;}
		.btn{width: 100rpx;height: 64rpx;background: #3565ED;border-radius: 32rpx;flex: 0 0 auto;font-weight: bold;text-align: center;line-height: 64rpx;
font-size: 26rpx;
color: #FFFFFF;}
		}
	}
	.tabtop{padding-bottom: 30rpx;overflow: auto;
		.tabt{font-weight: 500;font-size: 32rpx;color: #666666;position: relative;line-height: 56rpx;padding: 0 20rpx;
			&.act{font-weight: bold;font-size: 32rpx;color: #272727;
			&::after{content: '';width: 40rpx;height: 10rpx;background: #0156FE;border-radius: 6rpx;position: absolute;left: 50%;margin-left: -20rpx;bottom: -10rpx;}
			}
		}
	}
	.tablst{background: #F3F3F0;padding:30rpx 12rpx;overflow: auto;
			.tabs{height: 48rpx;background: #DADADA;border-radius: 24rpx;font-weight: 500;display: flex;align-items: center;justify-content: center;padding: 0 24rpx;margin: 0 18rpx;
	font-size: 26rpx;box-sizing: border-box;flex: 0 0 auto;color: #666666;
				&.act{border: 2rpx solid #0256FD;background: #FFFFFF;color: #0256FD;}
			}
		}

}
.drwbox{width: 100%;height: 100%;overflow: auto;
	.leftbox{padding:20rpx 30rpx 20rpx;
		.tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 20rpx;}
		.txts{padding-left: 38rpx;}
		.txt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 60rpx;}
	}
}
.listbox{
	background: #FFFFFF;
	border-radius: 20rpx;
}
.carlists{padding: 0 19rpx;}
</style>