cldV2react/src/pages/Hr/Employee/index.jsx

import React, { useState } from 'react'
import consts from '@/consts'
import DepartmentMenu from '@/pages/Hr/Employee/components/DepartmentMenu'
import { queryStaff } from '@/services/staff'
import BasicTable from '@/components/Table'
import { useModal } from '@/components/ModalStore'
import { PageContainer } from '@ant-design/pro-layout'

const Employee = props => {
  const { dispatch } = props
  const dispatchModal = useModal()
  const [state, setState] = useState({
    params: { id: '0' }
  })

  const columns = [
    {
      title: '工号',
      dataIndex: 'jobNumber',
      search: false,
      width: 100
    },
    {
      title: '姓名',
      dataIndex: 'username',
      search: false,
      width: 80,
      render: (username, record) => (
        <span
          onClick={() => dispatchModal('D_EMPLOYEE_DETAIL', { dataId: record.id })}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {username}
        </span>
      )
    },
    {
      title: '手机',
      dataIndex: 'telephone',
      search: false,
      width: 120
    },
    {
      title: 'QQ',
      dataIndex: 'qq',
      search: false,
      width: 150
    },
    {
      title: '部门',
      dataIndex: 'departmentName',
      search: false,
      width: 70
    },
    {
      title: '岗位',
      dataIndex: 'position',
      search: false,
      width: 100
    },
    {
      title: '聘用状态',
      dataIndex: 'nature',
      search: false,
      width: 80
    },
    {
      title: '入职时间',
      dataIndex: 'hiredate',
      search: false,
      width: 150
    },
    {
      title: '离职时间',
      dataIndex: 'dimissionDate',
      search: false,
      width: 150
    }
  ]
  const onSelect = id => {
    setState({ ...state, params: { id } })
  }

  return (
    <PageContainer title={false} breadcrumb={false}>
      <div className="h-full w-full flex flex-row">
        <DepartmentMenu onSelect={onSelect} />
        <div style={{ width: 'calc(100% - 12rem)' }}>
          <div className="ml-6 shadow-hex-3e2c5a">
            {state.params.id && (
              <BasicTable
                mainMenuType="hr"
                columnStateType="EMPLOYEE"
                params={{ departmentId: state.params.id }}
                rowKey={record => record.id}
                columns={columns}
                request={async params => {
                  const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
                    await queryStaff({ ...params })
                  return {
                    data: list,
                    success: code === consts.RET_CODE.SUCCESS,
                    total
                  }
                }}
                search={false}
              />
            )}
          </div>
        </div>
      </div>
    </PageContainer>
  )
}

export default Employee