yichael_zhongchuang_front_2/components/home/teacher/table.vue

<template>
	<view class="m_right">
		<img src="../../../assets/home/topImg.jpg" class="s_logo" mode=""></img>
		<view class="m_right_container">
			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
				<thead class="m-table-hander">
					<tr>
						<th>项目</th>
						<th>名称</th>
						<th>类型</th>
						<th>创建人</th>
						<th>查看</th>
						<th>是否为公共</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in tabledata" :key="index">
						<th>{{'项目'+(index+1)}}</th>
						<th>{{item.ProjectName}}</th>
						<th>{{item.Type}}</th>
						<th>{{item.CreateUserName}}</th>
						<th style="position: relative;"><button type="default" @click="find(item,index)" size="mini" class="m_delete">查看</button></th>
						<th>
							<checkbox-group>
								<label>
									<!-- <checkbox :checked="Boolean(item.IsPublic)" @click="onClickCheck"/> -->
									<checkbox :checked="Boolean(item.IsPublic)" disabled="false"/>
								</label>
							</checkbox-group>
						</th>
					</tr>
				</tbody>
			</table>
			
			<view class="m_right_footer">
				<view class="m_paging">
					<text class="m_paging_item m_paging_upper" v-show="bShowLastPageBtn" @click="last()">上一页</text>
					<text class="m_paging_item" :key="i" v-for="i in pageTotalNum" @click="paging(i)" :class="i==currentPage?'p_act':''">
						{{i}}
					</text>
					<text class="m_paging_item m_paging_lower" v-show="bShowNextPageBtn" @click="next()">下一页</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "home_table",
		data() {
			return {
				index: 1,
				tabledata: [],
				pageTotalNum:1,
				currentPage:1,
				totalItem:5,
				bShowLastPageBtn:false,
				bShowNextPageBtn:false,
			}
		},
		components: {
			// locationtemp
		},
		mounted() {
			// this.getList();
		},
		methods: {
			paging(i) {
				uni.showLoading({
				    title: '加载中'  
				});
				
				let fromIndex = this.totalItem*(i-1);
				let toIndex = fromIndex+this.totalItem;
				
				let data = {
					"UserID": mydata_userInfo.UserID,
					"StartIndex": fromIndex, //用户数组索引
					"EndIndex": toIndex, //用户数组索引结束
				}
				console.log('data=',data)
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api + '/project/getprojects',
					method: 'POST',
					data: data,
					dataType: 'json',
					success: (res) => {
						//100成功
						if (res.data.Code == 100) {
							console.log("请求全部资产", res);
							this.tabledata = res.data.Projects;
							// console.log('res.data.TotalNum=',res.data.TotalNum)
							this.pageTotalNum = Math.ceil(res.data.TotalNum/this.totalItem);
							this.currentPage = i;					
							this.showNextOrLastPageBtn();
						}
						//200失败
						else {
							console.log('suc200', res);
						}
						uni.hideLoading();					
					},
					fail: (res) => {
						console.log("请求失败****");	
						uni.hideLoading();
					}
				});
			},
			initPage() {
				this.paging(1);
			},
			last()
			{
				this.currentPage--;
				this.paging(this.currentPage);
			},
			next()
			{
				this.currentPage++;
				this.paging(this.currentPage);
			},
			showNextOrLastPageBtn()
			{
				if(this.pageTotalNum==this.currentPage)
				{
					this.bShowLastPageBtn = true;
					this.bShowNextPageBtn = false;
					// console.log('11111')
				}
				else if(1==this.currentPage)
				{
					this.bShowLastPageBtn = false;
					this.bShowNextPageBtn = true;
					// console.log('2222')
				}
				else
				{
					this.bShowLastPageBtn = true;
					this.bShowNextPageBtn = true;
					// console.log('333333')
				}
				
				if(this.pageTotalNum==1){
					this.bShowLastPageBtn = false;
					this.bShowNextPageBtn = false;
					// console.log('444444')
				}
			},
			getList() {
				this.initPage(1);
				// uni.request({
				// 	url: mydata_api + "/project/getprojects",
				// 	data: {
				// 		"UserID": mydata_userInfo.UserID
				// 	},
				// 	method: "POST",
				// 	dataType: "json",
				// 	success: res => {
				// 		this.tabledata = res.data.Projects
				// 		console.log('tabledata=',this.tabledata)
				// 		// let aData = {
				// 		// 	"CreateTime": "2020-01-01 00:00:00",
				// 		// 	"CreateUserID": "59458299-3b84-4895-98f6-b990cdaedc72",
				// 		// 	"CreateUserName": "朱峰",
				// 		// 	"Describe": '“实验以振兴国产科技电影”和“实现中国航天强国梦”的宏大蓝图为背景，以我国首次登陆火星计划为现实脚本，运用现场实时特效技术手段，对火星地面、外太空等场景进行“经典学习”和“实践创兴”并通过持续开发和学生在实验过程中的资源上传不断扩大现场创作的实景和虚拟资产库，使学生再学习过程中，即是资源学习者和方案讨论者，也是资源建设者',
				// 		// 	"Id": 30,
				// 		// 	"ProjectName": "《火星计划》",
				// 		// 	"ProjectReviewImage": "../../../assets/studentAndTeacher/table/marsPlanReviewImage.png",
				// 		// 	"ReviewImageOss": "../../../assets/studentAndTeacher/table/marsPlanMainCover.png",
				// 		// 	"Type": "科幻",
				// 		// }
				// 		// this.tabledata.unshift(aData);
				// 		// console.log("table页面请求所有项目",res);
				// 		this.$forceUpdate();//强制刷新页面
				// 	}
				// })
			},
			//查看项目
			find(obj,index){
				this.$emit('viewProject',obj,index);
			},
			onClickCheck(e){
				if(this.bPublic==true){
					this.bPublic = false;
				} else {
					this.bPublic = true;
				}	
			}
		}
	}
</script>

<style lang="scss">
	.m_right {
		width: 100%;
		height: px2vh(960);
		margin-top: 5rpx;
		// padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_container {
			padding: 150rpx;
		}

		.s_logo {
			width: 100%;
			// height: 800rpx;
		}

		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;

			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}

	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;

	}

	tbody tr th:first-child {
		position: relative;
	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
		z-index: 3;
	}

	.m_right_footer {
		margin-top: 80rpx;
	}

	.m_logoimg {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}
</style>