yichael_zhongchuan_manager/components/manager/user.vue

<template>
	<view class="m_right">
		<view class="m_right_hander">
			<button size="mini" class="m_btn_red" @click="addUser()">添加用户</button>
		</view>
		<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>ilab账户</th>
						<th>注册时间</th>
						<th>分数</th>
						<th>修改信息</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(dataUser,dataUserI) in dataUsers_all" :key="dataUserI">
						<!-- <th style="color: #EA252C;">{{dataUser.IlabAccount}}</th> -->
						<th>{{dataUser.Name}}</th>
						<th>{{dataUser.Class}}</th>
						<th>{{dataUser.StudentID}}</th>
						<th>{{dataUser.PhoneNum}}</th>
						<th>{{dataUser.IlabAccount}}</th>
						<th>{{dataUser.SignTime}}</th>
						<th>{{dataUser.TotalScore}}</th>
						<th class="btn_bg"><button type="default" size="mini" class="m_edit" @click="modify(dataUser)">修改</button></th>
						<th class="btn_bg"><button type="default" size="mini" class="m_delete" @click="deleteUser(dataUser)">删除</button></th>
					</tr>
				</tbody>
			</table>
		</view>
		<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==index?'p_act':''"> -->
				<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>
		<popForm ref="popForm"></popForm>
		<popAlert ref="popAlert"></popAlert>
	</view>
</template>

