|  |  | 
 |  |  | 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="Assign Role" | 
 |  |  |                 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="角色" | 
 |  |  |                         colProps={{ md: 24, xl: 24 }} | 
 |  |  |                         placeholder="请选择" | 
 |  |  |                         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; | 
 |  |  | 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;
 |