• The form component is encapsulated based on FormPro
• The drawer component uses NDrawer

Basic Usage

vue

<template>
  <!-- Add/Edit -->
  <DrawerForm
    ref="drawerForm"
    v-model="modelValue"
    :form="editFormConfig"
    :loading="spin"
    @submit="submitForm"
  />
</template>

<script setup lang="ts">
import { spin, startSpin, endSpin, executeAsync } from "@/utils";
import UserAPI from "@/api/system/user";

/** Form configuration */
const editFormConfig: DialogForm.Form = {
  config: [
    { name: "username", label: "Username" },
    { name: "nickname", label: "Nickname" },
    {
      name: "status",
      label: "Status",
      component: "radio",
      props: {
        options: [
          { label: "Active", value: 1 },
          { label: "Disabled", value: 0 },
        ],
      },
    },
  ],
  props: {
    rules: {
      username: [
        { required: true, message: "Username cannot be empty", trigger: "blur" },
      ],
      nickname: [
        { required: true, message: "Nickname cannot be empty", trigger: "blur" },
      ],
    },
    // Other form property configurations
  },
};

/** Initialize form */
const modelValue = ref<User.Form>({
  status: 1,
});

/** Open drawer */
const drawerFormRef = useTemplateRef("drawerForm");

const openDrawer = (row?: User.VO) => {
  drawerFormRef.value?.open(row ? "Edit User" : "Add User", modelValue.value);

  if (row) {
    startSpin();
    UserAPI.getFormData(row.id)
      .then((data) => {
        modelValue.value = { ...data };
      })
      .finally(() => endSpin());
  }
};
/** Submit form */
const submitForm = (val: User.Form) =>
  executeAsync(
    () => (val.id ? UserAPI.update(val.id, val) : UserAPI.create(val)),
    () => {
      drawerFormRef.value?.close();
      handleQuery();
    }
  );
</script>

No Validation Needed

If you don't need validation or other form configurations, just pass the form item configuration form-config without passing form.

vue

<template>
  <!-- Add/Edit -->
  <DrawerForm
    ref="drawerForm"
    v-model="modelValue"
    :form-config="editFormConfig.config"
    :loading="spin"
    @submit="submitForm"
  />
</template>

Props

Name	Type	Required	Default	Description
props	Drawer Props	No	{}	Drawer properties except show
form	Same as TablePro's form	No	{}	Form configuration
form-config	FormItemConfig[]	No	[]	Form item configuration
loading	boolean	No	false	Loading state
use-type	submit, view	No	submit	Usage type

💡 Note

• loading will also affect the loading state of the Submit and Cancel buttons
• use-type determines the usage type. When set to view, only the Cancel button is displayed at the bottom

Slots

Name	Params	Description
header	()	Content above the form
footer	()	Content below the form

Expose

Function Name	Params	Description
open	(title: string, data: object) => void	Method to open the drawer. title is the drawer title data is the form data
close	() => void	Close the drawer. Will reset the form

Events

Name	Type	Description
submit	(val) => void	Trigger submit
cancel	() => void	Trigger cancel

Contributors

nuyoah

Changelog

Last edited 5 months ago

View full history

768d931-docs(en/components): Modify the documentation for the 'DrawerForm' and 'ModalForm' components

51398ee-refactor(components): refactor DrawerForm component

b4eb45c-docs(en): Add a trailing blank line

de4d514-docs(en): Add DrawerForm component documentation