---
name: crud-modal
description: 在列表页上加新增/编辑/查看弹窗（useDialogOut + useModalForm）。当列表页需要 CRUD 表单弹窗时使用。
---

# 新增 / 编辑 / 查看弹窗

一对配套 Hook，完整示例见 `src/views/demo/index.vue` 与 `src/views/demo/components/DemoModal.vue`。

- **列表页**用 `useDialogOut` 管理弹窗显示、模式（`add` / `edit` / `check`）、当前行数据与查看态禁用。
- **弹窗子组件**用 `useModalForm` 处理表单初始化、回显、校验、提交 loading 与关闭。

## 列表页：打开弹窗

```vue
<script setup lang="ts">
import type { IPayItem } from "@/api/recharge/types/recharge"
import useDialogOut from "@sud-web/vue-hooks/useDialogOut"
import { reactive } from "vue"
import DemoModal from "./components/DemoModal.vue"

// reactive 包裹后字段无需 .value
const dialog = reactive(useDialogOut<IPayItem>())
</script>

<template>
  <el-button type="primary" @click="dialog.add()">新增</el-button>

  <PcTable ref="tableRef" :request-api="requestApi" :colum-list="columList">
    <template #action="{ row }">
      <!-- 传行拷贝，避免污染表格数据 -->
      <el-button link @click="dialog.edit({ ...row })">编辑</el-button>
      <el-button link @click="dialog.check({ ...row })">查看</el-button>
    </template>
  </PcTable>

  <DemoModal v-model="dialog" @success="requestTable" />
</template>
```

## 子组件：useModalForm

弹窗子组件接收 `dialog`，用 `useModalForm` 完成回显/校验/提交，提交成功后向父组件 `emit("success")` 触发列表刷新。具体 API 字段以 `src/views/demo/components/DemoModal.vue` 为准。

## 约束

- 模式三态：`add` / `edit` / `check`（查看态表单禁用）。
- 编辑/查看务必传行的浅拷贝 `{ ...row }`。
- 提交成功 → `emit("success")` → 列表 `requestTable` 刷新。
- 风格遵守 `AGENTS.md`：双引号、无分号、无尾随逗号、SFC 块序 script→template→style。改完跑 `npm run lint`。
