zhxg_app/pages/instructor/performance-appraisal/components/graduation-guidance.vue

<template>
	<view class="form-container">
		<view class="form-item">
			<label>01 指导审核毕业生登记表等就业核心材料（10分）</label>
			<view class="bottom">
				<input @blur="onLimitInput($event,'gradFormAuditScoring',10)" type="number"
					v-model="formData.gradFormAuditScoring" placeholder="请输入分值" placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="form-item">
			<label>02 开展学生就业咨询服务及团体辅导工作，助力学生解决就业困惑、提升就业竞争力。（5分）</label>
			<view class="bottom">
				<input type="number" @blur="onLimitInput($event,'stuCareerConsultScoring',5)"
					v-model="formData.stuCareerConsultScoring" placeholder="请输入分值" placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="form-item">
			<label>03 审核毕业生源信息、就业系统信息等数据及就业证明材料（含真实性、完整性、规范性）（10分）</label>
			<view class="bottom">
				<input type="number" @blur="onLimitInput($event,'gradFormGuidanceScoring',10)"
					v-model="formData.gradFormGuidanceScoring" placeholder="请输入分值" placeholder-class="input-placeholder" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		limitInput
	} from "@/utils/limitInput.js"
	import {
		kpiFillingGraduationGuidanceDetail
	} from "@/api/instructor/superintendent.js"
	export default {
		props: ["queryDetailParams", "commitStatus", "classType"],
		data() {
			return {
				formData: {
					gradFormAuditScoring: "",
					stuCareerConsultScoring: "",
					gradFormGuidanceScoring: "",
					id: ""
				}
			}
		},
		created() {
			const params = {
				...this.queryDetailParams,
				classType: this.classType
			};
			kpiFillingGraduationGuidanceDetail(params).then(res => {
				console.log(res);
				if (res.rows && res.rows.length > 0) {
					const {
						gradFormAuditScoring,
						stuCareerConsultScoring,
						gradFormGuidanceScoring,
						id
					} = res.rows[0];
					this.formData = {
						...this.formData,
						gradFormAuditScoring,
						stuCareerConsultScoring,
						gradFormGuidanceScoring,
						id
					};
				} else {
					console.log("第一次");
				}
			})
		},
		methods: {
			onLimitInput(event, name, max) {
				let result = limitInput(event.detail.value, max);
				this.formData[name] = result;
			},
			getFormData() {
				return this.formData;
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-container {
		.form-item {
			padding: 22rpx 40rpx 40rpx 40rpx;
			background-color: white;
			margin-bottom: 40rpx;
			border-radius: 16rpx;

			label {
				margin-bottom: 20rpx;
				display: inline-block;
				font-size: 26rpx;
			}

			.bottom {
				display: flex;
				align-items: center;

				input {
					flex: 1;
					border: 1px solid #E1E1E1;
					border-radius: 10rpx;
					height: 60rpx;
					padding-left: 30rpx;

					.input-placeholder {
						color: #b6b6b6;
					}
				}
			}
		}
	}
</style>