mtable.jsx

import React, { useEffect, useRef, useState, memo } from "react";
import { ProTable } from "@ant-design/pro-components";
import Resizecell from "./Resizecell";
import { Tooltip } from "antd";
import { doFetch } from "@/utils/doFetch";
import { useAsyncEffect } from "ahooks";
import bodyParse from "@/utils/bodyParse";

const Mtable = (props) => {
  const {
    actionRef, //表格动作
    formRef, //表单Ref
    rowKey, // key
    columns, //columns
    style, //style
    path, //接口地址
    extraparams, //额外参数
    pageSize, //修改默认pageSize
    pagination, //分页设置
    x, //横向滚动
    activeTabKey, //激活的tabKey 拖拽表格唯一标识使用 其他情况用不到
    refreshDep, //依赖刷新 （已废弃）
    getDefaultSelected, //存在默认选中向上返回选中值
  } = props;

  const actionRefs = actionRef ?? useRef(),
    formRefs = formRef ?? useRef(),
    ifspagination = pagination == "false" || pagination === false,
    [size, setsize] = useState("small"),
    [valueColumns, setvalueColumns] = useState({});
  const [columnes, setcolumnes] = useState(columns ?? []);

  //调用接口
  const request = async (params, sort, filter) => {
    if (!path) return;
    let newparams = {
      ...params,
      ...extraparams, //父组件传参
      pageIndex: params.current,
      pageSize: params.pageSize || pageSize,
    };
    delete newparams.current;
    if (ifspagination) {
      delete newparams.pageIndex;
      delete newparams.pageSize;
    }
    const result = await doFetch({ url: path, params: newparams });
    //分页结果
    let data = result?.data?.page?.records,
      success = true,
      total = result?.data?.page?.total;
    //不带分页获取结果
    if (ifspagination) {
      data = result?.data?.dataList;
      total = result?.data?.dataList?.length;
    }
    //存在默认选中向上返回选中值
    getDefaultSelected && getDefaultSelected(result?.data);

    return {
      data,
      success,
      total,
    };
  };
  //更新 columns
  useEffect(() => {
    setcolumnes((s) => {
      return columns.map((it, index) => {
        let itemwidth = valueColumns[it.key]?.width
          ? valueColumns[it.key].width
          : it.width
          ? it.width
          : 160;
        let options = {};
        if (it.valueType == "select" || it.valueType == "checkbox") {
          if (Array.isArray(it.options)) {
            options = {
              fieldProps: {
                options: [...it.options],
              },
            };
          } else if (it.options) {
            options = {
              request: async (params) => {
                console.log(it.options.database);
                let list = await it?.options?.database(
                  it.options?.params ?? {}
                );
                return list.data.dataList;
              },
            };
          }
        }
        if (it.valueType == "option") {
          options = {
            key: "option",
            dataIndex: "option",
            fixed: "right",
          };
        }
        if (!it.render) {
          options = {
            ...options,
            render: (text, row) => {
              return (
                <Tooltip title={row[it.dataIndex]} placement="topLeft">
                  <span className="table-cell">{row[it.dataIndex] ?? "-"}</span>
                </Tooltip>
              );
            },
          };
        }

        options = {
          ...options,
          width: itemwidth,
        };

        return {
          ...it,
          ...options,
          onHeaderCell: (column) => ({
            width: column.width ?? itemwidth,
            onResize: handleResize(index),
            onResizeStop: handleResizeStop(index),
          }),
        };
      });
    });
  }, [valueColumns]);

  //初始化操作数据
  const initDrage = async () => {
    if (!path) return;
    let res = await doFetch({
      url: "/ngic-base-business/paFieldScene/queryContro",
      params: {
        sceneMark: extraparams
          ? path + bodyParse(extraparams)
          : activeTabKey
          ? path + activeTabKey
          : path,
      },
    });
    if (res.code == "0000") {
      //datalist:接口返回状态
      let datalist = {};
      res?.data?.dataList &&
        res.data.dataList.map((it) => {
          const { fieldKey, fieldWidth, fieldOrder, fieldFixed, fieldShow } =
            it ?? {};
          datalist[fieldKey] = {
            width: fieldWidth,
            order: fieldOrder,
            fixed:
              fieldKey == "option" || fieldKey == "option_dataindex"
                ? "right"
                : fieldFixed,
            show: fieldShow,
          };
        });
      //allcol 默认状态设置 valueColumns 为columns全列设置
      let allcol = {};
      columns.map((it, i) => {
        if (it.valueType == "option") {
          allcol.option = {
            order: columns.length - 1,
            show: true,
            fixed: "right",
            ...datalist.option,
          };
        } else {
          allcol[it.key] = {
            order: i,
            show: true,
            ...datalist[it.key],
          };
        }
      });
      setvalueColumns(allcol);
    }
    actionRefs?.current?.reload();
  };

  //调用重新渲染表格
  useAsyncEffect(async () => {
    await initDrage();
  }, [columns, extraparams, path, activeTabKey, refreshDep]);

  //缩放表格
  const handleResize =
    (index) =>
    (e, { size }) => {
      e.stopImmediatePropagation();
      setcolumnes((s) => {
        const nextColumns = [...s];
        nextColumns[index] = {
          ...nextColumns[index],
          width: size.width,
        };
        return nextColumns;
      });
    };

  //更新表格缩放
  const handleResizeStop =
    (index) =>
    (e, { size }) => {
      e.stopImmediatePropagation();
      let submitdata = { ...valueColumns } ?? {},
        curkey = Object.keys(submitdata)[index];
      submitdata[curkey].width = parseInt(size.width);
      setvalueColumns(submitdata);
      doFetch({
        url: "/ngic-base-business/paFieldScene/save",
        params: {
          sceneMark: extraparams
            ? path + bodyParse(extraparams)
            : activeTabKey
            ? path + activeTabKey
            : path,
          controList: Object.keys(submitdata).map((it, i) => {
            return {
              fieldKey: it,
              fieldWidth:
                i == index ? parseInt(size.width) : submitdata[it].width,
              fieldOrder: submitdata[it].order,
              fieldFixed: submitdata[it].fixed,
              fieldShow: submitdata[it].show,
            };
          }),
        },
      });
    };

  return (
    <ProTable
      {...props}
      size={size}
      onSubmit={(params) => {
        console.log(params, "onSubmit");
      }}
      onSizeChange={(size) => {
        localStorage.setItem("size", size); //设置全局表格规格缓存
        setsize(size);
      }}
      columns={columnes ?? []}
      style={style || {}}
      actionRef={actionRefs}
      formRef={formRefs}
      rowKey={rowKey ?? "id"} //表格每行数据的key
      dateFormatter="string"
      request={request}
      scroll={{
        x: x ?? 1024,
      }}
      components={{
        header: {
          cell: Resizecell,
        },
      }}
      columnsState={{
        value: valueColumns,
        onChange: (val, state) => {
          console.log(val);
          if (Object.keys(val).length === 0) {
            console.log(val, valueColumns);
            setvalueColumns((s) => {
              let submitdata = {
                ...s,
                ...valueColumns,
              };

              let controList = Object.keys(submitdata).map((it, i) => {
                return {
                  fieldKey: it,
                  fieldWidth: submitdata[it].width,
                  fieldOrder: i,
                  fieldFixed: submitdata[it].fixed,
                  fieldShow: true,
                };
              });
              doFetch({
                url: "/ngic-base-business/paFieldScene/save",
                params: {
                  sceneMark: extraparams
                    ? path + bodyParse(extraparams)
                    : activeTabKey
                    ? path + activeTabKey
                    : path,
                  controList: controList,
                },
              });
              return controList;
            });
          } else {
            setvalueColumns((s) => {
              let submitdata = {
                ...s,
                ...val,
              };
              doFetch({
                url: "/ngic-base-business/paFieldScene/save",
                params: {
                  sceneMark: extraparams
                    ? path + bodyParse(extraparams)
                    : activeTabKey
                    ? path + activeTabKey
                    : path,
                  controList: Object.keys(submitdata).map((it) => {
                    return {
                      fieldKey: it,
                      fieldWidth: submitdata[it].width,
                      fieldOrder: submitdata[it].order,
                      fieldFixed: submitdata[it].fixed,
                      fieldShow: submitdata[it].show,
                    };
                  }),
                },
              });
              return submitdata;
            });
          }
        },
      }}
      pagination={
        ifspagination
          ? false
          : {
              showTotal: (total, range) => <span>共{total}条</span>,
              showQuickJumper: true,
              showSizeChanger: true,
              pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
              defaultPageSize: pageSize || 15,
            }
      }
      search={{
        filterType: "light", //轻量模式
      }}
    />
  );
};

export default memo(Mtable);