You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
270 lines
14 KiB
270 lines
14 KiB
"use strict";
|
|
import React, { useEffect, useState } from 'react'
|
|
import { connect, createStore } from "react-redux";
|
|
import Immutable from 'immutable';
|
|
import { pepProject } from '../../actions/global';
|
|
import { SplitButtonGroup, Dropdown, Button, Nav, Avatar, Input, Tooltip, Tabs, TabPane } from '@douyinfe/semi-ui';
|
|
import { IconTreeTriangleDown, IconSearch } from '@douyinfe/semi-icons';
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
import "./index.less";
|
|
|
|
let newScrollbar;
|
|
const Header = (props) => {
|
|
const { dispatch, history, user, actions, socket, headerItems, tochange } = props;
|
|
const { install } = actions
|
|
const [pomsList, setPomsList] = useState([])
|
|
const [pomsName, setPomsName] = useState('全局')
|
|
const [pepProjectId, setPepProjectId] = useState()
|
|
const [keyword, setKeyword] = useState('')
|
|
const [Scrollbar, setScrollbar] = useState(false)
|
|
let userRole = user?.pomsUserInfo?.role
|
|
let modalRole = []
|
|
if (userRole) {
|
|
let modal = []
|
|
userRole?.map(v => {
|
|
if (v == 'data_analyst') ['analysis', 'data', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'after_sale') ['problem', 'facility', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'resource_manage') ['facility', 'workOrder', 'means'].map(u => modal.push(u))
|
|
if (v == 'customer_service') ['service', 'workOrder', 'means'].map(u => modal.push(u))
|
|
})
|
|
modal.push('control')
|
|
modal = [...new Set(modal)]
|
|
modalRole = headerItems?.filter(v => modal.includes(v.itemKey))
|
|
if (userRole?.includes('SuperAdmin') || userRole?.includes('admin')) modalRole = headerItems
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (JSON.parse(sessionStorage.getItem('pomsUser'))?.token) {
|
|
dispatch(install.getProjectPoms({ global: 1 })).then((res) => { //获取已绑定项目
|
|
if (res.success) {
|
|
let data = res.payload.data?.rows?.filter(v => v.pepProjectIsDelete !== 1)?.map(v => ({ pepProjectId: v.id, pepProjectName: v.pepProjectName || v.name }))
|
|
setPomsList(data)
|
|
}
|
|
})
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const domProject = document.getElementById("overall");
|
|
if (domProject) {
|
|
newScrollbar = new PerfectScrollbar("#overall", {
|
|
suppressScrollX: true,
|
|
});
|
|
if (domProject && newScrollbar) {
|
|
newScrollbar.update();
|
|
}
|
|
}
|
|
}, [Scrollbar])
|
|
|
|
useEffect(() => {
|
|
dispatch(pepProject(pepProjectId))
|
|
}, [pepProjectId])
|
|
|
|
|
|
return (
|
|
<>
|
|
<div id="top-slider">
|
|
<Nav
|
|
mode={"horizontal"}
|
|
onClick={({ itemKey }) => {
|
|
if (itemKey == "logout") {
|
|
dispatch(actions.auth.logout(user));
|
|
if (socket) {
|
|
socket.disconnect();
|
|
}
|
|
history.push(`/signin`);
|
|
}
|
|
}}
|
|
style={{
|
|
height: 48,
|
|
minWidth: 520,
|
|
background: '#1D2343',
|
|
backgroundSize: "100% 100%",
|
|
color: "white",
|
|
}}
|
|
header={{
|
|
logo: (
|
|
<img
|
|
src="/assets/images/install/long_logo.png"
|
|
style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24 }}
|
|
/>
|
|
),
|
|
text: (
|
|
<>
|
|
<SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组">
|
|
<Dropdown
|
|
onVisibleChange={(v) => {
|
|
setScrollbar(!Scrollbar)
|
|
setKeyword('')
|
|
}}
|
|
clickToHide={true}
|
|
render={
|
|
<Dropdown.Menu style={{ minWidth: 270, maxWidth: 714, padding: 20, fontSize: 12 }}>
|
|
<Tabs type="button">
|
|
<TabPane tab="项目" itemKey="项目">
|
|
<div style={{ width: '100%', height: 1, background: "#d5cfcf8c", margin: "10px 0" }}></div>
|
|
<Input suffix={<IconSearch />} onChange={(v) => setKeyword(v)} showClear onClick={(e)=>e.stopPropagation()}></Input>
|
|
<div id='overall' style={{ width: '100%', height: 260, position: "relative", marginTop: 10 }}>
|
|
{pomsList?.length > 0 ?
|
|
pomsList.filter(u => u.pepProjectName?.includes(keyword))?.map(v => {
|
|
return <Dropdown.Item
|
|
key={'pomsList' + v.pepProjectId}
|
|
style={{ width: 224, overflow: 'hidden', borderBottom: '', display: "inline-block", whiteSpace: 'nowrap', color: 'rgb(0, 90, 189)' }}>
|
|
|
|
{
|
|
v.pepProjectName?.length > 15 ? <Tooltip content={<div>{v.pepProjectName}</div>}>
|
|
<div style={{}} >
|
|
<div onClick={() => {
|
|
setPomsName(v.pepProjectName)
|
|
setPepProjectId(v.pepProjectId)
|
|
}}>
|
|
{v.pepProjectName?.length > 15 ? `${v.pepProjectName?.substr(0, 15)}` : v.pepProjectName}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
: <div onClick={() => {
|
|
setPomsName(v.pepProjectName)
|
|
setPepProjectId(v.pepProjectId)
|
|
}}>{v.pepProjectName}</div>
|
|
}
|
|
</Dropdown.Item>
|
|
}) : ""
|
|
}
|
|
</div>
|
|
</TabPane>
|
|
<TabPane tab={<div onClick={() => {
|
|
setPomsName('全局')
|
|
setPepProjectId('')
|
|
}}>全局</div>} itemKey="全局">
|
|
</TabPane>
|
|
</Tabs>
|
|
</Dropdown.Menu>
|
|
} trigger="click" position="bottomRight">
|
|
<Button theme="solid" type="primary" style={{ height: 24, background: '#005ABD' }}>{
|
|
pomsName.length > 15 ? <Tooltip content={<div>{pomsName}</div>}>
|
|
<div style={{}}>
|
|
{pomsName.length > 15 ? `${pomsName.substr(0, 15)}...` : pomsName}
|
|
</div>
|
|
</Tooltip> : pomsName
|
|
}</Button>
|
|
<Button style={{ width: 16, height: 24, background: '#005ABD' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
|
|
</Dropdown>
|
|
</SplitButtonGroup>
|
|
</>
|
|
),
|
|
}}
|
|
footer={
|
|
<>
|
|
{modalRole.length > 0 ? modalRole.map((item, index) => {
|
|
if (item.hasOwnProperty('items')) {
|
|
return (
|
|
<Nav.Sub
|
|
key={index + 'a'}
|
|
itemKey={item.itemKey}
|
|
text={item.text}
|
|
dropdownStyle={{ color: '#F2F3F5' }}
|
|
>
|
|
{item.hasOwnProperty('items') && item.items.map((ite, idx) => (
|
|
<Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} />
|
|
))}
|
|
</Nav.Sub>
|
|
)
|
|
}
|
|
else {
|
|
return (
|
|
<div key='console' style={{ display: 'inline-flex' }}>
|
|
<img src="/assets/images/background/console.png" style={{ width: 24, marginRight: -10 }} />
|
|
<Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} />
|
|
</div>
|
|
|
|
)
|
|
}
|
|
}) : ""}
|
|
<Nav.Sub
|
|
itemKey={"user"}
|
|
text={
|
|
<div
|
|
style={{
|
|
marginLeft: -8,
|
|
display: "inline-block",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
|
|
{user?.name?.substr(0, 1)}
|
|
</Avatar>
|
|
<div style={{
|
|
display: "inline-block", position: "relative",
|
|
top: 10,
|
|
left: 4,
|
|
marginRight: 4,
|
|
}}
|
|
>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div style={{ width: 133, }}>
|
|
<div style={{ display: "flex", alignItems: 'center', background: '#F0F5FF', padding: '8px 0px 8px 12px' }}>
|
|
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}>
|
|
{user?.name?.substr(0, 1)}
|
|
</Avatar>
|
|
<div style={{ fontSize: 12, color: '#4A4A4A' }}>
|
|
{user.name}
|
|
<div title={user?.department?.map(v => v.name + '、')} style={{ width: 60, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', color: '#969799', fontSize: 12 }}>{user?.department?.map(v => v.name + '、')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}
|
|
onClick={() => {
|
|
history.push(`/userCenter`);
|
|
}}>
|
|
<div style={{ width: 15, height: 15, marginLeft: 20 }}>
|
|
<img src="/assets/images/console/yonghu.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
|
|
用户中心
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', height: 30, borderBottom: '1px solid #F2F3F5', cursor: "pointer" }}>
|
|
<div style={{ width: 15, height: 15, marginLeft: 20 }}>
|
|
<img src="/assets/images/console/suo.png" alt="" style={{ width: '100%', height: '100%' }} />
|
|
</div>
|
|
<div style={{ color: '#646566', fontSize: 12, marginLeft: 9 }}>
|
|
安全认证
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 27, color: '#646566', fontSize: 12, cursor: "pointer" }}
|
|
onClick={() => {
|
|
dispatch(actions.auth.logout(user));
|
|
if (socket) {
|
|
socket.disconnect();
|
|
}
|
|
history.push(`/signin`);
|
|
}}>
|
|
退出
|
|
{/* <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> */}
|
|
</div>
|
|
|
|
{/* collapseButton collapseText */}
|
|
|
|
|
|
</Nav.Sub>
|
|
</>
|
|
}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps (state) {
|
|
const { global, auth, webSocket } = state;
|
|
return {
|
|
actions: global.actions,
|
|
user: auth.user,
|
|
socket: webSocket.socket,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header);
|
|
|