关于4月1日的判断修改
This commit is contained in:
ylj20011123
parent
284c811f9d
commit
d02155b3b1
56
.agent/skills/report_page_generator/SKILL.md
Normal file
56
.agent/skills/report_page_generator/SKILL.md
Normal file
@ -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
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
if (reqDetailList && reqDetailList.length > 0) {
|
||||
exportXlsxFromProColumnsExcelJS(exportColumns, reqDetailList, `文件名`, { topTitle: `报表标题` });
|
||||
} else {
|
||||
message.error('暂无数据可导出！');
|
||||
}
|
||||
}}
|
||||
>
|
||||
导出excel
|
||||
</Button>
|
||||
```
|
||||
|
||||
## 5. 开发建议
|
||||
- 当用户要求生成报表页时，直接基于 `test.tsx` 的结构填充 `columns` 和 API 调用。
|
||||
- 保证页面整体高度自适应，表格 `scroll` 属性通常设置为 `y: "calc(100vh - 410px)"`。
|
||||
96
src/pages/basicManage/ServerpartShop/test.tsx
Normal file
96
src/pages/basicManage/ServerpartShop/test.tsx
Normal file
@ -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<ActionType>();
|
||||
// 表格里面的表单实例
|
||||
const formRef = useRef<FormInstance>();
|
||||
// 导出的数据
|
||||
const [reqDetailList, setReqDetailList] = useState<any>();
|
||||
// 是否折叠左侧的服务区选择框
|
||||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||||
// 树相关的属性和方法
|
||||
const [selectedId, setSelectedId] = useState<string>()
|
||||
// 查询的条件
|
||||
const [searchParams, setSearchParams] = useState<any>()
|
||||
// 页面显示的列
|
||||
const columns: any = []
|
||||
// 导出的列
|
||||
const exportColumns: any = []
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||||
<LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
|
||||
<div style={{
|
||||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
paddingRight: 0
|
||||
}}>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
bordered
|
||||
expandable={{
|
||||
expandRowByClick: true
|
||||
}}
|
||||
scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
|
||||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
if (!selectedId) {
|
||||
return
|
||||
}
|
||||
|
||||
setSearchParams(params)
|
||||
|
||||
setReqDetailList([]) // 存储实际接口返回的值
|
||||
}}
|
||||
toolbar={{
|
||||
actions: [
|
||||
<Button
|
||||
key="new"
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
if (reqDetailList && reqDetailList.length > 0) {
|
||||
// 尝试一下 导出新方法
|
||||
exportXlsxFromProColumnsExcelJS(exportColumns,
|
||||
reqDetailList, // 实际的数据
|
||||
``,// 导出的excel文件名称
|
||||
{
|
||||
topTitle: `进销存类别报表`, // 顶部大标题
|
||||
}
|
||||
)
|
||||
} else {
|
||||
message.error('暂无数据可导出！')
|
||||
}
|
||||
}}
|
||||
>
|
||||
导出excel
|
||||
</Button>
|
||||
]
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user }: ConnectState) => ({
|
||||
currentUser: user.currentUser
|
||||
}))(saleRankReport);
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user