---
name: deppon-pro-page-query-table-form
description: >-
    整页骨架：独立内联查询 ProForm + ProTable +（可选）底部或弹窗「实体」ProForm。
    不是表格内单元格编辑。在用户要「查询条与表格分离」「上查下表下表单」或「查询条 + 表格 + 编辑区（整块表单）」时应用。
---

# deppon-pro-page-query-table-form：独立查询 + 列表 + 实体表单

> **曾用标识**：`deppon-pro-page-crud`（名称易与「表格内编辑」混淆，已改为现名。）

## 与其它 skill 的区别（避免重叠）

| 场景 | 使用本 skill | 改用其它 skill |
| ---- | ------------ | -------------- |
| 顶部 **独立一条** `ProForm`（`inline`）专门做查询，中间 `ProTable` 只展示，底部/弹窗再用 **整块 `ProForm`** 编辑一条业务实体 | ✅ **`deppon-pro-page-query-table-form`** | — |
| 查询条件做在 **ProTable 自带搜索区**（`hideInSearch`、`@search` 等），表+搜一体 | ❌ 不用本 skill | **`deppon-pro-table`** |
| 在表格 **单元格内** 编辑、增删行、`:editable="true"`、`@validation-change` | ❌ 不是本 skill | **`deppon-pro-table-cell-editable`**（示例可参考 monorepo `site/.../ProTableEditable.vue`，**本 skill 不默认读 site**） |
| 只要表单页、不要上中下整页布局 | ❌ | **`deppon-pro-form`** |

**结论**：与 **`deppon-pro-table`** 的重叠只在「都有列表」——布局不同；本 skill 强调 **三块分离**（查询 Form / Table / 编辑 Form），**不是** ProTable 的「表头搜索一体化」。

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：同一页组合 `ProForm`（`inline` 查询）、`ProTable`、底部或弹窗 `ProForm` — 以类型与文档为准。
-   **`@deppon/deppon-ui`**。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 布局结构

1. **顶部**：`<pro-form ref="queryFormRef" :inline="true" :columns="queryColumns" :initial-values="queryForm" @submit="handleQuery">`，`#actions` 内「查询 / 重置」。
2. **中部**：`<pro-table ...>`，`#paginationBefore` 可放摘要或按钮。
3. **底部（可选）或弹窗**：`<pro-form ref="editFormRef" :columns="editColumns" :initial-values="editForm" :rules="editFormRules" :cols="2" @submit="handleSubmit">` — 编辑的是 **一条记录的表单字段**，不是表格单元格内嵌控件。

## 导入约定

```js
import { ProTable, ProForm } from '@deppon/deppon-template';
import { ElButton, ElMessage, ElCard } from '@deppon/deppon-ui';
```

若项目中仍使用 `element-plus` 的 `ElMessage`，与项目统一即可；skills 以 **`@deppon/deppon-ui`** 为默认。

## 关键交互模式（分页与查询联动）

-   **查询**：`handleQuery(values)` → 保存 `queryForm` → `currentPage = 1` → `fetchData()`。
-   **重置查询**：`form.reset()` → 恢复 `queryForm` 初值对象 → `currentPage = 1` → `fetchData()`。
-   **分页**：`watch([currentPage, pageSize], () => fetchData())`，`fetchData` 内防重入（`loading` 守卫）。
-   **编辑提交**：`handleSubmit(values)` 更新本地 `editForm` 或调保存 API。

## columns 分拆原则

-   `queryColumns`：仅查询需要字段；`valueType`、`fieldProps`、`options` 与 `deppon-pro-form` 一致。
-   `columns`（表格）：`prop`/`label`/`width`/`formatter`；展示用 `formatter`，避免在模板里写过多逻辑。
-   `editColumns`：与表单实体字段一致；数字用 `el-input-number` + `component`/`componentProps` 模式。

## 样式区块（可复制语义）

-   `.query-form`：上 margin/padding、浅色底与边框（见 PaginationTest）。
-   `.edit-form`：下 margin/padding，与查询区对称。

## 生成清单

-   [ ] 查询与编辑的字段命名空间清晰，不共用同一 ref 的 columns。
-   [ ] `fetchData` 使用查询条件与分页参数（预留接到真实 API 的位置）。
-   [ ] 表格 `total` 与后端一致；mock 阶段注明替换点。
-   [ ] 路由与菜单不在此 skill 范围；仅生成视图组件时可在末尾提醒接入**当前项目的路由配置**。