yichael_zhongchuang_front_2/components/student/project.vue

<template>
	<view class="m_right">
		<!-- <img src="@/assets/home/homeBG.jpg" class="s_logo" mode=""></img> -->
		<view class="m_right_container">
		
			<view class="m_row_class">
				<view class="m_row">
					<view class="m_row_link"></view>
					<view class="m_row_title" v-text="'项目管理'"></view>
					<view style="position: relative;margin-left: 40rpx;">
						<div class="triangle_border_down">
							<span></span>
						</div>
					</view>
				</view>

				<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>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in projectData" :key="index">			
							<th>{{item.ProjectName}}</th>
							<th>{{item.Type}}</th>
							<th style="position: relative;"><button type="default" size="mini" @click="viewIntro(item)" class="m_edit">简介</button></th>
							<th>{{item.CreateUserName}}</th>
						</tr>
					</tbody>
				</table>
			</view>
			<view class="m_row_class">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="m_row">
						<view class="m_row_link">
						</view>
						<view class="m_row_title" v-text="'文件管理'">
						</view>
						<view style="position: relative;margin-left: 40rpx;">
							<div class="triangle_border_down">
								<span></span>
							</div>
						</view>
					</view>
				</view>
				<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>
							<th>审核状态</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in fileData" :key="index">
							<th>{{index+1}}</th>
							<th>{{item.Name}}</th>
							<th>{{item.Type}}</th>
							<th>{{item.UploadUserName}}</th>
							<th>{{item.UPloadTime.substring(0,9)}}</th>
							<th style="position: relative;"><button type="default" size="mini" @click="download(index,item)" class="m_edit_1">下载</button></th>
							<th>{{getShenheText(item.Pass)}}</th>
						</tr>
					</tbody>
				</table>
			</view>
			<view class="m_row_class">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="m_row">
						<view class="m_row_link">
						</view>
						<view class="m_row_title" v-text="'成员信息'">
						</view>
						<view style="position: relative;margin-left: 40rpx;">
							<div class="triangle_border_down">
								<span></span>
							</div>
						</view>
					</view>
				</view>
				<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 projectMembers" :key="index">
							<th>{{item.User.IlabAccount}}</th>
							<th>{{item.User.Name}}</th>
							<th>{{item.User.Profession}}</th>
							<th>{{item.User.Class}}</th>
							<th>
								<div>
									{{item.User.Type}}
								</div>
							</th>
							<th>{{item.User.PhoneNum}}</th>
						</tr>
					</tbody>
				</table>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home_project",
		data() {
			return {
				index: 1,
				title: "",
				show: false,
				auditshow: false,
				callback: "",
				arr: [],
				data: [],
				projectData: [],
				ProjectItem: [],
				fileData: [],
				projectMembers: [],
			}
		},
		components: {
			
		},
		methods: {
			stopPenetrate(){
			    return;
			},
			paging(obj) {
				this.index = obj;
			},
			viewIntro(item){
				uni.showModal({
				    title: '简介',
					showCancel: false,
				    content: item.Describe,
				    success: function (res) {
				        if (res.confirm) {
				            console.log('确定');
				        } else if (res.cancel) {
				            console.log('取消');
				        }
				    }
				});
			},
			//审核状态中文
			getShenheText(pass){
				let t = "成功"
				if (pass == false) {
					t = "失败"
				}
				return t
			},
			download(index,item) {
				// window.location.href = item.URL;
				window.open(item.URL);
			},
			getlist() {
				uni.request({
					url: mydata_api + "/project/getprojectcontent",
					data: {
						"UserID": mydata_userInfo.UserID,
						"ProjectID": this.projectData[0].Id
					},
					method: "POST",
					dataType: "json",
					success: res => {
						if (res.data.Code == 100) {
							// this.projectData[0] = null
							this.projectData[0] = res.data.Project;
							// console.log('projectData=',this.projectData[0])
							this.$forceUpdate()
						}
						// console.log("获取了什么样子的信息", this.projectData[0]);
					}
				})
			},
			getFileList() {
				uni.request({
					url: mydata_api + "/project/getprojectcontent",
					data: {
						"UserID": mydata_userInfo.UserID,
						"ProjectID": this.projectData[0].Id
					},
					method: "POST",
					dataType: "json",
					success: res => {
						this.fileData = res.data.ProjectItem;
						// console.log('this.fileData=',this.fileData)
					}
				})
			},
			viewProject(obj, index) {
				// console.log('进来的什么信息',obj)
				this.projectData = [obj];
				if(index==0){
					this.fileData = [
						{
							"AliyunOssName": "_59458299-3b84-4895-98f6-b990cdaedc72_chrome_elf.dll",
							"Id": "0b0d8876-71de-43e6-a3dd-59a3c8f6d069",
							"Name": "《火星计划》气氛图",
							"Pass": false,
							"ProjectID": 30,
							"ProjectName": "《火星计划》",
							"Type": "气氛图",
							"UPloadTime": "2021-05-13 18:19:12",
							"URL": "https://www.yuyekeji.cn/H5/ZhongChuang/《火星计划》气氛图.jpeg",
							"UpLoadUserID": "59458299-3b84-4895-98f6-b990cdaedc72",
							"UploadUserDuty": "创建人",
							"UploadUserName": "朱峰",
						},
						{
							"AliyunOssName": "_59458299-3b84-4895-98f6-b990cdaedc72_chrome_elf.dll",
							"Id": "0b0d8876-71de-43e6-a3dd-59a3c8f6d069",
							"Name": "《火星计划》气氛图2",
							"Pass": false,
							"ProjectID": 30,
							"ProjectName": "《火星计划》",
							"Type": "气氛图",
							"UPloadTime": "2021-05-13 18:19:12",
							"URL": "https://www.yuyekeji.cn/H5/ZhongChuang/《火星计划》气氛图2.jpg",
							"UpLoadUserID": "59458299-3b84-4895-98f6-b990cdaedc72",
							"UploadUserDuty": "创建人",
							"UploadUserName": "朱峰",
						}
					]
					return;
				}
				this.getFileList();
				this.getMemberList();
			},
			getMemberList() {
				var temp = {
					"ProjectID": this.projectData[0].Id
				}
				uni.request({
					url: mydata_api + "/project/getmember",
					data: temp,
					method: "POST",
					dataType: "json",
					success: res => {
						// console.log("请求学生", res);
						if (res.data.Code == 100) {
							this.projectMembers = res.data.Users;
							// console.log();
						}
					}
				})
			},
			bindPickerChange_proType: function(e) {
				this.index_proType = e.target.value;
				this.editDialogData.type = this.proType[this.index_proType];
				// console.log(this.model)
			},
			bindPickerChange_proTypeadd: function(e) {
				this.index_addproType = e.target.value;
				this.addedMemberModel.type = this.addproType[this.index_addproType];
				// console.log(this.model)
			},
            bindPickerChange_fileType: function(e) {
                this.index_FileType = e.target.value;
                this.fileDialogData.type = this.addFileType[this.index_FileType];
                // console.log(this.model)
            },
			deleteMember(item){
				console.log('删掉成员 ',item)
				let url = mydata_api + "/project/deletemember"
				let data = {
					"userID" : this.projectData[0].CreateUserID,
					"DeleteUserID":item.User.Id,
					"ProjectID":this.projectData[0].Id,
				}
				console.log('删掉成员 发送数据 '," 地址 ",url," 数据 ",data)

				uni.request({
					url: url,
					data: data,
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('删掉成员 返回',res)
						if (res.data.Code == 100) {
							// this.$refs.table.getList();
							this.getMemberList();
							this.$forceUpdate();//强制刷新页面
						}
						// this.projectData.splice(index,index);
					}
				})
			},
            delFile(){
				// this.currentSelect
				console.log('删除文件', this.currentSelect)
				// SetFilePass
				let url = mydata_api + "/project/deleteprojectcontent"
				// "UserID":"xxxx",           //上传人或者项目创建人
				// 		"ProjectItemID" : "123"
				let data = {
					"UserID" : this.projectData[0].CreateUserID,
					"ProjectItemID":this.currentSelect.item.Id
				}
				console.log('删除文件 发送数据 '," 地址 ",url," 数据 ",data,"项目数据",this.projectData)

				uni.request({
					url: url,
					data: data,
					method: "POST",
					dataType: "json",
					success: res => {
						console.log('删除文件 返回',res)
						if (res.data.Code == 100) {
							this.getFileList();
						}
					}
				})
            },
            DownloadFile() {
				window.location.href = this.currentSelect.item.URL;
            },
		},
	}
