cldV2react/src/pages/Statistic/Software/Usage/index.jsx

import { useState, useEffect, useMemo } from 'react'
import BasicTable from '@/components/Table'
import { Select } from 'antd'
import { queryDepartmentAndStaffWithOptionId } from '@/services/statistic'

const Usage = () => {
  const [state, setState] = useState({
    op: 'staff',
    opIds: []
  })

  const queryStaffAndDepartment = async params => {
    queryDepartmentAndStaffWithOptionId(params)
  }

  useEffect(() => {
    queryStaffAndDepartment()
  }, [])
  useEffect(() => {
    // 重新发起请求
  }, [state.op])
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      fixed: 'left'
    },
    {
      title: '未使用',
      children: [
        {
          title: '生成',
          key: 'receive',
          dataindex: 'receive'
        },
        {
          title: '接受',
          key: 'receive',
          dataindex: 'receive'
        }
      ]
    },
    {
      title: '已使用',
      children: [
        {
          title: '借出',
          key: 'receive',
          dataindex: 'receive'
        },
        {
          title: '销售',
          key: 'receive',
          dataindex: 'receive'
        },
        {
          title: '赠送',
          key: 'receive',
          dataindex: 'receive'
        }
      ]
    }
  ]
  const options = useMemo(() => {}, [state.op])
  const handleOnOpIdsChange = () => {}

  return (
    <div>
      <div>
        <Select
          options={[
            { label: '部门', value: 'department' },
            { label: '员工', value: 'staff' }
          ]}
          onChange={val => setState({ ...state, op: val })}
        />
        <Select className="ml-2" options={options} mode="multiple" onChange={handleOnOpIdsChange} />
      </div>
      <BasicTable columns={columns} search={false} />
    </div>
  )
}

export default Usage