学生自评系统 - 评分页面

<template>
	<view class="container">
		<view class="select">
			<text>学年：</text>
			<uni-data-select @change="change" placeholder="请选择学年" v-model="gradeyear" :localdata="options"
				:clear="false"></uni-data-select>
			<button type="primary" size="mini" @click="queryscires()">查询</button>
		</view>
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#007aff"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><uni-file-picker limit="3" @select="(e) => select(e, item.attachmentList)" @progress='progress'  @success="success" @fail="fail" v-model="fileLists" :listStyles="imageStyles" file-mediatype="all" file-extname="png,jpg,gif"><button type="default" size="mini" plain="true">佐证资料:<br>(点击上传)</button></uni-file-picker></view><view class="itemright">{{item.attachmentList}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view v-show="current === 1">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><button type="default" size="mini" plain="true">佐证资料:<br>(点击上传)</button></view><view class="itemright">{{item.attachmentList.fileName}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view v-show="current === 2">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><button type="default" size="mini" plain="true">佐证资料:<br>(点击上传)</button></view><view class="itemright">{{item.attachmentList.fileName}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view v-show="current === 3">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><button type="default" size="mini" plain="true">佐证资料:<br>(点击上传)</button></view><view class="itemright">{{item.attachmentList.fileName}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view v-show="current === 4">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><button type="default" size="mini" plain="true">佐证资料:<br>(点击上传)</button></view><view class="itemright">{{item.attachmentList.fileName}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view v-show="current === 5">
					<uni-group v-for="item in currentableData" mode="card" :title="item.pointName">
						<view class="row"><view class="itemleft">评分标准:</view><view class="itemright">{{item.pointMemo}}</view></view>
						<view class="row"><view class="itemleft"><button type="default" size="mini" plain="true" @click="upload">佐证资料:<br>(点击上传)</button></view><view class="itemright">{{item.attachmentList.fileName}}</view></view>
						<view class="row"><view class="itemleft">得分:</view><view class="itemright"><uni-number-box v-model="item.selfScore" :min="0" :max="100"></uni-number-box></view></view>
						<view class="row"><view class="itemleft">得分依据:</view><view class="itemright"><uni-easyinput type="textarea" autoHeight v-model="item.detail" placeholder="请输入内容"></uni-easyinput></view></view>
					</uni-group>
				</view>
				<view class="btns">
					<button type="primary" size="mini" @click="Savedate" :loading="isSaving">{{savetext}}</button>
					<button type="primary" size="mini" @click="Submitdate">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {getGradeYears,getDeatil,saveDate,upDate} from '@/utils/student.js'
	export default {
		data() {
			return {
				gradeyear: 0,
				options: [],
				studentXh: '',
				items: ['思想', '职业', '身心', '文化', '劳动'],
				current: 0,
				score: '',
				tableData: [],
				currentableData:[],
				vModelValue: 3,
				value: '',
				savetext:'保存',
				isSaving:false,
				imageValue:[],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				fileLists: []
			}
		},
		mounted() {
			uni.getStorage({
				key: 'studentxh',
				success: function(res) {
					this.studentXh = res.data
				}
			})
			this.getYears()
			this.onClickItem({currentIndex: 0})
		},
		methods: {
			// 获取上传状态
				select(e,al,index){
					
					console.log('index：',index)
					console.log('选择文件：',e)
					// al.push({fileName:e.tempFiles.name,url:e.tempFiles.cloudPath})
					// console.log('al：',al)
					// console.log(al)
				},
				progress(e){
					console.log('进度',e)
				},
				// 上传成功
				success(e){
					console.log('上传成功',e)
				},
				
				// 上传失败
				fail(e){
					console.log('上传失败：',e)
				},
			change(e) {
				this.gradeyear = e
			},
			getYears() {
				getGradeYears({xh: this.studentXh}).then(res => {
					if (res.msg == '成功') {
						const All = res.data
						let myrange = []
						All.forEach((val, index) => {
							myrange.push({
								value: val.gradeYear, // 选项id
								text: val.gradeYear // 选项名称
							})
						})
						this.options = myrange
						if (this.options.length > 0) {
							this.gradeyear = this.options[0].value
							this.queryscires()
						}
					}
				})
			},
			queryscires() {
				getDeatil({
					studentId: this.studentXh,
					gradeYear: this.gradeyear
				}).then(res => {
					if (res.msg == '成功') {
						this.score = res.data.score
						this.tableData = res.data.list
						// console.log(this.tableData)
						// this.onClickItem()
						this.selectdata()
					}
				})
			},
			selectdata(){
			      let index = Number.parseInt(this.current) + 1
				  console.log(index)
			      let start,end;
			      start = this.tableData.findIndex(item=>item.itemName.startsWith(index))
			      end = this.tableData.findIndex(item=>item.itemName.startsWith(index+1))
			      if(end == -1){
			        this.currentableData = this.tableData.slice(start)
					console.log(this.currentableData)
			      }
			      else{
			        this.currentableData = this.tableData.slice(start,end)
			        if(this.currentableData.length>0){
						console.log(this.currentableData)
			        }
			      }
			},
			//保存数据
			Savedate(){
				let data = {studentId:this.studentXh,gradeYear:this.gradeyear,scoreList:this.tableData}
				saveDate(data).then(res=>{
					console.log(res)
				}).catch(()=>{})
			},
			//提交数据
			Submitdate(){
			    let data = {studentId:this.studentXh,gradeYear:this.gradeyear,scoreList:this.tableData}
			    upDate(data).then(res=>{
					console.log(res)
					this.queryscires()
			    }).catch(()=>{})
			},
			onClickItem(e) {
				// if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					// this.queryscires()
					this.selectdata()
				// }
			}
		}
	}
</script>