index.jsx

import { Row, Col, Card, Grid, Button } from "antd";
import Mcard from "./mcard";
import Mtable from "./mtable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { ExportOutlined } from "@ant-design/icons";

const { useBreakpoint } = Grid;

function isString(obj) {
  return obj.constructor === String ? true : false;
}

// const tableprops = {
//   ...props,
//   addconfig: {
//       premkey: "sysDepartment_save",
//       disabled:true,
//       btnprops:{},
//       onClick: () => {
//           alert(0)
//       },
//   },
//   exportconfig:{
//       premkey: "sysDepartment_save",
//       btnprops:{
//       },
//       onClick: () => {
//           alert(1)
//       },
//   },
//   pageextra: activeTabKey == "1" ? "add" : "none",
//   tabList: [
//       {
//           tab: "未完成",
//           key: "1"
//       }, {
//           tab: "已完成",
//           key: "2"
//       }
//   ],
//   activeTabKey,
//   onTabChange
// }

export default (props) => {
  const screens = useBreakpoint();

  const actionbtn = {
    add: (
      <Button
        key={"add"}
        disabled={
          props?.addconfig?.disabled ||
          !getPrem(props?.addconfig?.premkey ?? "", "ifs")
        }
        type="primary"
        {...props?.addconfig?.btnprops}
        onClick={() => {
          props?.addconfig?.onClick?.();
        }}
      >
        新增
      </Button>
    ),
    export: (
      <Button
        key={"add"}
        disabled={
          props?.exportconfig?.disabled ||
          !getPrem(props?.exportconfig?.premkey ?? "", "ifs")
        }
        type="danger"
        icon={<ExportOutlined />}
        {...props?.exportconfig?.btnprops}
        onClick={() => {
          props?.exportconfig?.onClick?.();
        }}
      >
        导出
      </Button>
    ),
  };

  //右上角 pageextra 类型 1.reactDom 2.string 以逗号隔开 为none时不显示
  const renderextra = () => {
    if (props.pageextra && !isString(props.pageextra)) {
      return props.pageextra;
    } else if (props.pageextra === "none") {
      return <div style={{ height: 32, width: 64 }}></div>;
    } else if (props.pageextra) {
      let strarr = props.pageextra ? props.pageextra.split(",") : ["add"];
      return strarr.map((it, i) => {
        return (
          <div style={{ marginRight: i == strarr.length - 1 ? 0 : 6 }}>
            {actionbtn[it]}
          </div>
        );
      });
    }
  };
  // screens.xs ? (
  //   <div
  //     style={{ display: "flex", flexDirection: "column", height: "100%" }}
  //   >
  //     {props.children && (
  //       <div style={{ marginBottom: 12 }}>{props.children}</div>
  //     )}
  //     <div>
  //       <Mcard {...props} pageextra={renderextra()}/>
  //     </div>
  //   </div>
  // ) :

  return (
    <div className="diycard">
      {props.withCard === false ? (
        <div style={{ display: "flex", width: "100%" }}>
          {(props.childposition == "left" || !props.childposition) &&
            props.children}
          <div style={{ flex: 1, width: "100%" }}>
            {props.childposition == "top" && props.children}
            <Mtable {...props} />
          </div>
          {(props.childposition == "right" || !props.childposition) &&
            props.children}
        </div>
      ) : (
        <Card
          bordered={props.bordered === false ? false : true}
          style={{ height: "100%" }}
          title={props?.route?.name ? props.route.name : props.pagetitle}
          extra={<div className="center">{renderextra()}</div>}
          activeTabKey={props.activeTabKey}
          tabList={props.tabList}
          onTabChange={props.onTabChange}
        >
          <div style={{ display: "flex", width: "100%" }}>
            {(props.childposition == "left" || !props.childposition) &&
              props.children}
            <div style={{ flex: 1, overflow:"hidden" }}>
              {props.childposition == "top" && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == "right" || !props.childposition) &&
              props.children}
          </div>
        </Card>
      )}
    </div>
  );
};