diff --git a/examples/search-table-react/030-table-summay.md b/examples/search-table-react/030-table-summay.md index 1b42b0c..a004412 100644 --- a/examples/search-table-react/030-table-summay.md +++ b/examples/search-table-react/030-table-summay.md @@ -5,33 +5,266 @@ toc: content # 合计栏 Summary +## 基础功能 + +内置“合计”数据显示功能,只需在 `request` 里返回 `summaryData` 数据即可,数据字段对应表格列的 `dataIndex` 字段,合计数据的位置将根据此对应关系自动计算。 + +```tsx +import { Tag } from 'antd' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import columns from './helpers/columns' +import createDataSource from './helpers/createDataSource' +import SearchTable from '@schema-render/search-table-react' + +const Demo = () => { + return ( + { + await sleep() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) + + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数,用于分页 + total: 100, + // 合计栏数据 + summaryData: { + // 对应「供应商编码」 + supplier_code: 自定义内容, + // 对应「商品价格」 + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` + +## 自定义合计文案 + +通过 `summaryText` 可定义 `合计` 文案,会在序号栏显示。 + +```tsx +import { Tag } from 'antd' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import columns from './helpers/columns' +import createDataSource from './helpers/createDataSource' +import SearchTable from '@schema-render/search-table-react' + +const Demo = () => { + const actionItems = () => [{ text: '编辑' }, { text: '删除' }] + const summaryText =
合计
+ return ( + { + await sleep() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) + + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数,用于分页 + total: 100, + // 合计栏数据 + summaryData: { + supplier_code: 自定义内容, + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` + +## 选中栏效果 + +只有`选中栏`。 + ```tsx -/** - * defaultShowCode: true - */ +import { Tag } from 'antd' import { sleep } from '@examples/utils' import schema from './helpers/schema' import columns from './helpers/columns' import createDataSource from './helpers/createDataSource' +import SearchTable from '@schema-render/search-table-react' + +const Demo = () => { + const actionItems = () => [{ text: '编辑' }, { text: '删除' }] + return ( + { + await sleep() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) -// 引入 Search + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数,用于分页 + total: 100, + // 合计栏数据 + summaryData: { + supplier_code: 自定义内容, + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` + +`选中栏` 与 `序号栏` 同时存在。 + +```tsx +import { Tag } from 'antd' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import columns from './helpers/columns' +import createDataSource from './helpers/createDataSource' import SearchTable from '@schema-render/search-table-react' const Demo = () => { + const actionItems = () => [{ text: '编辑' }, { text: '删除' }] return ( { - // 打印搜索条件 - console.log('searchParams:', searchParams) + await sleep() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) - // 模拟请求接口获取表格数据 + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数,用于分页 + total: 100, + // 合计栏数据 + summaryData: { + supplier_code: 自定义内容, + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` + +同时存在时,“合计” 文案占据两个单元格。 + +```jsx +import { Tag } from 'antd' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import columns from './helpers/columns' +import createDataSource from './helpers/createDataSource' +import SearchTable from '@schema-render/search-table-react' + +// 通过样式控制效果 +const textStyle = { + width: 116, + height: '100%', + background: 'white', + position: 'absolute', + left: -48, + top: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +} + +const Demo = () => { + const actionItems = () => [{ text: '编辑' }, { text: '删除' }] + const summaryText =
合计
+ + return ( + { await sleep() - const data = createDataSource() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) // 返回表格数据渲染 return { @@ -39,6 +272,11 @@ const Demo = () => { data, // 数据总数,用于分页 total: 100, + // 合计栏数据 + summaryData: { + supplier_code: 自定义内容, + goods_price: totalPrice, + }, } }} /> diff --git a/examples/search-table-react/880-table-editable.md b/examples/search-table-react/880-table-editable.md new file mode 100644 index 0000000..38ec294 --- /dev/null +++ b/examples/search-table-react/880-table-editable.md @@ -0,0 +1,8 @@ +--- +group: + title: 案例集锦 + order: 800 +toc: content +--- + +# 表格内容编辑 diff --git a/examples/search-table-react/helpers/columns.ts b/examples/search-table-react/helpers/columns.ts index df9ebc4..37874a5 100644 --- a/examples/search-table-react/helpers/columns.ts +++ b/examples/search-table-react/helpers/columns.ts @@ -37,6 +37,10 @@ const columns: ISearchTableProps['table']['columns'] = [ dataIndex: 'goods_name', width: 130, }, + { + title: '商品价格(元)', + dataIndex: 'goods_price', + }, { title: '商品编码', dataIndex: 'goods_code', diff --git a/examples/search-table-react/helpers/createDataSource.ts b/examples/search-table-react/helpers/createDataSource.ts index d8061dc..bc15b79 100644 --- a/examples/search-table-react/helpers/createDataSource.ts +++ b/examples/search-table-react/helpers/createDataSource.ts @@ -1,7 +1,7 @@ import dayjs from 'dayjs' export default function createDataSource(count = 10) { - const dataSource: object[] = [] + const dataSource = [] for (let i = 0; i < count; i++) { const random = String(Math.random()).slice(2, 6) @@ -23,6 +23,7 @@ export default function createDataSource(count = 10) { goods_code: `G${Date.now()}`, goods_category: goods_category === 1 ? '水果鲜花' : '海鲜水产', goods_date: date, + goods_price: goods_category === 1 ? 19.9 : 22.8, }) }