ss_dc_wechat_mini_program/pages/example/index.vue

<template>
	<view> 日程id : {{ rcid }}
	</view>
	<Form :rules="fieldConfigs" v-model="formData" ref="formRef" style="height: calc(100vh - 212rpx);">
		<table-title>校园活动区</table-title>
		<up-table>
			<up-tr>
				<up-th>情况描述</up-th>
				<Td field="qkms">
					<SsInput v-model="formData.qkms" placeholder="请输入情况描述" />
				</Td>
			</up-tr>
			<up-tr>
				<up-th>处理描述</up-th>
				<Td field="clms">
					<SsInput v-model="formData.clms" placeholder="请输入处理描述" />
				</Td>
			</up-tr>
			<up-tr>
				<up-th>责任人</up-th>
				<Td field="zrr">
					<SsInput v-model="formData.zrr" placeholder="请输入责任人" />
				</Td>
			</up-tr>
			<up-tr>
				<up-th>巡查类型</up-th>
				<Td field="xclx">
					<SsSelect
						v-model="formData.xclx"
						:options="xcTypeOptions"
						:loading="xcTypeLoading"
						placeholder="请选择巡查类型"
						@change="onXcTypeChange"
					/>
				</Td>
			</up-tr>
			<up-tr>
				<up-th>巡查状态</up-th>
				<Td field="xczt">
					<SsSelect
						v-model="formData.xczt"
						:options="xcStatusOptions"
						:loading="xcStatusLoading"
						:disabled="!formData.xclx"
						placeholder="请选择巡查状态"
					/>
				</Td>
			</up-tr>
			<up-tr>
				<up-th>datetime</up-th>
				<Td field="xcDatetime">
					<SsDatetimePicker
						v-model="formData.xcDatetime"
						mode="datetime"
						placeholder="请选择巡查日期时间"
					/>
				</Td>
			</up-tr>
			<up-tr>
				<up-th>date</up-th>
				<Td field="xcDate">
					<SsDatetimePicker
						v-model="formData.xcDate"
						mode="date"
						placeholder="请选择巡查日期时间"
					/>
				</Td>
			</up-tr>
			<up-tr>
				<up-th>time</up-th>
				<Td field="xcTime">
					<SsDatetimePicker
						v-model="formData.xcTime"
						mode="time"
						placeholder="请选择巡查时间"
					/>
				</Td>
			</up-tr>
			

		</up-table>
	</Form>
	<!-- 联动测试区域 -->
	<view class="demo-section">
		<text class="demo-title">联动下拉选择测试</text>
		<view class="demo-info">
			<text>当前巡查类型: {{ formData.xclx || '未选择' }}</text>
			<text>当前巡查状态: {{ formData.xczt || '未选择' }}</text>
		</view>
	</view>
	<SsBottom
		:buttons="bottomButtons"
		@button-click="handleBottomAction"
	/>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Form from '@/components/Form/index.vue'
import Td from '@/components/Td/index.vue'
import SsInput from '@/components/SsInput/index.vue'
import SsSelect from '@/components/SsSelect/index.vue'
import TableTitle from '@/components/SsTableTitle/index.vue'
import SsBottom from '@/components/SsBottom/index.vue'
import SsDatetimePicker from '@/components/SsDatetimePicker/index.vue'
const rcid = ref(0)

// 表单数据
const formData = ref({
	qkms: '正常',
	clms: '无',
	zrr: '无',
	xclx: '',
	xczt: '',
	xcDate: '', // 巡查日期
	xcTime: '', // 巡查时间
	xcDatetime: '' // 巡查日期时间
})

// 下拉选项数据和加载状态
const xcTypeOptions = ref([])
const xcStatusOptions = ref([])
const xcTypeLoading = ref(false)
const xcStatusLoading = ref(false)

