financial_audit_console/src/pages/Business/Process/index.tsx

import useModal from '@/components/Modal'
import { startTransition, useMemo, useState } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { BusinessType, ExecutorSetType } from '@/enums/gc'
import useScripts from './hooks/useScripts'
import { Button } from 'antd'
import ProTable, { ProColumnType } from '@ant-design/pro-table'
import LeftMenu from '../RuleCode/components/LeftMenu'
import { connect } from '@umijs/max'
import { BusinessModelState } from '../model'

export const menuOptions = [{ label: '预算业务审批', value: BusinessType.BUDGET }]

type ProcessProps = {
  processMap: {
    [key: string]: API.ExecutorItem[]
  }
}

const Process: React.FC<ProcessProps> = ({ processMap }) => {
  const [state, setState] = useState({
    activeKey: ''
  })

  const [modal, ModalDOM] = useModal()
  const { total, query, loading, addOrEdit, del } = useScripts(modal, state.activeKey)

  const list = useMemo(() => {
    if (!state.activeKey) return []
    return processMap?.[state.activeKey] || []
  }, [state.activeKey, processMap])

  const columns: ProColumnType<API.ExecutorItem>[] = [
    {
      dataIndex: 'name',
      title: '执行者名称',
      width: 120,
      align: 'center',
      ellipsis: true
    },
    {
      dataIndex: 'setType',
      title: '配置方式',
      align: 'center',
      width: 100,
      valueEnum: {
        [ExecutorSetType.PERSET]: { text: '预置成员' },
        [ExecutorSetType.DYNAMIC]: { text: '步骤配置' }
      }
    },
    {
      dataIndex: 'members',
      title: '成员',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      ellipsis: true,
      renderText: (_, record) => (
        <div className="children:mx-1">
          {record?.members?.value?.map(item => (
            <span key={item?.ID}>{item?.name}</span>
          ))}
        </div>
      )
    },
    {
      dataIndex: 'opreate',
      title: '操作',
      align: 'center',
      width: 120,
      renderText: (_, record) => (
        <div className="divide-x divide-bg-gray-400 flex flex-row justify-center">
          <span
            className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
            onClick={() => addOrEdit('edit', record)}>
            编辑
          </span>
          <span
            className={'pl-2 text-red-500 cursor-pointer hover:text-red-600'}
            onClick={() => del(record.ID)}>
            删除
          </span>
        </div>
      )
    }
  ]

  const handleMenuOnChange = (key: string) => {
    const [gatherID, businessType] = key.split('_')
    setState({ ...state, activeKey: key })
    startTransition(() => {
      !processMap?.[state.activeKey] && query({ gatherID, businessType, pageSize: 214000 })
    })
  }
  return (
    <PageContainer title={false}>
      <div className="h-full w-full flex flex-row">
        <LeftMenu title="业务列表" onChange={key => handleMenuOnChange(key)} />
        <div className="w-6/7 ml-8 bg-white rounded-20px">
          <ProTable
            toolbar={{
              actions: [
                <Button key="add_executor" type="primary" onClick={() => addOrEdit('add')}>
                  新建执行者
                </Button>
              ]
            }}
            rowKey="ID"
            search={false}
            columns={columns}
            dataSource={list}
            loading={loading}
            pagination={{ total }}
          />
        </div>
      </div>
      {ModalDOM}
    </PageContainer>
  )
}

export default connect(({ business }: { business: BusinessModelState }) => ({
  processMap: business.processMap
}))(Process)