ss_dc_wechat_mini_program/pages/xuncha/mp_excelRcXcdjl_edit.vue

<template>
	<!-- <view> 日程id : {{ rcid }}</view> -->
	<Form :rules="fieldConfigs" v-model="formData" ref="formRef" style="height: calc(100vh - 212rpx);">
		<!-- 循环遍历巡查点数据 -->
		<view v-for="(item, index) in xunchaList" :key="item.xcdid">
			<table-title>{{ item.xcdmc }}</table-title>
			<up-table>
				<up-tr>
					<up-th>情况描述</up-th>
					<Td :field="`xcd_${index}.qkms`">
						<SsInput v-model="formData[`xcd_${index}`].qkms" placeholder="请输入情况描述" />
					</Td>
				</up-tr>
				<up-tr>
					<up-th>处理描述</up-th>
					<Td :field="`xcd_${index}.clms`">
						<SsInput v-model="formData[`xcd_${index}`].clms" placeholder="请输入处理描述" />
					</Td>
				</up-tr>
				<up-tr>
					<up-th>责任人</up-th>
					<Td :field="`xcd_${index}.zrr`">
						<SsInput v-model="formData[`xcd_${index}`].zrr" placeholder="请输入责任人" />
					</Td>
				</up-tr>
			</up-table>
		</view>
	</Form>
	<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 TableTitle from '@/components/SsTableTitle/index.vue'
import SsBottom from '@/components/SsBottom/index.vue'
import { xunchaApi } from '@/api/xuncha'

const rcid = ref(0)
const xunchaList = ref([])

// 表单数据
const formData = ref({})

// 加载巡查数据
const loadXunchaData = async () => {
	try {
		const res = await xunchaApi.initZxxzEdit({rcid: rcid.value})
		console.log('返回数据:', res)

		// 直接使用返回的 xcdjlList 数组
		if (res.data && res.data.xcdjlList) {
			xunchaList.value = res.data.xcdjlList
			console.log('巡查点数据:', xunchaList.value)
		} else {
			console.warn('未找到 xcdjlList 数据')
			xunchaList.value = []
		}

		// 数据加载完成后生成字段配置
		generateFieldConfigs()

	} catch (error) {
		console.error('加载巡查数据失败:', error)
		uni.showToast({
			title: '加载数据失败',
			icon: 'none'
		})
	}
}
const fieldConfigs = ref({})

// 动态生成字段配置和初始化表单数据（参考 dynamic-form.vue）
const generateFieldConfigs = () => {
	const newFormData = {}
	const newFieldConfigs = {}

	xunchaList.value.forEach((item, index) => {
		const areaKey = `xcd_${index}`

		// 初始化嵌套数据结构
		newFormData[areaKey] = {
			qkms: item.qkms || '',
			clms: item.clms || '',
			zrr: item.zrr || ''
		}

		// 生成字段配置 - 使用嵌套字段名（点号分隔）
		newFieldConfigs[`${areaKey}.qkms`] = {
			rules: [{ required: true, message: `${item.xcdmc}的情况描述不能为空` }]
		}
		newFieldConfigs[`${areaKey}.clms`] = {
			rules: [{ required: true, message: `${item.xcdmc}的处理描述不能为空` }]
		}
		newFieldConfigs[`${areaKey}.zrr`] = {
			rules: [{ required: true, message: `${item.xcdmc}的责任人不能为空` }]
		}
	})

	// 更新响应式数据
	formData.value = newFormData
	fieldConfigs.value = newFieldConfigs

	console.log('初始化完成:', {
		formData: formData.value,
		fieldConfigs: fieldConfigs.value
	})
}

// 获取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
	}
}

// 提交表单逻辑（模拟JSP表单提交方式）
const handleSubmit = async () => {
	if (formRef.value) {
		try {
			submitting.value = true

			// 校验表单
			const isValid = formRef.value.validateForm(formData.value, fieldConfigs.value)
			console.log('校验结果:', isValid)

			if (isValid) {
				// 构建表单数据，模拟JSP中的表单提交格式
				const formSubmitData = {
					// 隐藏字段
					rcid: rcid.value,

					// 巡查点数据 - 使用JSP中的字段名格式
					xcdid: [],
					xcdjlid: [],
					qkms: [],
					clms: [],
					zrr: []
				}

				// 填充数组数据（按JSP中的格式）
				xunchaList.value.forEach((item, index) => {
					formSubmitData.xcdid.push(item.xcdid)
					formSubmitData.xcdjlid.push(item.xcdjlid || 'null')
					formSubmitData.qkms.push(formData.value[`xcd_${index}`].qkms)
					formSubmitData.clms.push(formData.value[`xcd_${index}`].clms)
					formSubmitData.zrr.push(formData.value[`xcd_${index}`].zrr)
				})

				console.log('提交数据（JSP格式）:', formSubmitData)
				const res = await xunchaApi.submZxxzEdit(formSubmitData)
				console.log('提交结果:', res)

				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})

				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				uni.showToast({
					title: '请检查表单信息',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('提交失败:', error)
			uni.showToast({
				title: '提交失败',
				icon: 'error'
			})
		} finally {
			submitting.value = false
		}
	}
}
onLoad((options) => {
	console.log('onLoad', options)
	rcid.value = options.rcid || 521188
	// 加载巡查数据
	loadXunchaData()
})
</script>

<style lang="scss" scoped>
// 巡查页面样式
</style>