kpi_web/pages/department/department.vue

<template>
	<view>
		<view >
			<u-subsection :current="tabIndex" :list="subsectionTitle" @change="thumbChange"></u-subsection>
		</view>
		<view id="scroll-post-list">
			<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange" :style="'height: '+svHeight+'px;'">
				<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
					<scroll-view scroll-y="true" :style="'overflow: hidden; height: '+svHeight+'px;'"  @scrolltolower="loadMore(index1)">
						
						<uni-table ref="table" :loading="tab.isLoading" border stripe emptyText="暂无更多数据" v-if="index1 == 0" >
							<uni-tr>
									<uni-td width="15%" align="center">部门</uni-td>
									<uni-td width="65%" align="center">指标</uni-td>
									<uni-td width="10%" align="center">加分</uni-td>
									<uni-td width="10%" align="center">减分</uni-td>
							</uni-tr>
							
							<uni-tr v-for="item in newsList[index1].data" @row-click="evaluation(item)">
								
									<uni-td :rowspan="item.roespan"  align="center"  >{{item.departmentname}}</uni-td>
									<uni-td rowspan="1" align="center">{{item.title}}</uni-td>
									<uni-td rowspan="1" align="center">{{item.extrapoints}}</uni-td>
									<uni-td rowspan="1" align="center">{{item.scorereduction}}</uni-td>
								
							</uni-tr>
							
						</uni-table>
						<uni-table ref="table" :loading="tab.isLoading" border stripe emptyText="暂无更多数据" v-if="index1 == 1" >
							<uni-tr>
									<uni-td align="center">部门</uni-td>
									<uni-td align="center">指标</uni-td>
									<uni-td align="center">操作</uni-td>
							</uni-tr>
							<uni-tr v-for="item in newsList[index1].data" @row-click="evaluations(item)">
								
									<uni-td :rowspan="item.roespan"  align="center"  >{{item.parentname}}</uni-td>
									<uni-td rowspan="1" align="center">{{item.targetname}}</uni-td>
									<uni-td rowspan="1" align="center" style="color: #3C9CFF;">提报</uni-td>
								
							</uni-tr>
						</uni-table>	
						<!-- <view class="loading-more"  v-if="tab.isLoading || tab.data.length > 4">
							<text class="loading-more-text">{{tab.loadingText}}</text>
						</view> -->
					</scroll-view>
					
				</swiper-item>
				
			</swiper>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				svHeight:0, //元素的所需高度
				tabIndex:0,	//分段器
				subsectionTitle: ['定性考核', '定量考核'],
				newsList: [],	//数据缓存
				headerVerify:{
					userkey:"",
					token:"",
					userCont:""
				},
				
				
				
			}
		},
		onLoad() {
			let _this = this
			//判断Token是否有效
			let systemCache = _this.$commonMethod.getSystemCacheDate('myCache')
			if(!systemCache){
				_this.$commonMethod.JumpUrl('/pages/login/login')
			}else{
				let currentTime = new Date().getTime() - systemCache.tokenTime
				if (currentTime >= 10800000){
					_this.$commonMethod.verifyPowerIsTrue('myCache')
				}
			}
			_this.headerVerify.userkey = systemCache.userKey
			_this.headerVerify.token = systemCache.token
			_this.headerVerify.userCont = systemCache.userInfo
			//初始化数据
			_this.subsectionTitle.forEach(() => {
			    _this.newsList.push({
			        data: [],
					page:0,
			        isLoading: false,
			        refreshText: "",
			        loadingText: '加载更多...',
					loadingEnd:false
			    });
			});
			
		},
		//onReady部分代码（以下代码只能放到 onReady）
		onReady() {
		    let _this=this;
		    uni.getSystemInfo({
		        success: function(res) {
		            uni.createSelectorQuery().select("#scroll-post-list").boundingClientRect(function(data) {
		                _this.svHeight= (res.windowHeight - data.top);
		            }).exec();
		        }
		    });
		      _this.loadData()
		         
		},
		methods: {
			//分段器
			thumbChange(index){
				let _this = this
				this.tabIndex = index;
				// let date = this.newsList[index]
			},
			//页面切换
			ontabchange(e) {
				let _this = this
			    let index = e.target.current || e.detail.current;
			    // this.switchTab(index);
				console.log(index)
				this.tabIndex = index
				if(!this.newsList[index].loadingEnd){
					this.loadData()
				}
			},
			//触底执行
			loadMore(e) {
				let _this = this
				_this.newsList[e].isLoading = true
			   console.log(e,"上拉加载")
			   if(!_this.newsList[e].loadingEnd){
				   _this.loadData()
			   }
			},
			//加载数据
			loadData(){
				let _this = this
				let getUrl = _this.$commonMethod.localhostUrl+'/api/eval/newqualitative'
				if(_this.tabIndex > 0){
					getUrl = _this.$commonMethod.localhostUrl+'/api/eval/qualitativeevalration'
				}
				uni.request({
					url:getUrl,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						// 'User-Agent':250,
						'user-key': _this.headerVerify.userkey,
						'user-token': _this.headerVerify.token
					},
					method:'POST',//请求方式，必须为大写
					data:{
						// group:_this.headerVerify.userCont.company,	//公司
						// department:_this.headerVerify.userCon.maindeparment,	//部门
						// tittle:"" //指标
					},
					success: (res) => {
						console.log(res)
						let callBackDate = res.data
						if(callBackDate.code == 0){
							let chartDate = callBackDate.data
							
							let activeTab = _this.newsList[_this.tabIndex]
							activeTab.loadingEnd = true
							activeTab.isLoading = false
							activeTab.page++
							activeTab.data = activeTab.data.concat(chartDate);
							console.log(activeTab,chartDate)
						}else{
							_this.$refs.uToast.show({
								message: callBackDate.msg,
								duration: 1000 * 2,
								position:'bottom',
							})
						}
					},
					fail:function(e){
						console.log('接口返回--login--2--',e);
						_this.$refs.uToast.show({
							message: e,
							duration: 1000 * 2,
							position:'bottom',
						})
					},
				})
			},
			//考评
			evaluation(data){
				let _this = this
				console.log("定性考核---------->",data)
				_this.$commonMethod.JumpUrl('/pages/department/mentduty?company='+data.group+'&department='+data.department+'&targets='+data.target)
				
			},
			evaluations(data){
				let _this = this
				console.log("定量考核---------->",data)
				_this.$commonMethod.JumpUrl('/pages/department/rationment?data='+JSON.stringify(data))
			}
			
		}
	}
</script>

<style>
	
	.tabs {
	    flex: 1;
	    flex-direction: column;
	    overflow: hidden;
	    background-color: #ffffff;
	    /* #ifndef APP-PLUS */
	    height: 88vh;
	    /* #endif */
		/* height: calc(100% - 60px); */
		/* height: 100%; */
	}
	.swiper-box{
		/* height: 100%; */
		height: calc(100% - 160px);
	}
	
	

	
	
</style>