| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { |
| | | ProForm, |
| | | ProFormDigit, |
| | | ProFormSelect, |
| | | } from '@ant-design/pro-components'; |
| | | import { Form, Modal } from 'antd'; |
| | | import Http from '@/utils/http'; |
| | | |
| | | const AssignRole = (props) => { |
| | | const [form] = Form.useForm(); |
| | | const { } = props; |
| | | |
| | | useEffect(() => { |
| | | form.resetFields(); |
| | | form.setFieldsValue({ |
| | | ...props.values |
| | | }) |
| | | }, [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;
|