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

import React, { useState } from 'react'
import consts from '@/consts'
import { Button, Popconfirm, message } from 'antd'
import { useModal } from '@/components/Modal'
import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
import { queryStaff } from '@/services/staff'
import EmployeeDetail from '@/pages/Hr/Employee/components/EmployeeDetail'
import { delDepartment } from '@/services/department'
import { connect, useAccess } from 'umi'
import BasicTable from '@/components/Table'

const Employee = props => {
  const { dispatch } = props
  const [state, setState] = useState({
    params: { id: '0' }
  })
  const initData = () => {
    dispatch({
      type: 'staff/fetchDepartments'
    })
  }
  const { toggleDrawer, setDrawerProps } = useModal()
  // 展示员工详情
  const showDrawer = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <EmployeeDetail dataId={id} />
    })
    toggleDrawer()
  }
  const columns = [
    {
      title: '工号',
      dataIndex: 'jobNumber',
      search: false,
      width: 50
    },
    {
      title: '姓名',
      dataIndex: 'username',
      search: false,
      width: 50,
      render: (username, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]"
        >
          {username}
        </span>
      )
    },
    {
      title: '手机',
      dataIndex: 'telephone',
      search: false,
      width: 50
    },
    {
      title: 'QQ',
      dataIndex: 'qq',
      search: false,
      width: 50
    },
    {
      title: '部门',
      dataIndex: 'departmentName',
      search: false,
      width: 50
    },
    {
      title: '岗位',
      dataIndex: 'position',
      search: false,
      width: 50
    },
    {
      title: '聘用状态',
      dataIndex: 'nature',
      search: false,
      width: 50
    },
    {
      title: '入职时间',
      dataIndex: 'hiredate',
      search: false,
      width: 50
    },
    {
      title: '离职时间',
      dataIndex: 'dimissionDate',
      search: false,
      width: 50
    }
  ]
  const onSelect = id => {
    setState({ ...state, params: { id } })
  }

  const handleDelDepartment = async id => {
    const { code = -1 } = await delDepartment(id)
    if (code === consts.RET_CODE.SUCCESS) {
      message.success('删除成功')
      initData()
    }
  }

  const hasPerm = useAccess()?.validatePermByType('employee_del_department')

  return (
    <div className="h-full w-full flex flex-row">
      <RoleMenu onSelect={onSelect} />
      <div style={{ width: 'calc(100% - 12rem)' }}>
        <div className="ml-8 shadow-hex-3e2c5a">
          {/* <div className="absolute right-33 top-3 z-100">
            {hasPerm && state.params.id && (
              <Popconfirm
                title="确认删除吗？"
                onText="确认"
                cancelText="取消"
                // onConfirm={() => console.log(state.params.id)}
                onConfirm={() => handleDelDepartment(state.params.id)}
              >
                <Button danger size="small">
                  删除部门
                </Button>
              </Popconfirm>
            )}
          </div> */}
          {state.params.id && (
            <BasicTable
              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}
              toolbar={{
                actions: [
                  <>
                    {hasPerm && state.params.id && (
                      <Popconfirm
                        title="确认删除吗？"
                        onText="确认"
                        cancelText="取消"
                        // onConfirm={() => console.log(state.params.id)}
                        onConfirm={() => handleDelDepartment(state.params.id)}
                      >
                        <Button danger size="small">
                          删除部门
                        </Button>
                      </Popconfirm>
                    )}
                  </>
                ]
              }}
            />
          )}
        </div>
      </div>
    </div>
  )
}

// export default Employee
export default connect(({ staff }) => ({
  departments: staff.departments
}))(Employee)