zheng_xie_ui/work/pages/report/info.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" rightWidth="150rpx" title="履职信息" @clickLeft="getBack" @clickRight="getChFn"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<block slot="left">
					<view class="topl">
						<image :src="backimg" ></image>
					</view>
				</block>
				<block slot="right">
					<view class="topr" v-if="checkPermi(['zxBonus:bonus:add'])">
						<image :src="ccicoimg"></image>
						<view>履职加分</view>
					</view>
				</block>
			</uni-nav-bar>
			<view class="plr12 mt18">
				<view class="search flex0 mb24">
					<image :src="searchimg"></image>
					<input placeholder="输入委员姓名进行查询" v-model="title" @confirm="getConfirm"/>
				</view>
			</view>
			<view class="tablists flexc mb20">
				<block v-for="(ite,idx) in tabList" >
					<view  v-if="!ite.limit||ite.limit&&checkPermi([ite.limit])" @click="getTabFn(ite)" :class="{act:tabidx==ite.val}" :key="idx">{{ite.tit}}</view>
				</block>
			</view>
			<block v-if="checkPermi(['member:info:alllist'])||tabidx=='jfju'">
				<view style="height: 56rpx;"></view>
				<view class="lbtab flexc">
					<image :src="lbicoimg" class="limg"></image>
					<view class="lbtabs flexc">
						<view class="lbtabp" v-if="tabidx!='jfju'">
							<picker  range-key='label'  :range="jblist"  @change='bindDateChangea'>
								<view :class="jbtxt?'':'f16 co80'">{{jbtxt || '选择界别'}}</view>
							</picker>
							<image :src="upimg" class="upimg"></image>
						</view>
						<view class="lbtabp" v-if="tabidx!='jfju'">
							<picker  range-key='label'  :range="wybgslist"  @change='bindDateChangeb'>
								<view :class="wybgstxt?'':'f16 co80'">{{wybgstxt || '选择委员工作室'}}</view>
							</picker>
							<image :src="upimg" class="upimg"></image>
						</view>
						<view class="lbtabp" v-if="tabidx=='jfju'">
							<picker  range-key='label'  :range="jflxList"  @change='bindDateChangec'>
								<view :class="jflxtxt?'':'f16 co80'">{{jflxtxt || '选择加分类型'}}</view>
							</picker>
							<image :src="upimg" class="upimg"></image>
						</view>
						<view class="lbtabp" @click="getReafFn" v-if="checkPermi(['member:info:assessmentScore'])&&tabidx!='jfju'">
							<image :src="reashimg" class="reashimg"></image>
							<view >刷新排名</view>
						</view>
					</view>
					<view class="czbtns" @click='getResetFn'>重置</view>
				</view>
			</block>
		</view>
		<!-- 列表 -->
		<view class="mbox">
			<view v-if="checkPermi(['member:info:alllist'])||tabidx=='jfju'" style="height: 56rpx;"></view>
			<report-list :type="tabidx" :datalist="list" :wtdt="wtdt" :khlxList='khlxList' :jflxList="jflxList"  :wybgslist="wybgslist" :jblist='jblist'  @getDetail="getDetail" @getTuiFn="getTuiFn"></report-list>
		</view>
		<view style="height: 100rpx;" v-if="checkPermi(['member:info:add','zxBonus:bonus:add'])"></view>
		<view class="fwbtns" @click="getAddFn" v-if="checkPermi(['member:info:add'])&&tabidx=='lzxx'">履职档案</view>
		<view class="fwbtns" @click="getChFn" v-if="checkPermi(['zxBonus:bonus:add'])&&tabidx=='jfju'">履职加分</view>
		
		<!-- 弹窗 -->
		<pop-up :type='ptype' @getClose="getClose"></pop-up>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {getInfojopList,getBonusListFn,getBonusDelFn,getInfojopDel,getinfoScoreFn} from "@/api/mine/report.js"
	import popUp from "@/work/components/popup/popup.vue"
	import reportList from "@/work/components/report/list.vue"
	import {getDictionaryFn} from "@/api/mine/register.js"
	
	export default{
		components:{reportList,popUp},
		data(){
			return{
				searchimg: require("@/work/static/images/search.png"),
				ccicoimg:require("@/work/static/images/ccico.png"),
				lbicoimg:require("@/work/static/images/lbico.png"),
				backimg:require("@/work/static/images/back.png"),
				upimg:require("@/work/static/images/up.png"),
				reashimg:require("@/work/static/images/sxicon.png"),
				backgroundColor:"#1D64E2",
				tabidx:'lzxx',
				tabList:[{tit:'履职信息',val:'lzxx',limit:'member:info:list'},{tit:'加分记录',val:'jfju',limit:'zxBonus:bonus:list'}
				],
				nvaHeight:44,
				taztList:[{label:'是',value:'0'},{label:'否',value:'1'}],
				talbidx:'',
				datainfo:{
					talb:'',
				},
				ptype:'',//弹窗类型
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				jblist:[],
				wybgslist:[],
				jbtxt:'',
				wybgstxt:"",
				jbval:'',
				wybgsval:'',
				title:'',
				jflxList:[],
				khlxList:[],
				jblist:[],
				jflxtxt:'',
				jflxval:'',
				userId:this.$store.state.user.userId,
			}
		},
		onUnload(){
			uni.$off('lzrefreshlist')
		},
		onLoad(e) {
			var that=this;
			this.getDataFn()
			this.init()
			uni.$on('lzrefreshlist', (e) => {
				console.log(23)
				that.getrefreshData()
			})
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		mounted() {
			this.getHeightFn()
		},
		methods:{
			checkPermi, checkRole,
			init(){
				// 委员办公室
				getDictionaryFn('member_studio').then(res=>{
					if(res.code==200&&res.data.length){
						this.wybgslist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				//界别
				getDictionaryFn('circles').then(res=>{
					if(res.code==200&&res.data.length){
						this.jblist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 考核类型
				getDictionaryFn('check_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.khlxList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 加分类型
				getDictionaryFn('bonus_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.jflxList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			getReafFn(){
				var that=this;
				uni.showLoading({
					title: '加载中',
				})
				getinfoScoreFn().then(res=>{
					uni.hideLoading()
					if(res.code==200){
						that.getrefreshData()
					}
				})
			},
			getHeightFn(){
				var s=uni.getSystemInfoSync().statusBarHeight;
				let query = uni.createSelectorQuery().in(this);
					//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.navbox').boundingClientRect(data => {
					this.nvaHeight =s? data.height:Number(data.height)-20//赋值，待会要用
				}).exec();
			},
			getClose(){
				this.ptype=""
			},
			getTabFn(ite){
				this.tabidx=ite.val;
				this.pageNum=1;
				this.list=[],
				this.reachflag=true;
				this.getDataFn()
			},
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.jbtxt=this.jblist[val].label;
				this.jbval=this.jblist[val].value;
				this.getrefreshData()
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.wybgstxt=this.wybgslist[val].label;
				this.wybgsval=this.wybgslist[val].value;
				this.getrefreshData()
			},
			bindDateChangec(e){
				var val=e.detail.value;
				this.jflxtxt=this.jflxList[val].label;
				this.jflxval=this.jflxList[val].value;
				this.getrefreshData()
			},
			getrefreshData(){
				this.pageNum=1;
				this.list=[];
				this.reachflag=true;
				this.getDataFn()
			},
			getConfirm(){
				this.pageNum=1;
				this.list=[];
				this.reachflag=true;
				this.getDataFn()
			},
			getResetFn(){
				var tabidx=this.tabidx;
				if(tabidx=='jfju'){
					this.jflxtxt=''
				}else{
					this.jbtxt=''
					this.wybgstxt=''
					this.wybgsval=''
					this.jbval=''
				}
				this.title='';
				this.getConfirm()
			},
			getChFn(){
				if(checkPermi(['zxBonus:bonus:add'])){
					this.$tab.navigateTo('/work/pages/report/addscore')
				}
			},
			getTuiFn(ite){
				var type=ite.type;
				var that=this;
				if(type=='del'){
					uni.showModal({
						title: '确认删除',
						content: "是否确认删除",
						cancelText: '取消',
						confirmText: '确认',
						success: function(res) {
							if (res.confirm) {
								if(that.tabidx=='jfju'){
									getBonusDelFn(ite.id).then(res=>{
										if(res.code==200){
											that.$toast('删除成功'),
											setTimeout(function(){
												that.getrefreshData()
											},1200)
										}
									})
								}else if(that.tabidx=='lzxx'){
									getInfojopDel(ite.id).then(res=>{
										if(res.code==200){
											that.$toast('删除成功'),
											setTimeout(function(){
												that.getrefreshData()
											},1200)
										}
									})
								}
							} else if (res.cancel) {
							}
						}
					});
				}else if(type=='edit'){
					if(this.tabidx=='jfju'){
						this.$tab.navigateTo('/work/pages/report/addscore?type=edit&id='+ite.id)
					}else if(this.tabidx=='lzxx'){
						this.$tab.navigateTo('/work/pages/report/mineinfo?type=edit&id='+ite.id)
					}
						
				}
				// this.ptype=ite.type
			},
			getAddFn(){
				this.$tab.navigateTo('/work/pages/report/mineinfo?type=add')
			},
			getDetail(data){
				if(this.tabidx=='lzxx'){
					this.$tab.navigateTo('/work/pages/report/details?id='+data)	
				}else if(this.tabidx=='jfju'){
					this.$tab.navigateTo('/work/pages/report/scoredetail?id='+data)	
				}
				
			},
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				
				if(this.title){
					params.name=this.title
				}
				if(this.tabidx=='lzxx'){
					if(checkPermi(['member:info:alllist'])){
					}else {
						params.userId=this.userId
					}
					params.boundary=this.jbval
					params.studio=this.wybgsval
					getInfojopList(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)
						}
					}) 
				}else if(this.tabidx=='jfju'){
					if(checkPermi(['zxBonus:bonus:alllist'])){
						
					}else {
						params.userId=this.userId
					}
					params.bonusType=this.jflxtxt;
					getBonusListFn(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 scoped lang="scss">
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;background-color: $com-cd3;
	.topl{width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;
		image{width: 40rpx;height: 30rpx;}
	}
	.topr{display: flex;align-items: center;
		image{width: 26rpx;height: 26rpx;margin-right: 12rpx;}
		view{font-weight: 500;font-size: 26rpx;color: #FFFFFF;}
	}
	.tablists{
		overflow: auto;flex-wrap: nowrap;
		view{font-weight: bold;font-size: 26rpx;color: #FFFFFF;position: relative;flex: 0 0 auto;padding: 22rpx 24rpx;margin-right: 6rpx;box-sizing: border-box;
			&:last-child{margin-right: 0;}
			&.act{font-size: 30rpx;
				&::after{content: '';width: 62rpx;height: 10rpx;background: #FFFFFF;border-radius: 4rpx;left: 50%;margin-left: -31rpx;bottom: 0rpx;position: absolute;}
			}
		}
	}
	.lbtab{height: 114rpx;background: #FFFFFF;border-radius: 30rpx;padding-left: 24rpx;position: absolute;left:24rpx;right: 24rpx;bottom: -58rpx;
		.limg{width: 40rpx;height: 34rpx;margin-right: 10rpx;flex:0 0 auto;}
		.lbtabs{overflow: auto;flex-wrap: nowrap;flex: 1;
			.lbtabp{display: flex;align-items: center;flex:0 0 auto;margin-right: 24rpx;}
			.upimg{width: 18rpx;height: 10rpx;}
			
		}
	}
}
.reashimg{width: 26rpx;height: 22rpx; margin-right: 18rpx;}
.mbox{padding:2rpx 24rpx 28rpx;}
.lbtabs /deep/ picker{padding: 0 18rpx;}
</style>