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

@ttk/recat enterprise develop framework

import React, { useEffect } from "react";
import { useData, useActions, useCommit, useAppData } from "@ttk/app-loader";
import { Card, Select, Button, Skeleton } from "antd";
import "./style.less";
export default React.memo(Page);
function Page(props) {
  // 在当前app获取其它app的state
  // const appData = useAppData('app-root')
  // const dateRange = useAppData('app-root/dateRange')

  // 获取当前app的state
  // useData([props, '...', '...'])
  const commit = useCommit();
  const actions = useActions(props);
  const SelectData = useAppData("home/SelectData").toJS();
  const { tempData } = useData([props, "voucherData"]).toJS();
  const { loading } = useData([props, "showState"]).toJS();
  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
    async function fetchData() {
      await actions.getVoucherData();
    }
    fetchData();
  }, []);
  function changeSelect(e) {
    actions.getVoucherData(e);
  }
  function reload() {
    actions.getVoucherData();
  }
  return (
    <Card className="home-card" bordered={false}>
      <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="reload" onClick={reload} className="reload-button" />
          </div>
        </div>
        <div className="button-boxs">
          <p>
            总数：<span>{tempData.num}</span>张
          </p>
          <Button shape="round" className="button-style">
            新增凭证
          </Button>
          <Button shape="round" type="default">
            余额表
          </Button>
        </div>
      </Skeleton>
    </Card>
  );
}