vue3弹窗中循环生成表单的校验和重置问题

表单的校验和重置问题"/>

vue3弹窗中循环生成表单的校验和重置问题

应用场景：

1、弹框里的表单是根据后台返回的时段生成的，后台返回几个时段，就渲染几组表单。

       -1- 重置：遍历每个表单，获取当前表单的引用，在resetFields()

       -2- 校验：创建一个数组来存储每个表单的校验结果，遍历每个表单，获取当前表单的引用，校验当前表单，将校验结果存储到数组中，判断到最后一个表单的时候，检查所有的校验结果，校验通过，执行提交操作，否则，执行失败操作。

2、hour 和 hourSupHeat 不可编辑，需计算 hourSupHeat = hour * supHeat,

        这里需要监听 initFormdata的变化，再循环item，再监听每个item里的supHeat，然后计算结果，我这里需要的结果是字符串形式，所以转了String。

3、表单限制只能输入数字，限制2位或3位小数，rules规则里使用正则表达式匹配，hourSupHeat 鼠标移入有公式提示，el-tooltip,使用 label 插槽把 icon 放到文字后面。

数据结构：数组对象形式

initFormData：[{ start: '9', end: '16', supTemp: '', supPres: '', hour: '8', supHeat: '', supFlow: '', hourSupHeat: '' },{ start: '16', end: '9', supTemp: '', supPres: '', hour: '16', supHeat: '', supFlow: '', hourSupHeat: '' },
]

效果显示：

