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

前端程序媛Ying

已于 2023-10-18 11:40:56 修改

阅读量1.4k

点赞数

分类专栏： vue web前端 JS 文章标签：前端 javascript vue.js

于 2023-10-18 11:27:04 首次发布

本文链接：https://blog.csdn.net/m0_62323730/article/details/133901670

版权

web前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

vue

35 篇文章 1 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

应用场景：

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, // icon
      title: '',
      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>