Skip to content

C
CivManage
Commit 317391c8 authored by Maofei94's avatar Maofei94
Browse files
Options

perf: a perf

parent 7b1a217c
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 198 deletions
src/pages/mobileConfig/SiteConfig.jsx
View file @ 317391c8
......@@ -21,8 +21,8 @@ const SiteConfig = props => {
const [form] = Form.useForm();
const layout = {
layout: 'horizontal',
labelCol: { span: 3 },
wrapperCol: { span: 14 },
labelCol: { span: 7 },
wrapperCol: { span: 6 },
};
useEffect(() => {
console.log(miniTitle, 'miniTitle');
......@@ -88,105 +88,107 @@ const SiteConfig = props => {
};
return (
<Spin spinning={loading} tip="loading...">
<Form form={form} {...layout}>
<Item
label="应用名称："
name="title"
rules={[
{
required: true,
message: '请输入应用名称',
},
]}
>
<Input placeholder="请输入应用名称" allowClear />
</Item>
<div style={{ minHeight: 'calc(100vh - 172px)', marginTop: '20px' }}>
<Form form={form} {...layout}>
<Item
label="应用名称："
name="title"
rules={[
{
required: true,
message: '请输入应用名称',
},
]}
>
<Input placeholder="请输入应用名称" allowClear />
</Item>
<Item
label="系统图标："
name="shortcutIcon"
rules={[
{
required: true,
message: '请选择系统图标',
},
]}
>
<Input placeholder="请输入系统图标名称" allowClear />
</Item>
<Item
label="系统图标："
name="shortcutIcon"
rules={[
{
required: true,
message: '请选择系统图标',
},
]}
>
<Input placeholder="请输入系统图标名称" allowClear />
</Item>
<Item label="系统图标预览：">
<PicturesWall />
</Item>
<Item
label="登陆页面："
name="loginTemplate"
rules={[
{
required: true,
message: '请选择登陆页面',
},
]}
>
<Select placeholder="请选择登陆页面">
{loginList &&
loginList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item
label="系统皮肤："
name="theme"
rules={[
{
required: true,
message: '请选择系统皮肤',
},
]}
>
<Select placeholder="请选择系统皮肤">
{themeList &&
themeList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item
label="系统风格："
name="style"
rules={[
{
required: true,
message: '请选择系统风格',
},
]}
>
<Select placeholder="请选择系统风格">
{styleList &&
styleList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item label="开启云登陆：" name="cloudLogin">
<Radio.Group onChange={radioChange}>
<Radio value>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
</Item>
<Item style={{ textAlign: 'center' }}>
<Button type="primary" onClick={submit}>
提交
</Button>
</Item>
</Form>
<Item label="系统图标预览：">
<PicturesWall />
</Item>
<Item
label="登陆页面："
name="loginTemplate"
rules={[
{
required: true,
message: '请选择登陆页面',
},
]}
>
<Select placeholder="请选择登陆页面">
{loginList &&
loginList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item
label="系统皮肤："
name="theme"
rules={[
{
required: true,
message: '请选择系统皮肤',
},
]}
>
<Select placeholder="请选择系统皮肤">
{themeList &&
themeList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item
label="系统风格："
name="style"
rules={[
{
required: true,
message: '请选择系统风格',
},
]}
>
<Select placeholder="请选择系统风格">
{styleList &&
styleList.map((item, index) => (
<Option value={item.value} key={`item${index}`}>
{item.text}
</Option>
))}
</Select>
</Item>
<Item label="开启云登陆：" name="cloudLogin">
<Radio.Group onChange={radioChange}>
<Radio value>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
</Item>
<Item wrapperCol={{ span: 6, offset: 7 }}>
<Button type="primary" onClick={submit}>
提交
</Button>
</Item>
</Form>
</div>
</Spin>
);
};
......
src/pages/mobileConfig/menuconfig/LeftPart.jsx
View file @ 317391c8
......@@ -31,7 +31,7 @@ import ListCardItem from '@/pages/orgnazation/listCardItem';
import styles from './LeftPart.less';
import PicturesWall from '@/components/Upload/index';
const LeftPart = () => {
const AppMenu = () => {
const [treeLoading, setTreeLoading] = useState(true);
const [treeData, setTreeData] = useState([]); // 菜单树
......@@ -47,6 +47,7 @@ const LeftPart = () => {
const [addMenuVisible, setAddMenuVisible] = useState(false);
const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
const [tipVisible, setTipVisible] = useState(false);
const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);
const [addMenuForm] = Form.useForm();
......@@ -57,11 +58,13 @@ const LeftPart = () => {
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);
......@@ -119,11 +122,6 @@ const LeftPart = () => {
onClick={() => addMenuGroup(menu, '分组图标')}
/>
</Tooltip>
{/* <Tooltip title="添加菜单组">
<EditTwoTone
onClick={() => editMenuGroup(menu, '在线图标')}
/>
</Tooltip> */}
</>
)}
{menu.menuType === 'MiniAppMenuGroupTwo' && (
......@@ -131,20 +129,9 @@ const LeftPart = () => {
<Tooltip title="添加菜单">
<FileAddTwoTone onClick={() => addMenu(menu)} />
</Tooltip>
{/* <Tooltip title="编辑菜单组">
<EditTwoTone
onClick={() => editMenuGroup(menu, '分组图标')}
/>
</Tooltip> */}
</>
)}
{/* {menu.menuType === 'MiniAppMenuThree' && (
<>
<Tooltip title="编辑菜单">
<EditTwoTone onClick={() => editMenu(menu)} />
</Tooltip>
</>
)} */}
<Tooltip title="删除菜单">
<DeleteTwoTone onClick={() => deleteMenu(menu)} />
</Tooltip>
......@@ -152,7 +139,7 @@ const LeftPart = () => {
</>
),
key: menu.menuID,
icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
children: haveChildren ? menu.children.map(i => mapTree(i)) : [],
};
......@@ -161,6 +148,7 @@ const LeftPart = () => {
// 获取当前菜单详细
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);
......@@ -170,7 +158,13 @@ const LeftPart = () => {
setNodeType(3);
}
}
setMenuID(props[0]);
if (props[0]) {
setMenuID(props[0]);
setSaveid(props[0]);
} else {
setMenuID(saveid);
}
// setMenuID(props[0]);
getMenuInfo(props[0])
.then(res => {
if (res.success) {
......@@ -193,7 +187,8 @@ const LeftPart = () => {
// 左侧目录树相关操作
const addMenu = menu => {
setAddMenuVisible(true);
setMenuTitle(`在${menu.text}下添加菜单`);
setMenuTitle(`在${menu.text}下添加功能菜单`);
console.log(menu, 'enu');
setMenuID(menu.menuID);
addMenuForm.setFieldsValue({
menuName: '',
......@@ -384,9 +379,13 @@ const LeftPart = () => {
}
};
const submitMenu = params => {
setSubmitLoading(true);
submitMenuInfo(params)
.then(res => {
setSubmitLoading(false);
if (res.success) {
setFlag(flag + 1);
notification.success({
message: '提交成功',
});
......@@ -398,6 +397,7 @@ const LeftPart = () => {
}
})
.catch(err => {
setSubmitLoading(false);
message.error(err);
});
};
......@@ -430,7 +430,7 @@ const LeftPart = () => {
<div className={styles.menuContainer}>
<div style={{ padding: '10px 10px 0 16px' }}>
菜单列表
<Tooltip title="添加菜单">
<Tooltip title="添加功能菜单">
<FileAddTwoTone
style={{
fontSize: '18px',
......@@ -460,8 +460,10 @@ const LeftPart = () => {
showIcon="true"
showLine={{ showLeafIcon: false }}
defaultExpandAll="true"
// selectedKeys={[currentSelectMenu]}
selectedKeys={[menuID]}
onSelect={onSelect}
autoExpandParent
expandedKeys={[menuID]}
treeData={treeData.map(t => mapTree(t))}
/>
</Spin>
......@@ -526,7 +528,12 @@ const LeftPart = () => {
<Input placeholder="请输入功能参数" />
</Form.Item>
<Form.Item wrapperCol={{ offset: 12 }}>
<Button key="back" type="primary" onClick={() => submitEditMenu()}>
<Button
key="back"
type="primary"
onClick={() => submitEditMenu()}
loading={submitLoading}
>
提交
</Button>
</Form.Item>
......@@ -534,8 +541,141 @@ const LeftPart = () => {
</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 LeftPart;
export default AppMenu;
src/pages/mobileConfig/menuconfig/LeftPart.less
View file @ 317391c8
.contentContainer{
max-height: calc(100vh - 300px);
overflow-x: auto;
display: flex;
.menuContainer{
min-width: 300px;
border:1px solid #abaeb1;
// min-height:calc(100vh - 300px);
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:1px solid #abaeb1;
.ant-table-pagination-right{
padding-right: 12px;
}
}
.previewContainer{
margin-left: 12px;
// flex: 1;
float: left;
min-width: 400px;
border:1px solid #abaeb1;
.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;
}
}
// 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;
color: red;
cursor: pointer;
}
\ No newline at end of file
src/pages/mobileConfig/menuconfig/MenuConfig.jsx
View file @ 317391c8
......@@ -6,10 +6,10 @@ import LeftPart from './LeftPart';
const MenuConfig = props => {
const [flag, setFlag] = useState(1);
return (
<ProCard split="vertical">
<div split="vertical">
<LeftPart />
{/* <ProCard><AddForm /></ProCard> */}
</ProCard>
</div>
);
};
export default MenuConfig;
src/pages/userCenter/siteManage/SiteManage.jsx
View file @ 317391c8
......@@ -102,11 +102,13 @@ const SiteManage = () => {
setValueList(
finalList
.map(l =>
checkChildrenByCondition(
l,
it => (it.isChecked ? [getId(it)] : []),
'map',
).flat(Infinity),
l.children.map(item =>
checkChildrenByCondition(
item,
it => (it.isChecked ? [getId(it)] : []),
'map',
).flat(Infinity),
),
)
.flat(Infinity)
.filter(Boolean),
......@@ -129,6 +131,7 @@ const SiteManage = () => {
let arr = list.map(item => {
item.id = item.OUID * 10000;
item.text = item.OUName;
item.isChecked = false;
item.type = 'widgetGroup';
item.children = item.userList.map(u => ({
...u,
......
src/services/mobileConfig/api.js
View file @ 317391c8
......@@ -37,3 +37,7 @@ export const editWebsite = (params, options) => {
options,
);
};
/**
* @获取菜单配置
*/
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