antd组件的动态表单新增与自定义校验

<template>
	<div class="delivery-time-setting">
		<a-form
			name="custom-validation"
			ref="formRef"
			:model="modelRef"
			:rules="rules"
			v-bind="layout"
			@finish="handleFinish"
			@finishFailed="handleFinishFailed"
		>
			<div class="isopen">
				<a-form-item :label="$t('system.timeSetting.enable')" name="status">
					<a-radio-group
						v-model:value="modelRef.status"
						:defaultValue="true"
						@change="onChange"
					>
						<a-radio :value="true"> {{ $t('common.open') }}</a-radio>
						<a-radio :value="false"> {{ $t('common.close') }} </a-radio>
					</a-radio-group>
				</a-form-item>
				<div class="gray-text">({{ $t('system.timeSetting.enableTips') }})</div>
			</div>

			<div class="delivetyTime">
				<div
					class="dlfx"
					v-for="(item, index) in modelRef.deliveryTimeList"
					:key="index"
				>
					<a-form-item
						:name="item.index + '.startTime'"
						:rules="[
							{
								validator: () => validateNutrients('startTime', index),
								trigger: 'change',
							},
						]"
					>
						<span class="time">{{
							$t('system.timeSetting.deliverytime')
						}}</span>
						<a-time-picker
							v-model:value="item.startTime"
							format="HH:mm"
							:default-open-value="moment('00:00', 'HH:mm')"
							:minuteStep="30"
							:allowClear="false"
							:inputReadOnly="true"
							@change="timechangeOne(item)"
							@focus="handleFocus(index)"
							@openChange="timeCheck"
							valueFormat="HH:mm"
							:placeholder="$t('system.timeSetting.starttime')"
							popupClassName="scrll_right"
						/>
						<span>{{ $t('system.timeSetting.to') }}</span>
					</a-form-item>
					<a-form-item
						:name="item.index + '.endTime'"
						:rules="[
							{
								validator: () => validateNutrients('endTime', index),
								trigger: 'change',
							},
						]"
					>
						<a-time-picker
							v-model:value="item.endTime"
							format="HH:mm"
							:default-open-value="moment('', 'HH:mm')"
							:minuteStep="30"
							:allowClear="false"
							:inputReadOnly="true"
							@change="timechangeTwo(item)"
							@focus="handleFocus(index)"
							@openChange="CompareDate"
							valueFormat="HH:mm"
							:placeholder="$t('system.timeSetting.endtime')"
						/>
					</a-form-item>
					<a-form-item :name="item.index + '.status'">
						<div class="checkBox">
							<a-checkbox
								v-model:checked="item.status"
								@change="onCheckBox($event, index)"
							>
								{{ $t('system.timeSetting.US') }}
							</a-checkbox>
						</div>
					</a-form-item>
					<a-form-item
						:name="item.index + '.amount'"
						:rules="[
							{ validator: () => validateInput(index), trigger: 'change' },
						]"
					>
						<a-input
							v-model:value="item.amount"
							:placeholder="$t('system.timeSetting.deliveryfee')"
							style="width: 50%"
							@change="onFieldChange(item, index)"
							@input="onInput(item, index)"
							:disabled="item.status == false ? true : false"
						/>
						{{ $t('system.timeSetting.apply') }}
						<span class="delete" @click="delTime(index)">
							{{ $t('common.delete') }}</span
						>
					</a-form-item>
				</div>
				<a-button type="primary" @click="addTime" class="addTime">
					{{ $t('system.timeSetting.addtime') }}
				</a-button>
				<p class="gray-text">
					({{ $t('system.timeSetting.deliverytimeTips') }})
				</p>
			</div>

			<div class="makeTime">
				<a-form-item
					:label="$t('system.timeSetting.reservationtime')"
					required
					name="appointmentTime"
				>
					<span>{{ $t('system.timeSetting.Advance') }}</span>

					<a-select
						v-model:value="modelRef.appointmentTime"
						default-value="30"
						style="width: 80px"
						@change="handleChange"
						size="small"
					>
						<a-select-option value="30"> 30 </a-select-option>
						<a-select-option value="60"> 60 </a-select-option>
						<a-select-option value="90"> 90 </a-select-option>
						<a-select-option value="120"> 120 </a-select-option>
					</a-select>
					{{ $t('system.timeSetting.minutes') }}
				</a-form-item>
				<div class="gray-text mar-bot">
					({{ $t('system.timeSetting.minutesTips') }})
				</div>
			</div>

			<div class="TimeDay">
				<a-form-item
					:label="$t('system.timeSetting.ShowDays')"
					required
					name="deliveryDays"
				>
					<a-select
						v-model:value="modelRef.deliveryDays"
						default-value="2"
						style="width: 80px"
						@change="handleChange"
						size="small"
					>
						<a-select-option value="2"> 2 </a-select-option>
						<a-select-option value="3"> 3 </a-select-option>
						<a-select-option value="4"> 4 </a-select-option>
						<a-select-option value="5"> 5 </a-select-option>
						<a-select-option value="6"> 6 </a-select-option>
						<a-select-option value="7"> 7 </a-select-option>
					</a-select>
					{{ $t('system.timeSetting.days') }}
				</a-form-item>
				<div class="gray-text mar-bot">
					({{ $t('system.timeSetting.daysTips') }})
				</div>
			</div>
			<a-button
				type="primary"
				@click="handlesubmit"
				html-type="submit"
				class="btn"
				:loading="loading"
			>
				{{ $t('system.timeSetting.save') }}
			</a-button>
		</a-form>
	</div>
</template>

