DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/Ask/from.vue

<template>
	<view class="page">
		<view class="inSecTitle">{{ title }}</view>
		<view class="inSecTime">{{ time }}</view>
		<view class="index_box">
			<view class="signSec2Box" v-for="(items, i) in dataList" :key="items.QTitle">
				<view v-if="items.QType == 1">
					<view class="shenInput">
						<view class="shenInputBox">
							<view class="signTxt" :class="redEva[i]? 'redEva' : ''">{{ items.QTitle }}</view>
							<view class="inputRadioRow">
								<view v-for="(item, j) in items.Ask_QuestionItems" :key="item.IID">
									<view class="inputRadioCol4">
										<view class="inputRadio checkBoxs" :class="answer[i].list.indexOf(j) > -1 ? 'active' : ''" @click="tapRadio(i, j, item.QShowText)"></view>
										<text>{{ item.ITitle }}</text>
									</view>
								</view>
							</view>
							<view v-show="answer[i].QShowText" class="shenInput3" style="margin-top: 10px;">
								<l-textarea v-model="UText[i]" title="其他" class="" placeholder="请填写备注..." />
							</view>
						</view>
					</view>
				</view>
				<view v-if="items.QType == 2">
					<view class="signTextarea">
						<view class="signTextareaBox">
							<view class="signTxt" :class="redEva[i]? 'redEva' : ''">{{ items.QTitle }}</view>
							<view class="inputRadioRow">
								<view v-for="(item, j) in items.Ask_QuestionItems" :key="item.IID">
									<view class="inputRadioCol2">
										<view class="inputCheck checkBoxs" :class="answer[i].list.indexOf(j) > -1 ? 'active' : ''" @click="tapCheck(i, j)"></view>
										<text>{{ item.ITitle }}</text>
									</view>
								</view>
							</view>
							<view v-show="answer[i].QShowText" class="shenInput3" style="margin-top: 10px;">
								<l-textarea v-model="UText[i]" title="其他" class="" placeholder="请填写备注..." />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shenRow"><view class="shenBtn" @click="tapbtn">保&nbsp;&nbsp;存</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			time: '',
			dataList: [],
			answer: [],
			pageInfo: null,
			redEva: [],
			qmustFlag: false,
			redEvaCopy: [],
			flag: false,
			UText: []
		};
	},
	methods: {
		init() {
			this.pageInfo = this.GET_PARAM(); //获取页面传递参数
			let _this = this;
			_this.LOADING('加载数据中…');
			_this.HTTP_GET(
					'/learun/ask/paper',
					{
						VID: _this.pageInfo.VID
					},
					'加载数据时出错'
				)
				.then(data => {
					this.HIDE_LOADING();
					// console.log(data)
					if (data) {
						_this.title = data.VTitle;
						_this.time = data.VStartTime + '-' + data.VStopTime;
						_this.dataList = data.Ask_Questions;
						console.log(_this.dataList);
						_this.dataList.forEach((n, i) => {
							_this.answer.push({
								list: [],
								QShowText: false
							});
							_this.redEva.push(false);
							_this.UText.push('');
						});
						_this.redEvaCopy = this.COPY(this.redEva);
					}
				});
		},
		tapbtn() {
			let _this = this;
			_this.redEva = this.COPY(this.redEvaCopy);
			_this.qmustFlag = false;
			_this.flag = false;
			let jsons = {
				VID: _this.pageInfo.VID,
				LessonNo: _this.pageInfo.LessonNo,
				EmpNo: _this.pageInfo.EmpNo,
				postarray: []
			};
			_this.dataList.forEach((n, i) => {
				let len = _this.answer[i].list.length;
				var qmin = n.QMin == null? 0 : n.QMin;
				var qmax = n.QMust == null? 1 : n.QMust;
				if(n.QMust && len == 0){
					_this.redEva[i] = true;
					_this.qmustFlag = true;
				}
				if((qmin && len < qmin) || (qmax && len > qmax)){
					_this.redEva[i] = true;
					_this.flag = true;
				}
				if(_this.qmustFlag){
					this.TOAST('有必选项未选择', 'success');
					return
				}
				if(_this.flag){
					this.TOAST('有选择项少选或多选', 'success');
					return
				}
				_this.answer[i].list.forEach((m, j) => {
					jsons.postarray.push({
						QID: n.QID, 
						IID: n.Ask_QuestionItems[m].IID, 
						UText: _this.answer[i].QShowText? _this.UText[i] : ''
					})
				})
				_this.LOADING('保存数据中…')
				// console.log(jsons)
				// return
				_this.HTTP_GET('/learun/ask/savepaper', jsons, '加载数据时出错').then(res => {
					_this.HIDE_LOADING();
					console.log(res);
					this.TOAST('操作成功', 'success');
					this.EMIT('askList')
					this.NAV_BACK()
				});
			})
		},
		tapCheck(i, num) {
			let ind = this.answer[i].list.indexOf(num);
			let len = this.answer[i].list.length;
			if (ind > -1) {
				let QMin = this.dataList[i].QMin == null ? 0 : this.dataList[i].QMin;
				if (len <= QMin) {
					this.TOAST(`该选项最少选择 ${QMin} 项`, 'success');
					return;
				}
				this.answer[i].list.splice(ind, 1);
			} else {
				let QMax = this.dataList[i].QMax == null ? 1 : this.dataList[i].QMax;
				if (len >= QMax) {
					this.TOAST(`该选项最多选择 ${QMax} 项`, 'success');
					return;
				}
				this.answer[i].list.push(num);
			}
			this.answer[i].QShowText = false;
			this.answer[i].list.forEach((n, j) => {
				if (this.dataList[i].Ask_QuestionItems[n].QShowText) {
					this.answer[i].QShowText = true;
				}
			});
		},
		tapRadio(i, num, flag) {
			this.answer[i].list.length = 0;
			this.answer[i].list.push(num);
			this.answer[i].QShowText = flag;
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
/deep/ .cu-form-group {
	min-height: 30px;
	border: 0;
}
/deep/ .cu-form-group uni-textarea {
	border: 1px solid #cbcbcb;
	padding: 5px 10px;
}
.page {
	background-color: #fff;
	padding-top: 1px;
	padding-bottom: 30px;
	padding: 1px 15px 30px;
}
.inSecTitle {
	font-size: 20px;
	text-align: center;
	margin: 20px 0 0px;
}
.inSecTime {
	font-size: 12px;
	text-align: center;
}
.shenInput {
	margin-top: 15px;
	font-size: 14px;
	line-height: 24px;
}
.shenInput3 {
	// display: none;
}
.shenInput:before,
.shenInput:after {
	display: table;
	content: ' ';
}
.shenInput:after {
	clear: both;
}
.signTxt {
	line-height: 24px;
	font-size: 14px;
	position: relative;
}
.shenInputBox {
	position: relative;
}
.shenInputBox1 {
	margin-left: 60px;
}
.inputRadioRow {
	overflow: hidden;
}
.inputRadioCol4 {
	margin-top: 8px;
}
.inputRadio {
	border-radius: 50%;
}
.inputCheck {
	border-radius: 2px;
}
.inputRadio.active:after {
	content: '';
	width: 12px;
	height: 12px;
	background: #0c86d8;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	border-radius: 50%;
}
.inputCheck.active:after {
	content: '';
	width: 12px;
	height: 12px;
	background: #0c86d8;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	border-radius: 2px;
}
.inputRadio,
.inputCheck {
	font-style: normal;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	border: 1px solid #cbcbcb;
	margin: 0 10px;
	position: relative;
	cursor: pointer;
}

.shenInputBox > .span,
.inputRadioCol4 .span,
.inputRadioCol3 .span,
.inputRadioCol2 .span {
	display: inline-block;
	vertical-align: middle;
}
.shenInput > .span {
	display: block;
	float: left;
	width: 60px;
	text-align: right;
	padding: 4px 8px 4px 0px;
	line-height: 24px;
}
.shenInputBox .inputTxt {
	width: 100%;
	display: block;
	height: 32px;
	line-height: 20px;
	border: 1px solid #cbcbcb;
	padding: 6px 10px;
	font-size: 14px;
}
.shenBtnBox .signTxt {
	margin-top: 30px;
	margin-left: 30px;
}
.shenBtn {
	width: 74%;
	background: #0c86d8;
	text-align: center;
	line-height: 40px;
	margin: 20px auto 20px;
	font-size: 17px;
	color: #fff;
	border-radius: 2px;
	cursor: pointer;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.signTextareaBox {
	margin-top: 20px;
	position: relative;
}
.inputRadioRow {
	overflow: hidden;
}
.inputRadioCol2 {
	margin-top: 8px;
}
.inputCheck image {
	width: 100%;
	display: none;
}
.signTextarea {
	margin-top: 15px;
	font-size: 14px;
	line-height: 24px;
}
.redEva {
	color: red !important;
}
</style>