import React, { useState, useRef, useEffect } from 'react'; 
 | 
import { 
 | 
    ProForm, 
 | 
    ProFormDigit, 
 | 
    ProFormSelect, 
 | 
} from '@ant-design/pro-components'; 
 | 
import { FormattedMessage, useIntl } from '@umijs/max'; 
 | 
import { Form, Modal } from 'antd'; 
 | 
import Http from '@/utils/http'; 
 | 
  
 | 
const AssignRole = (props) => { 
 | 
    const intl = useIntl(); 
 | 
    const [form] = Form.useForm(); 
 | 
    const { } = props; 
 | 
  
 | 
    useEffect(() => { 
 | 
        form.resetFields(); 
 | 
        form.setFieldsValue({ 
 | 
            ...props.values, 
 | 
            roleIds: props.values.userRoleIds 
 | 
        }) 
 | 
    }, [form, props]) 
 | 
  
 | 
    const handleCancel = () => { 
 | 
        props.onCancel(); 
 | 
    }; 
 | 
  
 | 
    const handleOk = () => { 
 | 
        form.submit(); 
 | 
    } 
 | 
  
 | 
    const handleFinish = async (values) => { 
 | 
        props.onSubmit({ ...values }); 
 | 
    } 
 | 
  
 | 
    return ( 
 | 
        <> 
 | 
            <Modal 
 | 
                title={intl.formatMessage({ id: "page.assign.role", defaultMessage: "分配角色" })} 
 | 
                width={600} 
 | 
                forceRender 
 | 
                destroyOnClose 
 | 
                open={props.open} 
 | 
                onCancel={handleCancel} 
 | 
                onOk={handleOk} 
 | 
            > 
 | 
                <ProForm 
 | 
                    form={form} 
 | 
                    submitter={false} 
 | 
                    onFinish={handleFinish} 
 | 
                    layout="horizontal" 
 | 
                    grid={true} 
 | 
                > 
 | 
                    <ProFormDigit 
 | 
                        name="id" 
 | 
                        disabled 
 | 
                        hidden={true} 
 | 
                    /> 
 | 
                    <ProFormSelect 
 | 
                        name="roleIds" 
 | 
                        mode="multiple" 
 | 
                        label={intl.formatMessage({ id: "system.role", defaultMessage: "角色" })} 
 | 
                        colProps={{ md: 24, xl: 24 }} 
 | 
                        rules={[{ required: true, type: 'array', message: '角色不能为空!' }]} 
 | 
                        request={async ({ keyWords }) => { 
 | 
                            const resp = await Http.doPostForm('api/role/query', { condition: keyWords }); 
 | 
                            return resp.data; 
 | 
                        }} 
 | 
                    /> 
 | 
                </ProForm> 
 | 
            </Modal> 
 | 
        </> 
 | 
    ) 
 | 
} 
 | 
  
 | 
export default AssignRole; 
 |