ProTable - 高级表格

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

依托于 ProForm 的能力，ProForm 拥有多种形态，可以切换查询表单类型，设置变形成为一个简单的 Form 表单，执行新建等功能。

但是没有打印功能。所以自己写了个通用打印组件。

components/FrPrint/index.less

.backgroud {width: 100%;height: 700px;//background-color: rgb(66, 66, 66);
}

components/FrPrint/index.tsx

import React, { useRef } from 'react';
import { Modal } from 'antd';
import { useReactToPrint } from "react-to-print";
import csstyle from "./index.less";
import moment from 'moment';
import ProTable from '@ant-design/pro-table';
import { WaterMark } from '@ant-design/pro-layout';
import { useModel } from 'umi';export type FormValueType = {target?: string;template?: string;type?: string;time?: string;frequency?: string;
};export type UpdateFrPrintProps = {title?: string;subTitle?: string;columns: any[];dataSource: any[];onCancel: (flag?: boolean, formVals?: FormValueType) => void;printModalVisible: boolean;};
/*** ProTable - 高级表格 通用打印模块*/
const FrPrint: React.FC<UpdateFrPrintProps> = (props) => {const { initialState } = useModel('@@initialState');const componentRef = useRef();const handlePrint = useReactToPrint({content: () => (componentRef.current != undefined) ? componentRef.current : null,onBeforeGetContent: () => (props.onCancel())});//console.log('columns', props.columns);const date = moment().format('YYYY-MM-DD HH:mm:ss').toString();return (<Modalwidth="80%"centereddestroyOnClosetitle={false}visible={props.printModalVisible}okText="打印"onCancel={() => {props.onCancel();}}onOk={() => {handlePrint();//打印}}keyboard={true}><div className={csstyle.backgroud} ref={componentRef}><WaterMark content={initialState?.currentUser?.name}><div style={{ padding: 30 }}><div style={{ width: '100%', textAlign: "center", color: '#aaaaaa' }}>西藏大麦 · Dmart</div><h3 style={{ width: '100%', textAlign: "center" }}>{props.title}</h3><h4>{props.subTitle}</h4>{/* 普通 Table columns 不支持 valueType 属性<Table className={csstyle.table} columns={props.columns} dataSource={props.dataSource} pagination={false} bordered size="small" /> */}<ProTable<any>columns={props.columns}dataSource={props.dataSource}rowKey="key"pagination={false}search={false}toolBarRender={false}bordered size="small"/><div style={{ width: '100%', paddingTop: 30, textAlign: "center", color: '#aaaaaa', fontSize: 10 }}>打印日期:{date}</div></div></WaterMark></div></Modal >);
};export default FrPrint;

调用方法

1.引用模块

import FrPrint from "../components/FrPrint";

2.ProTable toolBarRender属性中设置打印按钮

