financial_audit_console/src/pages/Business/Process/components/MemberItem.tsx

import { queryAccountList } from '@/services/api/institution'
import { queryInstitutionRoleList } from '@/services/api/project'
import consts from '@/utils/consts'
import { useRequest } from '@umijs/max'
import { Select, TreeSelect } from 'antd'
import { useState } from 'react'

enum AuditType {
  ACCOUNT = 'account',
  INSTITUTION = 'institution',
  ROLE = 'role'
}

const auditTypeOptions = [
  { label: '用户', value: AuditType.ACCOUNT },
  { label: '单位角色', value: AuditType.INSTITUTION }
  // { label: '审批角色', value: 'role'}
]

type MemberItemProps = {
  value: string[]
  onChange: (value?: string) => void
}

type iState = {
  auditType: AuditType
  memberOptions: string[]
  members: string[]
}

const filterTreeNodes = (mode: AuditType, tree: string[]) =>
  tree.map(item => {
    const newItem = { ...item }
    // 重新拼装id， 根据AuditType加上不同的前缀(后端同步前缀格式)
    switch (mode) {
      case AuditType.ACCOUNT:
        newItem.ID = `a_${newItem.ID}`
        break
      case AuditType.INSTITUTION:
        newItem.ID = `i_${newItem.ID}`
        break
      default:
        newItem.ID = `r_${newItem.ID}`
        break
    }
    if (newItem.children) {
      newItem.disabled = true
      newItem.children = filterTreeNodes(newItem.children)
      return newItem
    }
    return newItem
  })

const MemberItem: React.FC<MemberItemProps> = ({ value, onChange }) => {
  const [state, setState] = useState<iState>({
    auditType: AuditType.ACCOUNT,
    memberOptions: [],
    members: value
  })
  useRequest(
    () => {
      let requestFn: Nullable<() => Promise<void>> = null
      switch (state.auditType) {
        case AuditType.ACCOUNT:
          requestFn = () => queryAccountList({ pageSize: consts.MAX_PAGE_SIZE })
          break
        case AuditType.INSTITUTION:
          requestFn = () => queryInstitutionRoleList({ pageSize: consts.MAX_PAGE_SIZE })
          break
        default:
          break
      }
      return requestFn?.()
    },
    {
      refreshDeps: [state.auditType],
      onSuccess(data: { items: any[] }) {
        setState({ ...state, memberOptions: filterTreeNodes(state.auditType, data.items) })
      }
    }
  )
  const toggleChange = value => {
    if (value) {
      onChange?.(value)
    }
    setState({ ...state, members: value })
  }
  const toggleAuditType = (value: AuditType) => setState({ ...state, auditType: value, members: [] })

  return (
    <div className="ant-form-item">
      <div className="ant-row ant-form-item-row">
        <div className="ant-col ant-col-5 ant-form-item-label">
          <label className="ant-form-item-required">成员</label>
        </div>
        <div className="ant-col ant-form-item-control">
          <div className="ant-form-item-control-input">
            <div className="ant-form-item-control-input-content">
              <Select
                defaultValue={state.auditType}
                options={auditTypeOptions}
                onChange={toggleAuditType}
                style={{ width: '100%' }}
              />
              <TreeSelect
                value={state.members}
                options={state.memberOptions}
                onChange={toggleChange}
                style={{ width: '100%', marginTop: '4px' }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default MemberItem