后台-复杂动态表单校验

 点击某一行编辑，点保存时触发校验当前行的规则

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { ElMessage, FormInstance, FormRules } from 'element-plus'
	import {
		getOrderFeeSetting,
		changeParameter,
		editOrderFeeSetting,
		addOrderFeeSetting,
		deleteOrderFeeSetting,
	} from '@/api/system/commission'
	import { Setting } from '@/types/api/system/commission'
	const moneyFormRef = ref<FormInstance>()
	const setupFormRef = ref<FormInstance>()
	// tab点击
	const tabPosition = ref<number>(1)
	// 需求状态列表
	const commissionList = ref([
		{ label: '设计抽成', value: 1 },
		{ label: '制造抽成', value: 2 },
		{ label: '集采抽成', value: 3 },
	])
	// 抽成金额
	const moneyForm = reactive<any>({
		max: '',
		min: '',
		disabled: true,
	})
	type setupFormType = {
		list: Setting[]
	}
	// 设置表单
	const setupForm = reactive<setupFormType>({
		list: [],
	})
	const moneyFormRules = reactive<FormRules>({
		max: [{ required: true, message: '请输入最大抽成金额', trigger: ['blur', 'change'] }],
		min: [{ required: true, message: '请输入最小抽成金额', trigger: ['blur', 'change'] }],
	})
	const setupFormRules = reactive<FormRules>({
		minValue: [{ required: true, message: '请输入最小金额', trigger: 'blur' }],
		maxValue: [{ required: true, message: '请输入最大金额', trigger: 'blur' }],
		feeRate: [
			{ required: true, message: '请输入抽成比例', trigger: 'blur' },
			{
				pattern: /^([0-9]\d{0,1}|100$)(\.\d{1,2})?$/,
				message: '请输入正确的抽成比例',
				trigger: 'blur',
			},
		],
	})
	// 获取数据
	const getOrderFeeSettingFn = () => {
		getOrderFeeSetting(tabPosition.value).then(({ data }) => {
			moneyForm.min = data.limitValues ? data.limitValues[0] : ''
			moneyForm.max = data.limitValues ? data.limitValues[1] : ''
			data.settings.forEach((item, index, arr) => {
				arr[index].saveOrEditButton = true
				arr[index].disabled = true
				arr[index].level = index + 1
			})
			setupForm.list = data.settings
		})
	}
	getOrderFeeSettingFn()
	// 类型切换
	const handleClick = (value: any) => {
		tabPosition.value = value
		moneyForm.disabled = true
		getOrderFeeSettingFn()
	}
	// 改变合同金额
	const changeNumber = (val: any, type: string) => {
		if (val <= 0) {
			moneyForm[type] = null
		} else {
			moneyForm[type] = Number(Number(val).toFixed(2))
		}
	}
	// 保存金额
	const saveMoneyForm = async (formEl: FormInstance | undefined) => {
		if (!moneyForm.disabled) {
			if (!formEl) return
			await formEl.validate((valid, fields) => {
				if (valid) {
					moneyForm.disabled = true
					const moneyArr = []
					moneyArr[0] = moneyForm.min
					moneyArr[1] = moneyForm.max
					const stringArr = JSON.stringify(moneyArr)
					let code = ''
					if (tabPosition.value == 1) {
						code = 'pay_fee_design_limit'
					} else if (tabPosition.value == 2) {
						code = 'pay_fee_make_limit'
					} else {
						code = ''
					}
					changeParameter(code, stringArr).then((res) => {
						ElMessage.success('保存成功')
					})
				} else {
					return false
				}
			})
		} else {
			moneyForm.disabled = false
		}
	}
	// 添加某一行
	const addRow = () => {
		const row = {
			level: setupForm.list.length + 1,
			minValue: '',
			maxValue: '',
			feeRate: '',
			saveOrEditButton: true,
			disabled: true,
		}
		const data = {
			level: setupForm.list.length + 1,
			minValue: 0,
			maxValue: 0,
			feeRate: 0,
			id: '',
			fmOrderType: tabPosition.value,
		}
		addOrderFeeSetting(data).then((res) => {
			ElMessage.success('添加成功')
		})
		setupForm.list.push(row)
	}
	// 删除某一行
	const deleteRow = (index: number, id: string | undefined) => {
		setupForm.list.splice(index, 1)
		setupForm.list.forEach((item, index, arr) => {
			arr[index].level = index + 1
		})
		deleteOrderFeeSetting(id as string).then((res) => {
			ElMessage.success('删除成功')
		})
	}
	// 修改每一行
	const saveOrEdit = (formEl: FormInstance | undefined, index: number) => {
		if (!setupForm.list[index].saveOrEditButton) {
			if (!formEl) return
			formEl.clearValidate()
			formEl.validateField([`list[${index}].minValue`, `list[${index}].maxValue`, `list[${index}].feeRate`], (valid) => {
				if (valid) {
					setupForm.list[index].saveOrEditButton = true
					setupForm.list[index].disabled = true
					const id = setupForm.list[index].id
					const row = setupForm.list[index]
					delete row.id
					editOrderFeeSetting(id as string, row).then((data) => {
						if (data) ElMessage.success('保存成功')
					})
				} else {
					return false
				}
			})
		}
		setupForm.list[index].saveOrEditButton = false
		setupForm.list[index].disabled = false
	}
