diff --git a/.agent/skills/report_page_generator/SKILL.md b/.agent/skills/report_page_generator/SKILL.md new file mode 100644 index 0000000..60c93ea --- /dev/null +++ b/.agent/skills/report_page_generator/SKILL.md @@ -0,0 +1,56 @@ +--- +name: report_page_generator +description: 云平台标准报表页面生成规范,采用“左侧选择树 + 右侧数据表格”布局,集成动态宽度调整与 Excel 导出功能。 +--- + +# 云平台报表页面生成规范 (Report Page Generator) + +本技能定义了云平台内部管理系统中标准报表页面的 UI 骨架和基础交互逻辑。 + +## 1. 核心布局架构 (Layout) +- **Flex 容器**:外层 `div` 使用 `display: 'flex'`。 +- **左侧组件**:固定使用 `LeftSelectTree` 作为组织/服务区筛选器。 +- **右侧动态宽度**:必须监听 `collapsible` 状态进行宽度计算。 + ```javascript + width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)' + ``` + +## 2. 标准组件库引入 +```javascript +import { connect } from "umi"; +import React, { useRef, useState } from "react"; +import { Button, message } from "antd"; +import ProTable from "@ant-design/pro-table"; +import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree"; +import PageTitleBox from "@/components/PageTitleBox"; +import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun"; +``` + +## 3. 必要状态与引用 (Hooks & Refs) +- `actionRef`: 控制表格动作(刷新、重置等)。 +- `formRef`: 控制查询表单。 +- `selectedId`: 存储选中的树节点 ID。 +- `collapsible`: 控制左侧边栏伸缩。 +- `reqDetailList`: 存储接口返回的原始数据(用于导出)。 + +## 4. 关键逻辑逻辑片段 +- **请求拦截**:在 `ProTable` 的 `request` 属性中,若未选中树节点则停止请求。 +- **导出操作**: + ```javascript + + ``` + +## 5. 开发建议 +- 当用户要求生成报表页时,直接基于 `test.tsx` 的结构填充 `columns` 和 API 调用。 +- 保证页面整体高度自适应,表格 `scroll` 属性通常设置为 `y: "calc(100vh - 410px)"`。 diff --git a/src/pages/basicManage/ServerpartShop/test.tsx b/src/pages/basicManage/ServerpartShop/test.tsx new file mode 100644 index 0000000..c32afcd --- /dev/null +++ b/src/pages/basicManage/ServerpartShop/test.tsx @@ -0,0 +1,96 @@ +import { connect } from "umi"; +import type { CurrentUser } from "umi"; +import type { ConnectState } from "@/models/connect"; +import React, { useRef, useState } from "react"; +import type { FormInstance } from "antd"; +import { Button, message } from "antd"; +import type { ActionType } from "@ant-design/pro-table"; +import ProTable from "@ant-design/pro-table"; +import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree"; +import PageTitleBox from "@/components/PageTitleBox"; +import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun"; + + +const saleRankReport: React.FC<{ currentUser: CurrentUser }> = (props) => { + const { currentUser } = props + // 表格实例 + const actionRef = useRef(); + // 表格里面的表单实例 + const formRef = useRef(); + // 导出的数据 + const [reqDetailList, setReqDetailList] = useState(); + // 是否折叠左侧的服务区选择框 + const [collapsible, setCollapsible] = useState(false) + // 树相关的属性和方法 + const [selectedId, setSelectedId] = useState() + // 查询的条件 + const [searchParams, setSearchParams] = useState() + // 页面显示的列 + const columns: any = [] + // 导出的列 + const exportColumns: any = [] + + return ( +
+
+ +
+ } // 列表表头 + search={{ span: 6 }} + request={async (params) => { + if (!selectedId) { + return + } + + setSearchParams(params) + + setReqDetailList([]) // 存储实际接口返回的值 + }} + toolbar={{ + actions: [ + + ] + }} + /> +
+
+
+ ) +} + +export default connect(({ user }: ConnectState) => ({ + currentUser: user.currentUser +}))(saleRankReport); diff --git a/src/pages/reports/settlementAccount/component/yearExamineProcess.tsx b/src/pages/reports/settlementAccount/component/yearExamineProcess.tsx index 6bdddf4..0127a67 100644 --- a/src/pages/reports/settlementAccount/component/yearExamineProcess.tsx +++ b/src/pages/reports/settlementAccount/component/yearExamineProcess.tsx @@ -1018,7 +1018,7 @@ const YearExamineProcess = ({ currentUser, onShow, setOnShow, parentRow, setPare list = list.filter((item: any) => item.value !== 827); } } else { - if (parentRow?.ENDDATE && new Date(parentRow?.ENDDATE).getTime() > new Date('2025-04-01 00:00:00').getTime()) { + if (parentRow?.PROJECT_ENDDATE && new Date(parentRow?.PROJECT_ENDDATE).getTime() > new Date('2025-04-01 00:00:00').getTime()) { list = list.filter((item: any) => item.value !== 827); } } @@ -1030,7 +1030,7 @@ const YearExamineProcess = ({ currentUser, onShow, setOnShow, parentRow, setPare list = list.filter((item: any) => item.value !== 1802); } } else { - if (parentRow?.ENDDATE && new Date(parentRow?.ENDDATE).getTime() < new Date('2025-04-01 00:00:00').getTime()) { + if (parentRow?.PROJECT_ENDDATE && new Date(parentRow?.PROJECT_ENDDATE).getTime() < new Date('2025-04-01 00:00:00').getTime()) { list = list.filter((item: any) => item.value !== 1802); }