cldV2_console/src/pages/Business/Attendance/index.tsx

import React, { useState, useEffect } from 'react'
import AttendanceMenu from './components/AttendanceMenu'
import { useRequest } from 'umi'
import { Plus, Delete } from '@icon-park/react'
import ConnectModal from './components/ConnectModal'
import { Table, Tag, Popconfirm, Popover, Button } from 'antd'
import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'

export enum modalType {
  addobjectModal = 0,
  linkAttendance = 1
}
const Attendance = () => {
  const [state, setState] = useState({
    id: '',
    modalId: '',
    attendanceList: [],
    visible: false,
    type: modalType.addobjectModal
  })

  const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
    onSuccess: result => {
      setState({ ...state, attendanceList: result })
    }
  })

  const { run: tryunlinkAttendance } = useRequest(
    (params: API.LinkAttendance) => {
      return unlinkAttendance(params)
    },
    {
      manual: true,
      onSuccess: () => {
        tryGetRoleStaffList(state.id)
      }
    }
  )

  const { run: tryDeleteAttendance } = useRequest(
    (params: API.DeleteAttendance) => {
      return deleteAttendance(params)
    },
    {
      manual: true,
      onSuccess: () => {
        tryGetRoleStaffList(state.id)
      }
    }
  )

  useEffect(() => {
    if (state.id) {
      tryGetRoleStaffList(state.id)
    }
    return () => {
      // formRef.current?.resetFields()
    }
  }, [state.id])

  const columns: ColumnsType<API.AttendanceItem> = [
    {
      title: '申请人名称',
      dataIndex: 'applicantStaffName',
      width: '15%'
    },
    {
      title: '申请对象',
      dataIndex: 'staff',
      align: 'left',
      width: '70%',
      render: (_, record: API.AttendanceItem) => (
        <div>
          {record.staff.map(item => (
            // console.log(item.staffName)
            <span key={item.staffId} className="zh-mg-bottom-5 zh-block">
              <Tag
                closable={true}
                onClose={() => tryunlinkAttendance({ staffId: item.staffId, id: record.id })}>
                {item.staffName}
              </Tag>
            </span>
          ))}
          <span
            className="hover:text-hex-886ab5 cursor-pointer text-purple-500"
            onClick={() =>
              setState({
                ...state,
                modalId: record.id,
                visible: true,
                type: modalType.linkAttendance
              })
            }>
            <Plus />
            添加
          </span>
        </div>
      )
    },
    {
      title: '操作',
      dataIndex: 'opreate',
      width: '10%',
      render: (_, record) => (
        // console.log(record.id)
        <Popover>
          <Popconfirm
            title="确认删除吗？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => tryDeleteAttendance({ id: record.id })}>
            <span className="hover:text-hex-e7026e cursor-pointer">
              <Delete fill="#fd3995" />
            </span>
          </Popconfirm>
        </Popover>
      )
    }
  ]

  return (
    <div className="h-full w-full flex flex-row">
      <AttendanceMenu itemTitle="加班申请人" />
      <div className="w-max-3/4">
        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
          <div className="absolute right-7 top-7 z-100">
            <Button
              type="primary"
              onClick={() => setState({ ...state, visible: true, type: modalType.addobjectModal })}>
              添加新申请人
            </Button>
            <ConnectModal
              type={state.type}
              dataId={state.modalId}
              visible={state.visible}
              onCancel={() => setState({ ...state, visible: false })}
              onRefresh={() => {
                tryGetRoleStaffList(state.id)
              }}
            />
          </div>
          <Table
            bordered
            title={() => '加班申请人'}
            columns={columns}
            dataSource={state.attendanceList}
            rowKey={row => row.id}
          />
        </div>
      </div>
    </div>
  )
}

export default Attendance