shuju_ui/qs_zhaoshang/pages/work/count/count.vue

<template>
	<view class="count">
		<!-- 自定义头部 -->
		<view class="pfixed">
			<uni-nav-bar  left-icon="left" fixed="true" :border='border'   statusBar='true' :rightText="checkPermi(['system:wczs:list','system:djks:list'])?'上报记录':''" title="潜山市招商情况月统计表" rightWidth='180rpx' @clickRight="clickRight" @clickLeft='getBack'/>
		</view>
		<!-- 站位的 -->
		<uni-nav-bar  left-icon="left" :border='border'   statusBar='true' />
		<!-- 搜索 -->
		<view class="zhanline"></view>
		<view class="flexc allpage_zd">
			<!-- <view class="allpage_zdl">共计<text>{{total||0}}</text>个</view> -->
			<time-year @bindDateChange="bindDateChange" fields='month' textAlign='right' timetxt='选择日期'></time-year>
		</view>
		<!-- 表格 -->
		<view class="tablebox">
			<table border='0' class='table'>
				<thead class='thead'>
					<tr class="tr_one">  
						<th style="width: 140rpx;" rowspan='2'>汇报单位</th>
						<th style="width: 200rpx;" colspan='2' class='borbot'>招商外出次数/天数</th>
						<th style="width: 190rpx;" colspan='2' class='borbot'>对接客商次数</th>
						<th style="width: 220rpx;" colspan='2' class='borbot borbotn'>提供有效招商线索数</th>
					</tr>
					<tr class="tr_one">
						<th style="width: 100rpx;" class='borbotn'>当月外出数</th>
						<th style="width: 100rpx;">本年累计数</th>
						<th style="width: 95rpx;" class='borbotn'>当月对接数</th>
						<th style="width: 95rpx;">本年累计数</th>
						<th style="width: 110rpx;" class='borbotn'>当月线索数</th>
						<th style="width: 110rpx;" class='borbotn'>本年累计数</th>
					</tr>
				</thead>
				
				<tbody class="tbody">
					<tr v-for="(item,index) in list" :key="index">
						<td style="width: 140rpx;" >{{item.name}}</td>
						<td style="width: 100rpx;">{{item.zswcMonth}}</td>
						<td style="width: 100rpx;" >{{item.zswcYear}}</td>
						<td style="width: 95rpx;" >{{item.sjksMonth}}</td>
						<td style="width: 95rpx;" >{{item.sjksYear}}</td>
						<td style="width: 110rpx;" >{{item.yxxsMonth}}</td>
						<td style="width: 110rpx;" >{{item.yxxsYear}}</td>
					</tr>
					<div class="shax" v-if="list.length>0">
						{{wtdt}}
					</div>
					<div class="shax" v-else><span>暂无数据</span></div>
				</tbody>
					
			</table>
		</view>
		<view class="count_btn" @click="getAddCount" v-if="checkPermi(['system:wczs:add','system:djks:add'])">
			<image :src="addimg"></image>
			新增
		</view>
		<!--新增选择 -->
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="moreflag"></view>
		<view class="more_fixed" v-if="moreflag">
			<view class="more_fixedt">
				<!--  -->
				<view v-if="checkPermi(['system:wczs:add'])" @click="getzsaddFn">外出招商</view>
				<view v-if="checkPermi(['system:djks:add'])" @click="getksaddFn">对接客商</view>
			</view>
			<view class="more_fixedb" @click="getClose">取消</view>
		</view>
	</view>
</template>

<script>
	import timeYear from "@/components/timedata/timeyear.vue"
	import {getstatMonthFn} from "@/api/work/count.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import tabSearchone from "@/components/toptab/searchone.vue"
	export default{
		components:{
			timeYear,tabSearchone
		},
		data(){
			return{
				addimg:require("@/static/images/index/addt.png"),
				border:false,
				time:'',
				year:'',
				month:'',
				pageSize: 10,
				pageNum: 1,
				reachflag:true,
				wtdt:'',
				list:[],
				total:0,
				moreflag:false,
			}
		},
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		onUnload(){
			uni.$off('refreshdata')
			uni.$off('refreshdatatong')
		},
		onLoad() {
			uni.$on('refreshdatatong',(e) => {
				this.reachflag=true;
				this.pageNum=1;
				this.list=[];
				this.getDataFn();
			})
			this.time = this.getNowFormatDate();
			this.getDataFn()
		},
		methods:{
			 checkPermi, checkRole,
			bindDateChange(e){
				this.time=e;
				var timestr=e.split('-');
				this.year=timestr[0];
				this.month=timestr[1];
				this.reachflag=true;
				this.pageNum=1;
				this.list=[];
				this.getDataFn();
			},
			getNowFormatDate(){
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				const timeday = y + "-" + m;
				this.year=y;
				this.month=m;
				return timeday;
			},
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
					year:this.year,
					month:this.month,
				}
				getstatMonthFn(params).then(res=>{
					if(res.code==200){
						this.total=res.total;
						if (res.data.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.data.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.data;
						} else {
							this.list = this.list.concat(res.data)
						}									
					}else{
						this.$toast(res.msg)
					}
				})
			},
			getzsaddFn(){
				this.moreflag=false;
				this.$tab.navigateTo('/pages/work/count/addzscount') 
			},
			getksaddFn(){
				this.moreflag=false;
				this.$tab.navigateTo('/pages/work/count/addkscount') 
			},
			getClose(){
				this.moreflag=false;
			},
			getAddCount(){
				this.moreflag=true
			},
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			clickRight(){
				if(checkPermi(['system:wczs:list','system:djks:list'])){
					this.$tab.navigateTo("/pages/work/count/cluelist?strfrom=tong")
				}else{
					return
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.count{display: flex;flex-direction: column;height: 100vh;overflow: hidden;}
.count /deep/ 	.uni-nav-bar-right-text{font-size: 34rpx; color: #26C240 !important;font-weight: 500;padding-right: 14rpx;}
 //统计
 .allpage_zd{background-color:#ffffff;padding: 0 28rpx;justify-content: space-between;flex: 0 0 auto;
	.allpage_zdl{font-size: 30rpx;font-weight: 500;
color: #666666;
	text{font-weight: bold;color: #FE5706;margin: 0 8rpx;}
	}
 }
 // 表格
 .borbot{border-bottom: 2rpx solid #CDCDCD;}
 .borbotn{border-right: none !important;}
 .tablebox{padding:10rpx 0 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;
  th{padding: 8rpx;box-sizing: border-box;font-size: 26rpx;color: #343434;font-weight: bold;text-align: center;}
 }
 .table{border-spacing: 0;width: 100%;display: flex;flex-direction: column;overflow: hidden;}
 .thead{width: 100%;background-color: #F1F1F1;flex: 0 0 auto;border-radius: 10rpx;
  th{border-right: 2rpx solid #CDCDCD;}
 }
 .tbody {flex: 1;overflow: auto;padding-bottom: 120rpx;}
 .tbody td{height: 120rpx;box-sizing: border-box;padding: 24rpx 14rpx;font-weight: 500;color: #343434;font-size: 28rpx;border-bottom: 2rpx solid #CDCDCD;text-align: center;word-break: break-all;}
.count_btn{position: fixed;left: 0;right: 0;bottom: 0;z-index: 4;width: 100%;height: 100rpx;font-size: 32rpx;color: #ffffff;font-weight: 500;
background: #FE5706;display: flex;align-items: center;justify-content: center;
image{width: 34rpx;height: 34rpx;margin-right: 16rpx;}

}
</style>