|
|
|
|
@ -1,14 +1,20 @@
|
|
|
|
|
import {ModalForm, ProForm, ProFormDependency} from '@ant-design/pro-components';
|
|
|
|
|
import {ProFormText} from '@ant-design/pro-components';
|
|
|
|
|
import {ProFormSwitch} from '@ant-design/pro-components';
|
|
|
|
|
import {ProFormSelect, ProFormDigit, ProFormRadio} from '@ant-design/pro-components';
|
|
|
|
|
import { postMenuCreateMenu } from '@/services/system/Menu';
|
|
|
|
|
import {
|
|
|
|
|
ModalForm,
|
|
|
|
|
ProForm,
|
|
|
|
|
ProFormDependency,
|
|
|
|
|
ProFormDigit,
|
|
|
|
|
ProFormRadio,
|
|
|
|
|
ProFormSelect,
|
|
|
|
|
ProFormSwitch,
|
|
|
|
|
ProFormText,
|
|
|
|
|
} from '@ant-design/pro-components';
|
|
|
|
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
|
|
|
import {postMenuCreateMenu} from "@/services/system/Menu";
|
|
|
|
|
// import {systemMenuGetMenuPkIdSelectList} from "@/services/system/system";
|
|
|
|
|
import React, {useEffect, useState} from 'react';
|
|
|
|
|
import {App, Button, Form, Modal, message} from 'antd';
|
|
|
|
|
import IconSelector from "@/components/IconSelector";
|
|
|
|
|
import IconSelector from '@/components/IconSelector';
|
|
|
|
|
import { createIcon } from '@/utils/IconUtil';
|
|
|
|
|
import { Form, message } from 'antd';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
// 表单宽度 804 两列
|
|
|
|
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
|
|
|
|
|
|
|
|
|
@ -27,30 +33,33 @@ export type CreateFormProps = {
|
|
|
|
|
reload: any;
|
|
|
|
|
};
|
|
|
|
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
const [form] = Form.useForm<API.Menu>();
|
|
|
|
|
// const {message} = App.useApp()
|
|
|
|
|
const [menuIconName, setMenuIconName] = useState<any>();
|
|
|
|
|
const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
|
|
|
|
|
const [parentId, setParentId] = useState<number>(0);
|
|
|
|
|
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([{label: '根节点', value: 0}]);
|
|
|
|
|
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
|
|
|
|
|
{ label: '根节点', value: 0 },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (props.values.id !== undefined && props.values.id !== 0) {
|
|
|
|
|
setParentId(props.values.id as number)
|
|
|
|
|
setParentSelectOptions([{label: props.values.title, value: props.values.id}])
|
|
|
|
|
setParentId(props.values.id as number);
|
|
|
|
|
setParentSelectOptions([{ label: props.values.title, value: props.values.id }]);
|
|
|
|
|
} else {
|
|
|
|
|
setParentId(0)
|
|
|
|
|
setParentId(0);
|
|
|
|
|
}
|
|
|
|
|
}, [props.createModalOpen])
|
|
|
|
|
}, [props.createModalOpen]);
|
|
|
|
|
console.log(props);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ModalForm<API.Menu>
|
|
|
|
|
width={proFormModelWidth}
|
|
|
|
|
title={intl.formatMessage({
|
|
|
|
|
id: props.values.id ? 'system.menu.table.list.create_son_menu': 'system.menu.table.list.add',
|
|
|
|
|
id: props.values.id
|
|
|
|
|
? 'system.menu.table.list.create_son_menu'
|
|
|
|
|
: 'system.menu.table.list.add',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}
|
|
|
|
|
open={props.createModalOpen}
|
|
|
|
|
@ -62,57 +71,84 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
}}
|
|
|
|
|
submitTimeout={2000}
|
|
|
|
|
onFinish={async (values) => {
|
|
|
|
|
console.log(values)
|
|
|
|
|
postMenuCreateMenu(values).then(() => {
|
|
|
|
|
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
|
|
|
|
props.reload()
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
message.error(intl.formatMessage({id: 'common.error', defaultMessage: '$$$'}))
|
|
|
|
|
console.log(values);
|
|
|
|
|
postMenuCreateMenu(values)
|
|
|
|
|
.then(() => {
|
|
|
|
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
|
|
|
|
props.reload();
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
message.error(intl.formatMessage({ id: 'common.error', defaultMessage: '$$$' }));
|
|
|
|
|
});
|
|
|
|
|
props.handleModal();
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormSelect width={proFormItemStyleProps.column2Width} name="parentId"
|
|
|
|
|
<ProFormSelect
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="parentId"
|
|
|
|
|
disabled={true}
|
|
|
|
|
initialValue={parentId}
|
|
|
|
|
request={async () => parentSelectOptions}
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.parentId', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_select',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.parentId',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
/>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormRadio.Group width={proFormItemStyleProps.column2Width} name="type"
|
|
|
|
|
<ProFormRadio.Group
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="type"
|
|
|
|
|
required={true}
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$" />}
|
|
|
|
|
initialValue={'M'}
|
|
|
|
|
options={[
|
|
|
|
|
{
|
|
|
|
|
label: intl.formatMessage({id: 'system.menu.table.list.type_M', defaultMessage: '$$$'}),
|
|
|
|
|
label: intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.type_M',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
}),
|
|
|
|
|
value: 'M',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: intl.formatMessage({id: 'system.menu.table.list.type_C', defaultMessage: '$$$'}),
|
|
|
|
|
label: intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.type_C',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
}),
|
|
|
|
|
value: 'C',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: intl.formatMessage({id: 'system.menu.table.list.type_F', defaultMessage: '$$$'}),
|
|
|
|
|
label: intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.type_F',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
}),
|
|
|
|
|
value: 'F',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: intl.formatMessage({id: 'system.menu.table.list.type_E', defaultMessage: '$$$'}),
|
|
|
|
|
label: intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.type_E',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
}),
|
|
|
|
|
value: 'E',
|
|
|
|
|
},
|
|
|
|
|
]}>
|
|
|
|
|
|
|
|
|
|
</ProFormRadio.Group>
|
|
|
|
|
]}
|
|
|
|
|
></ProFormRadio.Group>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="title"
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="title"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.title', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({ id: 'system.menu.table.list.title', defaultMessage: '$$$' })}`}
|
|
|
|
|
required={true}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
@ -126,22 +162,35 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
|
|
|
|
|
<ProFormDigit
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
fieldProps={{ precision: 0 }}
|
|
|
|
|
name="sort"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.sort', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({ id: 'system.menu.table.list.sort', defaultMessage: '$$$' })}`}
|
|
|
|
|
initialValue={1}
|
|
|
|
|
/>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
<ProFormDependency name={['type']}>
|
|
|
|
|
{
|
|
|
|
|
(record) => {
|
|
|
|
|
let isShow = (record.type !== 'F' && record.type !== 'E')
|
|
|
|
|
{(record) => {
|
|
|
|
|
let isShow = record.type !== 'F' && record.type !== 'E';
|
|
|
|
|
if (isShow) {
|
|
|
|
|
return (
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="name"
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="name"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.name', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.name',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
required={true}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
@ -155,9 +204,17 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="path"
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="path"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.path', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.path',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
required={true}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
@ -171,9 +228,19 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="component"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$"/>}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.component', defaultMessage: '$$$'})}`}
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="component"
|
|
|
|
|
label={
|
|
|
|
|
<FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$" />
|
|
|
|
|
}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.component',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
required={true}
|
|
|
|
|
hidden={record.type === 'M'}
|
|
|
|
|
// disabled={record.type === 'M'}
|
|
|
|
|
@ -194,49 +261,84 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
setIconSelectorOpen(true);
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.icon', defaultMessage: '$$$'})}`}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_select',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.icon',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
required: false,
|
|
|
|
|
message: <FormattedMessage id="请输入菜单图标！" defaultMessage="请输入菜单图标！"/>,
|
|
|
|
|
message: (
|
|
|
|
|
<FormattedMessage id="请输入菜单图标！" defaultMessage="请输入菜单图标！" />
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{iconSelectorOpen ? (
|
|
|
|
|
<>
|
|
|
|
|
<IconSelector
|
|
|
|
|
onSelect={(name: string) => {
|
|
|
|
|
form.setFieldsValue({ icon: name });
|
|
|
|
|
setMenuIconName(name);
|
|
|
|
|
setIconSelectorOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
''
|
|
|
|
|
)}
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
</ProFormDependency>
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormDependency name={['type']}>
|
|
|
|
|
{
|
|
|
|
|
(record) => {
|
|
|
|
|
{(record) => {
|
|
|
|
|
return (
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="permission"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$"/>}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.permission', defaultMessage: '$$$'})}`}
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="permission"
|
|
|
|
|
label={
|
|
|
|
|
<FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$" />
|
|
|
|
|
}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'system.menu.table.list.permission',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
disabled={record.type === 'M'}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
}}
|
|
|
|
|
</ProFormDependency>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormText width={proFormItemStyleProps.column2Width} name="remark"
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="remark"
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.remark', defaultMessage: '$$$'})}`}
|
|
|
|
|
required={false}/>
|
|
|
|
|
<ProFormSwitch width={proFormItemStyleProps.column2Width} name="hidden" initialValue={false}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({ id: 'system.menu.table.list.remark', defaultMessage: '$$$' })}`}
|
|
|
|
|
required={false}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormSwitch
|
|
|
|
|
width={proFormItemStyleProps.column2Width}
|
|
|
|
|
name="hidden"
|
|
|
|
|
initialValue={false}
|
|
|
|
|
label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$" />}
|
|
|
|
|
required={false}>
|
|
|
|
|
|
|
|
|
|
</ProFormSwitch>
|
|
|
|
|
required={false}
|
|
|
|
|
></ProFormSwitch>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
<Modal
|
|
|
|
|
{/* <Modal
|
|
|
|
|
width={800}
|
|
|
|
|
open={iconSelectorOpen}
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
@ -251,9 +353,8 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
|
|
|
setIconSelectorOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Modal>
|
|
|
|
|
</Modal> */}
|
|
|
|
|
</ModalForm>
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
export default CreateForm;
|
|
|
|
|
|