<template><PatrolDialog :show="show" @close="show = false" @define="save(ruleFormRef)" @cancel="cancel(ruleFormRef)" beforeClose@handleBeforeClose="handleBeforeClose(ruleFormRef)" width="600px" top="10vh"><template #title><div class="dialog-title"><img :src="weatherStationIcon" />{{ title }}</div></template><div class="formPart"><div class="item" v-for="(item, index) in initFormData" :key="index"><div class="time" style="padding-bottom: var(--base-padding); color: var(--gdky-primary-color);"> [{{ item.start}}时-{{ item.end }}时]</div><el-form ref="ruleFormRef" :model="item" :rules="rules" label-position="top"><el-row :gutter="16"><el-col :span="8"><el-form-item label="供温 ℃" prop="supTemp"><el-input v-model="item.supTemp" style="width:100%" placeholder="请输入" /></el-form-item></el-col><el-col :span="8"><el-form-item label="供压 MPa" prop="supPres"><el-input v-model="item.supPres" style="width:100%" placeholder="请输入" /></el-form-item></el-col><el-col :span="8"><el-form-item label="时段 h" prop="hour"><el-input v-model="item.hour" disabled style="width:100%" placeholder="请输入" /></el-form-item></el-col></el-row><el-row :gutter="16"><el-col :span="8"><el-form-item label="供热 GJ/h" prop="supHeat"><el-input v-model="item.supHeat" style="width:100%" placeholder="请输入" /></el-form-item></el-col><el-col :span="8"><el-form-item label="供流 t/h" prop="supFlow"><el-input v-model="item.supFlow" style="width:100%" placeholder="请输入" /></el-form-item></el-col><el-col :span="8"><el-tooltip class="box-item" effect="dark" content="应供热量*时间段小时数" placement="top"><el-form-item prop="hourSupHeat"><template #label><div><span>时段供热 GJ</span><i class="iconfont icon-xiangqing1" style="font-size: 14px; padding-left: 5px;"></i></div></template><el-input v-model="item.hourSupHeat" disabled style="width:100%" placeholder="请输入" /></el-form-item></el-tooltip></el-col></el-row></el-form><div style="border-bottom:2px dashed rgba(215, 215, 215, 0.4);margin-bottom: 16px;"></div></div></div></PatrolDialog>
</template><script>
import { reactive, toRefs, computed, watch, ref, onMounted } from 'vue'
import PatrolDialog from '@/views/Components/PatrolDialog.vue'
import weatherStationIcon from '@/assets/imgs/title_img.png'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash-es'
import { getUpdateTimeDataList } from '@/api/PlatTool/CustomModules/HeatSourceDispatch/index'const initFormData = ref([{ start: '9', end: '16', supTemp: '', supPres: '', hour: '8', supHeat: '', supFlow: '', hourSupHeat: '' },{ start: '16', end: '9', supTemp: '', supPres: '', hour: '16', supHeat: '', supFlow: '', hourSupHeat: '' },
])
const ruleFormRef = ref([])
export default {components: {PatrolDialog},setup(_, { emit }) {const state = reactive({show: false,weatherStationIcon, // icontitle: '',curRow: null,rules: {supTemp: [{ required: true, message: '请输入数字', trigger: 'blur' },{pattern: /^\d+(\.\d{0,2})?$/,message: '请输入数字，最多保留两位小数',trigger: 'blur',},],supPres: [{ required: true, message: '请输入数字', trigger: 'blur' },{pattern: /^\d+(\.\d{0,3})?$/,message: '请输入数字，最多保留三位小数',trigger: 'blur',},],supHeat: [{ required: true, message: '请输入数字', trigger: 'blur' },{pattern: /^\d+(\.\d{0,2})?$/,message: '请输入数字，最多保留两位小数',trigger: 'blur',},],supFlow: [{ required: true, message: '请输入数字', trigger: 'blur' },{pattern: /^\d+(\.\d{0,2})?$/,message: '请输入数字，最多保留两位小数',trigger: 'blur',},],},})const methods = {// 打开弹窗async open(curRow) {state.show = true;state.curRow = curRow;state.title = `修改表单数据[${curRow.outletName}]`// 设置选项initFormData.value = curRow.timeDataList// initFormData = [//   { start: '9', end: '12', supTemp: '45', supPres: '12', hour: '11', supHeat: '2', supFlow: '7', hourSupHeat: '22' },//   { start: '15', end: '18', supTemp: '66', supPres: '36', hour: '2', supHeat: '10', supFlow: '5', hourSupHeat: '20' },//   { start: '18', end: '23', supTemp: '89', supPres: '65', hour: '3', supHeat: '33', supFlow: '6', hourSupHeat: '99' },//   { start: '23', end: '9', supTemp: '36', supPres: '55', hour: '4', supHeat: '1', supFlow: '3', hourSupHeat: '4' }// ]},// 保存save(ruleFormRef) {// 创建一个数组来存储每个表单的校验结果const formValidationResults = [];// 循环遍历每个表单for (let i = 0; i < ruleFormRef.length; i++) {// 获取当前表单的引用const formRef = ruleFormRef[i];// 校验当前表单formRef.validate((valid) => {// 将校验结果存储到数组中formValidationResults[i] = valid;if (i === ruleFormRef.length - 1) {const allFormsValid = formValidationResults.every((result) => result);if (allFormsValid) {// 执行提交操作methods.submitForms();} else {console.log('error submit!')ElMessage.error('修改失败')}}});}},submitForms() {let data = {outletId: state.curRow.outletId,getTime: state.curRow.getTime,timeDataList: initFormData.value}getUpdateTimeDataList(data).then(res => {if (res.code == '0') {ElMessage.success('修改成功');// 刷新表格数据emit('saveSuccess');state.show = false;} else {ElMessage.error(`修改失败:${res?.msg}`);}}).catch(err => {console.log(err)ElMessage.error('修改失败')})},// 重置cancel(formEl) {if (!formEl) return// 循环遍历每个表单for (let i = 0; i < formEl.length; i++) {// 获取当前表单的引用const formRef = formEl[i];formRef.resetFields()}},handleBeforeClose(formEl) {if (!formEl) return// 循环遍历每个表单for (let i = 0; i < formEl.length; i++) {// 获取当前表单的引用const formRef = formEl[i];formRef.resetFields()}state.show = false},}watch(initFormData,debounce((newVal, oldVal) => {newVal.forEach(item => {// 监听item.supHeat的变化watch(() => item.supHeat, (newVal, oldVal) => {// 更新item.hourSupHeat的值item.hourSupHeat = String(item.supHeat * item.hour);});});}, 300),{ deep: true });onMounted(() => {})return {...toRefs(state),...methods,initFormData,ruleFormRef}}
}
</script>
<style lang='less' scoped>
.dialog-title {display: flex;font-size: 16px;font-family: MicrosoftYaHeiSemibold;color: var(--gdky-main-content-color);line-height: 24px;padding-bottom: var(--base-padding);img {margin-right: 8px;}
}.formPart {display: flex;flex-direction: column;justify-content: center;overflow: hidden;
}
</style>