diff --git a/src/pages/calcTable/index.tsx b/src/pages/calcTable/index.tsx index 8af2648..db7ebfe 100644 --- a/src/pages/calcTable/index.tsx +++ b/src/pages/calcTable/index.tsx @@ -4,25 +4,42 @@ * Description: * Date: 2023/9/14 */ -import React, { FunctionComponent, useEffect, useState } from "react"; -import { Button, Table, Typography } from "antd"; +import React, { FunctionComponent, useContext, useEffect, useRef, useState } from "react"; +import { Button, Form, Input, InputNumber, Table, Typography } from "antd"; +import type { FormInstance } from "antd/es/form"; import { LockOutlined } from "@ant-design/icons"; import CustomTableTitle from "@/pages/calcTable/customTableTitle"; import CalcExplainFooter from "@/pages/calcTable/calcExplainFooter"; import CaclFixedTotal from "./calcFixedTotal"; import type { ColumnType } from "antd/lib/table"; import type { PaginationData } from "rc-pagination"; -import { exceptStr, paginationFun } from "@/utils/common"; +import { exceptStr, paginationFun, toDecimal_n } from "@/utils/common"; import { IPage } from "@/common/types"; import styles from "@/pages/atdTable/components/index.less"; +import cs from "classnames"; interface OwnProps { } +interface EditableRowProps { +} + +interface EditableCellProps { + title?: React.ReactNode; + editable?: boolean; + children?: React.ReactNode; + dataIndex?: any; + record?: any; + pattern?: number; + rowIndex?: number; + handleSave?: (record: any) => void; +} + type Props = OwnProps; const { Text } = Typography; -const index: FunctionComponent = (props) => { +const EditableContext = React.createContext | null>(null); +const Index: FunctionComponent = (props) => { const [columns, setColumns] = useState[]>([]); const [dataSource, setDataSource] = useState([]); const [selectedRowKeys, setSelectedRowKeys] = useState([]); @@ -31,6 +48,8 @@ const index: FunctionComponent = (props) => { const [showTotalCell, setShowTotalCell] = useState(false); const [sumRowlistUrl, setSumRowlistUrl] = useState(""); const [payload, setPayload] = useState(""); + const [form] = Form.useForm(); + const dataList = useRef([]); useEffect(() => { window.parent.postMessage({ type: "init" }, "*"); @@ -52,6 +71,7 @@ const index: FunctionComponent = (props) => { setPayload(payload); setPageInfo(pageInfo); setDataSource(dataSource); + dataList.current = dataSource; setSelectedRowKeys(selectedRowKeys); setColumns([...convertColumns(_.map(columns, o => ({ ...o, i18n: i18nRes }))), { title: i18nRes["操作"], dataIndex: "operate", fixed: "right", width: 120, @@ -62,12 +82,16 @@ const index: FunctionComponent = (props) => { const convertColumns: any = (cols: any[]) => { return _.map(cols, item => { if (_.isNaN(parseInt(item.dataIndex))) { - return { ...item }; + return { ...item, editable: false }; } else { return { ...item, title: , children: convertColumns(_.map(item.children, o => ({ ...o, i18n: item.i18n }))), - className: styles["td_odd"], i18n: item.i18n, + className: styles["td_odd"], i18n: item.i18n, editable: true, + onCell: (record: any, rowIndex: number) => ({ + record, rowIndex, dataIndex: item.dataIndex, title: item.title, editable: true, pattern: item.pattern, + handleSave + }), render: (text: string) => ( {text} @@ -80,6 +104,23 @@ const index: FunctionComponent = (props) => { } }); }; + const handleSave = (row: any) => { + setDataSource(prevState => { + const newData = [...prevState]; + const index = newData.findIndex(item => row.id === item.id); + const item = newData[index]; + newData.splice(index, 1, { ...item, ...row }); + return newData; + }); + }; + const handleChange = (rowIndex: any, dataIndex: any, v: any, dataSource: any[]) => { + setDataSource(() => { + return _.map([...dataSource], (item, index) => { + if (index === rowIndex) item[dataIndex] = v; + return item; + }); + }); + }; const handleFormulaTd = (dataIndex: string) => { window.parent.postMessage( { @@ -126,11 +167,18 @@ const index: FunctionComponent = (props) => { ); } }; - return (
} + footer={() => } components={components} pagination={{ ...paginationFun(pageInfo, sizeChange, onChange, i18n), size: "default" @@ -144,7 +192,58 @@ const index: FunctionComponent = (props) => { )} - />); + />); }; -export default index; +export default Index; + +const EditableRow: React.FC = (props) => { + const [form] = Form.useForm(); + return ( +
+ +
+ + + ); +}; +const EditableCell: React.FC = (props) => { + const { title, editable, children, dataIndex, record, handleSave, rowIndex, ...restProps } = props; + const [editing, setEditing] = useState(false); + const inputRef = useRef(null); + const form = useContext(EditableContext)!; + useEffect(() => { + if (editing) { + inputRef.current!.focus(); + } + }, [editing]); + const toggleEdit = () => { + setEditing(!editing); + form.setFieldsValue({ [dataIndex]: record[dataIndex] }); + }; + const save = async () => { + try { + let values = await form.validateFields(); + if (record[`${_.keys(values)[0]}_type`] === "number") { + values = { ...values, [_.keys(values)[0]]: toDecimal_n(_.get(values, _.keys(values)[0]), restProps?.pattern) }; + } + toggleEdit(); + handleSave?.({ ...record, ...values }); + } catch (errInfo) { + console.log("Save failed:", errInfo); + } + }; + let childNode = children; + if (editable) { + childNode = editing ? ( + + {record[`${dataIndex}_type`] === "number" ? + : + } + + ) : ( +
{children}
+ ); + } + return
; +};
{childNode}