新增编辑表单校验

html:

<template>
  <div class="stepone">
    <div>
      <a-form
        ref="ruleForms"
        :model="submitForm"
        :rules="rules"
        :label="{ span: 12, offset: 24 }"
        layout="horizontal"
        style="padding: 0 10px"
        class="ruleFormDialog"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item ref="name" label="装备名称：" name="name">
              <a-input v-model:value="submitForm.name" placeholder="请输入名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <div class="footButton" v-if="submitDialogText === '1' || submitDialogText === '2'"> -->
        <div class="footButton">
          <a-button type="primary" @click="onSubmit">保存并进入到下一步</a-button>
        </div>
        <!-- <div class="footButton">
                <a-button type="primary" @click="goBack">返回</a-button>
        </div>-->
      </a-form>
    </div>
  </div>
</template>

<script>
import oneStep from "./oneStep";
export default oneStep;
</script>

<style lang="less" scoped>
@import "./oneStep.less";
</style>

js:

import {
    ref,
    reactive,
    onMounted,
} from 'vue';
import {
    submitForms,
    rule,
} from "./oneStepJson"
export default {
    name: "oneStep",

    setup(props, context) {
        //进入下一步
        const next = () => {
            context.emit("nextBtn");
        }
        //规则
        const ruleForms = ref();
        let rules = reactive(rule)
        let submitForm = reactive(submitForms)
        let submitDialogText = ref("")//判断新增编辑
        //提交
        const onSubmit = () => {
            console.log("弹窗提交")
            ruleForms.value
                .validate()
                .then(() => {

                    if (submitDialogText.value === '1') {
                        // addEmergencyEquipment()
                    } else if (submitDialogText.value === '2') {
                        // updateEmergencyEquipment()
                    }
                })

        }
        return {
            next,
            ruleForms,
            submitForm,
            rules,
            onSubmit,

            submitDialogText
        };
    },
};

jsonjs:

export let submitForms = {
    id: "",
    name: "",
}
export let rule = {
    name: [{
        required: true,
        message: '请输入装备名称',
        trigger: 'blur'
    }],
    address: [{
        type: "number",
        required: true,
        message: '请选择存放地址',
        trigger: 'change'
    }],
}