使用Antd Vue原生Form

当封装的BaseForm无法满足实际业务需求时可以使用antd vue 原生form对象进行页面布局具体用法参考Form用法

1.配合BasicDrawer 用法示例

<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="添加用户" width="500px" @ok="handleSubmit" destroyOnClose showFooter>
        <a-form ref="formRef"  :model="formModel">
            <a-form-item label="用户名" name="routerId">
                <a-input v-model:value="router.routerId" placeholder="请输入用户名"/>
            </a-form-item>
        </a-form>
</BasicDrawer>

<script lang="ts" setup>
    const formRef = ref();
    let formModel= reactive({});

    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      isUpdate.value = !!data?.isUpdate;
      setDrawerProps({ confirmLoading: false });
      if (unref(isUpdate)) {
        formModel= Object.assign(formModel, data.record);
      }
    });
    /**
     * 提交表单
     */
    async function handleSubmit() {
      await formRef.value.validate().then(() => {
        try {
           setDrawerProps({ confirmLoading: true })；
           //提交表单
          saveOrUpdateRoute({ formModel: formModel}).then(() => {
               //刷新列表
               emit('success');
               closeDrawer();
          });
        } finally {
            setDrawerProps({ confirmLoading: false });
        }
      });
    }
</script>

2.配合BasicModal 用法示例

<BasicModal v-bind="$attrs" @register="registerModal" title="添加用户" @ok="handleSubmit" width="70%">
        <a-form ref="formRef"  :model="formModel">
            <a-form-item label="用户名" name="routerId">
                <a-input v-model:value="router.routerId" placeholder="请输入用户名"/>
            </a-form-item>
        </a-form>
</BasicModal >

<script lang="ts" setup>
    const formRef = ref();
    let formModel= reactive({});

    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({confirmLoading: false});
        reset()
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
            formModel= Object.assign(formModel, data.record);
        }
    });

    /**
     * 提交表单
     */
    async function handleSubmit() {
      await formRef.value.validate().then(() => {
        try {
         setModalProps({ confirmLoading: true })；
           //提交表单
          saveOrUpdateRoute({ formModel: formModel}).then(() => {
               //刷新列表
               emit('success');
               closeModal();
          });
        } finally {
            setModalProps({ confirmLoading: false });
        }
      });
    }
</script>