sunmao-sdk/src/component/CardRender/index.jsx

榫卯-开箱即用赋能-sdk

import React from "react";
import { parseFunctionValue } from "../../utils/commonUtils";

import { Card, Menu, Popconfirm, Dropdown, Tooltip } from "antd";
import { MoreOutlined } from "@ant-design/icons";
import { CP } from "../..";
import FR from "../FR";
import "./index.css";
/**
 * 卡片模块
 */
const displayName = "CardRender";
const CardRender = ({
  loading,
  frConfig,
  reqData,
  schema: { title, formConfig = {}, actionConfig = {}, customCardBody }
}) => {
  const record = frConfig?.formData || {};

  const getDisEval = content => {
    let disEval = false;
    try {
      disEval = record[content] || eval(content);
    } catch {}
    return disEval;
  };

  // 按键触发
  const handleAction = (item, disabled = false) => {
    if (disabled) return;
    if (item && item.action && typeof item.action === "function") {
      item.action(record, item);
    } else if (!item.widget) {
      CP.error(item, "传入的点击事件不是一个函数", displayName);
    }
  };

  const renderAction = (item, disabled, content, again) => {
    const tips = item?.content?.tips || "确定进行该操作！";
    return again ? (
      <Popconfirm
        title={tips}
        disabled={disabled}
        onConfirm={() => handleAction(item, disabled)}
      >
        {disabled ? (
          <span style={{ color: "rgba(0,0,0,.25)" }}>{content}</span>
        ) : (
          <a>{content}</a>
        )}
      </Popconfirm>
    ) : disabled ? (
      <span style={{ color: "rgba(0,0,0,.25)" }}>{content}</span>
    ) : (
      <a>{content}</a>
    );
  };

  // 缩起按键
  const renderActionList = (list, DropItem) => (
    <div
      className="tr-action-list"
      style={{ display: "flex", justifyContent: "center" }}
    >
      {list.map((item, idx) => {
        const content = item.text;
        const disEval = getDisEval(item.disEval);
        const disabled =
          parseFunctionValue(item && item.disabled, record) || disEval;
        const again = "35" === item.funcType;
        const endBtn = (
          <div
            key={idx.toString()}
            style={{ marginLeft: 12 }}
            onClick={() => !again && handleAction(item, disabled)}
          >
            {renderAction(item, disabled, content, again)}
          </div>
        );
        return disabled ? (
          <Tooltip title={item.disEvalTips || "禁用，不可点击"}>
            {endBtn}
          </Tooltip>
        ) : (
          endBtn
        );
      })}
      {DropItem}
    </div>
  );

  // 超过2个就展示下拉
  const renderActions = () => {
    const { showCount, actionList } = actionConfig;
    if (!actionList || !actionList.length) return false;
    // 过滤掉隐藏按键
    const actList = actionList.filter(item => !getDisEval(item.isHidden));
    const limit = showCount || 2;
    const len = actList.length;
    if (len <= limit) {
      return renderActionList(actList);
    } else {
      const firstFew = actList.slice(0, limit - 1);
      const dropList = actList.slice(limit - 1);
      const menu = (
        <Menu>
          {dropList.map((item, idx) => {
            const content = item.text;
            const disEval = getDisEval(item.disEval);
            const disabled =
              parseFunctionValue(item && item.disabled, record) || disEval;
            const again = "35" === item.funcType;
            const endBtn = (
              <Menu.Item key={idx.toString()} disabled={disabled}>
                <div onClick={() => !again && handleAction(item, disabled)}>
                  {renderAction(item, disabled, content, again)}
                </div>
              </Menu.Item>
            );
            return disabled ? (
              <Tooltip title={item.disEvalTips || "禁用，不可点击"}>
                {endBtn}
              </Tooltip>
            ) : (
              endBtn
            );
          })}
        </Menu>
      );
      const DropItem = (
        <Dropdown overlay={menu}>
          <a onClick={e => e.preventDefault()}>
            <MoreOutlined rotate={90} />
          </a>
        </Dropdown>
      );
      return renderActionList(firstFew, DropItem);
    }
  };

  return (
    <Card
      className="sunmao-card-fr"
      title={title || null}
      extra={renderActions()}
      loading={loading}
    >
      {customCardBody ? (
        customCardBody({ ...formConfig, ...frConfig, reqData })
      ) : (
        <FR {...formConfig} {...frConfig} />
      )}
    </Card>
  );
};

export default CardRender;