FormDialog

表单弹窗组件，用于新增和编辑数据。

基础用法

FormDialog 通常与 PageTemplate 配合使用，通过 useState 配置自动集成。

useState({
  formConfig: [
    { type: "input", prop: "name", label: "名称", required: true },
    { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
  ],
});

表单配置

import { defineFormConfig } from "vue-admin-kit";

const formConfig = defineFormConfig([
  {
    type: "input",
    prop: "name",
    label: "名称",
    required: true,
    rules: [{ min: 2, max: 50, message: "长度在 2 到 50 个字符" }],
  },
  {
    type: "number",
    prop: "price",
    label: "价格",
    min: 0,
    precision: 2,
    suffix: "元",
  },
  {
    type: "select",
    prop: "category",
    label: "分类",
    options: [
      { label: "分类A", value: "a" },
      { label: "分类B", value: "b" },
    ],
    multiple: true,
  },
  {
    type: "upload",
    prop: "files",
    label: "附件",
    uploadConfigList: [
      { prop: "attachment", label: "上传附件", bizType: "attachment" },
    ],
  },
  {
    type: "editor",
    prop: "content",
    label: "内容",
    span: 24,
  },
  {
    type: "line",
    label: "其他信息",
  },
]);

触发弹窗

const pageTemplateRef = ref<PageTemplateExposed>();

// 新增
pageTemplateRef.value?.handleAdd();

// 新增（带默认数据）
pageTemplateRef.value?.handleAdd({ status: "1" });

// 编辑
pageTemplateRef.value?.handleEdit(row);

自定义表单内容

<template>
  <PageTemplate ref="pageTemplateRef">
    <template #form>
      <!-- 自定义表单内容 -->
      <el-form-item label="自定义字段">
        <el-input v-model="customField" />
      </el-form-item>
    </template>
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>