// 模拟网络请求 - 获取巡查类型
const loadXcTypeOptions = async () => {
	xcTypeLoading.value = true
	try {
		// 模拟网络延迟
		await new Promise(resolve => setTimeout(resolve, 1500))

		xcTypeOptions.value = [
			{ n: '日常巡查', v: 'daily' },
			{ n: '专项巡查', v: 'special' },
			{ n: '突击巡查', v: 'emergency' },
			{ n: '定期巡查', v: 'regular' }
		]
	} catch (error) {
		console.error('加载巡查类型失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		xcTypeLoading.value = false
	}
}

// 模拟网络请求 - 根据巡查类型获取状态选项
const loadXcStatusOptions = async (xcType) => {
	xcStatusLoading.value = true
	xcStatusOptions.value = [] // 清空之前的选项
	formData.value.xczt = '' // 清空已选择的状态

	try {
		// 模拟网络延迟
		await new Promise(resolve => setTimeout(resolve, 1000))

		// 根据不同的巡查类型返回不同的状态选项
		const statusMap = {
			'daily': [
				{ n: '日常-待巡查', v: 'daily-pending' },
				{ n: '日常-巡查中', v: 'daily-checking' },
				{ n: '日常-已完成', v: 'daily-completed' }
			],
			'special': [
				{ n: '专项-准备中', v: 'special-preparing' },
				{ n: '专项-执行中', v: 'special-executing' },
				{ n: '专项-已结束', v: 'special-finished' }
			],
			'emergency': [
				{ n: '突击-紧急响应', v: 'emergency-response' },
				{ n: '突击-处理中', v: 'emergency-handling' },
				{ n: '突击-已处置', v: 'emergency-resolved' }
			],
			'regular': [
				{ n: '定期-计划中', v: 'regular-planning' },
				{ n: '定期-进行中', v: 'regular-ongoing' },
				{ n: '定期-已完成', v: 'regular-completed' }
			]
		}

		xcStatusOptions.value = statusMap[xcType] || []
	} catch (error) {
		console.error('加载巡查状态失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		xcStatusLoading.value = false
	}
}

// 巡查类型变化事件
const onXcTypeChange = (value, option) => {
	console.log('巡查类型变化:', value, option)
	if (value) {
		loadXcStatusOptions(value)
	} else {
		xcStatusOptions.value = []
		formData.value.xczt = ''
	}
}
const fieldConfigs = {
	qkms: {
		rules: [{ required: true, message: '情况描述不能为空' }]
	},
	clms: {
		rules: [{ required: true, message: '处理描述不能为空' }]
	},
	zrr: {
		rules: [{ required: true, message: '责任人不能为空' }]
	},
	xclx: {
		rules: [{ required: true, message: '请选择巡查类型' }]
	},
	xczt: {
		rules: [{ required: true, message: '请选择巡查状态' }]
	},
	xcDate: {
		rules: [{ required: true, message: '请选择巡查日期时间' }]
	},
	xcTime: {
		rules: [{ required: true, message: '请选择巡查时间' }]
	},
	xcDatetime: {
		rules: [{ required: true, message: '请选择巡查日期时间' }]
	},
}

// 获取Form组件的引用
const formRef = ref(null)

// 提交状态
const submitting = ref(false)

// 底部按钮配置
const bottomButtons = [
	{ text: '取消', action: 'cancel'  },
	{ text: '保存并提交', action: 'submit' }
]

// 底部按钮事件处理
const handleBottomAction = (data) => {
	console.log('底部按钮操作:', data)

	switch(data.action) {
		case 'cancel':
			uni.navigateBack() // 返回上一页
			break
		case 'submit':
			handleSubmit()
			break
	}
}

// 原来的提交表单逻辑
const handleSubmit = async () => {
	try {
		submitting.value = true

		// 校验所有字段 - 使用配置中的规则
		const validationRules = {}
		Object.keys(fieldConfigs).forEach(field => {
			validationRules[field] = fieldConfigs[field].rules
		})

		// 开始校验表单

		if (formRef.value && formRef.value.validateForm) {
			try {
				const isValid = formRef.value.validateForm(formData.value, validationRules)

				if (isValid) {
					// 提交成功
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					console.log('表单数据:', formData.value)
				} else {
					uni.showToast({
						title: '请检查表单信息',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('validateForm执行错误:', error)
			}
		} else {
			console.error('formRef或validateForm不可用')
		}
	} catch (error) {
		console.error('提交失败:', error)
		uni.showToast({
			title: '提交失败',
			icon: 'error'
		})
	} finally {
		submitting.value = false
	}
}
onLoad((options) => {
	console.log('onLoad', options)
	rcid.value = options.rcid

	// 页面加载时获取巡查类型选项
	loadXcTypeOptions()
})
</script>

<style lang="scss" scoped>
.demo-section {
	margin: 30rpx;
	padding: 30rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
	border: 2rpx solid #e9ecef;
}

.demo-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.demo-info {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.demo-info text {
	font-size: 28rpx;
	color: #666;
	padding: 10rpx;
	background: #fff;
	border-radius: 10rpx;
}
</style>