</script>

<template>
	<el-card class="commission-container">
		<div>
			<el-radio-group v-model="tabPosition" style="margin-bottom: 20px" @change="handleClick">
				<template v-for="(item, index) in commissionList" :key="index">
					<el-radio-button :label="item.value">
						{{ item.label }}
					</el-radio-button>
				</template>
			</el-radio-group>
		</div>

		<el-form
			ref="moneyFormRef"
			:model="moneyForm"
			:rules="moneyFormRules"
			label-width="120px"
			class="moneyForm"
			size="default"
			status-icon>
			<div>
				<el-form-item label="最大抽成金额" prop="max">
					<el-input
						v-model="moneyForm.max"
						type="number"
						@change="(val: any) => changeNumber(val, 'max')"
						:disabled="moneyForm.disabled" />
				</el-form-item>
				<el-form-item label="最小抽成金额" prop="min">
					<el-input
						v-model="moneyForm.min"
						type="number"
						@change="(val: any) => changeNumber(val, 'min')"
						:disabled="moneyForm.disabled" />
				</el-form-item>
			</div>
			<div class="button">
				<el-button type="primary" size="default" @click="saveMoneyForm(moneyFormRef)">{{
					moneyForm.disabled ? '编辑' : '保存'
				}}</el-button>
			</div>
		</el-form>

		<el-form
			ref="setupFormRef"
			:model="setupForm"
			:rules="setupFormRules"
			label-width="120px"
			class="setupForm"
			size="default"
			status-icon>
			<div class="header">
				<span>抽成区间设置</span>
				<el-button type="primary" size="default" @click="addRow">添加</el-button>
			</div>
			<div class="levelItem" v-for="(item, index) in setupForm.list" :key="index">
				<div class="left">
					<el-form-item required :label="`金额区间${item.level}`">
						<el-form-item :prop="`list[${index}].minValue`" :rules="setupFormRules.minValue">
							<el-input
								style="width: 200px"
								v-model="setupForm.list[index].minValue"
								type="number"
								:disabled="item.disabled" />
							<span class="line"></span>
						</el-form-item>
						<el-form-item :prop="`list[${index}].maxValue`" :rules="setupFormRules.maxValue">
							<el-input
								style="width: 200px"
								v-model="setupForm.list[index].maxValue"
								type="number"
								:disabled="item.disabled" />
						</el-form-item>
					</el-form-item>
					<el-form-item label="抽成比例（%）" :prop="`list[${index}].feeRate`" :rules="setupFormRules.feeRate">
						<el-input v-model="setupForm.list[index].feeRate" type="number" :disabled="item.disabled" />
					</el-form-item>
				</div>
				<div class="right">
					<el-button @click="saveOrEdit(setupFormRef, index)" type="primary">{{
						item.saveOrEditButton ? '编辑' : '保存'
					}}</el-button>
					<el-button type="danger" @click="deleteRow(index, item.id)">删除</el-button>
				</div>
			</div>
		</el-form>
	</el-card>
