ttk-app-core/src/apps/app-demo/home/home-invoice/app.js

@ttk/recat enterprise develop framework

import React, { useEffect } from "react";
import { useAppData, useData, useActions, useCommit } from "@ttk/app-loader";
import { Card, Button, Carousel, Select, Icon, Skeleton } from "antd";
import "./style.less";
import "../index.less";
import EchartCom from "./components/EchartCom";
import TableCom from "./components/TableCom";
export default React.memo(Page);
function Page(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const SelectData = useAppData("home/SelectData").toJS();
  const { showTable } = useData([props, "showTable"]).toJS();
  const { tempData } = useData([props, "invoiceSelect"]).toJS();
  
  const cardShow = useAppData("home/cardShow").toJS();
  var cardItem = cardShow.find((item, index) => {
    return item.cardName === props.appName;
  });
  var cardWidth = cardItem.cardWidth;
  var display = cardItem.display;
  const { loading } = useData([props, "showState"]).toJS();
  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
  }, []);
  function changeSelect(e) {
    actions.getInvoiceData(e);
    actions.getIncomeData(e);
  }
  function toEchart() {
    commit([props, "showTable"], false);
  }
  function toTable() {
    commit([props, "showTable"], true);
  }
  function reload() {
    actions.getInvoiceData();
    actions.getIncomeData();
  }
  function toBig() {
    var newCardWidth = "100%";
    cardItem.cardWidth = newCardWidth;
    commit("home/cardShow", { type: "big", data: cardItem });
  }
  function toSmall() {
    var resetCardWidth = "49%";
    cardItem.cardWidth = resetCardWidth;
    commit("home/cardShow", { type: "small", data: cardItem });
  }
  return (
    <Card
      className="home-card"
      bordered={false}
      style={{ width: cardWidth, display: display }}
    >
      <Skeleton loading={loading}>
        <div className="home-card-title">
          <div>
            <span>发票</span>
            <Select
              value={tempData.time}
              style={{ width: 95 }}
              onChange={(e) => changeSelect({ time: e })}
            >
              {SelectData.map((item, index) => (
                <Select.Option value={item.time} key={index}>
                  {item.time}
                </Select.Option>
              ))}
            </Select>
          </div>
          <div>
            <Button
              icon="bar-chart"
              className="chart-button"
              onClick={toEchart}
            />
            <Button
              icon="menu-unfold"
              className="menu-button"
              onClick={toTable}
            />
            <Button icon="reload" className="reload-button" onClick={reload} />
            {cardWidth === "49%" ? (
              <Button
                icon="arrows-alt"
                className="arrows-button"
                onClick={toBig}
              />
            ) : (
              <Button
                icon="shrink"
                className="arrows-button"
                onClick={toSmall}
              />
            )}
          </div>
        </div>
        {showTable === false ? (
          <div>
            <EchartCom {...props} />
          </div>
        ) : (
          <div>
            <TableCom {...props} />
          </div>
        )}
      </Skeleton>
    </Card>
  );
}