---
name: deppon-pro-page-insert-detail-workflow
description: >-
    单页承载「新建 insert / 详情 detail / 工作流 workflow」三态：路由 query、顶栏与底栏分支、ProForm 只读切换、
    子表 ProTable 单实例 row-edit 与只读列切换、保存前整表校验。在用户要新建+详情+工作流合一页、
    sourceType、审批页、与列表详情同构页时应用。
---

# deppon-pro-page-insert-detail-workflow：通用新建 / 详情 / 工作流模板页

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

| 场景                                                                                                                                                    | 使用本 skill        | 改用其它 skill                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------------------------- |
| **同一 URL** 用 `query`（如 `sourceType`）切换新建、详情、工作流；**一套** `el-scrollbar + el-card` 表单区 + **多套底栏**（保存 / 关闭下载打印 / 审批） | ✅ 本 skill         | —                                      |
| 上查下表 + 底部整块实体表单（**非** insert/detail/workflow 三态）                                                                                       | ❌                  | **`deppon-pro-page-query-table-form`** |
| 多段锚点、多段 `ProForm` 统一提交                                                                                                                       | ❌                  | **`deppon-pro-form-group`**            |
| 列表内 **单元格** 编辑 `:editable="true"`                                                                                                               | ❌                  | **`deppon-pro-table-cell-editable`**   |
| 子表 **行编辑** `row-edit`、`v-model:editing-row-index`、操作列插槽（本页子表用法）                                                                     | 与本 skill **组合** | **`deppon-pro-table-row-edit`**        |

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProForm`、`ProTable`（`row-edit`、`readonly`、`validate`、`getEditingRowData`、`clearEditingRowData`）— 以包内 README / `*.d.ts` 为准。
-   **`@deppon/deppon-ui`**：`ElCard`、`ElScrollbar`、`ElBreadcrumb`、`ElButton`、`ElMessage` 等。
-   **`@deppon/deppon-router`**：`useRoute` / `useRouter` 读 `query`、返回。
-   **`deppon-npm-skills`**。外仓实现时**不依赖** `deppon-npm` 的 `site/`。

## 没有 `ContractDetailExample.vue` 时怎么落地？

-   **不要把整页 `.vue` 全文写进本 SKILL**。原因：体积大、易与真实业务分叉、skill 更新不同步；外仓也**本来就没有**该路径。
-   **做法**：以本文件的 **模式约定 + 生成清单** 为准，结合 **`deppon-npm-private-registry`** 里包的 README / `*.d.ts` 写你项目自己的页面；子表 **`row-edit`** 的列与事件细节配合 **`deppon-pro-table-row-edit`**。
-   **仅当工作区就是 `deppon-npm` monorepo** 且需要「对一下交互」时，再在仓库内打开 `site/src/views/examples/ContractDetailExample.vue` 对照，**不**要求把该文件拷进业务仓或拷进 skill。
-   下面 **骨架** 只表达结构（非可运行完整页），Agent 按业务字段补全即可。

### 最小结构骨架（示意）

```vue
<!-- 顶栏：v-if="isWorkflow" / v-else -->
<!-- 中部：el-scrollbar + el-card + pro-form；子表单个 pro-table -->
<pro-table
    ref="subTableRef"
    v-model:editing-row-index="subEditingIndex"
    :data-source="detail.subRows"
    :columns="isInsert ? subEditColumns : subReadColumns"
    :row-edit="isInsert"
    :readonly="isReadonly"
    :show-header="false"
    :show-pagination="false"
    :show-toolbar="false"
    :fixed-table="false"
    row-key="id"
>
  <template #action="{ row, index }">…保存/取消/修改/删除…</template>
</pro-table>
<el-button v-if="isInsert" type="primary" class="add-row-btn" @click="addSubRow">…</el-button>
<!-- 底栏：v-if="isInsert" / v-else-if="isDetail" / v-else-if="isWorkflow" 三套按钮 -->
```

## 模式约定（与常见业务页一致）

-   **路由参数**：例如 `?sourceType=insert | detail | workflow`（可与 `mode` 等别名兼容，在 `watch(route.query)` 内归一化）。
-   **派生布尔**：`isInsert` / `isDetail` / `isWorkflow`；**只读总开关**：`isReadonly = isDetail || isWorkflow`（新建可编）。
-   **顶栏**：`workflow` 单独一套（面包屑 + 工作流号等）；`insert`/`detail` 共用另一套（面包屑 + 标题 + 返回）。
-   **主表单 `ProForm`**：详情/只读用表单级 `:mode="'read'"` 或 `columns` 加 `mode: 'read'`（默认纯文本）；需要带框时再加 `:read-style-as-edit="true"`；**`rules` 仅在 `isInsert` 传入**。
-   **子表 `ProTable`（单表双列配置，避免两个 `pro-table`）**：
    -   `:data-source` 同一数组；`:columns="computed(() => isInsert ? editCols : readCols)"`。
    -   **新建**：`:row-edit="true"`，`:readonly="false"`，`v-model:editing-row-index`，列含 `valueType`、`rules`、**操作列**（`prop: 'action'`，`slots: { default: 'action' }`），`#action` 内「保存 / 取消 / 修改 / 删除」。
    -   **详情 / 工作流**：`:row-edit="false"`，`:readonly="true"`，只读列无操作列。
    -   **底部添加行**：表格外 `el-button`，`v-if="isInsert"`，`class="add-row-btn"`；样式对齐业务 `ContractAddFrom.vue`（全宽虚线底、`add-icon` 字号等）。
-   **切离 insert**：`watch(isInsert, …)` 将各子表 `editingRowIndex` 置 `-1`，必要时 `clearEditingRowData`。
-   **页级保存**：各子表无编辑行后，对仍有数据的子表依次 `await tableRef.validate()`（`try/catch`）；与其它表编辑态互斥时在「添加行」入口提示先保存。

## 底栏（三套互斥）

-   **insert**：取消、保存（主表单 + 子表校验通过后调接口）。
-   **detail**：关闭、业务按钮（如下载、打印）。
-   **workflow**：审批意见（勾选 + textarea）+ 关闭 + 审批提交。

## 导入约定

```js
import { ProForm, ProTable } from '@deppon/deppon-template';
import { ElCard, ElScrollbar, ElButton, ElMessage, ElBreadcrumb, ElBreadcrumbItem } from '@deppon/deppon-ui';
import { useRoute, useRouter } from '@deppon/deppon-router';
```

## 生成清单

-   [ ] `sourceType`（或项目约定字段）与 `isInsert`/`isDetail`/`isWorkflow` 一致，路由变化时同步。
-   [ ] 工作流与详情顶栏不串用；`v-if` / `v-else` 分支清晰。
-   [ ] 子表 **一个** `pro-table`，列与 `row-edit`/`readonly` 随模式切换；操作列仅在可编辑模式出现。
-   [ ] 保存前处理「正在编辑的行」与 `validate`；多子表时顺序与提示语明确。
-   [ ] 业务文案（模块名、按钮文案）按产品替换；本 skill 只固定 **结构** 与 **交互模式**。