index.jsx

import React, { useEffect, useMemo, useRef, useState } from "react";
import { EditableProTable } from "@ant-design/pro-table";
import { useUpdate } from "ahooks";

const EditTable = ({
  columns,
  value,
  onChange,
  rowKey,
  recordCreatorProps,
  maxLength,
  linkconfig,
  style,
}) => {
  const editorFormRef = useRef();
  //console.log(columns);
  const [addon, setaddon] = useState(0);

  const newcolumns = useMemo(() => {
    return columns?.map((item) => {
      return item?.params
        ? {
            ...item,
            params: {
              ...item.params,
              addon,
            },
          }
        : {
            ...item,
          };
    });
  }, [addon]);

  return (
    <EditableProTable
      style={{ ...(style ?? {}) }}
      columns={newcolumns}
      rowKey={rowKey}
      value={value || []}
      onChange={onChange}
      recordCreatorProps={
        recordCreatorProps == "false"
          ? false
          : {
              newRecordType: "dataSource",
              record: () => ({
                [rowKey]: Date.now(),
              }),
            }
      }
      editableFormRef={editorFormRef}
      editable={{
        type: "multiple",
        editableKeys: value ? value.map((item) => item[rowKey]) : [],
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: async (record, recordList) => {
          setaddon(s=>Math.random()*1000000);
          let { urlchangeval } = linkconfig ?? {};
          let newvalue = [...recordList];
          if (urlchangeval && record) {
            //根据url 改变 数据值
            let { params, database, effectresult } = urlchangeval ?? {},
              curvaluerow =
                value && value.length > 0
                  ? value.filter((it) => it[rowKey] == record[rowKey])[0]
                  : {};
            //获取除本行之外已修改的value值
            newvalue = newvalue.map((it, i) => {
              if (!record) return it;
              if (it[rowKey] == record[rowKey]) {
                let freshvals = {};
                Object.keys(effectresult).map((its) => {
                  // freshvals[its] = value[i][its];
                  freshvals[its] = it[its];
                });
                it = {
                  ...record,
                  ...freshvals,
                };
              } else {
                it =
                  value && value.length > 0
                    ? value.filter((its) => its[rowKey] == it[rowKey])[0]
                    : {};
              }
              return it;
            });

            //参数获取
            let parames = {};
            let ifs = true;
            Object.keys(params).map((it) => {
              if (params[it] == "linked") {
                parames[it] = record[it];
                if (record[it] != curvaluerow[it]) {
                  ifs = false;
                }
              } else {
                parames[it] = params[it];
              }
            });
            if (ifs) {
              //值未变化
            } else {
              let res = await database(parames);
              newvalue = newvalue.map((it, i) => {
                if (it[rowKey] == record[rowKey]) {
                  Object.keys(effectresult).map((items) => {
                    let result = res?.data?.data ?? {};
                    it[items] = result[effectresult[items]];
                  });
                  editorFormRef.current?.setRowData?.(i, it);
                } else {
                }
                return it;
              });
            }
          }
          onChange(newvalue);
        },
      }}
      maxLength={maxLength ?? 1000}
    />
  );
};

export default EditTable;