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;
|