<script>
import { reactive, ref, watch, toRaw, onMounted } from 'vue'
import { message,Modal  } from 'ant-design-vue'
import { postDeliveryTime, queryDeliveryTimeSettingsList } from '@/apis'
import moment from 'moment'
import { useI18n } from 'vue-i18n'
import '../Delivery-times/DeliveryTime-setting.scss'
export default {
	setup() {
		const { t } = useI18n()
		const loading = ref(false)
		const formRef = ref()
		const modelRef = ref({
			appointmentTime: '30',
			deliveryDays: '2',
			status: true,
			id: '',
			deliveryTimeList: [
				{ startTime: '', endTime: '', amount: '', status: false },
			],
		})
		const timeIndex = reactive({
			setIndex: 0,
		})
		const firstTime = ref('')
		const endTime = ref('')
		onMounted(() => {
			queryData()
		})
		
		async function queryData() {
			const ress = await queryDeliveryTimeSettingsList({})
			if (ress.deliveryTimeList == null) {
				modelRef.value
			} else {
				modelRef.value = ress
				modelRef.value.deliveryDays = String(ress.deliveryDays)
			}
		}
		//此处为动态表单的自定义规则
		const validateNutrients = (key, index) => {
			if (!modelRef.value.deliveryTimeList[index][key]) {
				return Promise.reject(t('system.timeSetting.Pleasetime'))
			} else {
				return Promise.resolve()
			}
		}
		//此处为动态表单input的自定义规则
		const validateInput = index => {
			if (
				modelRef.value.deliveryTimeList[index].status &&
				!modelRef.value.deliveryTimeList[index].amount
			) {
				return Promise.reject(t('system.timeSetting.deliveryfreight'))
			} else {
				return Promise.resolve()
			}
		}
		//此处为动态表单input的保留两位小数规则
		const onInput = (item, index) => {
			if (item.amount > 1000) {
				modelRef.value.deliveryTimeList[index].amount = 999.99
			}
				modelRef.value.deliveryTimeList[index].amount = item.amount.toString().replace(
				/^\D*(\d*(?:\.\d{0,2})?).*$/g,
				'$1',
			)
			
		}
		const onFieldChange = (item, index) => {
			modelRef.value.deliveryTimeList[index].amount = item.amount
		}

		const onChange = val => {
			modelRef.value.status = val.target.value
		}
		const handleFocus = val => {
			timeIndex.setIndex = val
		}
		const timechangeOne = item => {
			firstTime.value = item.startTime
			modelRef.value.deliveryTimeList[timeIndex.setIndex].startTime = item.startTime
		}
		const timechangeTwo = item => {
			endTime.value = item.endTime
			
			modelRef.value.deliveryTimeList[timeIndex.setIndex].endTime = item.endTime
		}
		// 开始时间校验时分比较大小
		const timeCheck = (val) =>{
			if(val == false){
			let a = firstTime.value.replace(/:/g, '')
			let b = endTime.value.replace(/:/g, '')
			if(b == ''){
				return false
			}
			if(a>b){
				message.warning(t('system.timeSetting.startEndtime'))
			}
		}
		}
		// 结束时间校验时分比较大小
		const CompareDate = (val) => {
			if(val == false){
			let a = firstTime.value.replace(/:/g, '')
			let b = endTime.value.replace(/:/g, '')
			if (b<=a) {
				message.warning(t('system.timeSetting.startEndtime'))
			}
			}
			
		}
		const onCheckBox = (e, index) => {
			if (e.target.checked) {
				modelRef.value.deliveryTimeList[index].status = true
			} else {
				modelRef.value.deliveryTimeList[index].status = false
			}
		}
		const delTime = index => {
			if (index == 0) {
				message.error(t('system.timeSetting.delTime'))
				return
			}else{
			Modal.confirm({
			title: () => t('common.delete'),
			content:() => t('common.confirmDelete'),
			okText: () => t('common.determine'),
			okType: 'danger',
			cancelText: () => t('common.cancel'),
			onOk() {
			modelRef.value.deliveryTimeList.splice(index, 1)
			},
			onCancel() {
			console.log('Cancel');
			},
      });
			}
			
			
		}

		/* 提交保存 */
		function handlesubmit() {
			let isCanSubmit = true
			modelRef.value.deliveryTimeList.map((item, index) => {
				if (item.status == true && item.amount == '') {
					validateInput(index)
				}
				if (item.status == true && !item.amount) {
					isCanSubmit = false
				}
				if (item.startTime == '' || item.endTime == '') {
					isCanSubmit = false
				}
			})
			if (isCanSubmit) {
				SubmitForm()
			}
		}
		async function SubmitForm() {
			loading.value = true
			const Days = Number(modelRef.value.deliveryDays)
			try {
				const result = await postDeliveryTime({
					status: modelRef.value.status,
					appointmentTime: modelRef.value.appointmentTime,
					deliveryDays: Days,
					id: modelRef.value.id,
					deliveryTimeList: modelRef.value.deliveryTimeList,
				})
				if (result) {
					message.success('success')
				}
			} catch (err) {
			} finally {
				loading.value = false
			}
		}
		//此处为动态表单的新增
		const addTime = () => {
			modelRef.value.deliveryTimeList.push({
				startTime: '',
				endTime: '',
				amount: '',
				status: false,
			})
		}
		return {
			formRef,
			modelRef,
			firstTime,
			endTime,
			onChange,
			timechangeOne,
			timechangeTwo,
			onCheckBox,
			addTime,
			validateNutrients,
			handlesubmit,
			handleFocus,
			timeIndex,
			validateInput,
			CompareDate,
			timeCheck,
			onFieldChange,
			delTime,
			queryData,
			SubmitForm,
			loading,
			onInput,
			moment
		}
	},
}
</script>