uniProject/pages/admin/Jiazheng/banzhengXinxi.vue

<template>
	<view class="form-container">
		<!-- 报证机构（picker 实现下拉选择） -->
		<view class="form-item">
			<text class="label">* 报证机构：</text>
			<picker mode="selector" :range="jigouNames" @change="jigouChange">
				<view class="picker">
					{{ formData.baozhengJigouName || '请选择报证机构' }}
				</view>
			</picker>
		</view>
		<!-- 职业名称（picker 实现下拉选择） -->
		<view class="form-item">
			<text class="label">* 职业名称：</text>
			<picker mode="selector" :range="zhiyeNames" range-key="name" @change="zhiyeChange">
				<view class="picker">
					{{ formData.zhiyeName || '请选择职业名称' }}
				</view>
			</picker>
		</view>
		<!-- 职业等级（picker 实现下拉选择） -->
		<view class="form-item">
			<text class="label">* 职业等级：</text>
			<picker mode="selector" :range="zhiyeLevels" @change="levelChange">
				<view class="picker">
					{{ formData.zhiyeLevelName || '请选择等级' }}
				</view>
			</picker>
		</view>

		<view  v-if="formData.banzhengInfoFlag" class="form-item">
			<text class="label">参训时间：</text>
			<uni-datetime-picker v-model="formData.canxunShijian" type="date" @change="canxunShijianChange">
				<view class="list-row">
					<icon class="list-icon error-icon"></icon>
					<text>{{formData.canxunShijian}}</text>
				</view>
			</uni-datetime-picker>
		</view>

		<view  v-if="formData.banzhengInfoFlag" class="form-item">
			<view>*实操成绩</view>
			<input v-model="formData.shicaochengji" placeholder="请填写实操成绩" />
		</view>
		<view  v-if="formData.banzhengInfoFlag" class="form-item">
			<view>*总课时</view>
			<input v-model="formData.zongkeshi" placeholder="请填写总课时" />
		</view>


		<view  v-if="!formData.banzhengInfoFlag" class="form-item">
			<text class="label">需要课程：</text>
			<radio-group @change="kechengChange">
				<label class="radio-label">
					<radio :value="'true'" :checked="formData.needKecheng == 'true'" />
					<text>是</text>
				</label>
				<label class="radio-label">
					<radio :value="'false'" :checked="formData.needKecheng == 'false'" />
					<text>否</text>
				</label>
			</radio-group>
		</view>
		<view v-if="!formData.banzhengInfoFlag" class="form-item">
			<text class="label">需要考试：</text>
			<radio-group @change="kaoshiChange">
				<label class="radio-label">
					<radio :value="'true'" :checked="formData.needKaoshi == 'true'" />
					<text>是</text>
				</label>
				<label class="radio-label">
					<radio :value="'false'" :checked="formData.needKaoshi == 'false'" />
					<text>否</text>
				</label>
			</radio-group>
		</view>
		<view>
			<view>上一步</view>
			<view>完成</view>
		</view>
		<!-- 提交按钮 -->
<!-- 		<button class="submit-btn" @click="submitForm">提交</button> -->
	</view>
</template>