<script>
	import popForm from '@/components/popForm.vue'
	import popAlert from '@/components/popAlert.vue'
	
	export default {
		name: "manager_user",
		components: {
			popForm,
			popAlert,
		},
		data() {
			return {
				pageTotalNum:1,
				currentPage:1,
				totalItem:2,
				dataUsers_all: [],
				bShowLastPageBtn:false,
				bShowNextPageBtn:false,
			}
		},
		methods: {
			paging(i) {
				// console.log('index=',i)
				uni.showLoading({
				    title: '加载中'  
				});
				
				let fromIndex = this.totalItem*(i-1);
				let toIndex = fromIndex+this.totalItem;
				
				let data = {
					"UserID": mydata_userInfo.userID,
					"BeginNum": fromIndex, //用户数组索引
					"EndNum": toIndex //用户数组索引结束
				}
				console.log('data===',data)
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api + '/backstage/getalluser',
					method: 'POST',
					data: data,
					dataType: 'json',
					success: (res) => {
						//100成功
						if (res.data.Code == 100) {
							console.log("请求全部用户res", res);
							this.dataUsers_all = res.data.Users;
							this.pageTotalNum = Math.ceil(res.data.AllNumOfList/this.totalItem);
							this.currentPage = i;																		
							this.showNextOrLastPageBtn();
							
							this.setTotalScore();
						}
						//200失败
						else {
							console.log('suc200', res);							
						}
						uni.hideLoading();
					},
					fail: (res) => {
						console.log("请求失败****");
						uni.hideLoading();
					}
				});
			},
			initPage() {
				this.paging(1);
			},
			//分数合并
			setTotalScore() {
				for (let i = 0; i < this.dataUsers_all.length; i++) {
					let totalScore = 0;
					for (let j = 0; j < this.dataUsers_all[i].UserScore.length; j++) {
						let ascore = Number(this.dataUsers_all[i].UserScore[j]);
						if (ascore) {
							totalScore += ascore;
						}
					}
					this.dataUsers_all[i].TotalScore = totalScore;
				}
			},
			last()
			{
				this.currentPage--;
				this.paging(this.currentPage);
			},
			next()
			{
				this.currentPage++;
				this.paging(this.currentPage);
			},
			showNextOrLastPageBtn()
			{
				// if((this.pageTotalNum-this.totalItem)>0)
				// {
				// 	this.bShowLastPageBtn = false;
				// 	this.bShowNextPageBtn = false;
				// 	// console.log('0000')
				// }
				// else 
				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')
				}
			},
			addUser(){
				this.$refs.popForm.isShow(true);
				this.$refs.popForm.setTitle('添加用户');
				let _self = this;
				let callback = function(content_arr){
					let data = {
						"IlabAccount":content_arr[0].input,
						"UserID" : content_arr[1].input,        
						"SetUserID":content_arr[2].input,        
						"Name":content_arr[3].input,              
						"School":content_arr[4].input,       
						"Department":content_arr[5].input,  
						"Profession":content_arr[6].input,    
						"Class":content_arr[7].input,          
						"StudentID":content_arr[8].input,       
						"Post":content_arr[9].input,            
						"PhoneNum":content_arr[10].input,
						"Email":content_arr[11].input,
						"Nation":content_arr[12].input,             
						"PoliticsStatus":content_arr[13].input, 
						"NativePlace":content_arr[14].input,   
						"Certificate":content_arr[15].input,
						"CertificateNum":content_arr[16].input,
					}
					// console.log('data===',data)
					
					uni.showLoading({
					    title: '上传中'  
					});
					
					uni.request({
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						url: mydata_api + '/backstage/addusers',
						method: 'POST',
						data: data,
						dataType: 'json',
						success: (res) => {
							//100成功
							if (res.data.Code == 100) {
								console.log("添加用户成功", res);
								_self.paging(_self.currentPage);
							}
							//200失败
							else {
								console.log('添加用户成功失败200', res);	
							}
							uni.hideLoading();
						},
						fail: (res) => {
							console.log("添加用户成功失败");
							uni.hideLoading();
						}
					});
				};
				
				this.$refs.popForm.setContent([
					{
						'name':'Ilab账号',
						'input':'',
						'type' :'text'
					},
					{
						'name':'设置用户',
						'input':mydata_userInfo.userID,
						'type' :'text'
					},
					{
						'name':'被设置用户ID',
						'input':'',
						'type' :'text'
					},
					{
						'name':'姓名',
						'input':'',
						'type' :'text'
					},
					{
						'name':'学校',
						'input':'',
						'type' :'text'
					},
					{
						'name':'院系',
						'input':'',
						'type' :'text'
					},
					{
						'name':'专业',
						'input':'',
						'type' :'text'
					},
					{
						'name':'班级',
						'input':'',
						'type' :'text'
					},
					{
						'name':'学号',
						'input':'',
						'type' :'text'
					},
					{
						'name':'Post',
						'input':'',
						'type' :'text'
					},
					{
						'name':'职务',
						'input':'',
						'type' :'text'
					},
					{
						'name':'电话',
						'input':'',
						'type' :'text'
					},
					{
						'name':'邮箱',
						'input':'',
						'type' :'text'
					},
					{
						'name':'民族',
						'input':'',
						'type' :'text'
					},
					{
						'name':'政治面貌',
						'input':'',
						'type' :'text'
					},
					{
						'name':'籍贯',
						'input':'',
						'type' :'text'
					},
					{
						'name':'证件类型',
						'input':'',
						'type' :'text'
					},
					{
						'name':'证件号码',
						'input':'',
						'type' :'text'
					}
				],callback);	
			},
			modify(dataUser)
			{
				this.$refs.popForm.isShow(true);
				this.$refs.popForm.setTitle('修改用户信息');
				
				let _self = this;
				
				let callback = function(content_arr){
					
						let data = {
							"UserID":mydata_userInfo.userID,
							"SetUserID" : dataUser.Id,
							"Name":content_arr[0].input,
							"School":dataUser.School,
							"Department":dataUser.Department,
							"Profession":dataUser.Profession,
							"Class":content_arr[1].input,
							"StudentID":content_arr[2].input,
							"Post":dataUser.Post,
							"PhoneNum":content_arr[3].input,
							"Email":dataUser.Email,
							"Nation":dataUser.Nation,
							"PoliticsStatus":dataUser.PoliticsStatus,
							"NativePlace":dataUser.NativePlace,
							"Certificate":dataUser.Certificate,
							"CertificateNum":dataUser.CertificateNum,
						}
						
						uni.showLoading({
						    title: '上传中'  
						});
						
						uni.request({
							header: {
								'Content-Type': 'application/json;charset=UTF-8'
							},
							url: mydata_api + '/user/setuserinfo',
							method: 'POST',
							data: data,
							dataType: 'json',
							success: (res) => {
								//100成功
								if (res.data.Code == 100) {
									console.log("修改用户信息成功", res);
									_self.paging(_self.currentPage);
								}
								//200失败
								else {
									console.log('修改用户信息失败200', res);
								}
								
								uni.hideLoading();
							},
							fail: (res) => {
								console.log("修改用户信息失败");
								uni.hideLoading();
							}
						});
					
				};
				this.$refs.popForm.setContent([
					
					{
						'name':'姓名',
						'input':dataUser.Name,
						'type' :'text'
					},
					{
						'name':'班级',
						'input':dataUser.Class,
						'type' :'text'
					},
					{
						'name':'学号',
						'input':dataUser.StudentID,
						'type' :'text'
					},
					{
						'name':'电话',
						'input':dataUser.PhoneNum,
						'type' :'text'
					}
				],callback);
			},
			deleteUser(dataUser)
			{
				this.$refs.popAlert.isShow(true);	
				this.$refs.popAlert.setTitle('提示');
				let _self = this;		
				let callback = function(){
					let data = {
						"UserID":mydata_userInfo.userID,
						"DeleteUserID" : dataUser.Id
					}
					
					uni.showLoading({
					    title: '上传中'  
					});
					
					uni.request({
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						url: mydata_api + '/backstage/deleteuser',
						method: 'POST',
						data: data,
						dataType: 'json',
						success: (res) => {
							//100成功
							if (res.data.Code == 100) {
								console.log("删除用户成功", res);
								_self.paging(_self.currentPage);
							}
							//200失败
							else {
								console.log('删除用户失败200', res);
							}
							
							uni.hideLoading();
						},
						fail: (res) => {
							console.log("删除用户失败");
							uni.hideLoading();
						}
					});
				}
				
				this.$refs.popAlert.setContent('是否删除用户',callback);
			},
		}
	}
</script>

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

		.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;
		border: 2rpx solid #DDDDDD !important;
	}

	th {
		border: 2rpx solid #DDDDDD !important;
	}
	
	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
		border: 2rpx solid #DDDDDD !important;
	}

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

	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}
	.btn_bg{
		// border: 1rpx solid #DDDDDD;
		
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}
	.m_edit {
		// position: relative;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		// width: 60%;
	}

	.m_delete {
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
		// width: 60%;
	}

	.m_right_footer {
		margin-top: 80rpx;
	}

	.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>