Commit b768069c authored by Maofei94's avatar Maofei94

perf: perf

parent 4fa7c8e8
...@@ -103,7 +103,7 @@ const SiteConfig = props => { ...@@ -103,7 +103,7 @@ const SiteConfig = props => {
> >
<Input placeholder="请输入应用名称" allowClear /> <Input placeholder="请输入应用名称" allowClear />
</Item> </Item>
<Item {/* <Item
label="系统图标:" label="系统图标:"
name="shortcutIcon" name="shortcutIcon"
rules={[ rules={[
...@@ -114,7 +114,7 @@ const SiteConfig = props => { ...@@ -114,7 +114,7 @@ const SiteConfig = props => {
]} ]}
> >
<Input placeholder="请输入系统图标名称" allowClear /> <Input placeholder="请输入系统图标名称" allowClear />
</Item> </Item> */}
<Item label="系统图标预览:" name="shortcutIcon"> <Item label="系统图标预览:" name="shortcutIcon">
<PicturesWall /> <PicturesWall />
</Item> </Item>
......
...@@ -9,7 +9,7 @@ const AddForm = props => { ...@@ -9,7 +9,7 @@ const AddForm = props => {
// const [type, setType] = useState(2); // const [type, setType] = useState(2);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [otherForm] = Form.useForm(); const [otherForm] = Form.useForm();
console.log(nodeObj, 'nodeObj');
const layout = { const layout = {
layout: 'horizontal', layout: 'horizontal',
labelCol: { span: 4, offset: 1 }, labelCol: { span: 4, offset: 1 },
...@@ -25,29 +25,74 @@ const AddForm = props => { ...@@ -25,29 +25,74 @@ const AddForm = props => {
submitCallback(obj, nodeObj); submitCallback(obj, nodeObj);
} }
}; };
const finish = () => {
submit();
};
return ( return (
<div> <div>
{(addType === 1 || addType === 2) && ( {(addType === 1 || addType === 2) && (
<Form form={form} {...layout} className={styles.formStyle}> <Form
<Item label="分组名称" name="menuName"> form={form}
name="groupform"
{...layout}
className={styles.formStyle}
onFinish={finish}
>
<Item
label="分组名称"
name="menuName"
rules={[
{
required: true,
message: '请输入分组名称',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="分组别名" name="shortName"> <Item label="分组别名" name="shortName">
<Input /> <Input />
</Item> </Item>
{addType === 1 && ( {addType === 1 && (
<Item label="在线图标" name="imageUrl"> <Item
label="在线图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{addType === 1 && ( {addType === 1 && (
<Item label="离线图标" name="offlineImgUrl"> <Item
label="离线图标"
name="offlineImgUrl"
rules={[
{
required: true,
message: '请选择离线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{addType === 2 && ( {addType === 2 && (
<Item label="分组图标" name="imageUrl"> <Item
label="分组图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择分组图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
...@@ -55,7 +100,7 @@ const AddForm = props => { ...@@ -55,7 +100,7 @@ const AddForm = props => {
<Input /> <Input />
</Item> </Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}> <Button type="primary" htmlType="submit">
提交 提交
</Button> </Button>
</Item> </Item>
...@@ -63,37 +108,87 @@ const AddForm = props => { ...@@ -63,37 +108,87 @@ const AddForm = props => {
)} )}
{(addType === 3 || addType === 4) && ( {(addType === 3 || addType === 4) && (
<Form form={otherForm} {...layout} className={styles.formStyle}> <Form
<Item label="菜单名称" name="menuName"> form={otherForm}
name="menuform"
{...layout}
onFinish={finish}
className={styles.formStyle}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入菜单名称',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="菜单别名" name="shortName"> <Item label="菜单别名" name="shortName">
<Input /> <Input />
</Item> </Item>
{addType === 3 && ( {addType === 3 && (
<Item label="在线图标" name="imageUrl"> <Item
label="在线图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{addType === 3 && ( {addType === 3 && (
<Item label="离线图标" name="offlineImgUrl"> <Item
{/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */} label="离线图标"
name="offlineImgUrl"
rules={[
{
required: true,
message: '请选择离线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{addType === 4 && ( {addType === 4 && (
<Item label="菜单图标" name="imageUrl"> <Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择菜单图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
<Item label="功能路径" name="pageUrl"> <Item
label="功能路径"
name="pageUrl"
rules={[
{
required: true,
message: '请输入功能路径',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="功能参数" name="funParam"> <Item label="功能参数" name="funParam">
<Input /> <Input />
</Item> </Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}> <Button type="primary" htmlType="submit">
提交 提交
</Button> </Button>
</Item> </Item>
......
...@@ -50,29 +50,74 @@ const EditForm = props => { ...@@ -50,29 +50,74 @@ const EditForm = props => {
submitCallback(obj); submitCallback(obj);
} }
}; };
const onFinish = () => {
submit();
};
return ( return (
<div> <div>
{(nodeType === 1 || nodeType === 2) && ( {(nodeType === 1 || nodeType === 2) && (
<Form form={form} {...layout} className={styles.formStyle}> <Form
<Item label="分组名称" name="menuName"> form={form}
name="editGroup"
{...layout}
className={styles.formStyle}
onFinish={onFinish}
>
<Item
label="分组名称"
name="menuName"
rules={[
{
required: true,
message: '请输入分组名称',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="分组别名" name="shortName"> <Item label="分组别名" name="shortName">
<Input /> <Input />
</Item> </Item>
{nodeType === 1 && ( {nodeType === 1 && (
<Item label="在线图标" name="imageUrl"> <Item
label="在线图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{nodeType === 1 && ( {nodeType === 1 && (
<Item label="离线图标" name="offlineImgUrl"> <Item
label="离线图标"
name="offlineImgUrl"
rules={[
{
required: true,
message: '请选择离线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{nodeType === 2 && ( {nodeType === 2 && (
<Item label="分组图标" name="imageUrl"> <Item
label="分组图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择分组图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
...@@ -80,7 +125,7 @@ const EditForm = props => { ...@@ -80,7 +125,7 @@ const EditForm = props => {
<Input /> <Input />
</Item> </Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}> <Button type="primary" htmlType="submit">
提交 提交
</Button> </Button>
</Item> </Item>
...@@ -88,37 +133,88 @@ const EditForm = props => { ...@@ -88,37 +133,88 @@ const EditForm = props => {
)} )}
{(nodeType === 3 || nodeType === 4) && ( {(nodeType === 3 || nodeType === 4) && (
<Form form={otherForm} {...layout} className={styles.formStyle}> <Form
<Item label="菜单名称" name="menuName"> form={otherForm}
name="editMenu"
{...layout}
onFinish={onFinish}
className={styles.formStyle}
>
<Item
label="菜单名称"
name="menuName"
rules={[
{
required: true,
message: '请输入菜单名称',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="菜单别名" name="shortName"> <Item label="菜单别名" name="shortName">
<Input /> <Input />
</Item> </Item>
{nodeType === 3 && ( {nodeType === 3 && (
<Item label="在线图标" name="imageUrl"> <Item
label="在线图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择在线图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{nodeType === 3 && ( {nodeType === 3 && (
<Item label="离线图标" name="offlineImgUrl"> <Item
label="离线图标"
name="offlineImgUrl"
rules={[
{
required: true,
message: '请选择离线图标',
},
]}
>
{/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */} {/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
{nodeType === 4 && ( {nodeType === 4 && (
<Item label="菜单图标" name="imageUrl"> <Item
label="菜单图标"
name="imageUrl"
rules={[
{
required: true,
message: '请选择菜单图标',
},
]}
>
<PicturesWall /> <PicturesWall />
</Item> </Item>
)} )}
<Item label="功能路径" name="pageUrl"> <Item
label="功能路径"
name="pageUrl"
rules={[
{
required: true,
message: '请输入功能路径',
},
]}
>
<Input /> <Input />
</Item> </Item>
<Item label="功能参数" name="funParam"> <Item label="功能参数" name="funParam">
<Input /> <Input />
</Item> </Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}> <Button type="primary" htmlType="submit">
提交 提交
</Button> </Button>
</Item> </Item>
......
...@@ -46,6 +46,7 @@ const MiniMenu = props => { ...@@ -46,6 +46,7 @@ const MiniMenu = props => {
const [addFlag, setAddFlag] = useState('root'); // 设置新增标志 const [addFlag, setAddFlag] = useState('root'); // 设置新增标志
const [nodeObj, setNodeObj] = useState({}); const [nodeObj, setNodeObj] = useState({});
const [addType, setAddType] = useState(''); // 添加下级类型 const [addType, setAddType] = useState(''); // 添加下级类型
const [modalTitle, setModalTitle] = useState('');
// 获取菜单树 // 获取菜单树
useEffect(() => { useEffect(() => {
updateTrees(); updateTrees();
...@@ -121,10 +122,10 @@ const MiniMenu = props => { ...@@ -121,10 +122,10 @@ const MiniMenu = props => {
icon: icon:
obj.menuType !== 'MiniAppMenuThree' && obj.menuType !== 'MiniAppMenuThree' &&
obj.menuType !== 'MiniAppMenu' ? ( obj.menuType !== 'MiniAppMenu' ? (
<FolderFilled /> <FolderFilled />
) : ( ) : (
<FileOutlined /> <FileOutlined />
), ),
menuType: obj.menuType, menuType: obj.menuType,
children: hasChild ? obj.children.map(i => mapTree(i)) : [], children: hasChild ? obj.children.map(i => mapTree(i)) : [],
}; };
...@@ -222,12 +223,14 @@ const MiniMenu = props => { ...@@ -222,12 +223,14 @@ const MiniMenu = props => {
// 新增菜单组 // 新增菜单组
const addMenuGroupTip = val => { const addMenuGroupTip = val => {
console.log(val, 'addgroup'); console.log(val, 'addgroup');
setModalTitle(val.text);
setNodeObj(val); setNodeObj(val);
setAddVisible(true); setAddVisible(true);
}; };
const rootAddGroup = () => { const rootAddGroup = () => {
setNodeObj(''); setNodeObj('');
setNodeType(1); setNodeType(1);
setModalTitle('根目录');
setAddType(1); setAddType(1);
setAddVisible(true); setAddVisible(true);
}; };
...@@ -235,15 +238,17 @@ const MiniMenu = props => { ...@@ -235,15 +238,17 @@ const MiniMenu = props => {
const addMenuTip = val => { const addMenuTip = val => {
console.log(val, 'add'); console.log(val, 'add');
setNodeObj(val); setNodeObj(val);
setModalTitle(val.text);
setAddTwoVisible(true); setAddTwoVisible(true);
}; };
const rootAdd = () => { const rootAdd = () => {
setModalTitle('根目录');
setNodeObj(''); setNodeObj('');
setNodeType(3); setNodeType(3);
setAddType(3); setAddType(3);
setAddTwoVisible(true); setAddTwoVisible(true);
}; };
// 提交的回调 // 新增提交的回调
const submitCallback = (prop, item) => { const submitCallback = (prop, item) => {
console.log(prop, item); console.log(prop, item);
let obj = { ...prop }; let obj = { ...prop };
...@@ -365,7 +370,7 @@ const MiniMenu = props => { ...@@ -365,7 +370,7 @@ const MiniMenu = props => {
</div> </div>
<Modal <Modal
visible={addVisible} visible={addVisible}
title="新增菜单组" title={`在${modalTitle}下新增菜单组`}
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 20 }} style={{ top: 20 }}
width="600px" width="600px"
...@@ -387,7 +392,7 @@ const MiniMenu = props => { ...@@ -387,7 +392,7 @@ const MiniMenu = props => {
</Modal> </Modal>
<Modal <Modal
visible={addTwoVisible} visible={addTwoVisible}
title="新增功能菜单" title={`在${modalTitle}下新增功能菜单`}
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 20 }} style={{ top: 20 }}
width="600px" width="600px"
...@@ -417,6 +422,13 @@ const MiniMenu = props => { ...@@ -417,6 +422,13 @@ const MiniMenu = props => {
/> />
)} )}
</div> </div>
<div
className={classnames({
[styles.rightBox]: true,
})}
>
关联角色
</div>
</div> </div>
</Spin> </Spin>
); );
......
.box{ .box{
min-height: calc( 100vh - 172px); min-height: calc( 100vh - 172px);
display: flex; display: flex;
} }
.left{ .left{
...@@ -69,4 +68,11 @@ ...@@ -69,4 +68,11 @@
.fs{ .fs{
font-size: 18px; font-size: 18px;
margin-left: 10px; margin-left: 10px;
}
.rightBox{
min-width: 600px;
// width: 600px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment