关于4月1日的判断修改
This commit is contained in:
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);
|
list = list.filter((item: any) => item.value !== 827);
|
||||||
}
|
}
|
||||||
} else {
|
} 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);
|
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);
|
list = list.filter((item: any) => item.value !== 1802);
|
||||||
}
|
}
|
||||||
} else {
|
} 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);
|
list = list.filter((item: any) => item.value !== 1802);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user