</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_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;
			}
		}
	}
	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}
	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;
	}
	.form-input {
		width: 100%;
		border: 1px solid #ece8e8;
		line-height: 50rpx;
		font-size: 30rpx;
		border-radius: 6rpx;
		padding: 10rpx 40rpx;
	}
	.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);
	}
	.m_edit_1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
		z-index: 0;
	}
	.m_delete_1 {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 110rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	.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;
	}
	.m_row {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #ea252c;
		padding: 0 0 80rpx 0;
	}
	.m_audit {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 65px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: white;
		background-color: #FF791B;
	}
	.m_audit_1 {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 55px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: white;
		background-color: #FF791B;
	}
	.m_row_link {
		width: 10rpx;
		height: 60rpx;
		background-color: #ea252c;
		margin-right: 40rpx;
	}
	.m_row_title {
		color: #ea252c;
		font-weight: bold;
		font-size: 40rpx;
	}
	/*向下*/
	.triangle_border_down {
		width: 0;
		height: 0;
		border-width: 25rpx 25rpx 0;
		border-style: solid;
		border-color: #ea252c transparent transparent;
		/*灰 透明 透明 */
		margin: 20rpx auto;
		position: relative;
	}
	.m_row_class {
		margin-bottom: 60rpx;
	}
	.addMember_box{
		margin-bottom: 50rpx;
		height: 80rpx;
	}
	.addMember_input_box{
		width: 500rpx;
		height: 80rpx;
	}
	.addMember_input {
		width: 100%;
		height: 100%;
		border: 1px solid #ece8e8;
		line-height: 50rpx;
		font-size: 30rpx;
		border-radius: 6rpx;
		padding: 10rpx 40rpx;
	}
	.addMember_btn {
		width: 130rpx;
		height: 80rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	.blank{
		border:1px solid black;
	}
	.table{
		border:1px solid black;
	}
	.input-item {
		border:1px solid black;
	}
	.pop_view{
		position: fixed;
		
		display: flex;
		justify-content: center;
		align-items:center;/*垂直居中*/
		
		width: 100%;
		height: 100%;
		top: 0rpx;
		left: 0rpx;
		// z-index: 100;
		background-color:rgba(0,0,0,0.5)
	}
	.edit_form{
		width: 25%;
		height: 50%;
		background-color:rgba(255,255,255,1);
	 
		display: flex;
		justify-content: center;
		// justify-content: space-between;
		align-items:center;
		
		.edit_BG{
			width: 90%;
			height: 90%;
			
			display: flex;
			justify-content: space-between;
			align-items:center;
			flex-direction:column;
			// border:1rpx solid #000000;
			
			.edit_row{
				
				width: 90%;
				height: 50%;
				// border:1rpx solid #000000;
				
				display: flex;
				// justify-content: space-between;
				align-items:center;
				flex-direction:row;
			}
		}
	}
	.edit_title
	{	
		width: 80%;
		height: 100%;
		font-size: 70rpx;
		color: #000000;
		// border:1rpx solid #000000;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		margin-bottom:10%;
	}
	.edit_text{
		width: 50%;
		height: 50%;
	
		font-size: 30rpx;
		color: #000000;
		// border:1rpx solid #000000;
	}
	
	.input_frame{
		width: 100%;
		height: 80%;
	
		border:1rpx solid #000000;
		border-radius: 25rpx;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
	}
	.edit_input{
		font-size: 30rpx;
		color: #000000;
		width: 80%;
		height: 100%;
		// border:1rpx solid #000000;
	}
	
	
	.modify_btn
	{
		width: 90%;
		height: 50%;
		// border:1rpx solid #000000;
		
		display: flex;
		align-items:center;
		flex-direction:row;
		
		margin-top:10%;
	}
	.modify_confirm
	{
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 30%;
	}
	.modify_cancel
	{
		min-width: 30%;
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	
	.m_msg {
		width: 1500rpx;
		height: 900rpx;
		padding: 0rpx 0 40rpx 0;
		position: fixed;
		top: 50%;
		left: 50%;
		border-radius: 10rpx;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: #fff;
		opacity: 1;
		.layout{
			position: absolute;
			left: 50%;
			bottom: 2%;
		}
		.m_edit {
			position: relative;
			left: 20%;

			transform: translate(-50%, -50%);
			background: rgb(67, 127, 250);
			color: rgb(255, 255, 255);
			min-width: 130rpx;
		}
		.m_delete {
			position: relative;
			left: 50%;
			min-width: 130rpx;
			transform: translate(-50%, -50%);
			background: rgb(234, 37, 44);
			color: rgb(255, 255, 255);
		}
	}
</style>