qc-gameDataStatistics/src/pages/gameDataStatistics/roleOperate/gameServer/assignUser.tsx

import { useAjax } from "@/Hook/useAjax"
import { getRoleUserListApi } from "@/services/gameData"
import { gameServerAssignApi } from "@/services/gameData/roleOperate"
import { Form, Modal, Radio, Select, message } from "antd"
import React, { useEffect, useState } from "react"

interface Props {
    assignType: 'GAME_SERVER_ASSIGN_CUSTOMER' | 'GAME_SERVER_ASSIGN_GS'
    initialValues?: any
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}
/**
 * 批量指派
 * @returns 
 */
const AssignUser: React.FC<Props> = ({ visible, onChange, onClose, assignType, initialValues = {} }) => {

    /***************************/
    const [list, setList] = useState<any[]>([])
    const [form] = Form.useForm()
    const getRoleUserList = useAjax((params) => getRoleUserListApi(params))
    const gameServerAssign = useAjax((params) => gameServerAssignApi(params))
    /***************************/

    useEffect(() => {
        if (assignType) {
            getRoleUserList.run({ authType: assignType === 'GAME_SERVER_ASSIGN_CUSTOMER' ? 'CUSTOMER' : 'GS' }).then(res => {
                if (res) {
                    setList(Object.keys(res)?.map(key => ({ userId: key, nickname: res[key] })))
                }
            })
        } else {
            setList([])
        }
    }, [assignType])

    const handleOk = async () => {
        let validate = await form.validateFields()
        gameServerAssign.run({ ...validate, idList: initialValues.idList, assignType }).then(res => {
            if (res) {
                message.success('指派成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={<strong>指派{assignType === 'GAME_SERVER_ASSIGN_CUSTOMER' ? '客服' : 'GS'}</strong>}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
    >
        <Form
            name="basicAssignUser"
            form={form}
            autoComplete="off"
            initialValues={initialValues}
            layout="vertical"
        >
            <Form.Item
                label={<strong>{assignType === 'GAME_SERVER_ASSIGN_CUSTOMER' ? '客服' : 'GS'}</strong>}
                name="assignUserIdList"
                rules={[{ required: true, message: `请选择${assignType === 'GAME_SERVER_ASSIGN_CUSTOMER' ? '客服' : 'GS'}` }]}
            >
                <Select
                    loading={getRoleUserList.loading}
                    mode="multiple"
                    showSearch
                    style={{ width: '100%' }}
                    allowClear
                    placeholder={`请选择${assignType === 'GAME_SERVER_ASSIGN_CUSTOMER' ? '客服' : 'GS'}`}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {list.map((item: any) => <Select.Option value={item.userId} key={item.userId}>{item.nickname}</Select.Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(AssignUser)