</template>

<style lang="scss" scoped>
	.commission-container {
		min-height: 80vh;
		:deep(.is-active) {
			.el-radio-button__inner {
				background-color: #3760f1;
				border-color: #3760f1;
			}
		}
		:deep(.el-radio-button__inner) {
			&:hover {
				color: #3760f1;
			}
		}
		:deep(.el-form-item__label) {
			color: #606266;
			font-weight: normal;
			font-size: 15px;
			width: 130px !important;
		}
		.moneyForm {
			display: flex;
			align-items: center;
			.el-button {
				position: relative;
				top: -8px;
			}
		}
		.setupForm {
			background-color: #f2f2f2;
			overflow: hidden;
			padding-left: 30px;
			.header {
				margin: 30px 0;
				span {
					color: #606266;
					font-weight: normal;
					font-size: 15px;
					margin-right: 12px;
				}
			}
			.levelItem {
				display: flex;
				align-items: center;
				margin-bottom: 30px;
				.line {
					width: 100px;
					height: 1px;
					background-color: #333;
					display: inline-block;
				}
			}
		}
	}
</style>

表格内的动态表单校验

	const state = reactive({
		formTable: {
			tableData: [] as any,
		},
	})
	const {  formTable } = toRefs(state)

	const formTableRef = ref<FormInstance>()

   	//校验规则
	const rules = {
		startValue: [{ validator: CheckStartValue, trigger: ['blur', 'change'], required: true }],
		endValue: [{ validator: CheckEndValue, trigger: ['blur', 'change'], required: true }],
	}


    	<el-form ref="formTableRef" :model="formTable" :inline="true">
				<el-table
					size="small"
					header-cell-class-name="headerCell"
					:cell-style="{ height: '37px' }"
					:data="formTable.tableData"
					highlight-current-row
					:row-class-name="tableRowClassName"
					:height="tableHeight"
					v-loading="tablePersonLoading"
					border
					element-loading-text="拼命加载中"
					style="width: 100%">
					<el-table-column :resizable="false" type="index" width="50" label="序号"></el-table-column>
					<el-table-column prop="name" label="个人信用等级"> </el-table-column>
					<el-table-column prop="startValue" label="个人起始分值（含）">
						<template #default="{ row, $index }">
							<el-form-item :prop="`tableData[${$index}].startValue`" :rules="rules.startValue" v-if="row.isShowInput">
								<el-input v-model="formTable.tableData[$index].startValue" type="number" :disabled="$index == 0"></el-input>
							</el-form-item>
							<span v-else>{{ row.startValue }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="endValue" label="个人结束分值（不含）">
						<template #default="{ row, $index }">
							<el-form-item :prop="`tableData[${$index}].endValue`" :rules="rules.endValue" v-if="row.isShowInput">
								<el-input v-model="formTable.tableData[$index].endValue" type="number"> </el-input>
							</el-form-item>
							<span v-else>{{ row.endValue }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="125">
						<template #default="{ row, $index }">
							<el-button type="primary" size="small" @click="updateRow(row, $index)" v-if="row.isCanEdit">编辑</el-button>
							<el-button type="info" size="small" @click="getData" v-if="row.isShowSave">取消</el-button>
							<el-button
								type="primary"
								size="small"
								:loading="row.saveLoading"
								@click="submitForm(formTableRef, row)"
								v-if="row.isShowSave"
								>保存</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-form>