custom/鲁控数字-薪资核算列表页面批量编辑

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> = (props) => {
+const EditableContext = React.createContext<FormInstance<any> | null>(null);
+const Index: FunctionComponent<Props> = (props) => {
   const [columns, setColumns] = useState<ColumnType<any>[]>([]);
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -31,6 +48,8 @@ const index: FunctionComponent<Props> = (props) => {
   const [showTotalCell, setShowTotalCell] = useState<boolean>(false);
   const [sumRowlistUrl, setSumRowlistUrl] = useState<string>("");
   const [payload, setPayload] = useState<string>("");
+  const [form] = Form.useForm();
+  const dataList = useRef<any[]>([]);
 
   useEffect(() => {
     window.parent.postMessage({ type: "init" }, "*");
@@ -52,6 +71,7 @@ const index: FunctionComponent<Props> = (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> = (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: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd}/>,
           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) => (
             <span className={styles.contentSpan}>
               <span title={text} className={styles.contentTitle}>{text}</span>
@@ -80,6 +104,23 @@ const index: FunctionComponent<Props> = (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> = (props) => {
       );
     }
   };
-  return (<Table
+
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell
+    }
+  };
+  return (<Form form={form} component={false}><Table
     rowKey="id" size="small" bordered className={styles.tableWrapper}
     columns={columns} dataSource={dataSource} rowSelection={rowSelection}
     scroll={{ x: 1200, y: `calc(100vh - ${!showTotalCell ? 165 : 200}px)` }}
-    footer={() => <CalcExplainFooter i18n={i18n}/>}
+    footer={() => <CalcExplainFooter i18n={i18n}/>} components={components}
     pagination={{
       ...paginationFun(pageInfo, sizeChange, onChange, i18n),
       size: "default"
@@ -144,7 +192,58 @@ const index: FunctionComponent<Props> = (props) => {
           </Table.Summary.Row>
         </Table.Summary>
     )}
-  />);
+  /></Form>);
 };
 
-export default index;
+export default Index;
+
+const EditableRow: React.FC<EditableRowProps> = (props) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+const EditableCell: React.FC<EditableCellProps> = (props) => {
+  const { title, editable, children, dataIndex, record, handleSave, rowIndex, ...restProps } = props;
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<any>(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 ? (
+      <Form.Item style={{ margin: 0 }} name={dataIndex}>
+        {record[`${dataIndex}_type`] === "number" ?
+          <InputNumber ref={inputRef} precision={restProps?.pattern} onBlur={save} onPressEnter={save}/> :
+          <Input ref={inputRef} onPressEnter={save} onBlur={save}/>}
+      </Form.Item>
+    ) : (
+      <div className={cs({ [styles["editable-cell"]]: record[dataIndex] })} onClick={toggleEdit}> {children} </div>
+    );
+  }
+  return <td {...restProps}>{childNode}</td>;
+};