Commit 99504e8a authored by 邓超's avatar 邓超

fix: 重构面包屑模块

parent 3c694e2a
Pipeline #67037 passed with stages
......@@ -35,12 +35,9 @@ class AvatarDropdown extends React.Component {
name: '',
},
} = this.props;
const userName = sessionStorage.getItem('userName');
const menuHeaderDropdown = (
<Menu
className={styles.menu}
selectedKeys={[]}
onClick={this.onMenuClick}
>
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
{/* {
<Menu.Item key="center">
<UserOutlined />
......@@ -62,18 +59,12 @@ class AvatarDropdown extends React.Component {
</Menu>
);
return currentUser ? (
<HeaderDropdown overlay={menuHeaderDropdown}>
<HeaderDropdown overlay={menuHeaderDropdown} trigger={['click']}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar
size="small"
className={styles.avatar}
src={currentUser.avatar}
alt="avatar"
/>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
<span className={`${styles.name} anticon`}>
{currentUser.name || loginName === 'omsa'
? '超级管理员'
: '管理员' || '管理员'}
{/* {currentUser.name || loginName === 'omsa' ? '超级管理员' : '管理员' || '管理员'} */}
{userName || '管理员'}
</span>
</span>
</HeaderDropdown>
......
......@@ -2,7 +2,7 @@
* @Author: dengchao 754083046@qq.com
* @Date: 2022-05-09 11:19:45
* @LastEditors: dengchao 754083046@qq.com
* @LastEditTime: 2022-07-19 14:56:48
* @LastEditTime: 2023-02-06 17:06:06
* @FilePath: \maintenance\src\components\GlobalHeader\RightContent.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -10,7 +10,7 @@ import React, { useContext, useState, useEffect } from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { Breadcrumb } from 'antd';
import check from '@/components/Authorized/CheckPermissions';
import { Link, useLocation } from 'react-router-dom';
import { Link, useLocation, matchPath } from 'react-router-dom';
import HeaderSearch from '../HeaderSearch';
import Colophon from '../Colophon';
import Avatar from './AvatarDropdown';
......@@ -42,22 +42,85 @@ const routesOptions = route => {
const GlobalHeaderRight = props => {
const { theme, layout } = props;
const [dosRouter, setDosRouter] = useState('');
const [breadCrumbsRoutes, setBreadCrumbsRoutes] = useState([]);
const { pathname } = useLocation();
let className = styles.right;
const value = useContext(RouteContext);
useEffect(() => {
console.log(pathname, 'location');
// console.log(pathname, props.routes, props.history, 'location');
// console.log(flattenRoutes(props.routes), 'flate');
let list = getBreadcrumbs();
// console.log(list, 'list');
setBreadCrumbsRoutes(list);
// console.log(value.breadcrumb.routes, 'value');
setDosRouter(pathname);
}, [pathname]);
let className = styles.right;
const value = useContext(RouteContext);
if (theme === 'dark' && layout === 'top') {
className = `${styles.right} ${styles.dark}`;
}
const flattenRoutes = arr => {
return arr.reduce((res, next) => {
return res.concat(Array.isArray(next.routes) ? [next, ...flattenRoutes(next.routes)] : next);
}, []);
};
const getBreadcrumbs = () => {
// 初始化匹配数组match
let matches = [];
pathname
// 取得路径名,然后将路径分割成每一路由部分.
.split('?')[0]
.split('/')
// 对每一部分执行一次调用`getBreadcrumb()`的reduce.
.reduce((prev, curSection) => {
// 将最后一个路由部分与当前部分合并,比如当路径为 `/x/xx/xxx` 时,pathSection分别检查 `/x` `/x/xx` `/x/xx/xxx` 的匹配,并分别生成面包屑
const pathSection = `${prev}/${curSection}`;
// 对于 拆分的路径,从 flattenRoutes 中查找对应的路由
const breadcrumb = getBreadcrumb(flattenRoutes(props.routes), curSection, pathSection);
// 将面包屑导入到matches数组中
matches.push(breadcrumb);
// 传递给下一次reduce的路径部分
return pathSection;
});
return matches;
};
const getBreadcrumb = (routes, curSection, pathSection) => {
let matchRoute = routes.find(ele => {
const { path } = ele;
return matchPath(pathSection, { path, exact: true });
});
return {
breadcrumbName: matchRoute?.name,
path: matchRoute.path,
component: matchRoute.component,
};
};
const itemRender = (route, params, routes, paths) => {
const last = routes.indexOf(route) === routes.length - 1;
return <span>{route.breadcrumbName}</span>;
// return last ? (
// <span>{route.breadcrumbName}</span>
// ) : (
// <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
// );
};
return (
<div className={className}>
{/* <span className={styles.left}>{value.title}</span> */}
<Breadcrumb {...value.breadcrumb} className={styles.lineHeight} />
{/* <Breadcrumb
routes={value.breadcrumb.routes}
// {...value.breadcrumb}
className={styles.lineHeight}
/> */}
<Breadcrumb
routes={breadCrumbsRoutes}
itemRender={itemRender}
className={styles.lineHeight}
/>
<div style={{ flex: 1 }} />
{/* <div style={{ margin: '0 10px' }}>
<a
......
......@@ -6,10 +6,7 @@ import classNames from 'classnames';
import styles from './index.less';
const HeaderDropdown = ({ overlayClassName: cls, ...restProps }) => (
<Dropdown
overlayClassName={classNames(styles.container, cls)}
{...restProps}
/>
<Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
);
export default HeaderDropdown;
......@@ -93,7 +93,7 @@ const BasicLayout = props => {
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => {}}
// footerRender={() => defaultFooterDom}
rightContentRender={() => <RightContent />}
rightContentRender={() => <RightContent routes={props.route.routes} />}
title="熊猫运维平台"
// fixedHeader
route={
......
......@@ -26,7 +26,7 @@ const ChooseTableType = props => {
<Modal
visible={visible}
title="选择表模型"
width="1000px"
width="400px"
onOk={onFinish}
onCancel={onCancel}
maskClosable={false}
......
.content {
height: 530px;
height: 430px;
overflow-y: scroll;
.groupBox {
......@@ -42,6 +42,7 @@
justify-content: center;
width: 100px;
height: 50px;
transition: transform 1s inherit;
img {
width: 50px;
......@@ -50,6 +51,10 @@
}
.imgBox:hover {
transform: scale(1.1);
}
.title {
text-align: center;
margin-top: 5px;
......
/*
* @Description:
* @Author: leizhe
* @Date: 2022-01-13 17:26:13
* @LastEditTime: 2023-01-29 14:28:04
* @LastEditors: dengchao 754083046@qq.com
*/
import React, { useState, useEffect } from 'react';
import { flowReOrder } from '@/services/flow/flow';
import { Modal, notification } from 'antd';
import DragTable from '@/components/DragTable/DragTable';
const Order = props => {
const { visible, handleCancel, tableData, submitCallBack, processData } = props;
const [orderTable, setOrderTable] = useState([]);
const [flowIDs, setFlowIDs] = useState('');
// 页面弹出的时候初始化拖拽数据
useEffect(() => {
if (visible) {
console.log(tableData);
console.log(processData);
let list = [];
processData.map(i => {
i.children.map(j => {
list.push(j);
});
});
console.log(list, 'list');
setOrderTable(list);
}
}, [visible]);
// 根据orderTable值改变flowIDs
useEffect(() => {
let ids = '';
orderTable.forEach((item, index) => {
if (index === orderTable.length - 1) {
ids += `${item.FlowID}`;
} else {
ids += `${item.FlowID},`;
}
});
setFlowIDs(ids);
}, [orderTable]);
// 提交表单
const onSubmit = () => {
flowReOrder({ flowIDs }).then(res => {
if (res.code === 0) {
notification.success({
message: '提示',
duration: 3,
description: '保存成功',
});
submitCallBack();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
// 拖拽回调函数
const dragCallBack = data => {
if (data) {
setOrderTable(data);
}
};
const columns = [
{
title: '序号',
dataIndex: 'Order',
width: 50,
key: 'Order',
},
{
title: '分组名',
dataIndex: 'Type',
width: 150,
key: 'Type',
},
{
title: '流程名称',
dataIndex: 'FlowName',
width: 150,
key: 'FlowName',
},
];
return (
<Modal
title="调整顺序"
width="600px"
visible={visible}
onOk={onSubmit}
onCancel={handleCancel}
maskClosable={false}
destroyOnClose
>
<div style={{ minHeight: '200px' }}>
<DragTable
bordered
style={{ marginBottom: '10px' }}
rowKey={record => record.Code}
columns={columns}
dataSource={orderTable}
// showHeader={false}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="flowOrder"
scroll={{
y: 500,
}}
/>
</div>
</Modal>
);
};
export default Order;
......@@ -333,14 +333,15 @@ const ConfigNodeMsg = (props, ref) => {
>
<Input placeholder="请输展示名称" />
</Form.Item>
<Form.Item label="移交方式" name="Handover">
<Form.Item
label="移交方式"
name="Handover"
style={{
display: editMsg.NodeType === '2' ? 'none' : 'flex',
}}
>
<Radio.Group>
<Radio
value="移交选择人"
style={{
display: editMsg.NodeType === '2' ? 'none' : 'flex',
}}
>
<Radio value="移交选择人">
<div style={{ display: 'flex', alignItems: 'center' }}>
移交选择人
<Tooltip title="根据人员选择面板,自主选择移交的人员">
......
......@@ -11,7 +11,7 @@ import GateConfig from './gateWay/gateWay';
const { TabPane } = Tabs;
const HostManager = () => {
const [activeKey, setActiveKey] = useState('1')
const [activeKey, setActiveKey] = useState('1');
// 修改选中的tab
const handleChange = key => {
setActiveKey(key);
......@@ -19,12 +19,12 @@ const HostManager = () => {
return (
<PageContainer>
<Tabs onChange={handleChange} type="card" destroyInactiveTabPane activeKey={activeKey} >
<Tabs onChange={handleChange} type="card" destroyInactiveTabPane activeKey={activeKey}>
<TabPane tab="基础配置" key="1">
<BaseConfig />
</TabPane>
<TabPane tab="物联配置" key="2">
<IotConfig setActiveKey={setActiveKey}/>
<IotConfig setActiveKey={setActiveKey} />
</TabPane>
<TabPane tab="消息配置" key="3">
<MessageConfig />
......@@ -32,12 +32,12 @@ const HostManager = () => {
{/* <TabPane tab="代理配置" key="4">
<ProxyConfig />
</TabPane> */}
<TabPane tab="网关配置" key="5">
<GateConfig />
</TabPane>
<TabPane tab="中台配置" key="6">
<ETLConfig />
</TabPane>
<TabPane tab="网关配置" key="5">
<GateConfig />
</TabPane>
</Tabs>
</PageContainer>
);
......
......@@ -270,7 +270,8 @@ const HostManager = () => {
{item.Platform.PlatformStatus ? (
<CheckOutlined style={{ color: '#1890FF' }} />
) : (
<CloseOutlined style={{ color: '#e86060' }} />
''
// <CloseOutlined style={{ color: '#e86060' }} />
)}
</div>
</div>
......@@ -280,7 +281,8 @@ const HostManager = () => {
{item.SMS.SMSStatus ? (
<CheckOutlined style={{ color: '#1890FF' }} />
) : (
<CloseOutlined style={{ color: '#e86060' }} />
''
// <CloseOutlined style={{ color: '#e86060' }} />
)}
</div>
</div>
......@@ -290,7 +292,8 @@ const HostManager = () => {
{item.Wechat.WechatStatus ? (
<CheckOutlined style={{ color: '#1890FF' }} />
) : (
<CloseOutlined style={{ color: '#e86060' }} />
''
// <CloseOutlined style={{ color: '#e86060' }} />
)}
</div>
</div>
......@@ -300,7 +303,8 @@ const HostManager = () => {
{item.WorkWechat.WorkWechatStatus ? (
<CheckOutlined style={{ color: '#1890FF' }} />
) : (
<CloseOutlined style={{ color: '#e86060' }} />
''
// <CloseOutlined style={{ color: '#e86060' }} />
)}
</div>
</div>
......
......@@ -324,7 +324,7 @@ const EditUserModal = props => {
fontWeight: 700,
}}
>
重置密码
重置密码(选填)
</Divider>
<div className={styles.modalContent}>
<Form form={passwordForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
......
......@@ -490,7 +490,7 @@ export default {
],
},
{
path: '/data/dic',
path: '/dataDic',
name: '数据字典',
icon: <ReadOutlined style={iconStyle} />,
component: Dictionary,
......
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