kps-mini-program/pages/index/index.vue

<template>
	<view class="content" v-if="formData.itemName!=null">
		<view class="">
			<image class="logo" src="../../static/logo.png"></image>
			<view class="uni-box-head">
				<uni-title type="h2" align="center" :title="formData.itemName + formData.cycleName"></uni-title>
			</view>
			<uni-notice-bar show-icon text="以下各评分项之和需等于100" />
			<uni-title type="h5" align="center" :title="questions[0].parentLabel" color=rgb(191,44,35)></uni-title>
		</view>
		<view class="formData">
			<uni-forms :modelValue="formData" ref="form">
				<view class="uni-box-head">
					<uni-forms-item name="professorNo">
						<uni-easyinput prefixIcon="person" v-model="formData.professorNo" placeholder="请输入专家编号(必填)"
							maxlength="8" trim="all" />
					</uni-forms-item>
				</view>
				<uni-forms-item v-for="(item,index) in questions" :key="index">
					<uni-card :is-shadow="true" margin="5px">
						<uni-icons type="help-filled" size="20" color="green"></uni-icons>
						<text class="uni-body"
							style="color: black; font-size:medium; letter-spacing: 1px; margin-left: 20rpx; border-bottom: 1rpx solid gray;">{{(index+1) +"."+item.label}}</text>
						<text style="font-size: smaller;  color:darkgrey;float:right">
							{{(item.minScore==null ||item.maxScore==null )?"":item.minScore+'-'+item.maxScore}}
						</text>
						<view slot="actions">
							<view class="uni-mt-5">
								<uni-forms-item name="score">
									<uni-easyinput suffixIcon="star-filled" type="number" v-model="item.score"
										trim="all" placeholder="请输入该项分数" />
								</uni-forms-item>
							</view>

						</view>
					</uni-card>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">下一步</button>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" title="提示" :content="content"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	<view v-else class="noDucument">
		<image class="logo" src="../../static/logo.png"></image>
		暂无问卷
	</view>
</template>
<script>
	export default {
		data() {
			return {
				formData: {
					id: null,
					documentId: null,
					cycleName: "",
					itemName: "",
					questions: [
						{
							parentLabel:""
						}
					]
				},
				msgType: 'error',
				content: null,
				socket: null,
				questions: [
					{
						parentLabel:""
					}
				],
				commitQuestions: [],
				index: 1

			}
		},

		onLoad() {
			this.initWS();
			this.getDocument();
		},
		watch:{
			questions:{
				handler(newValue,oldValue){
					let lastItemIndex = this.questions.length-1;
					let preouisLastItemIndex = this.questions.length-2;
					let lastScore =100;
					for (let i in newValue){
						if (newValue[i].score != null && newValue[i].score != "") {
							lastScore = lastScore - (parseFloat(newValue[i].score));
							if (i == preouisLastItemIndex && lastScore>=0){
								this.questions[lastItemIndex].score = lastScore
							}
						}
						
					}
				},
				deep:true
			}
		},
		methods: {
			initWS() {
				let socket = uni.connectSocket({
					url: 'wss://kps.scdayou.com/ws/apo/ws',
					//url: 'ws://127.0.0.1:8090/apo/ws',
					method: 'GET',
					success: () => {
						console.log("socket success")
					}
				});
				this.socket = socket;
			},
			dialogToggle(val) {
				this.content = val;
				this.$refs.alertDialog.open()
			},
			getDocument() {
				var that = this;
				uni.request({
					//url: "http://127.0.0.1:8090/apo/document/current",
					url: "https://kps.scdayou.com/apo/document/current",
					data: null,
					method: "get",
					success: function(res) {
						that.formData = res.data.data;
						if (that.formData.questions!=null){
							that.questions = that.formData.questions[0];
						}
					},
				})
			},

			submit() {
				//uni.showLoading()
				var that = this;
				const data = that.formData;
				let xQuestions = that.questions;
				if (!data.professorNo) {
					that.dialogToggle("请输入专家编号")
					//uni.hideLoading()
					return
				}
				let totalScore = 0;
				for (let i in xQuestions) {
					if (xQuestions[i].score == null || xQuestions[i].score == "") {
						that.dialogToggle("还存在未评分的题目，请完成后提交。")
						return
					}
					totalScore += parseFloat(xQuestions[i].score);
				}
				if (totalScore != 100) {
					that.dialogToggle("评分之和必须等于100,请检查后再提交。")
					return
				}
				for (let i in that.questions) {
					that.commitQuestions.push(that.questions[i]);
				}
				that.questions = [];
				for (let i=this.index; i<that.formData.questions.length;i++){
					if (that.formData.questions[i].length>0){
						this.questions = that.formData.questions[i];
						this.index = i+1;
						return
					}
				}



				that.formData.result = that.commitQuestions;
				that.formData.questions = [];
				uni.request({
					//url: "http://127.0.0.1:8090/apo/document/commit",
					url: "https://kps.scdayou.com/apo/document/commit",
					data: that.formData,
					method: "post",
					success: function(res) {
						that.formData = {
							professorNo: null,
							questions: []
						};
						that.commitQuestions = [];
						that.questions = [];
						uni.closeSocket(that.socket);
						uni.navigateTo({
							url: 'ok'
						});

					},
				})
			},
				findChildren(item,callback){
					if (item.children.length>0){
						callback(item.children);
					}
				}
		},

		destoryed() {
			// 在组件销毁前断开 WebSocket 连接
			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
		},
		beforeDestory() {
			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
		}
	}
</script>

<style>
	.content {
		align-items: center;
		justify-content: center;
	}


	.logo {
		height: 170rpx;
		width: 700rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		margin-bottom: 50rpx;
		margin-right: 10rpx;
	}

	.uni-box-head {
		margin-right: 10rpx;
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}

	.uni-mt-5 {

		margin-left: 1.5%;
		margin-bottom: 40rpx
	}

	.options {
		display: flex;
		margin-bottom: 20rpx
	}

	.text {
		font-size: larger !important;
		margin-top: 5rpx;
		letter-spacing: 0.5px;
	}

	.noDucument {
		text-align: center;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-size: 20px;
		font-weight: bold;
		color: red;
		margin-top: 40%;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.error-text {
		color: #f56c6c;
	}
</style>