114 lines
5.1 KiB
JavaScript
114 lines
5.1 KiB
JavaScript
|
|
import { inject, observer} from 'mobx-react';
|
|
import {Row,Col,Input,Button,Alert,Spin,Icon} from 'antd'
|
|
import {WeaTop} from "ecCom"
|
|
|
|
import MLinkCard from './MLinkCard';
|
|
import OLinkCard from './OLinkCard';
|
|
|
|
import AddProject from '../dialog/addProjectDialog'
|
|
import {WeaLocaleProvider} from 'ecCom';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
@inject('prjAddStore')
|
|
@observer
|
|
class PrjAdd extends React.Component {
|
|
|
|
componentDidMount() {
|
|
const {prjAddStore} = this.props;
|
|
prjAddStore.initDatas();
|
|
this.scrollheigth();
|
|
}
|
|
scrollheigth(){
|
|
let top = jQuery(".wea-prj-add-content").offset() ? (jQuery(".wea-prj-add-content").offset().top ? jQuery(".wea-prj-add-content").offset().top : 0) : 0;
|
|
let scrollheigth = document.documentElement.clientHeight - top;
|
|
jQuery(".wea-prj-add-content").height(scrollheigth-30);
|
|
}
|
|
componentWillReceiveProps(nextProps){
|
|
const keyOld = this.props.location.key;
|
|
const keyNew = nextProps.location.key;
|
|
if(keyOld !== keyNew) {
|
|
const {prjAddStore} = nextProps;
|
|
prjAddStore.initDatas();
|
|
this.scrollheigth();
|
|
}
|
|
}
|
|
componentWillUnmount(){
|
|
const { prjAddStore } = this.props;
|
|
prjAddStore.clearStatus();
|
|
}
|
|
|
|
render() {
|
|
const {prjAddStore} = this.props;
|
|
const {showDatas = {},mulitcol,isAbc,loading,addProjectStore} = prjAddStore;
|
|
const {typesShow,typesCols,usedBeans,abcBtns,user} = showDatas;
|
|
const actions = {addProjectStore};
|
|
return (
|
|
<div className="prj-create-main">
|
|
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@10mktg`}
|
|
loading={loading}
|
|
icon={<i className='icon-coms-project' />}
|
|
iconBgcolor='#217346'
|
|
title={getLabel(15007,"新建项目")}
|
|
buttons={this.getButtons()}
|
|
showDropIcon={false}/>
|
|
<div className="wea-prj-add-content">
|
|
{isAbc && (
|
|
<div className="abcbtn-group">
|
|
{
|
|
abcBtns.map(abcBtn => <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kn6gus@${abcBtn.letter}`} className={abcBtn.selected ? 'btn-selected' : ''} type='ghost' key={abcBtn.letter}
|
|
disabled={abcBtn.disabled} onClick={this.goABC.bind(this,abcBtn.letter)}>{abcBtn.letter}</Button>)
|
|
}
|
|
</div>)
|
|
}
|
|
{
|
|
typesShow.length == 0 && !loading ? <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@pekk6s`} message={getLabel(558,"提示")} description={getLabel(508226,"没有项目类型或无创建权限!")} type="info" showIcon /> :(
|
|
mulitcol ?
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@au5g4v`}>
|
|
{typesCols.map((c,i)=>{
|
|
return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gxvbxx@${i}`} span={24 / typesCols.length} style={{padding:'0 10px'}}>
|
|
<MLinkCard ecId={`${this && this.props && this.props.ecId || ''}_MLinkCard@ezb42p@${i}`} types={c} user={user} mulitcol={mulitcol} isAbc={isAbc} actions={actions}/>
|
|
</Col>
|
|
})}
|
|
</Row>
|
|
:
|
|
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2f03su`}>
|
|
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@052py5`} span="24" style={{paddingLeft:10,paddingRight:10}}>
|
|
<OLinkCard ecId={`${this && this.props && this.props.ecId || ''}_OLinkCard@m0ckgg`} user={user} types={typesShow} mulitcol={mulitcol} isAbc={isAbc} actions={actions}/>
|
|
</Col>
|
|
</Row>)
|
|
}
|
|
</div>
|
|
<AddProject ecId={`${this && this.props && this.props.ecId || ''}_AddProject@myvuh3`} contentStore={prjAddStore} isreflesh={false} />
|
|
</div>
|
|
);
|
|
}
|
|
getButtons(){
|
|
const {prjAddStore} = this.props;
|
|
const {isAbc,mulitcol} = prjAddStore;
|
|
return [
|
|
<i className={"icon-button icon-New-Flow-Letter" + (isAbc ? ' wea-new-top-btn-clicked' : '')} onClick={this.showABC.bind(this)}/>,
|
|
<i className={"icon-button icon-New-Flow-1" + (mulitcol ? ' wea-new-top-btn-clicked' : '')} onClick={this.showMulitcol.bind(this)}/>
|
|
]
|
|
}
|
|
goABC(letter){
|
|
const {prjAddStore} = this.props;
|
|
prjAddStore.setAbcSelected(letter);
|
|
let topheight = jQuery('#'+letter).position().top;
|
|
jQuery(".wea-prj-add-content").scrollTop(topheight);
|
|
}
|
|
showMulitcol(){
|
|
const {prjAddStore} = this.props;
|
|
const mulitcol = prjAddStore.mulitcol;
|
|
prjAddStore.setMulitcol(!mulitcol);
|
|
jQuery(".wea-wf-add-content").scrollTop(0);
|
|
}
|
|
showABC(){
|
|
const {prjAddStore} = this.props;
|
|
const {isAbc} = prjAddStore;
|
|
prjAddStore.setIsAbc(!isAbc);
|
|
jQuery(".wea-wf-add-content").scrollTop(0);
|
|
}
|
|
}
|
|
|
|
export default PrjAdd |