ttk-app-core/src/apps/app-demo/table/antd-table-backup/components/PageHeader.jsx

@ttk/recat enterprise develop framework

import React, { useState } from 'react'
import { useActions } from '@ttk/app-loader'
import { Radio, PageHeader, Descriptions } from 'antd'
import { Month } from './Month'

export const SearchHeader = React.memo(Header)
function Header(props) {

  return (
    <PageHeader>
      <Content {...props} />
    </PageHeader>
  )
}

const Content = (props) => {
  const { column } = props
  const actions = useActions(props)
  const [receiveOrPay] = useState([{ value: 'all', label: '全部' }, { value: 'receive', label: '收入' }, { value: 'pay', label: '支出' }])
  const [voucherStatus] = useState([{ value: 0, label: '全部' }, { value: 1, label: '未补充' }, { value: 2, label: '已补充' }])

  const onReceiveOrPay = async (e) => {
    actions.showStateAction(true)
    actions.updateSearchParam({ receiveOrPay: e.target.value })
    await actions.fetchTableBody()
    actions.showStateAction(false)
  }
  const onVoucherStatus = async (e) => {
    actions.showStateAction(true)
    actions.updateSearchParam({ voucherStatus: e.target.value })
    await actions.fetchTableBody()
    actions.showStateAction(false)
  }
  // const onSelectChange = () => {
  // }
  return (
    <Descriptions size="small" column={column}>
      <Descriptions.Item >
        <Month {...props} />
      </Descriptions.Item>
      {/* <Descriptions.Item>
        <Select
          onChange={onSelectChange}
          defaultValue='cash'
        >
          <Select.Option title="现金" value='cash'>现金</Select.Option>
          <Select.Option title="银行存款" value="bank">银行存款</Select.Option>
        </Select>
      </Descriptions.Item> */}
      <Descriptions.Item label="支付类型">
        <Radio.Group options={receiveOrPay} onChange={onReceiveOrPay} />
      </Descriptions.Item>
      <Descriptions.Item label="收据状态">
        <Radio.Group options={voucherStatus} onChange={onVoucherStatus} />
      </Descriptions.Item>
    </Descriptions>
  )
}