428 lines
11 KiB
JavaScript
428 lines
11 KiB
JavaScript
import React from 'react';
|
|
import Header from '../../forge/Head/Header'
|
|
import NewFooter from '../../forge/Head/Footer';
|
|
import axios from 'axios';
|
|
import { Spin } from 'antd';
|
|
import './TPMIndex.css';
|
|
import LoginDialog from '../login/LoginDialog';
|
|
import EducoderAccount from '../../forge/Component/EducoderAccount';
|
|
import ProfileModal from '../../forge/Component/ProfileModal/Index';
|
|
import SupplyPhoneModal from '../../forge/Component/ProfileModal/SupplyPhone';
|
|
import SystemNotice from '../../forge/Component/NoticeModal/SystemNotice';
|
|
import cookie from 'react-cookies';
|
|
import NpsModal from '../modals/npsModal';
|
|
import { IsPC } from 'educoder';
|
|
import { getOrzCompanyList } from '../../forge/Information/api';
|
|
|
|
|
|
const items = [
|
|
{
|
|
name: '工作台',
|
|
icon: 'gongzuotaiicon',
|
|
path: '/'
|
|
},
|
|
{
|
|
name: '产品',
|
|
icon: 'chanpinicon',
|
|
path: '/products'
|
|
},
|
|
{
|
|
name: '项目',
|
|
icon: 'xiangmuicon',
|
|
path: '/projects'
|
|
},
|
|
{
|
|
name: '代码库',
|
|
icon: 'xuanzhong-daimakuicon',
|
|
path: '/codes'
|
|
},
|
|
{
|
|
name: '流水线',
|
|
icon: 'liushuixianicon',
|
|
path: '/pipeline'
|
|
},
|
|
{
|
|
name: '制品库',
|
|
icon: 'zhipinkuicon',
|
|
path: '/repositories'
|
|
},
|
|
{
|
|
name: '知识库',
|
|
icon: 'wendangicon',
|
|
path: '/docs'
|
|
},
|
|
{
|
|
name: '成员',
|
|
icon: 'chengyuanicon',
|
|
path: '/members'
|
|
},
|
|
{
|
|
name: '设置',
|
|
icon: 'shezhiicon',
|
|
path: '/admin'
|
|
}
|
|
]
|
|
|
|
export function TPMIndexHOC(WrappedComponent) {
|
|
return class II extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
window.$('#root').css('position', 'relative');
|
|
|
|
this.state = {
|
|
tpmLoading: true,
|
|
resLoading: true,
|
|
Headertop: undefined,
|
|
isRender: false,
|
|
globalLoading: false,
|
|
dataquerys: {},
|
|
isloginCancel: undefined,
|
|
mygetHelmetapi: null,
|
|
giteaVisible:false,
|
|
email:undefined,
|
|
completeProfile:false,
|
|
supplyPhone:false,
|
|
showCP:false,
|
|
showNotice:true,
|
|
gopage: undefined,
|
|
npsModalVisible: false,
|
|
npsActionType: undefined,
|
|
npsActionId: undefined,
|
|
active:"",
|
|
companyList:undefined
|
|
}
|
|
}
|
|
|
|
// header里面需要有user
|
|
initCommonState(user) {
|
|
// 更新头像后，需要改变参数，不然会被图片缓存影响到 --> 后台已加 ?t=${new Date().getTime()
|
|
const newUser = Object.assign({}, { ...user }, { image_url: `${user.image_url}` });
|
|
this.setState({
|
|
user: newUser,
|
|
current_user: newUser
|
|
})
|
|
}
|
|
|
|
|
|
keyupListener = (e) => {
|
|
if (e.key === "Escape") {
|
|
this.setState({ globalLoading: false })
|
|
}
|
|
}
|
|
componentWillUnmount() {
|
|
window.removeEventListener('keyup', this.keyupListener)
|
|
}
|
|
componentWillMount() {
|
|
this.fetchUsers();
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener('keyup', this.keyupListener)
|
|
|
|
if (this.props.match.path === "/") {
|
|
// document.title="创新源于实践";
|
|
} else if (this.props.match.path === "/403") {
|
|
document.title = "你没有权限访问";
|
|
} else if (this.props.match.path === "/nopage") {
|
|
document.title = "没有找到该页面";
|
|
}
|
|
///请求定制化的信息
|
|
this.getAppdata();
|
|
this.getComlist();
|
|
}
|
|
getComlist=()=>{
|
|
console.log(this.props.history.location);
|
|
getOrzCompanyList().then(res=>{
|
|
console.log(res);
|
|
this.setState({
|
|
companyList:res.data.rows
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
//获取数据为空的时候
|
|
gettablogourlnull = () => {
|
|
this.setState({
|
|
mygetHelmetapi: undefined
|
|
});
|
|
var link = document.createElement('link'),
|
|
oldLink = document.getElementById('dynamic-favicon');
|
|
link.id = 'dynamic-favicon';
|
|
link.rel = 'shortcut icon';
|
|
link.href = "/react/build/./favicon.ico";
|
|
if (oldLink) {
|
|
document.head.removeChild(oldLink);
|
|
}
|
|
document.head.appendChild(link);
|
|
};
|
|
|
|
//获取数据的时候
|
|
gettablogourldata = (response) => {
|
|
var link = document.createElement('link'),
|
|
oldLink = document.getElementById('dynamic-favicon');
|
|
link.id = 'dynamic-favicon';
|
|
link.rel = 'shortcut icon';
|
|
link.href = '/' + response.data.setting.tab_logo_url;
|
|
if (oldLink) {
|
|
document.head.removeChild(oldLink);
|
|
}
|
|
document.head.appendChild(link);
|
|
}
|
|
//获取当前定制信息
|
|
getAppdata = () => {
|
|
try {
|
|
var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting'));
|
|
var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse'));
|
|
this.setState({
|
|
mygetHelmetapi: chromesettingArray
|
|
});
|
|
if (chromesettingArray.tab_logo_url) {
|
|
this.gettablogourldata(chromesettingresponseArray);
|
|
} else {
|
|
this.gettablogourlnull();
|
|
}
|
|
} catch (e) {
|
|
console.log("hoc获取游览器配置失败 重新请求开始读取配置");
|
|
this.getAppdatausr();
|
|
}
|
|
};
|
|
getAppdatausr = () => {
|
|
let url = "/setting.json";
|
|
axios.get(url).then((response) => {
|
|
if (response) {
|
|
if (response.data) {
|
|
this.setState({
|
|
mygetHelmetapi: response.data.setting
|
|
});
|
|
localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
|
|
localStorage.setItem('chromesettingresponse', JSON.stringify(response));
|
|
try {
|
|
if (response.data.setting.tab_logo_url) {
|
|
this.gettablogourldata(response);
|
|
} else {
|
|
this.gettablogourlnull();
|
|
}
|
|
} catch (e) {
|
|
this.gettablogourlnull();
|
|
}
|
|
} else {
|
|
this.gettablogourlnull();
|
|
}
|
|
} else {
|
|
this.gettablogourlnull();
|
|
}
|
|
}).catch((error) => {
|
|
this.gettablogourlnull();
|
|
});
|
|
}
|
|
|
|
fetchUsers = () => {
|
|
if (this.props.match.path === "/") {
|
|
this.setState({
|
|
publicNav:true
|
|
})
|
|
}else{
|
|
this.setState({
|
|
publicNav:false
|
|
})
|
|
}
|
|
let url = `/users/get_user_info.json`;
|
|
axios.get(url).then((response) => {
|
|
if (response && response.data) {
|
|
this.initCommonState(response.data)
|
|
this.setState({
|
|
tpmLoading: false,
|
|
completeProfile:response.data.profile_completed
|
|
})
|
|
if(response.data.login){
|
|
if(response.data.need_edit_info){
|
|
this.setState({
|
|
giteaVisible:true,
|
|
email:response.data.email
|
|
})
|
|
}
|
|
// 如果处于登录状态，且刚刚打开，那么跳到个人主页
|
|
// let hrefStr = this.props.match.path === "/login" || this.props.match.path === "/register" || this.props.match.path === "/resetPassword";
|
|
// console.log("111:",hrefStr,this.props.match.path);
|
|
if(this.props.match.path === "/"){
|
|
this.props.history.push(`/${response.data.login}`)
|
|
}
|
|
if(!response.data.phone){
|
|
var supplyCookie = cookie.load('supplyphone');
|
|
this.setState({
|
|
supplyPhone:supplyCookie || false
|
|
})
|
|
}
|
|
}else{
|
|
cookie.remove("login");
|
|
this.props.history.push(`/login`);
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
})
|
|
};
|
|
hideLoginDialog = () => {
|
|
this.setState({
|
|
isRender: false,
|
|
isloginCancel: undefined
|
|
})
|
|
}
|
|
|
|
showLoginDialog = (gopage) => {
|
|
this.setState({
|
|
isRender: true,
|
|
isloginCancel: "iscancel",
|
|
gopage: gopage,
|
|
})
|
|
}
|
|
//验证登录是否成功方法
|
|
checkIfLogin = () => {
|
|
return this.state.current_user && this.state.current_user.login != ''
|
|
}
|
|
|
|
onOk =(values)=>{
|
|
let url = `/users/sync_user_info.json`;
|
|
const { current_user } = this.state;
|
|
axios.post(url,{
|
|
login:current_user && current_user.login,
|
|
...values
|
|
}).then(result=>{
|
|
if(result && result.data && result.data.status === 0){
|
|
this.setState({
|
|
giteaVisible:false,
|
|
email:undefined
|
|
})
|
|
window.location.reload();
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
hideSystemNotice=()=>{
|
|
this.setState({
|
|
showNotice:false
|
|
})
|
|
this.getAppdatausr();
|
|
}
|
|
|
|
showCompeleteDialog=()=>{
|
|
this.setState({
|
|
showCP:true
|
|
})
|
|
}
|
|
|
|
showNpsModal = (type, index)=>{
|
|
this.setState({
|
|
npsActionType:type,
|
|
npsActionId: index
|
|
})
|
|
const {current_user} = this.state;
|
|
current_user && current_user.nps && setTimeout(() => {
|
|
this.setState({npsModalVisible: true})
|
|
}, 500)
|
|
}
|
|
|
|
closeNpsModal(){
|
|
axios.post(`/nps.json`,{
|
|
action_type: 'close',
|
|
action_id: 1,
|
|
score: 0,
|
|
memo:''
|
|
}).then((response) => {
|
|
if (response.data) {
|
|
// 关闭nps弹框之后需要重新请求一次get_user_info更新用户信息
|
|
this.fetchUsers();
|
|
this.setState({
|
|
npsModalVisible: false
|
|
})
|
|
}
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
activeOrSelected=(item)=>{
|
|
const {active} = this.state;
|
|
if(item.icon==="xuanzhong-daimakuicon"){
|
|
return false
|
|
}
|
|
if (active === item.icon) {
|
|
return true
|
|
}
|
|
}
|
|
render() {
|
|
let { isRender , current_user , giteaVisible , email ,
|
|
completeProfile , showCP , showNotice , publicNav , mygetHelmetapi,
|
|
npsModalVisible, npsActionType, npsActionId , supplyPhone , companyList } = this.state;
|
|
const common = {
|
|
showLoginDialog: this.showLoginDialog,
|
|
checkIfLogin: this.checkIfLogin,
|
|
resetUserInfo:this.fetchUsers,
|
|
showCompeleteDialog:this.showCompeleteDialog,
|
|
showNpsModal: this.showNpsModal
|
|
};
|
|
let path =this.props.location.pathname;
|
|
let pathCheck = path.indexOf("/zone")>-1 && path.indexOf("/newdetail")>-1 && IsPC();
|
|
return (
|
|
<div className="indexHOC">
|
|
<SystemNotice
|
|
showNotice={showNotice}
|
|
system_notification={mygetHelmetapi && mygetHelmetapi.system_notification}
|
|
history={this.props.history}
|
|
login={current_user && current_user.login}
|
|
hideSystemNotice={this.hideSystemNotice}
|
|
/>
|
|
<EducoderAccount visible={giteaVisible} email={email} onOk={this.onOk}/>
|
|
<ProfileModal
|
|
visible={!completeProfile && showCP}
|
|
onCancel={()=>{this.setState({showCP:false})}}
|
|
history={this.props.history}
|
|
/>
|
|
<SupplyPhoneModal visible={supplyPhone}/>
|
|
{isRender === true ? <LoginDialog
|
|
Modifyloginvalue={() => this.hideLoginDialog()}
|
|
{...this.props}
|
|
{...this.state}
|
|
/> : ""}
|
|
{npsModalVisible && <NpsModal closeNpsModal={()=>{this.closeNpsModal()}} npsActionType={npsActionType} npsActionId={npsActionId}/>}
|
|
{ !pathCheck && <Header {...this.state} {...this.props} {...common} publicNav={publicNav}></Header> }
|
|
{!publicNav && <div style={{height:"7vh"}}></div> }
|
|
<div className="flexTop">
|
|
{ !(path === `/${current_user && current_user.login}` || path === `/settings/profile`) &&
|
|
<ul className="navBox">
|
|
{
|
|
items.map((item, index) => {
|
|
return <a
|
|
className={`nav columnAlignCenter title1ColorSpan ${index===3? "active" :""}`}
|
|
href={ `https://testpm.trustie.net/${ (companyList && companyList.length>0) &&companyList[0].enterpriseIdentifier}${item.path }` }
|
|
onMouseOver={() => this.setState({active:item.icon}) }
|
|
onMouseLeave={() => this.setState({active:""}) }
|
|
key={ index }
|
|
>
|
|
<i className={`font-20 iconfontColor iconcolor-${this.activeOrSelected(item) ? 'xuanzhong-' : ''}${ item.icon }`}></i>
|
|
<span className="mt3 font-16">{ item.name }</span>
|
|
</a>
|
|
})
|
|
}
|
|
</ul>
|
|
}
|
|
<div className="panelMain">
|
|
<div className="newContainer newContainers">
|
|
{
|
|
current_user &&
|
|
<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
|
|
{...this.props} {...this.state} {...common} >
|
|
</WrappedComponent>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* {!pathCheck && <NewFooter {...this.state} {...this.props} /> } */}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|