<script>
	import {
		getBaozhengJigou,
		getJiazhengLevel,
		getJiazhengZhiye
	} from "@/api/jiazheng.js"
	export default {
		data() {
			return {
				formData: {
					baozhengJigouId: '',
					baozhengJigouName: '',
					baozhengJigouType: '',
					banzhengInfoFlag: false,
					zhiyeName: '',
					zhiyeId: '',
					zhiyeLevelName: '',
					zhiyeLevelId: '',
					canxunShijian: '',
					shicaochengji: '',
					zongkeshi: '',
					needKecheng: 'false', // 默认选中"是"
					needKaoshi: 'false' // 默认选中"是"
				},
				baozhengJigouOpt: [

				],
				zhiyelevelsOpt: [],
				zhiyeNameOpt: [

				]
			};
		},
		computed: {
			jigouNames() {
				return this.baozhengJigouOpt.map(item => item.name);
			},
			zhiyeNames() {
				return this.zhiyeNameOpt.map(item => item.name);
			},
			zhiyeLevels() {
				return this.zhiyelevelsOpt.map(item => item.name);
			},
		},
		created() {
			this.getJigou()
		},
		methods: {

			getJigou() {
				getBaozhengJigou({}).then(res => {
					console.log('res', res);
					this.baozhengJigouOpt = res.data
				})
			},
			getZhiye() {
				this.zhiyeNameOpt = []
				this.formData.zhiyeName = ''
				this.formData.zhiyeId = ''
				getJiazhengZhiye({
					id: this.formData.baozhengJigouId
				}).then(res => {
					console.log('res', res);
					this.zhiyeNameOpt = res.data
				})
			},
			getZhiyeLevel() {
				this.zhiyelevelsOpt = []
				this.formData.zhiyeLevelName = ''
				this.formData.zhiyeLevelId = ''
				let req = {
					jgId: this.formData.baozhengJigouId,
					zyId: this.formData.zhiyeId
				}
				getJiazhengLevel(req).then(res => {
					console.log('res', res);
					this.zhiyelevelsOpt = res.data
				})
			},
			// 报证机构选择
			jigouChange(e) {
				this.formData.baozhengJigouName = this.baozhengJigouOpt[e.detail.value].name;
				this.formData.baozhengJigouId = this.baozhengJigouOpt[e.detail.value].jgId;
				this.formData.baozhengJigouType = this.baozhengJigouOpt[e.detail.value].jgType;
				this.formData.banzhengInfoFlag = this.baozhengJigouOpt[e.detail.value].jgType == 1;
				if (this.formData.banzhengInfoFlag) {
					this.formData.needKaoshi = 'false'
					this.formData.needKecheng = 'false'
				} else {
					this.formData.needKaoshi = 'true'
					this.formData.needKecheng = 'false'
				}
				this.getZhiye()
			},

			// 职业等级选择
			levelChange(e) {
				this.formData.zhiyeLevelId = this.zhiyelevelsOpt[e.detail.value].id;
				this.formData.zhiyeLevelName = this.zhiyelevelsOpt[e.detail.value].name;
			},

			// 职业名称选择
			zhiyeChange(e) {
				this.formData.zhiyeName = this.zhiyeNameOpt[e.detail.value].name;
				this.formData.zhiyeId = this.zhiyeNameOpt[e.detail.value].id;
				this.getZhiyeLevel()
			},
			canxunShijianChange(e) {
				console.log('e', e);
				this.formData.canxunShijian = e
			},

			// 需要课程选择
			kechengChange(e) {
				console.log('e', e);
				this.formData.needKecheng = e.detail.value.toString();
			},

			// 需要考试选择
			kaoshiChange(e) {
				this.formData.needKaoshi = e.detail.value.toString();
			},

			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.formData.institution) {
					uni.showToast({
						title: '请选择报证机构',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.selectedLevel) {
					uni.showToast({
						title: '请选择职业等级',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.selectedOccupation) {
					uni.showToast({
						title: '请选择职业名称',
						icon: 'none'
					});
					return;
				}

				// 提交数据（示例）
				console.log('提交数据：', this.formData);
				uni.showToast({
					title: '提交成功'
				});
			}
		}
	};
</script>

<style scoped>
	.form-container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.form-item {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		width: 200rpx;
	}

	.picker {
		flex: 1;
		font-size: 28rpx;
		color: #999;
		text-align: right;
	}

	.radio-label {
		margin-left: 40rpx;
		display: inline-flex;
		align-items: center;
	}

	.radio-label text {
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 50rpx;
	}

	/* 选中样式 */
	radio[checked] .wx-radio-input {
		background-color: #007aff !important;
		border-color: #007aff !important;
	}
</style>