import React, { useState, useRef, useEffect, useMemo } from 'react';
|
import {
|
ProForm,
|
ProFormDigit,
|
ProFormText,
|
ProFormSelect,
|
ProFormDateTimePicker,
|
ProFormTreeSelect
|
} from '@ant-design/pro-components';
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
import { Form, Modal, Col } from 'antd';
|
import moment from 'moment';
|
import Http from '@/utils/http';
|
import { createIcon } from '@/utils/icon-util'
|
import IconSelector from '@/components/IconSelector';
|
|
const Edit = (props) => {
|
const intl = useIntl();
|
const [menuType, setMenuType] = useState(0);
|
const [menuIconName, setMenuIconName] = useState();
|
const [iconSelectorOpen, setIconSelectorOpen] = useState(false);
|
|
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={
|
Object.keys(props.values).length > 0
|
? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' })
|
: intl.formatMessage({ id: 'page.add', defaultMessage: '添加' })
|
}
|
width={640}
|
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}
|
/>
|
<ProForm.Group>
|
<ProFormTreeSelect
|
name="parentId"
|
label="上级菜单"
|
params={props.treeData}
|
request={async () => {
|
return props.treeData;
|
}}
|
colProps={{ md: 12, xl: 12 }}
|
rules={[{ required: true, message: "上级菜单不能为空" }]}
|
fieldProps={{
|
treeDefaultExpandedKeys: [0]
|
}}
|
/>
|
<ProFormText
|
name="name"
|
label="菜单名称"
|
colProps={{ md: 12, xl: 12 }}
|
rules={[{ required: true, message: "菜单名称不能为空！" }]}
|
/>
|
</ProForm.Group>
|
<ProForm.Group>
|
<ProFormText
|
name="route"
|
label="路由地址"
|
colProps={{ md: 12, xl: 12 }}
|
/>
|
<ProFormText
|
name="component"
|
label="页面组件"
|
colProps={{ md: 12, xl: 12 }}
|
/>
|
</ProForm.Group>
|
<ProForm.Group>
|
<ProFormSelect
|
name="type"
|
label="类型"
|
colProps={{ md: 10, xl: 610 }}
|
options={[
|
{ label: '菜单', value: 0 },
|
{ label: '按钮', value: 1 },
|
]}
|
fieldProps={{
|
onChange: (e) => {
|
setMenuType(e);
|
},
|
}}
|
rules={[{ required: true, message: "类型不能为空！" }]}
|
/>
|
<ProFormText
|
name="authority"
|
label="权限标识"
|
hidden={menuType !== 1}
|
colProps={{ md: 12, xl: 12 }}
|
/>
|
<ProFormSelect
|
name="icon"
|
label="菜单图标"
|
hidden={menuType !== 0}
|
colProps={{ md: 12, xl: 12 }}
|
valueEnum={{}}
|
addonBefore={createIcon(menuIconName)}
|
fieldProps={{
|
onClick: () => {
|
setIconSelectorOpen(true);
|
},
|
}}
|
/>
|
</ProForm.Group>
|
<ProForm.Group>
|
<ProFormDigit
|
name="sort"
|
label="排序"
|
colProps={{ md: 12, xl: 12 }}
|
fieldProps={{ precision: 0 }}
|
/>
|
<ProFormSelect
|
name="status"
|
label="状态"
|
colProps={{ md: 12, xl: 12 }}
|
options={[
|
{ label: '正常', value: 1 },
|
{ label: '禁用', value: 0 },
|
]}
|
/>
|
</ProForm.Group>
|
</ProForm>
|
<Modal
|
width={800}
|
open={iconSelectorOpen}
|
onCancel={() => {
|
setIconSelectorOpen(false);
|
}}
|
footer={null}
|
>
|
<IconSelector
|
onSelect={(name) => {
|
form.setFieldsValue({ icon: name });
|
setMenuIconName(name);
|
setIconSelectorOpen(false);
|
}}
|
/>
|
</Modal>
|
</Modal >
|
</>
|
)
|
}
|
|
export default Edit;
|
