Commit c065213b authored by 张烨's avatar 张烨

feat: auto fix on save

parent 35381dc1
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
\ No newline at end of file
// eslint-disable-next-line button-has-type
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import BaseForm from '../../BaseForm'; import BaseForm from '../../BaseForm';
......
...@@ -2,10 +2,8 @@ import React, { useEffect, useState } from 'react'; ...@@ -2,10 +2,8 @@ import React, { useEffect, useState } from 'react';
// import OperationBar from './OperationBar' // import OperationBar from './OperationBar'
import { Table } from 'antd'; import { Table } from 'antd';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
import SearchBar from './SearchBar' import SearchBar from './SearchBar';
import styles from './baseTable.less'; import styles from './baseTable.less';
const ResizableTitle = props => { const ResizableTitle = props => {
const { onResize, width, ...restProps } = props; const { onResize, width, ...restProps } = props;
...@@ -34,17 +32,17 @@ const ResizableTitle = props => { ...@@ -34,17 +32,17 @@ const ResizableTitle = props => {
}; };
// 表格头变形的hook // 表格头变形的hook
const useResizableClumns = (clumns) => { const useResizableClumns = clumns => {
const [clmns, setClmns] = useState(clumns);
if (!clumns) return null; if (!clumns) return null;
const [clmns, setClmns] = useState(clumns) const handleResize = index => (e, { size }) => {
const handleResize = (index) => (e, { size }) => { const nextClmns = [...clmns];
const nextClmns = [...clmns]
nextClmns[index] = { nextClmns[index] = {
...nextClmns[index], ...nextClmns[index],
width: size.width width: size.width,
} };
setClmns(nextClmns) setClmns(nextClmns);
} };
return clmns.map((col, index) => ({ return clmns.map((col, index) => ({
...col, ...col,
onHeaderCell: column => ({ onHeaderCell: column => ({
...@@ -52,84 +50,94 @@ const useResizableClumns = (clumns) => { ...@@ -52,84 +50,94 @@ const useResizableClumns = (clumns) => {
onResize: handleResize(index), onResize: handleResize(index),
}), }),
})); }));
} };
// 渲染列表组件 // 渲染列表组件
const renderComponents = (componentOption = {}) => { const renderComponents = (componentOption = {}) => {
const defaultComponents = { const defaultComponents = {
header: { header: {
cell: ResizableTitle, cell: ResizableTitle,
} },
} };
return { return {
...defaultComponents, ...defaultComponents,
...componentOption, ...componentOption,
} };
} };
// 过滤列表数据 // 过滤列表数据
const filterData = (datas, searches, searchVal) => { const filterData = (datas, searches, searchVal) =>
return datas.filter(data => { datas.filter(data =>
return searches.some(s => s.filter(data[s.dataIndex], searchVal[s.dataIndex])) searches.some(s => s.filter(data[s.dataIndex], searchVal[s.dataIndex])),
}) );
}
const BaseTable = (props) => { const BaseTable = props => {
const { searchBar, // 筛选栏属性{list: [{filter: () => boolean, key, dataIndex, label, type, initialValue?, options?}]} const {
operation, // 操作栏属性,可选 searchBar, // 筛选栏属性{list: [{filter: () => boolean, key, dataIndex, label, type, initialValue?, options?}]}
dataSource, // 数据源,可选 operation, // 操作栏属性,可选
columns, // 列,必填 dataSource, // 数据源,可选
resizable, // 列宽是否可调整,可选 columns, // 列,必填
components, // 自定义table渲染,同antd/table, 可选 resizable, // 列宽是否可调整,可选
onRequest, // 请求数据接口,非必须,需返回Promise<{data, pagenation}>,可选,与dataSource冲突,优先onRequest components, // 自定义table渲染,同antd/table, 可选
onSearchCommit, // 筛选回调, 可选 onRequest, // 请求数据接口,非必须,需返回Promise<{data, pagenation}>,可选,与dataSource冲突,优先onRequest
onSearchCommit, // 筛选回调, 可选
// onPageChange, // 翻页时回调 // onPageChange, // 翻页时回调
...restProps } = props ...restProps
const resizableClumns = resizable ? useResizableClumns(columns) : columns } = props;
const [dataList, setDataList] = useState(dataSource || []) let resizableClumns = useResizableClumns(columns);
const [pagenation, setPageNation] = useState({}) resizableClumns = resizable ? resizableClumns : columns;
const [loading, setLoading] = useState(false) const [dataList, setDataList] = useState(dataSource || []);
const [seachVal, setSearchVal] = useState({}) const [pagenation, setPageNation] = useState({});
const [loading, setLoading] = useState(false);
const [seachVal, setSearchVal] = useState({});
const fetch = (page, search) => { const fetch = (page, search) => {
search = search || seachVal search = search || seachVal;
if (onRequest) { if (onRequest) {
setLoading(true) setLoading(true);
onRequest(page || pagenation, search).then(res => { onRequest(page || pagenation, search).then(res => {
console.log(res) console.log(res);
setDataList(searchBar ? filterData(res.data, searchBar.list, search) : res.data) setDataList(
setPageNation(res.pagenation) searchBar ? filterData(res.data, searchBar.list, search) : res.data,
setLoading(false) );
}) setPageNation(res.pagenation);
setLoading(false);
});
} else { } else {
setDataList(searchBar ? filterData(dataSource, searchBar.list, search) : dataSource) setDataList(
setPageNation(page) searchBar ? filterData(dataSource, searchBar.list, search) : dataSource,
);
setPageNation(page);
} }
} };
const handleChange = (page) => { const handleChange = page => {
fetch(page) fetch(page);
} };
const handleSearchCommit = (value) => { const handleSearchCommit = value => {
console.log(value) console.log(value);
} };
useEffect(() => { useEffect(() => {
fetch(pagenation) fetch(pagenation);
}, [dataSource]) }, [dataSource]);
return (
<div className={styles.BaseTable}>
{searchBar?.list?.length > 0 && (
<SearchBar {...searchBar} onCommit={handleSearchCommit} />
)}
<Table
dataSource={dataList}
loading={loading}
components={renderComponents(components)}
columns={resizableClumns}
onChange={handleChange}
{...restProps}
/>
</div>
);
};
return <div className={styles.BaseTable}> export default BaseTable;
{searchBar?.list?.length > 0 && <SearchBar {...searchBar} onCommit={handleSearchCommit} />}
<Table dataSource={dataList}
loading={loading}
components={renderComponents(components)}
columns={resizableClumns}
onChange={handleChange}
{...restProps}
/>
</div>
}
export default BaseTable
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment