提交 854642ec 作者: 郁骅焌
import React, { useEffect, useState, useImperativeHandle, useRef } from 'react';
import React, { useEffect, useState, useImperativeHandle, useRef, useMemo } from 'react';
import { ConfigProvider, Table, Card } from 'antd';
import { useFullscreen } from '@umijs/hooks';
import TableSearchForm from '@/components/Common/TableSearchForm';
......@@ -30,6 +30,7 @@ const initState = {
* 8、onMouseLeaveRow
* 9、onContextMenuRow
* 10、toolOptionConfig
* 11、hiddeTool 隐藏工具栏
* 表格工具['reload', 'hiddensearch', 'density', 'fullScreen']
*/
const SageTable = React.forwardRef((props, ref) => {
......@@ -41,7 +42,7 @@ const SageTable = React.forwardRef((props, ref) => {
const [selectedRows, setSelectedRows] = useState([]);
// 展开keys
const [expandedRowKeys, setExpandedRowKeys] = useState([])
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
const {
request,
......@@ -69,6 +70,7 @@ const SageTable = React.forwardRef((props, ref) => {
// 工具相关
toolBarRender: toolBarRenderProps,
toolOptionConfig: toolOptionConfigProps,
hiddeTool = false,
// 其余表格属性
...tableProps
} = props;
......@@ -138,9 +140,9 @@ const SageTable = React.forwardRef((props, ref) => {
delete newSearchParams.pageSize;
}
let lastDataSource = res.data ? res.data.slice() : []
let lastDataSource = res.data ? res.data.slice() : [];
if (renderData) {
lastDataSource = renderData(lastDataSource)
lastDataSource = renderData(lastDataSource);
}
setTableState({
......@@ -157,18 +159,18 @@ const SageTable = React.forwardRef((props, ref) => {
});
if (defaultExpandAllRowsProps) {
const allKeys = []
const allData = lastDataSource.slice()
const allKeys = [];
const allData = lastDataSource.slice();
const filterExpandRowKeys = (list) => {
list.forEach(item => {
list.forEach((item) => {
if (item.children && item.children.length !== 0) {
allKeys.push(item[props.rowKey])
filterExpandRowKeys(item.children)
allKeys.push(item[props.rowKey]);
filterExpandRowKeys(item.children);
}
})
}
filterExpandRowKeys(allData)
setExpandedRowKeys(allKeys)
});
};
filterExpandRowKeys(allData);
setExpandedRowKeys(allKeys);
}
}
}
......@@ -239,16 +241,34 @@ const SageTable = React.forwardRef((props, ref) => {
const paginationState = paginationProps !== undefined ? paginationProps : tableState.pagination;
const loadingState = loadingProps !== undefined ? loadingProps : loading;
// 是否有序号
const columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
// const columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
const getLatestColumnsState = () => {
let columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
// 处理列配置
if (hasNumber) {
columnsState.unshift({
title: '序号',
render: (text, record, index) =>
`${(paginationState.current - 1) * paginationState.pageSize + index + 1}`,
render: (text, record, index) => {
let serialNumber = 0;
if (paginationState) {
serialNumber = `${
(paginationState.current - 1) * paginationState.pageSize + index + 1
}`;
} else {
serialNumber = index + 1;
}
return serialNumber;
},
align: 'center',
width: 60,
});
}
// 隐藏hidden属性列
columnsState = columnsState.filter((item) => !item.hidden);
return columnsState;
};
const latestColumnsState = useMemo(() => getLatestColumnsState(), [props.columns, tableState]);
const tableSearchFormProps = {
searchFields: searchFieldsProps,
......@@ -280,56 +300,84 @@ const SageTable = React.forwardRef((props, ref) => {
const getExpandedRowKeys = () => {
return expandedRowKeys;
}
};
const getAllExpandedRowKeys = () => {
const allKeys = []
const allData = dataSourceState.slice()
const allKeys = [];
const allData = dataSourceState.slice();
const filterExpandRowKeys = (list) => {
list.forEach(item => {
list.forEach((item) => {
if (item.children && item.children.length !== 0) {
allKeys.push(item[props.rowKey])
filterExpandRowKeys(item.children)
allKeys.push(item[props.rowKey]);
filterExpandRowKeys(item.children);
}
})
}
filterExpandRowKeys(allData)
});
};
filterExpandRowKeys(allData);
return allKeys;
}
};
if (expandableProps) {
lastTableState.expandable = {
expandedRowKeys,
onExpand: (expanded, record) => {
const lastExpandedRowKeys = expandedRowKeys.slice()
const lastExpandedRowKeys = expandedRowKeys.slice();
if (expanded) {
lastExpandedRowKeys.push(record[props.rowKey])
setExpandedRowKeys(lastExpandedRowKeys)
lastExpandedRowKeys.push(record[props.rowKey]);
setExpandedRowKeys(lastExpandedRowKeys);
} else {
const deleteIndex = lastExpandedRowKeys.findIndex(item => item === record[props.rowKey])
lastExpandedRowKeys.splice(deleteIndex, 1)
}
setExpandedRowKeys(lastExpandedRowKeys)
}
const deleteIndex = lastExpandedRowKeys.findIndex(
(item) => item === record[props.rowKey],
);
lastExpandedRowKeys.splice(deleteIndex, 1);
}
setExpandedRowKeys(lastExpandedRowKeys);
},
};
}
// 获取当前列表的数据
const getDataSource = () => {
return dataSourceState
}
return dataSourceState;
};
// 给列表赋值
const setDataSource = (data) => {
const tableStateTemp = Object.assign({}, tableState)
let lastDataSource = data.slice()
const tableStateTemp = Object.assign({}, tableState);
let lastDataSource = data.slice();
if (renderData) {
lastDataSource = renderData(lastDataSource)
lastDataSource = renderData(lastDataSource);
}
tableStateTemp.dataSource = lastDataSource;
setTableState(tableStateTemp);
};
// 根据某个属性修改值
const setDataSourceByMapKey = (
fieldKeyName,
fieldKeyValue,
changeFieldKeyName,
changeFieldKeyValue,
) => {
const dataSourceTemp = tableState.dataSource ? tableState.dataSource.slice() : [];
const loopDataSource = (list) => {
for (let i = 0; i < list.length; i++) {
if (list[i].children && list[i].children.length !== 0) {
loopDataSource(list[i].children);
}
if (list[i][fieldKeyName] === fieldKeyValue) {
list[i][changeFieldKeyName] = changeFieldKeyValue;
break;
}
tableStateTemp.dataSource = lastDataSource
setTableState(tableStateTemp)
}
};
loopDataSource(dataSourceTemp);
const tableStateTemp = Object.assign({}, tableState);
tableStateTemp.dataSource = dataSourceTemp;
setTableState(tableStateTemp);
};
// 暴露给外部的方法
useImperativeHandle(ref, () => ({
......@@ -345,6 +393,7 @@ const SageTable = React.forwardRef((props, ref) => {
getAllExpandedRowKeys,
getExpandedRowKeys,
setExpandedRowKeys,
setDataSourceByMapKey,
}));
return (
......@@ -363,11 +412,13 @@ const SageTable = React.forwardRef((props, ref) => {
<TableSearchForm ref={tableSearchFormRef} {...tableSearchFormProps} />
)}
{!hiddeTool ? (
<TableTool tableSize={tableSizeState} isFullscreen={isFullscreen} {...tableToolProps} />
) : null}
<Table
size={tableSizeState}
columns={columnsState}
columns={latestColumnsState}
dataSource={dataSourceState}
pagination={paginationState}
loading={loadingState}
......
......@@ -120,7 +120,7 @@ const GlobalModel = {
*returnTab({ payload }, { put, select }) {
const globalState = yield select(state => state.global)
dropByCacheKey(payload.closePath)
// dropByCacheKey(payload.closePath)
const tabPanes = globalState.tabPanes.slice()
let removeIndex;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论