Skip to content

C
CivManage
Commit 17ef2560 authored by Maofei94's avatar Maofei94
Browse files
Options

feat: 小程序配置

parent 95eacae1
Hide whitespace changes
Inline Side-by-side
Showing with 1024 additions and 900 deletions
src/pages/database/InitDataBase.jsx
View file @ 17ef2560
...@@ -501,7 +501,7 @@ const InitDataBase = props => { ...@@ -501,7 +501,7 @@ const InitDataBase = props => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item wrapperCol={{ offset: 3 }}>
<div className={styles.tCenter}> <div className={styles.tCenter}>
<Space size="large" className={styles.btnBox}> <Space size="large" className={styles.btnBox}>
<Space> <Space>
......
src/pages/database/InitDataBase.less
View file @ 17ef2560
...@@ -13,5 +13,5 @@ ...@@ -13,5 +13,5 @@
} }
.btnBox { .btnBox {
display: flex !important; display: flex !important;
justify-content: space-around; justify-content: space-between;
} }
\ No newline at end of file
src/pages/mobileConfig/SiteConfig.jsx
View file @ 17ef2560
...@@ -22,7 +22,7 @@ const SiteConfig = props => { ...@@ -22,7 +22,7 @@ const SiteConfig = props => {
const layout = { const layout = {
layout: 'horizontal', layout: 'horizontal',
labelCol: { span: 7 }, labelCol: { span: 7 },
wrapperCol: { span: 6 }, wrapperCol: { span: 8 },
}; };
useEffect(() => { useEffect(() => {
console.log(miniTitle, 'miniTitle'); console.log(miniTitle, 'miniTitle');
...@@ -37,8 +37,9 @@ const SiteConfig = props => { ...@@ -37,8 +37,9 @@ const SiteConfig = props => {
}) })
.then(res => { .then(res => {
setLoading(false); setLoading(false);
let obj = { ...form.getFieldsValue() }; console.log(res.shortcutIcon);
let arr = Object.keys({ ...form.getFieldsValue() }); let obj = {};
let arr = Object.keys(form.getFieldsValue());
arr.map(k => { arr.map(k => {
obj[k] = res[k]; obj[k] = res[k];
}); });
...@@ -88,7 +89,7 @@ const SiteConfig = props => { ...@@ -88,7 +89,7 @@ const SiteConfig = props => {
}; };
return ( return (
<Spin spinning={loading} tip="loading..."> <Spin spinning={loading} tip="loading...">
<div style={{ minHeight: 'calc(100vh - 172px)', marginTop: '20px' }}> <div style={{ minHeight: 'calc(100vh - 192px)', marginTop: '20px' }}>
<Form form={form} {...layout}> <Form form={form} {...layout}>
<Item <Item
label="应用名称：" label="应用名称："
...@@ -102,7 +103,6 @@ const SiteConfig = props => { ...@@ -102,7 +103,6 @@ const SiteConfig = props => {
> >
<Input placeholder="请输入应用名称" allowClear /> <Input placeholder="请输入应用名称" allowClear />
</Item> </Item>
<Item <Item
label="系统图标：" label="系统图标："
name="shortcutIcon" name="shortcutIcon"
...@@ -115,10 +115,10 @@ const SiteConfig = props => { ...@@ -115,10 +115,10 @@ const SiteConfig = props => {
> >
<Input placeholder="请输入系统图标名称" allowClear /> <Input placeholder="请输入系统图标名称" allowClear />
</Item> </Item>
<Item label="系统图标预览：" name="shortcutIcon">
<Item label="系统图标预览：">
<PicturesWall /> <PicturesWall />
</Item> </Item>
<Item <Item
label="登陆页面：" label="登陆页面："
name="loginTemplate" name="loginTemplate"
......
src/pages/mobileConfig/index.js
View file @ 17ef2560
...@@ -29,11 +29,11 @@ const MobileConfigPage = props => { ...@@ -29,11 +29,11 @@ const MobileConfigPage = props => {
}); });
}, [flag]); }, [flag]);
useEffect(() => { useEffect(() => {
getMiniAppModuleTree({ // getMiniAppModuleTree({
userMode: 'super', // userMode: 'super',
}).then(res => { // }).then(res => {
console.log(res); // console.log(res);
}); // });
}, []); }, []);
// 修改选中的tab // 修改选中的tab
const handleChange = key => { const handleChange = key => {
......
src/pages/mobileConfig/menuconfig/AddForm.jsx
View file @ 17ef2560
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Form, Input } from 'antd'; import { Form, Input, Button, Row, Col } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
const { Item } = Form; const { Item } = Form;
const AddForm = props => { const AddForm = props => {
const {} = props; const { submitCallback, nodeType, nodeObj, addType } = props;
// const [type, setType] = useState(2);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [otherForm] = Form.useForm();
const layout = { const layout = {
layout: '', layout: 'horizontal',
labelCol: { span: 4, offset: 1 },
wrapperCol: { span: 16 },
};
const submit = () => {
if (addType === 1 || addType === 2) {
let obj = form.getFieldsValue();
submitCallback(obj, nodeObj);
}
if (addType === 3 || addType === 4) {
let obj = otherForm.getFieldsValue();
submitCallback(obj, nodeObj);
}
}; };
return ( return (
<Form form={form} {...layout}> <div>
<Item label="分组名称"> {(addType === 1 || addType === 2) && (
<Input /> <Form form={form} {...layout} className={styles.formStyle}>
</Item> <Item label="分组名称" name="menuName">
<Item label="分组别名"> <Input />
<Input /> </Item>
</Item> <Item label="分组别名" name="shortName">
<Item label="在线图标"> <Input />
<Input /> </Item>
</Item> {addType === 1 && (
<Item label="离线图标"> <Item label="在线图标" name="imageUrl">
<Input /> <PicturesWall />
</Item> </Item>
<Item label="功能参数"> )}
<Input /> {addType === 1 && (
</Item> <Item label="离线图标" name="offlineImgUrl">
</Form> <PicturesWall />
</Item>
)}
{addType === 2 && (
<Item label="分组图标" name="imageUrl">
<PicturesWall />
</Item>
)}
<Item label="功能参数" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}>
提交
</Button>
</Item>
</Form>
)}
{(addType === 3 || addType === 4) && (
<Form form={otherForm} {...layout} className={styles.formStyle}>
<Item label="菜单名称" name="menuName">
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
{addType === 3 && (
<Item label="在线图标" name="imageUrl">
<PicturesWall />
</Item>
)}
{addType === 3 && (
<Item label="离线图标" name="offlineImgUrl">
{/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
<PicturesWall />
</Item>
)}
{addType === 4 && (
<Item label="菜单图标" name="imageUrl">
<PicturesWall />
</Item>
)}
<Item label="功能路径" name="pageUrl">
<Input />
</Item>
<Item label="功能参数" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}>
提交
</Button>
</Item>
</Form>
)}
</div>
); );
}; };
export default AddForm; export default AddForm;
src/pages/mobileConfig/menuconfig/LeftPart.jsx deleted 100644 → 0
View file @ 95eacae1
import React, { useState, useEffect, useCallback } from 'react';
import {
message,
notification,
Form,
Spin,
Tree,
Tooltip,
Modal,
Input,
Button,
} from 'antd';
import {
FileAddTwoTone,
FolderAddTwoTone,
EditTwoTone,
DeleteTwoTone,
FolderOpenOutlined,
FileOutlined,
} from '@ant-design/icons';
import {
getTree,
addMenuApi,
addMenuGroupApi,
submitMenuInfo,
getRoleList,
getMenuInfo,
deleteMenuApi,
} from '@/services/appConfig/api';
import ListCardItem from '@/pages/orgnazation/listCardItem';
import styles from './LeftPart.less';
import PicturesWall from '@/components/Upload/index';
const AppMenu = () => {
const [treeLoading, setTreeLoading] = useState(true);
const [treeData, setTreeData] = useState([]); // 菜单树
const [treeState, setTreeState] = useState(true);
const [nodeType, setNodeType] = useState(1); // 根据节点类型渲染不同的编辑表单item,0-0一级菜单，0-0-0二级，0-0-0-0三级
const [rolelist, setRolelist] = useState([]);
const [roleValueList, setRoleValueList] = useState({});
const [menuID, setMenuID] = useState('');
const [menuTitle, setMenuTitle] = useState('菜单管理');
const [menuLabel, setMenuLabel] = useState('在线图标');
const [addMenuVisible, setAddMenuVisible] = useState(false);
const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
const [tipVisible, setTipVisible] = useState(false);
const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);
const [addMenuForm] = Form.useForm();
const [editMenuForm] = Form.useForm();
const [addMenuGroupForm] = Form.useForm();
const getRoleValueCallback = useCallback((value, index) => {
roleValueList[index] = value;
setRoleValueList({ ...roleValueList });
}, []);
const [flag, setFlag] = useState(1); // 刷新标记
const [saveid, setSaveid] = useState(''); // 保存选择的ID
const [submitLoading, setSubmitLoading] = useState(false);
// 获取菜单树
useEffect(() => {
updateTrees();
}, [flag]);
const updateTrees = () => {
setTreeLoading(true);
getTree()
.then(res => {
if (res.length > 0) {
setTreeLoading(false);
const result = res[0].children[0].children[2].children;
setTreeData(result);
console.log(result);
// 第一次加载，默认选择第一个组织
if (treeState) {
onSelect([result[0].menuID], false);
setTreeState(false);
}
}
})
.catch(err => {
setTreeLoading(false);
message.error(err);
});
};
// 获取角色列表
useEffect(() => {
getRoleList()
.then(res => {
if (res && res.list) {
setRolelist(res.list);
} else {
notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
}, []);
// 渲染菜单树
const mapTree = menu => {
const haveChildren =
Array.isArray(menu.children) && menu.children.length > 0;
return {
title: (
<>
<span>{menu.text}</span>
<div className={styles.iconWraper1}>
{menu.menuType === 'MiniAppMenuGroup' && (
<>
<Tooltip title="添加菜单组">
<FolderAddTwoTone
onClick={() => addMenuGroup(menu, '分组图标')}
/>
</Tooltip>
</>
)}
{menu.menuType === 'MiniAppMenuGroupTwo' && (
<>
<Tooltip title="添加菜单">
<FileAddTwoTone onClick={() => addMenu(menu)} />
</Tooltip>
</>
)}
<Tooltip title="删除菜单">
<DeleteTwoTone onClick={() => deleteMenu(menu)} />
</Tooltip>
</div>
</>
),
key: menu.menuID,
// icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
children: haveChildren ? menu.children.map(i => mapTree(i)) : [],
};
};
// 获取当前菜单详细
const onSelect = (props, e) => {
// e.node.pos节点类型，根据这个渲染不同的编辑表单item,0-x一级菜单，0-0-x二级，0-0-0-x三级
console.log(props, e);
if (e) {
if (e.node.pos.lastIndexOf('-') === 1) {
setNodeType(1);
} else if (e.node.pos.lastIndexOf('-') === 3) {
setNodeType(2);
} else {
setNodeType(3);
}
}
if (props[0]) {
setMenuID(props[0]);
setSaveid(props[0]);
} else {
setMenuID(saveid);
}
// setMenuID(props[0]);
getMenuInfo(props[0])
.then(res => {
if (res.success) {
editMenuForm.setFieldsValue({
menuName: res.menuName,
shortName: res.menuShortName,
imageUrl: res.imageUrl,
pageUrl: res.pageUrl,
offlineImgUrl: res.offlineImgUrl,
funParam: res.funParam,
relatedRoleList: res.relatedRoleList || '',
});
}
})
.catch(err => {
message.error(err);
});
};
// 左侧目录树相关操作
const addMenu = menu => {
setAddMenuVisible(true);
setMenuTitle(`在${menu.text}下添加功能菜单`);
console.log(menu, 'enu');
setMenuID(menu.menuID);
addMenuForm.setFieldsValue({
menuName: '',
shortName: '',
imageUrl: '',
pageUrl: '',
funParam: '',
});
};
const addMenuGroup = (menu, label) => {
setAddMenuGroupVisible(true);
setMenuTitle(`在${menu.text}下添加菜单组`);
setMenuLabel(label);
addMenuGroupForm.setFieldsValue({
menuName: '',
shortName: '',
imageUrl: '',
offlineImgUrl: '',
funParam: '',
});
};
const editMenu = menu => {
setAddMenuVisible(true);
setMenuTitle(`编辑${menu.text}`);
setMenuID(menu.menuID);
getMenuInfo(menu.menuID)
.then(res => {
if (res.success) {
addMenuForm.setFieldsValue({
menuName: res.menuName,
shortName: res.menuShortName,
imageUrl: res.imageUrl,
pageUrl: res.pageUrl,
funParam: res.funParam,
relatedRoleList: res.relatedRoleList || [],
});
} else {
notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
};
// const editMenuGroup = (menu, label) => {
// setAddMenuGroupVisible(true);
// setMenuTitle(`编辑${menu.text}`);
// setMenuID(menu.menuID);
// setMenuLabel(label);
// getMenuInfo(menu.menuID)
// .then(res => {
// if (res.success) {
// addMenuGroupForm.setFieldsValue({
// menuName: res.menuName,
// shortName: res.menuShortName,
// imageUrl: res.imageUrl,
// pageUrl: res.pageUrl,
// offlineImgUrl: res.offlineImgUrl,
// funParam: res.funParam,
// relatedRoleList: res.relatedRoleList || [],
// });
// } else {
// notification.error({
// message: '获取失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// message.error(err);
// });
// };
const deleteMenu = menu => {
setDeleteMenuVisible(true);
setMenuTitle(`删除菜单${menu.text}`);
setMenuID(menu.menuID);
};
// 提交添加菜单
const submitAddMenu = () => {
console.log(menuID);
let menuName = addMenuForm.getFieldValue('menuName');
let shortName = addMenuForm.getFieldValue('shortName');
let imageUrl = addMenuForm.getFieldValue('imageUrl');
let pageUrl = addMenuForm.getFieldValue('pageUrl');
let funParam = addMenuForm.getFieldValue('funParam');
if (menuName && shortName && imageUrl && pageUrl) {
addMenuApi(menuID, menuName, shortName, imageUrl, pageUrl, funParam)
.then(res => {
if (res.success) {
setAddMenuVisible(false);
notification.success({
message: '提交成功',
});
updateTrees();
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
} else {
setTipVisible(true);
}
};
// 提交添加菜单组
const submitAddMenuGroup = () => {
let menuName = addMenuGroupForm.getFieldValue('menuName');
let shortName = addMenuGroupForm.getFieldValue('shortName');
let imageUrl = addMenuGroupForm.getFieldValue('imageUrl');
let offlineImgUrl = addMenuGroupForm.getFieldValue('offlineImgUrl');
let funParam = addMenuGroupForm.getFieldValue('funParam');
if (menuName && shortName && imageUrl && offlineImgUrl) {
addMenuGroupApi(
menuID,
menuName,
shortName,
imageUrl,
offlineImgUrl,
funParam,
)
.then(res => {
if (res.success) {
setAddMenuGroupVisible(false);
notification.success({
message: '提交成功',
});
updateTrees();
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
} else {
setTipVisible(true);
}
};
// 提交-编辑菜单
const submitEditMenu = () => {
let menuName = editMenuForm.getFieldValue('menuName');
let shortName = editMenuForm.getFieldValue('shortName');
let imageUrl = editMenuForm.getFieldValue('imageUrl');
let offlineImgUrl = editMenuForm.getFieldValue('offlineImgUrl') || '';
let pageUrl = editMenuForm.getFieldValue('pageUrl') || '';
let funParam = editMenuForm.getFieldValue('funParam') || '';
let relatedRoleList = editMenuForm.getFieldValue('funParam') || '';
const params = {
menuID,
menuName,
shortName,
imageUrl,
offlineImgUrl,
pageUrl,
funParam,
relatedRoleList,
};
// 根据节点类型，加一层判断，必填项全部不为空时才能提交
if (nodeType === 1) {
if (menuName && shortName && imageUrl && offlineImgUrl) {
submitMenu(params);
} else {
setTipVisible(true);
}
} else if (nodeType === 2) {
if (menuName && shortName && imageUrl) {
submitMenu(params);
} else {
setTipVisible(true);
}
} else if (nodeType === 3) {
if (menuName && shortName && imageUrl && pageUrl) {
submitMenu(params);
} else {
setTipVisible(true);
}
}
};
const submitMenu = params => {
setSubmitLoading(true);
submitMenuInfo(params)
.then(res => {
setSubmitLoading(false);
if (res.success) {
setFlag(flag + 1);
notification.success({
message: '提交成功',
});
} else {
notification.error({
message: '获取失败',
description: res.message,
});
}
})
.catch(err => {
setSubmitLoading(false);
message.error(err);
});
};
// 提交删除菜单
const submitDeleteMenu = () => {
deleteMenuApi(menuID)
.then(res => {
if (res.success) {
setDeleteMenuVisible(false);
notification.success({
message: '删除成功',
});
updateTrees();
} else {
notification.error({
message: '删除失败',
description: res.message,
});
}
})
.catch(err => {
setTreeLoading(false);
message.error(err);
});
};
return (
<div className={styles.contentContainer}>
<div className={styles.menuContainer}>
<div style={{ padding: '10px 10px 0 16px' }}>
菜单列表
<Tooltip title="添加功能菜单">
<FileAddTwoTone
style={{
fontSize: '18px',
float: 'right',
margin: '4px 4px 0px 12px',
color: '#1890FF',
}}
onClick={() => addMenu({ text: '根目录', menuID: -1 })}
/>
</Tooltip>
<Tooltip title="添加菜单组">
<FolderAddTwoTone
style={{
fontSize: '18px',
float: 'right',
marginTop: '4px',
}}
onClick={() =>
addMenuGroup({ text: '根目录', menuID: -1 }, '在线图标')
}
/>
</Tooltip>
</div>
{treeData.length > 0 && (
<Spin spinning={treeLoading} tip="loading...">
<Tree
showIcon="true"
showLine={{ showLeafIcon: false }}
defaultExpandAll="true"
selectedKeys={[menuID]}
onSelect={onSelect}
autoExpandParent
expandedKeys={[menuID]}
treeData={treeData.map(t => mapTree(t))}
/>
</Spin>
)}
</div>
<div className={styles.editContainer}>
<Form
form={editMenuForm}
labelCol={{ span: 4 }}
wrapperCol={{ span: 19 }}
>
<Form.Item
name="menuName"
label="菜单名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单名称" />
</Form.Item>
<Form.Item
name="shortName"
label="菜单别名"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单别名" />
</Form.Item>
<Form.Item
name="imageUrl"
label="菜单图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单图标" />
</Form.Item>
<Form.Item label="图标预览">
<PicturesWall maxLen={1} />
</Form.Item>
{nodeType === 1 && (
<>
<Form.Item
name="offlineImgUrl"
label="离线图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入离线图标" />
</Form.Item>
<Form.Item label="图标预览">
<PicturesWall maxLen={1} />
</Form.Item>
</>
)}
{nodeType === 3 && (
<>
<Form.Item
name="pageUrl"
label="功能路径"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入功能路径" />
</Form.Item>
</>
)}
<Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入功能参数" />
</Form.Item>
<Form.Item wrapperCol={{ offset: 12 }}>
<Button
key="back"
type="primary"
onClick={() => submitEditMenu()}
loading={submitLoading}
>
提交
</Button>
</Form.Item>
</Form>
</div>
<div className={styles.previewContainer}>关联角色</div>
{/* 必填项提示 */}
<Modal
title="提示"
visible={tipVisible}
onCancel={() => setTipVisible(false)}
width="300px"
styles={{ zIndex: 999999 }}
centered
footer={[
<Button
key="back"
type="primary"
onClick={() => setTipVisible(false)}
>
关闭
</Button>,
]}
>
<p>
标记<span className={styles.redText}>*</span>的为必填项
</p>
</Modal>
{/* 添加菜单 */}
<Modal
title={menuTitle}
visible={addMenuVisible}
onOk={submitAddMenu}
onCancel={() => setAddMenuVisible(false)}
okText="确认"
cancelText="取消"
centered
>
<Form form={addMenuForm} labelCol={{ span: 4 }}>
<Form.Item
name="menuName"
label="菜单名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单名称" />
</Form.Item>
<Form.Item
name="shortName"
label="菜单别名"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单别名" />
</Form.Item>
<Form.Item
name="imageUrl"
label="菜单图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单图标" />
</Form.Item>
<Form.Item
name="pageUrl"
label="功能路径"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单图标" />
</Form.Item>
<Form.Item label="图标预览">
<PicturesWall maxLen={1} />
</Form.Item>
<Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入功能参数" />
</Form.Item>
</Form>
</Modal>
{/* 添加菜单组 */}
<Modal
title={menuTitle}
visible={addMenuGroupVisible}
onOk={submitAddMenuGroup}
onCancel={() => setAddMenuGroupVisible(false)}
okText="确认"
cancelText="取消"
centered
>
<Form form={addMenuGroupForm} labelCol={{ span: 4 }}>
<Form.Item
name="menuName"
label="分组名称"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入分组名称" />
</Form.Item>
<Form.Item
name="shortName"
label="分组别名"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入分组别名" />
</Form.Item>
<Form.Item
name="imageUrl"
label={menuLabel}
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入菜单图标" />
</Form.Item>
<Form.Item label="图标预览">
<PicturesWall maxLen={1} />
</Form.Item>
{/* 添加菜单组，label名称为在线图标才有离线图标 */}
{menuLabel === '在线图标' && (
<Form.Item
name="offlineImgUrl"
label="离线图标"
rules={[{ required: true, message: '不能为空' }]}
>
<Input placeholder="请输入离线图标" />
</Form.Item>
)}
<Form.Item label="图标预览">
<PicturesWall maxLen={1} />
</Form.Item>
<Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入功能参数" />
</Form.Item>
</Form>
</Modal>
{/* 删除菜单 */}
<Modal
title={menuTitle}
visible={deleteMenuVisible}
onOk={submitDeleteMenu}
onCancel={() => setDeleteMenuVisible(false)}
okText="确认"
cancelText="取消"
centered
>
<span>确定删除？</span>
</Modal>
</div>
);
};
export default AppMenu;
src/pages/mobileConfig/menuconfig/LeftPart.less deleted 100644 → 0
View file @ 95eacae1
.contentContainer{
// min-height: calc(100vh - 48px);
overflow-x: auto;
display: flex;
.menuContainer{
min-width: 300px;
border:2px solid #eee;
min-height:calc(100vh - 172px);
overflow-y:auto;
.ant-tree-list{
padding: 10px;
height:calc(100vh - 330px);
.ant-tree-switcher{
line-height: 1;
color:#1890FF;
}
.ant-tree-iconEle{
line-height: 1.2;
color:#1890FF;
}
}
}
.editContainer{
margin-left: 12px;
flex: 1;
padding: 16px;
float: left;
min-width: 500px;
border:2px solid #eee;
.ant-table-pagination-right{
padding-right: 12px;
}
}
.previewContainer{
margin-left: 12px;
// flex: 1;
float: left;
min-width: 700px;
border:2px solid #eee;
.ant-table-pagination-right{
padding-right: 12px;
}
}
.ant-tree-treenode{
width: 100% !important;
.ant-tree-node-content-wrapper{
display: inline-block;
width: 100%;
}
.iconWraper1{
float: right;
span{
display: none;
}
}
}
.ant-tree-treenode:hover{
.iconWraper1>span{
margin-left: 12px;
font-size: 18px;
display: inline-block;
}
}
}
.redText{
color: red;
cursor: pointer;
}
\ No newline at end of file
src/pages/mobileConfig/menuconfig/MenuConfig.jsx
View file @ 17ef2560
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import ProCard from '@ant-design/pro-card'; import ProCard from '@ant-design/pro-card';
import AddForm from './AddForm'; import MiniMenu from './miniMenu';
import LeftPart from './LeftPart';
const MenuConfig = props => { const MenuConfig = props => {
const [flag, setFlag] = useState(1); const [flag, setFlag] = useState(1);
return ( return (
<div split="vertical"> <div split="vertical">
<LeftPart /> <MiniMenu />
{/* <ProCard><AddForm /></ProCard> */}
</div> </div>
); );
}; };
......
src/pages/mobileConfig/menuconfig/addForm.less 0 → 100644
View file @ 17ef2560
.formStyle{
margin-bottom: 40px;
}
\ No newline at end of file
src/pages/mobileConfig/menuconfig/editForm.jsx 0 → 100644
View file @ 17ef2560
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
const { Item } = Form;
const EditForm = props => {
const { submitCallback, nodeType, info } = props;
const [form] = Form.useForm();
const [otherForm] = Form.useForm();
console.log(info);
const layout = {
layout: 'horizontal',
labelCol: { span: 4, offset: 1 },
wrapperCol: { span: 16 },
};
// 回显表单
useEffect(() => {
form.resetFields();
otherForm.resetFields();
}, [info]);
useEffect(() => {
if (nodeType === 1 || nodeType === 2) {
let arr = Object.keys(form.getFieldsValue());
let obj = {};
arr.map(i => {
obj[i] = info[i];
});
form.setFieldsValue({ ...obj, shortName: info.menuShortName });
}
if (nodeType === 3 || nodeType === 4) {
let arr = Object.keys(otherForm.getFieldsValue());
let obj = {};
arr.map(i => {
obj[i] = info[i];
});
otherForm.setFieldsValue({ ...obj, shortName: info.menuShortName });
}
}, [info]);
const submit = () => {
if (nodeType === 1 || nodeType === 2) {
let obj = form.getFieldsValue();
console.log(obj, '1,2');
submitCallback(obj);
}
if (nodeType === 3 || nodeType === 4) {
let obj = otherForm.getFieldsValue();
console.log(obj, '3,4');
submitCallback(obj);
}
};
return (
<div>
{(nodeType === 1 || nodeType === 2) && (
<Form form={form} {...layout} className={styles.formStyle}>
<Item label="分组名称" name="menuName">
<Input />
</Item>
<Item label="分组别名" name="shortName">
<Input />
</Item>
{nodeType === 1 && (
<Item label="在线图标" name="imageUrl">
<PicturesWall />
</Item>
)}
{nodeType === 1 && (
<Item label="离线图标" name="offlineImgUrl">
<PicturesWall />
</Item>
)}
{nodeType === 2 && (
<Item label="分组图标" name="imageUrl">
<PicturesWall />
</Item>
)}
<Item label="功能参数" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}>
提交
</Button>
</Item>
</Form>
)}
{(nodeType === 3 || nodeType === 4) && (
<Form form={otherForm} {...layout} className={styles.formStyle}>
<Item label="菜单名称" name="menuName">
<Input />
</Item>
<Item label="菜单别名" name="shortName">
<Input />
</Item>
{nodeType === 3 && (
<Item label="在线图标" name="imageUrl">
<PicturesWall />
</Item>
)}
{nodeType === 3 && (
<Item label="离线图标" name="offlineImgUrl">
{/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
<PicturesWall />
</Item>
)}
{nodeType === 4 && (
<Item label="菜单图标" name="imageUrl">
<PicturesWall />
</Item>
)}
<Item label="功能路径" name="pageUrl">
<Input />
</Item>
<Item label="功能参数" name="funParam">
<Input />
</Item>
<Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
<Button type="primary" onClick={() => submit()}>
提交
</Button>
</Item>
</Form>
)}
</div>
);
};
export default EditForm;
src/pages/mobileConfig/menuconfig/miniMenu.jsx 0 → 100644
View file @ 17ef2560
import React, { useEffect, useState } from 'react';
import {
message,
notification,
Popconfirm,
Form,
Tree,
Tooltip,
Modal,
Input,
Button,
Spin,
} from 'antd';
import {
FileAddTwoTone,
FolderAddTwoTone,
FolderFilled,
FileOutlined,
DeleteTwoTone,
} from '@ant-design/icons';
import PicturesWall from '@/components/Upload/index';
import classnames from 'classnames';
import {
miniAppSiteTree,
getMiniAppModuleTree,
addMenu,
getMenuInfo,
deleteMenu,
editMenu,
} from '@/services/mobileConfig/api';
import styles from './miniMenu.less';
import AddForm from './AddForm';
import EditForm from './editForm';
const MiniMenu = props => {
const [flag, setFlag] = useState(1); // 刷新标志
const [treeFlage, setTreeFlag] = useState(true);
const [treeData, setTreeData] = useState([]); // 树的数据
const [loading, setLoading] = useState(false); // 加载
const [menuID, setMenuID] = useState(''); // 选中的树ID
const [saveID, setSaveID] = useState(''); // 保存选择的树id
const [nodeType, setNodeType] = useState(''); // 选中的节点类型
const [info, setInfo] = useState({});
const [addVisible, setAddVisible] = useState(false); // 新增弹窗
const [addTwoVisible, setAddTwoVisible] = useState(false); // 编辑弹窗
const [addFlag, setAddFlag] = useState('root'); // 设置新增标志
const [nodeObj, setNodeObj] = useState({});
const [addType, setAddType] = useState(''); // 添加下级类型
// 获取菜单树
useEffect(() => {
updateTrees();
}, [flag]);
// 获取菜单信息
useEffect(() => {
getInfo();
}, [menuID]);
// 更新树
const updateTrees = () => {
setLoading(true);
miniAppSiteTree({
_version: 9999,
_dc: new Date().getTime(),
node: -2,
userMode: 'super',
select: '',
})
.then(res => {
if (res.length > 0) {
setLoading(false);
const result = res[0].children[0].children[2].children;
setTreeData(result);
console.log(result);
// 第一次加载，默认选择第一个组织
if (treeFlage) {
handleSelect([result[0].menuID], false);
setTreeFlag(false);
}
}
})
.catch(err => {
setLoading(false);
message.error(err);
});
};
// 处理数据
const mapTree = val => {
const obj = { ...val };
const hasChild = obj.children.length > 0;
return {
title: (
<div className={styles.title}>
<div>{obj.text}</div>
<div className={styles.tip}>
{obj.menuType === 'MiniAppMenuGroup' && (
<Tooltip title="新增菜单组" className={styles.fs}>
<FolderAddTwoTone onClick={() => addMenuGroupTip(obj)} />
</Tooltip>
)}
{obj.menuType === 'MiniAppMenuGroupTwo' && (
<Tooltip title="新增功能菜单" className={styles.fs}>
<FileAddTwoTone onClick={() => addMenuTip(obj)} />
</Tooltip>
)}
<Popconfirm
cancelText="取消"
okText="确定"
title={`确定删除${obj.text}？`}
onConfirm={() => deleteMenuTip(obj)}
placement="right"
>
<Tooltip title="删除菜单" className={styles.fs}>
<DeleteTwoTone />
</Tooltip>
</Popconfirm>
</div>
</div>
),
key: obj.menuID,
icon:
obj.menuType !== 'MiniAppMenuThree' &&
obj.menuType !== 'MiniAppMenu' ? (
<FolderFilled />
) : (
<FileOutlined />
),
menuType: obj.menuType,
children: hasChild ? obj.children.map(i => mapTree(i)) : [],
};
};
// 树的点击事件
const handleSelect = (prop, treeNode) => {
console.log(prop, treeNode);
if (treeNode) {
const {
node,
node: { menuType },
} = treeNode;
console.log(menuType);
switch (menuType) {
case 'MiniAppMenuGroup':
setNodeType(1);
setAddType(2);
break;
case 'MiniAppMenuGroupTwo':
setNodeType(2);
setAddType(4);
break;
case 'MiniAppMenu':
setNodeType(3);
setAddType(3);
break;
case 'MiniAppMenuThree':
setNodeType(4);
setAddType(4);
break;
default:
break;
}
}
if (prop[0]) {
setMenuID(prop[0]);
setSaveID(prop[0]);
} else {
setMenuID(saveID);
}
};
const getInfo = id => {
if (!menuID) {
return;
}
setLoading(true);
getMenuInfo({
menuID,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setLoading(false);
if (res.success) {
setInfo({ ...res });
} else {
notification.error({
message: '提示',
duration: 10,
description: res.message || '获取失败',
});
}
console.log(res, 'resss');
})
.catch(err => {
setLoading(false);
console.error(err);
});
};
// 删除的回调
const deleteMenuTip = val => {
console.log(val, 'val');
deleteMenu({
menuID: val.menuID,
_dc: Date.now(),
_version: 9999,
}).then(res => {
if (res.success) {
setFlag(flag + 1);
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 10,
description: res.message || '删除成功',
});
}
});
};
// 新增菜单组
const addMenuGroupTip = val => {
console.log(val, 'addgroup');
setNodeObj(val);
setAddVisible(true);
};
const rootAddGroup = () => {
setNodeObj('');
setNodeType(1);
setAddType(1);
setAddVisible(true);
};
// 新增功能菜单
const addMenuTip = val => {
console.log(val, 'add');
setNodeObj(val);
setAddTwoVisible(true);
};
const rootAdd = () => {
setNodeObj('');
setNodeType(3);
setAddType(3);
setAddTwoVisible(true);
};
// 提交的回调
const submitCallback = (prop, item) => {
console.log(prop, item);
let obj = { ...prop };
const parentID = item.menuID ? item.menuID : -1;
addMenu({
_dc: Date.now(),
parentID,
subSystemValue: 'miniapp',
_version: 9999,
...obj,
})
.then(res => {
if (res.success) {
setAddVisible(false);
setAddTwoVisible(false);
setFlag(flag + 1);
notification.success({
message: '提示',
description: '新增成功',
duration: 3,
});
} else {
notification.error({
message: '提示',
description: res.message || '新增失败',
duration: 10,
});
}
console.log(res, 'resadd');
})
.catch(err => {
console.error(err);
});
};
// 编辑的回调
const editSubmitCallback = prop => {
setLoading(true);
console.log(prop);
let obj = { ...prop };
editMenu({
_dc: Date.now(),
menuID,
subSystemValue: 'miniapp',
_version: 9999,
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
setFlag(flag + 1);
notification.success({
message: '提示',
duration: 3,
description: '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
console.log(res, 'resres');
})
.catch(err => {
console.error(err);
setLoading(false);
});
};
return (
<Spin spinning={loading} tip="loading...">
<div
className={classnames({
[styles.box]: true,
})}
>
<div
className={classnames({
[styles.left]: true,
})}
>
<div
className={classnames({
[styles.leftTop]: true,
})}
>
菜单列表
<div
className={classnames({
[styles.tRight]: true,
})}
>
<Tooltip title="新增菜单组">
<FolderAddTwoTone
className={`${styles.icon1} ${styles.icon}`}
onClick={() => rootAddGroup()}
/>
</Tooltip>
<Tooltip title="新增功能菜单">
<FileAddTwoTone
onClick={() => rootAdd()}
className={`${styles.icon2} ${styles.icon}`}
/>
</Tooltip>
</div>
</div>
{treeData.length > 0 && (
<Tree
showIcon
onSelect={handleSelect}
treeData={treeData.map(item => mapTree(item))}
blockNode
autoExpandParent
selectedKeys={[menuID]}
expandedKeys={[menuID]}
/>
)}
</div>
<Modal
visible={addVisible}
title="新增菜单组"
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 20 }}
width="600px"
destroyOnClose
footer={null}
cancelText="取消"
okText="确认"
onCancel={() => setAddVisible(false)}
onConfirm={() => {
submitCallback();
}}
>
<AddForm
nodeType={nodeType}
nodeObj={nodeObj}
addType={addType}
submitCallback={submitCallback}
/>
</Modal>
<Modal
visible={addTwoVisible}
title="新增功能菜单"
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 20 }}
width="600px"
destroyOnClose
footer={null}
cancelText="取消"
okText="确认"
onCancel={() => setAddTwoVisible(false)}
>
<AddForm
nodeType={nodeType}
nodeObj={nodeObj}
addType={addType}
submitCallback={submitCallback}
/>
</Modal>
<div
className={classnames({
[styles.middle]: true,
})}
>
{nodeType && (
<EditForm
nodeType={nodeType}
info={info}
submitCallback={editSubmitCallback}
/>
)}
</div>
</div>
</Spin>
);
};
export default MiniMenu;
src/pages/mobileConfig/menuconfig/miniMenu.less 0 → 100644
View file @ 17ef2560
.box{
min-height: calc( 100vh - 172px);
display: flex;
}
.left{
min-width: 300px;
width: 300px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
.ant-tree-node-content-wrapper{
display: flex;
align-items: center;
.ant-tree-iconEle{
display: flex;
align-items: center;
}
.ant-tree-title{
width: 100%;
}
}
.leftTop{
display: flex;
align-items: center;
margin-bottom: 10px;
justify-content: space-between;
.tRight{
display: flex;
align-items: center;
.icon1{
font-size: 20px;
margin-right: 10px;
}
.icon2{
font-size: 18px;
margin-right: 5px;
}
.icon:hover{
cursor: pointer;
}
}
}
}
.middle{
min-width: 500px;
width: 500px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
margin: 0 10px;
}
.title{
display: flex;
align-items: center;
width: 100%;
}
.tip{
display: none;
}
.title:hover{
.tip{
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
}
.fs{
font-size: 18px;
margin-left: 10px;
}
\ No newline at end of file
src/pages/userCenter/roleManage/RoleManage.jsx
View file @ 17ef2560
...@@ -29,6 +29,7 @@ import ListCard, { ...@@ -29,6 +29,7 @@ import ListCard, {
} from '@/components/CheckGroup'; } from '@/components/CheckGroup';
// import ListCard from '@/pages/orgnazation/ListCard'; // import ListCard from '@/pages/orgnazation/ListCard';
import qs from 'qs'; import qs from 'qs';
import classnames from 'classnames';
import styles from '@/pages/userCenter/roleManage/RoleManage.less'; import styles from '@/pages/userCenter/roleManage/RoleManage.less';
import AddModal from './AddModal'; import AddModal from './AddModal';
import DelModal from './DelModal'; import DelModal from './DelModal';
...@@ -38,6 +39,7 @@ import userStyles from '../UserManage.less'; ...@@ -38,6 +39,7 @@ import userStyles from '../UserManage.less';
const { Search } = Input; const { Search } = Input;
const placeholder = '请输入功能名称'; const placeholder = '请输入功能名称';
const SiteManage = () => { const SiteManage = () => {
const [treeData, setTreeData] = useState([]); const [treeData, setTreeData] = useState([]);
const [searchWord, setSearchWord] = useState(''); const [searchWord, setSearchWord] = useState('');
...@@ -313,63 +315,85 @@ const SiteManage = () => { ...@@ -313,63 +315,85 @@ const SiteManage = () => {
}; };
return ( return (
<PageContainer> <PageContainer>
<Row gutter={0}> {/* <Row gutter={0}>
<Col span={mulu ? 4 : 0}> <Col span={mulu ? 4 : 0}> */}
<Card className={styles.cardBox}> <div
<Spin className={classnames({
tip="loading...." [styles.content]: true,
spinning={spinLoading} })}
style={{ margin: '20px auto ', display: 'block' }} >
> <Card
<div className={userStyles.siteTitle}> className={classnames({
<span>选择角色：</span> [styles.cardBox]: true,
</div> [styles.hideBox]: !mulu,
{treeData && treeData.length > 0 && ( })}
<Tree >
// showLine={{ showLeafIcon: false }} <Spin
showIcon tip="loading...."
onSelect={handleTreeSelect} spinning={spinLoading}
autoExpandParent style={{ margin: '20px auto ', display: 'block' }}
expandedKeys={currentSelectId} >
treeData={treeData} <div className={userStyles.siteTitle}>
selectedKeys={currentSelectId} <span>选择角色：</span>
blockNode </div>
/> {treeData && treeData.length > 0 && (
)} <Tree
</Spin> // showLine={{ showLeafIcon: false }}
<AddModal showIcon
visible={modalVisible} onSelect={handleTreeSelect}
onCancel={() => setModalVisible(false)} autoExpandParent
itemObj={itemObj} expandedKeys={currentSelectId}
confirmModal={confirmModal} treeData={treeData}
/> selectedKeys={currentSelectId}
<DelModal blockNode
visible={delVisible} />
itemObj={itemObj} )}
onCancel={() => setDelVisible(false)} </Spin>
confirmModal={delModal} <AddModal
/> visible={modalVisible}
<EditModal onCancel={() => setModalVisible(false)}
visible={editVisible} itemObj={itemObj}
itemObj={itemObj} confirmModal={confirmModal}
onCancel={() => setEditVisible(false)} />
confirmModal={editModal} <DelModal
/> visible={delVisible}
<EditGroup itemObj={itemObj}
visible={groupVisible} onCancel={() => setDelVisible(false)}
itemObj={itemObj} confirmModal={delModal}
onCancel={() => setGroupVisible(false)} />
confirmModal={groupModal} <EditModal
/> visible={editVisible}
</Card> itemObj={itemObj}
{/* <div> onCancel={() => setEditVisible(false)}
confirmModal={editModal}
/>
<EditGroup
visible={groupVisible}
itemObj={itemObj}
onCancel={() => setGroupVisible(false)}
confirmModal={groupModal}
/>
<div>
{mulu && (
<Tooltip title="隐藏角色栏" className={styles.hide}>
<DoubleLeftOutlined onClick={() => handleHide()} />
</Tooltip>
)}
{!mulu && (
<Tooltip title="显示角色栏" className={styles.hide}>
<DoubleRightOutlined onClick={() => handleHide()} />
</Tooltip>
)}
</div>
</Card>
{/* <div>
{mulu && ( {mulu && (
<Tooltip title="隐藏角色栏" className={styles.hide}> <Tooltip title="隐藏角色栏" className={styles.hide}>
<DoubleLeftOutlined onClick={() => handleHide()} /> <DoubleLeftOutlined onClick={() => handleHide()} />
</Tooltip> </Tooltip>
)} )}
</div> */} </div> */}
</Col> {/* </Col> */}
{/* <Col span={mulu ? 0 : 1}> {/* <Col span={mulu ? 0 : 1}>
{mulu && ( {mulu && (
<Tooltip title="隐藏角色栏" className={styles.hide}> <Tooltip title="隐藏角色栏" className={styles.hide}>
...@@ -382,8 +406,19 @@ const SiteManage = () => { ...@@ -382,8 +406,19 @@ const SiteManage = () => {
</Tooltip> </Tooltip>
)} )}
</Col> */} </Col> */}
<Col span={mulu ? 20 : 23}> {/* <Col span={mulu ? 20 : 23}> */}
<Card style={{ marginBottom: '10px', minWidth: '870px' }}> <div
className={classnames({
[styles.boxR]: true,
[styles.boxH]: mulu,
})}
>
<Card
className={classnames({
[styles.cardBoxTop]: true,
[styles.boxH]: mulu,
})}
>
<Row align="middle"> <Row align="middle">
<Col span={1}>搜索</Col> <Col span={1}>搜索</Col>
<Col span={8}> <Col span={8}>
...@@ -438,7 +473,12 @@ const SiteManage = () => { ...@@ -438,7 +473,12 @@ const SiteManage = () => {
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card className={styles.cardBoxR}> <Card
className={classnames({
[styles.boxH]: mulu,
[styles.cardBoxR]: true,
})}
>
{roleID && ( {roleID && (
<ListCard <ListCard
loading={loading} loading={loading}
...@@ -451,8 +491,10 @@ const SiteManage = () => { ...@@ -451,8 +491,10 @@ const SiteManage = () => {
/> />
)} )}
</Card> </Card>
</Col> </div>
</Row> {/* </Col>
</Row> */}
</div>
</PageContainer> </PageContainer>
); );
}; };
......
src/pages/userCenter/roleManage/RoleManage.less
View file @ 17ef2560
.cardBox{ .cardBox{
min-height: calc(100vh - 74px); min-height: calc(100vh - 74px);
max-height: calc(100vh - 74px); max-height: calc(100vh - 74px);
overflow-y: scroll; // overflow-y: scroll;
margin-right: 20px; overflow: auto;
width: 260px;
left: 0;
top: 0;
margin-right: 10px;
position: relative;
// transition: left,width 10s;
transition-property:width,left;
transition-duration: 0.5s;
white-space: nowrap;
.ant-tree-node-content-wrapper{ .ant-tree-node-content-wrapper{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -12,6 +21,15 @@ ...@@ -12,6 +21,15 @@
} }
} }
} }
.hideBox{
left: 0px;
top: 0;
width: 20px;
}
.hideH{
width: 100%;
}
.ant-tree-node-content-wrapper-open{ .ant-tree-node-content-wrapper-open{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -35,16 +53,16 @@ ...@@ -35,16 +53,16 @@
align-items: center; align-items: center;
} }
.cardBoxR{ .cardBoxR{
min-width: 870px;
min-height: calc(100vh - 158px); min-height: calc(100vh - 158px);
max-height: calc(100vh - 158px); max-height: calc(100vh - 158px);
min-width: 870px;
overflow-y: scroll; overflow-y: scroll;
} }
:global{ :global{
.ant-tree-switcher{ .ant-tree-switcher{
display: flex; display: flex;
align-items: center; align-items: center;
color:#1890FF; // color:#1890FF;
.ant-tree-switcher-line-icon{ .ant-tree-switcher-line-icon{
margin-left: 5px; margin-left: 5px;
} }
...@@ -62,10 +80,18 @@ ...@@ -62,10 +80,18 @@
z-index: 2; z-index: 2;
} }
.anticon-unordered-list{
vertical-align: 0.125em; .boxR{
color:#1890FF; width: 100%;
} position: relative;
.ant-card-body { transition: width 2s;
padding: 20px 10px;
} }
// .anticon-unordered-list{
// vertical-align: 0.125em;
// color:#1890FF;
// }
.content{
width: 100%;
display: flex;
position: relative;
}
\ No newline at end of file
src/pages/userCenter/siteManage/SiteManage.jsx
View file @ 17ef2560
...@@ -236,42 +236,56 @@ const SiteManage = () => { ...@@ -236,42 +236,56 @@ const SiteManage = () => {
return ( return (
<PageContainer> <PageContainer>
<Row> {/* <Row>
<Col span={mulu ? 4 : 0}> <Col span={mulu ? 4 : 0}> */}
<Card <div className={styles.content}>
className={classnames({ <Card
[styles.cardBox]: true, className={classnames({
})} [styles.cardBox]: true,
[styles.hideBox]: !mulu,
})}
>
<Spin
tip="loading...."
spinning={spinLoading}
style={{ marginTop: '20px' }}
> >
<Spin <div className={userStyles.siteTitle}>
tip="loading...." <span>选择站点：</span>
spinning={spinLoading} </div>
style={{ marginTop: '20px' }} <List>{renderListItem(treeData)}</List>
> </Spin>
<div className={userStyles.siteTitle}> <AddModal
<span>选择站点：</span> visible={modalVisible}
</div> onCancel={() => setModalVisible(false)}
<List>{renderListItem(treeData)}</List> confirmModal={confirmModal}
</Spin> />
<AddModal <DelModal
visible={modalVisible} visible={delVisible}
onCancel={() => setModalVisible(false)} stationId={currentStation.stationID}
confirmModal={confirmModal} onCancel={() => setDelVisible(false)}
/> confirmModal={delModal}
<DelModal />
visible={delVisible} <EditModal
stationId={currentStation.stationID} visible={editVisible}
onCancel={() => setDelVisible(false)} stationObj={currentStation}
confirmModal={delModal} onCancel={() => setEditVisible(false)}
/> confirmModal={editModal}
<EditModal />
visible={editVisible} <div>
stationObj={currentStation} {mulu && (
onCancel={() => setEditVisible(false)} <Tooltip title="隐藏站点" className={styles.hide}>
confirmModal={editModal} <DoubleLeftOutlined onClick={() => handleHide()} />
/> </Tooltip>
</Card> )}
{/* <div> {!mulu && (
<Tooltip title="显示站点" className={styles.hide}>
<DoubleRightOutlined onClick={() => handleHide()} />
</Tooltip>
)}
</div>
</Card>
{/* <div>
{mulu && ( {mulu && (
<Tooltip title="隐藏站点" className={styles.hide}> <Tooltip title="隐藏站点" className={styles.hide}>
<DoubleLeftOutlined onClick={() => handleHide()} /> <DoubleLeftOutlined onClick={() => handleHide()} />
...@@ -283,7 +297,7 @@ const SiteManage = () => { ...@@ -283,7 +297,7 @@ const SiteManage = () => {
</Tooltip> </Tooltip>
)} )}
</div> */} </div> */}
</Col> {/* </Col> */}
{/* <Col span={mulu ? 0 : 1}> {/* <Col span={mulu ? 0 : 1}>
{mulu && ( {mulu && (
<Tooltip title="隐藏站点" className={styles.hide}> <Tooltip title="隐藏站点" className={styles.hide}>
...@@ -296,8 +310,19 @@ const SiteManage = () => { ...@@ -296,8 +310,19 @@ const SiteManage = () => {
</Tooltip> </Tooltip>
)} )}
</Col> */} </Col> */}
<Col span={mulu ? 20 : 23}> {/* <Col span={mulu ? 20 : 23}> */}
<Card style={{ marginBottom: '10px', minWidth: '600px' }}> <div
className={classnames({
[styles.boxR]: true,
[styles.boxH]: mulu,
})}
>
<Card
className={classnames({
[styles.cardBoxTop]: true,
[styles.boxH]: mulu,
})}
>
<Row align="middle"> <Row align="middle">
<Col span={1}>搜索</Col> <Col span={1}>搜索</Col>
<Col span={8}> <Col span={8}>
...@@ -343,7 +368,12 @@ const SiteManage = () => { ...@@ -343,7 +368,12 @@ const SiteManage = () => {
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card className={styles.cardBoxR}> <Card
className={classnames({
[styles.boxH]: mulu,
[styles.cardBoxR]: true,
})}
>
{currentStation.stationID && ( {currentStation.stationID && (
<ListCard <ListCard
loading={loading} loading={loading}
...@@ -355,8 +385,10 @@ const SiteManage = () => { ...@@ -355,8 +385,10 @@ const SiteManage = () => {
/> />
)} )}
</Card> </Card>
</Col> </div>
</Row> </div>
{/* </Col>
</Row> */}
</PageContainer> </PageContainer>
); );
}; };
......
src/pages/userCenter/siteManage/SiteManage.less
View file @ 17ef2560
.cardBox{ .cardBox{
min-height: calc(100vh - 74px); min-height: calc(100vh - 75px);
max-height: calc(100vh - 74px); max-height: calc(100vh - 75px);
overflow: auto; overflow: auto;
width: 260px;
left: 0;
top: 0;
margin-right: 10px; margin-right: 10px;
position: relative;
// transition: left,width 10s;
transition-property:width,left;
transition-duration: 0.5s;
white-space: nowrap
}
.hideBox{
left: 0px;
top: 0;
width: 20px;
}
.hideH{
width: 100%;
} }
.siteTitle{ .siteTitle{
font-size: 16px; font-size: 16px;
...@@ -17,6 +33,11 @@ ...@@ -17,6 +33,11 @@
min-width: 600px; min-width: 600px;
overflow-y: scroll; overflow-y: scroll;
} }
.cardBoxTop{
// max-width: calc( 100% - 450px);
// margin-bottom: 10px;
}
.ant-tree-node-content-wrapper-open{ .ant-tree-node-content-wrapper-open{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -64,4 +85,14 @@ ...@@ -64,4 +85,14 @@
} }
// .hide{ // .hide{
// left: 0; // left: 0;
// } // }
\ No newline at end of file .content{
width: 100%;
display: flex;
position: relative;
}
.boxR{
width: 100%;
position: relative;
transition: width 2s;
}
\ No newline at end of file
src/services/mobileConfig/api.js
View file @ 17ef2560
...@@ -46,3 +46,41 @@ export const editWebsite = (params, options) => { ...@@ -46,3 +46,41 @@ export const editWebsite = (params, options) => {
*/ */
export const getMiniAppModuleTree = params => export const getMiniAppModuleTree = params =>
get(`${PUBLISH_SERVICE}/PlatformCenter/MiniAppModuleTree`, params); get(`${PUBLISH_SERVICE}/PlatformCenter/MiniAppModuleTree`, params);
/**
*
* @新增功能菜单组
* @请求参数 {*}{
* version: 9999
_dc: 1606203896370
parentID: -1
subSystemValue: miniapp
menuName: 分组名称
imageUrl: assets/images/appMenu/小程序tab/enterprise_select.png
offlineImgUrl: assets/images/appMenu/小程序tab/enterprise_unselect.png
shortName: 分组别名
pageUrl: //功能路径
funParam: 测试功能参数
relatedRoleList： //角色数组
}
*/
export const addMenu = params =>
get('/Cityinterface/rest/services/OMS.svc/MiniApp_AddMenu', params);
// 获取菜单详情
/**
* {
* menuID:''
* }
*/
export const getMenuInfo = params =>
get('/Cityinterface/rest/services/OMS.svc/Mini_GetMenuInfo', params);
// 编辑菜单
export const editMenu = params =>
get('/Cityinterface/rest/services/OMS.svc/MiniApp_EditMenu', params);
// 删除菜单
export const deleteMenu = params =>
get('/Cityinterface/rest/services/OMS.svc/MiniApp_DeleteMenu', params);
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