toolBarRender={() => [<Button key="out">导出</Button>,/// 设置打印按钮 <Button key="out"onClick={() => handlePrintModalVisible(true)}>打印</Button>]}

3.PageContainer中加入组件

    {/* 调用打印模块 */}<FrPrinttitle={tableName}subTitle={paramsText}columns={columns}dataSource={[...selectedRowsState, sumRow]}onCancel={() => {handlePrintModalVisible(false);}}printModalVisible={printModalVisible}/>

完整调用Demo

regionSum/index.tsx

import React, { useState } from 'react';
import { Button } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import type { TableListItem } from './data';
import FrPrint from "../components/FrPrint";
import restyle from '../style.less';const TableList: React.FC = () => {const [sortState, setSortState] = useState<boolean>(false);const [printModalVisible, handlePrintModalVisible] = useState<boolean>(false);const [paramsText, setParamsText] = useState<string>('');const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);const [sumRow, setSumRow] = useState<TableListItem>();const tableName = "区域销售汇总";/** 查询表单 */const query: ProColumns<TableListItem>[] = [{title: '日期区间',key: 'dateRange',dataIndex: 'createdAtRange',valueType: 'dateRange',hideInTable: true,//initialValue: [moment(), moment().add(1, 'day')],initialValue: ['2021-01-01', '2021-01-31'],}]/** 表格列设置 */const columns: ProColumns<TableListItem>[] = [{title: '销售区域',dataIndex: 'Region',hideInSearch: true,},{title: '实销金额',dataIndex: 'SSS',align: 'right',valueType: 'money',hideInSearch: true,sorter: (a, b) => a.SSS - b.SSS,},{title: '毛利金额',dataIndex: 'SML',align: 'right',valueType: 'money',hideInSearch: true,sorter: (a, b) => a.SML - b.SML,},{title: '毛利率',dataIndex: 'MLL',align: 'right',valueType: 'percent',hideInSearch: true,sorter: (a, b) => a.MLL - b.MLL,},];/** 表格列含查询表单 */const proColumns: ProColumns<TableListItem>[] = [...query,...columns];return (<PageContainerheader={{breadcrumb: {},}}><ProTable<TableListItem>headerTitle={tableName}toolBarRender={() => [<Button key="out">导出</Button>,/// 设置打印按钮 <Button key="out"onClick={() => handlePrintModalVisible(true)}>打印</Button>]}pagination={false}size="small"rowKey="key"search={{labelWidth: 120,}}request={getList}onSubmit={(params) => {//console.log('onSubmit.params', params);let tmp: string = "";if (params.dateRange != undefined && params.dateRange.length == 2) {tmp += '  日期区间：' + params.dateRange[0] + " - " + params.dateRange[1]}setParamsText(tmp)}}onChange={(pagination, filters, sorter, extra) => {if (Object.keys(extra).length > 0) {console.log("onChange.extra", extra);setSortState(true);//标记为排序操作状态setSelectedRows(extra.currentDataSource);}}}onDataSourceChange={(data) => {console.log('onDataSourceChange.data', data);//如果是排序操作,则不处理数据if (!sortState) {setSelectedRows(data);//获取表格数据///-------------------------计算汇总-----------------------------let totalSSS: number = 0;let totalSML: number = 0;data.forEach(({ SSS, SML }) => {totalSSS += Number(SSS);totalSML += Number(SML);});const totalMll = totalSSS == 0 ? 0 : Number(totalSML / totalSSS * 100)const totalRow: TableListItem = { 'Region': '合计', 'SSS': totalSSS, 'SML': totalSML, 'MLL': totalMll }setSumRow(totalRow);//获取合计行数据}}}columns={proColumns}columnsState={{onChange: (value) => {console.log('column state', value);},}}///增加合计行summary={() => {return sumRow != undefined ? (<ProTable.Summary.Row className={restyle.totleRow}><ProTable.Summary.Cell index={0}>合计:</ProTable.Summary.Cell><ProTable.Summary.Cell index={1}><span className={restyle.totle}>{(sumRow.SSS).toFixed(2)}</span></ProTable.Summary.Cell><ProTable.Summary.Cell index={2}><span className={restyle.totle}>{(sumRow.SML).toFixed(2)}</span></ProTable.Summary.Cell><ProTable.Summary.Cell index={3}><span className={restyle.totle}>{(sumRow.MLL).toFixed(2)}%</span></ProTable.Summary.Cell></ProTable.Summary.Row>) : '';}}/>{/* 调用打印模块 */}<FrPrinttitle={tableName}subTitle={paramsText}columns={columns}dataSource={[...selectedRowsState, sumRow]}onCancel={() => {handlePrintModalVisible(false);}}printModalVisible={printModalVisible}/></PageContainer >);
};
export default TableList;

Ant Deign Pro - ProTable - 高级表格通用打印组件相关推荐

Ant Design Pro在使用TreeSelect树选择组件时，报错未注册
Ant Design Pro在使用树选择组件时,报错未注册 did you register the component correctly? 经过检查发现Ant Design Pro是按需引入的,需 ...
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
先上整体代码: const beforeSearchSubmit = (par) => {//par 就是你搜索表单输入的内容 }<ProTableheaderTitle="查询 ...
【Ant Design Pro 二】创建页面，组件，并在页面调用
开发交流qq群 173683895 路由里面的参数作用介绍: {path: "/a_nowdayserver/nowdayserver", //随便取名,显示在访问路径url中 ...
Ant Design Pro 企业级后台实战（73 个视频）
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
Ant Design Pro使用之--EditableProTable 可编辑表格
前言--EditableProTable 与 ProTable的对比首先:可编辑表格 EditableProTable 与 ProTable 的功能基本相同: 但是如果用ProTable的话,增和改 ...
ant design pro模板_Ant Design Pro入门教程，安装，运行（V5 Typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
ant design pro V2 学习笔记
该笔记分为两部分,前面部分为官方文档介绍,后面为实际项目改造的历程本文档不定时更新,你想要的在实战部分如果你对react.dva等一些概念不是很清晰,建议先看以下概念: react:https:/ ...
Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
Ant Design Pro初探
Ant Design Pro 浅析脚手架下载 Ant Design Pro 浅析菜单映射页面渲染界面定义数据交互后台数据交互脚手架下载软件环境:NodeJS,Git 下载步骤: 1.cl ...
Ant Design Pro V5 入门指南
一.安装及完整区块.运行.打包命令 API: V5版:https://beta-pro.ant.design/index-cn ProTable:https://protable.ant.design ...

Ant Deign Pro - ProTable - 高级表格通用打印组件

ProTable - 高级表格

Ant Deign Pro - ProTable - 高级表格通用打印组件相关推荐

最新文章

热门文章

Ant Deign Pro - ProTable - 高级表格 通用打印组件

ProTable - 高级表格

Ant Deign Pro - ProTable - 高级表格 通用打印组件相关推荐

最新文章

热门文章

Ant Deign Pro - ProTable - 高级表格通用打印组件

Ant Deign Pro - ProTable - 高级表格通用打印组件相关推荐