204 lines
9.4 KiB
JavaScript
204 lines
9.4 KiB
JavaScript
import { WeaTools, WeaTab, WeaInput, WeaSelect } from 'ecCom';
|
||
import React, { Component } from 'react';
|
||
import loadjs from 'loadjs';
|
||
import { inject, observer } from 'mobx-react';
|
||
import "./style/board.less";
|
||
import Column from './Column';
|
||
import { Icon, message, Button, Select} from 'antd';
|
||
import { MouseWheelFun } from './util/compatible';
|
||
import { WeaLocaleProvider } from 'ecCom';
|
||
import { toJS } from 'mobx';
|
||
import { Condition } from "../list/listCondition"
|
||
const ButtonGroup = Button.Group;
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
const Option = Select.Option;
|
||
@inject("projectBoardStore")
|
||
@observer
|
||
class BoardApp extends Component {
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
|
||
}
|
||
const { projectBoardStore } = props;
|
||
window.onresize = () => {
|
||
projectBoardStore.windowHeight = window.innerHeight;
|
||
projectBoardStore.windowWidth = window.innerWidth;
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
const { projectBoardStore } = this.props;
|
||
let jsFiles = [];
|
||
if (!WeaTools.isBelowIE9()) {
|
||
jsFiles.push('/proj/e9resource/boardjs/web-animations.min.js');
|
||
}
|
||
jsFiles = [...jsFiles, '/proj/e9resource/boardjs/hammer.min.js', '/proj/e9resource/boardjs/muuri.js'];
|
||
if (!loadjs.isDefined('boardjs')) {
|
||
loadjs(jsFiles, 'boardjs', {
|
||
success: () => {
|
||
projectBoardStore.getKanbanView();
|
||
}
|
||
});
|
||
} else {
|
||
projectBoardStore.getKanbanView();
|
||
}
|
||
MouseWheelFun('prj_board_container', 'prj_board');
|
||
|
||
}
|
||
|
||
componentWillReceiveProps (nextProps) {
|
||
const { projectBoardStore } = nextProps;
|
||
let jsFiles = [];
|
||
if (!WeaTools.isBelowIE9()) {
|
||
jsFiles.push('/proj/e9resource/boardjs/web-animations.min.js');
|
||
}
|
||
jsFiles = [...jsFiles, '/proj/e9resource/boardjs/hammer.min.js', '/proj/e9resource/boardjs/muuri.js'];
|
||
if (!loadjs.isDefined('boardjs')) {
|
||
loadjs(jsFiles, 'boardjs', {
|
||
success: () => {
|
||
projectBoardStore.getKanbanView();
|
||
}
|
||
});
|
||
} else {
|
||
projectBoardStore.getKanbanView();
|
||
}
|
||
MouseWheelFun('prj_board_container', 'prj_board');
|
||
}
|
||
|
||
render() {
|
||
|
||
|
||
const { projectBoardStore } = this.props;
|
||
const { userid, usericons, username, delGrop, changeSearchType, searchType, columns, timestamp, canAddTask, canEditBoard, boardform, setShowSearchAd, showSearchAd, searchTypeOptions, searchKanBanView } = projectBoardStore;
|
||
|
||
return (
|
||
<div className={"prj_board"} >
|
||
<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@sd6q9c`}
|
||
searchType={['advanced']}
|
||
setShowSearchAd={bool => { setShowSearchAd(bool) }}
|
||
hideSearchAd={() => setShowSearchAd(false)}
|
||
searchsAd={
|
||
<div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@pg1a0a`} listStore={projectBoardStore} form={boardform} onEnterSearch={this.onEnterSearch} ></Condition></div>
|
||
}
|
||
showSearchAd={showSearchAd}
|
||
onChange={this.changeVision}
|
||
buttonsAd={this.getAdButtons()}
|
||
buttons={[<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@nydsx3`}
|
||
key={searchTypeOptions.length}
|
||
showSearch // 设置select可搜索
|
||
optionFilterProp="children" // 设置搜素option的内容，默认为value
|
||
style={{ width: 100,height: 28 }}
|
||
placeholder="维度"
|
||
options={searchTypeOptions}
|
||
value={searchType}
|
||
viewAttr={3}
|
||
onChange={v => {
|
||
changeSearchType(v);
|
||
}}
|
||
/>]}
|
||
/>
|
||
<section id='prj_board_container' className="prj_board_container">
|
||
<div id="prj_board" className="board muuri" style={{ 'height': (projectBoardStore.windowHeight - 250) + 'px' }}>
|
||
{columns.map(element => {
|
||
return <Column ecId={`${this && this.props && this.props.ecId || ''}_Column@6rvw4w`}
|
||
key={timestamp+""+element.id}
|
||
data={element}
|
||
boardStore={projectBoardStore}
|
||
groupid={element.id}
|
||
saveGroupName={(name, id) => { projectBoardStore.saveGroupName(name, id) }}
|
||
checkRepeat={(name, id) => { projectBoardStore.checkGroupRepeat(name, id) }}
|
||
saveTask={(params) => { projectBoardStore.saveTask(params) }}
|
||
delGrop={(id) => delGrop(id)}
|
||
canAddTask={canAddTask}
|
||
userInfo={{
|
||
userid: userid,
|
||
username: username,
|
||
usericons: usericons
|
||
}}
|
||
/>
|
||
})}
|
||
|
||
{searchType=="stageid"&&<div style={{ display: canEditBoard ? 'inline-block' : "none" ,width:"300px"}} >
|
||
<div className="addNewStage" onClick={this.handleAdd} style={{ display: this.state.visible ? "none" : "" }} >
|
||
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@6t3qm6`} type="plus" />{getLabel('387718', "新建阶段")}
|
||
</div>
|
||
<div className="kanban-group" style={{ display: this.state.visible ? "" : "none" }}>
|
||
<div className="kanban-group-head">
|
||
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@amuoos`}
|
||
// helpfulTip="测试"
|
||
ref="groupNameInput"
|
||
autofocus="autofocus"
|
||
style={{ top: '9px' }}
|
||
id='test'
|
||
placeholder={getLabel('387717', "填写阶段名称")}
|
||
value={this.state.groupName}
|
||
onChange={value => {
|
||
this.setState({ groupName: value })
|
||
}}
|
||
onBlur={value => {
|
||
this.handleAdd(value);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>}
|
||
{/* {projectBoardStore.hasRight&&<ColumnAdd sureFun={projectBoardStore.addColumn}></ColumnAdd>} */}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)
|
||
|
||
}
|
||
|
||
handleAdd = (value) => {
|
||
const input = this.refs.groupNameInput.refs.inputNormal.refs.input.refs.input;
|
||
if (value!=="" && this.state.visible) {
|
||
if (this.checkGroupRepeat(value)) {
|
||
this.props.projectBoardStore.saveGroup(value);
|
||
this.setState({ visible: !this.state.visible, groupName: "" });
|
||
} else {
|
||
message.error(getLabel('387703', "阶段名称重复！"));
|
||
}
|
||
}else if(value == "" && this.state.visible ){
|
||
this.setState({ visible: !this.state.visible, groupName: "" });
|
||
}else if (!this.state.visible) {
|
||
input.focus();
|
||
input.setSelectionRange(0, input.value.length);
|
||
this.setState({ visible: !this.state.visible, groupName: "" });
|
||
}
|
||
}
|
||
|
||
checkGroupRepeat = (name) => {
|
||
const { projectBoardStore: { columns } } = this.props;
|
||
let checked = true;
|
||
const stages = toJS(columns);
|
||
stages.map(item => {
|
||
if (item.title == name) {
|
||
checked = false;
|
||
}
|
||
});
|
||
return checked;
|
||
}
|
||
|
||
getAdButtons = () => {
|
||
const { projectBoardStore } = this.props;
|
||
const { searchKanBanView, setShowSearchAd, clearFormFields } = projectBoardStore;
|
||
return [
|
||
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8qbbx5@search`} type="primary" onClick={() => { searchKanBanView(false); setShowSearchAd(false); }}>{getLabel(197,"搜索")}</Button>),
|
||
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mo6x0h@reset`} type="ghost" onClick={() => { clearFormFields(); }}>{getLabel(2022,"重置")}</Button>),
|
||
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s907um@cancel`} type="ghost" onClick={() => { setShowSearchAd(false) }}>{getLabel(201,"取消")}</Button>)
|
||
];
|
||
}
|
||
|
||
onEnterSearch=() =>{
|
||
const { projectBoardStore } = this.props;
|
||
projectBoardStore.searchKanBanView(false);
|
||
projectBoardStore.setShowSearchAd(false);
|
||
}
|
||
|
||
}
|
||
|
||
export default BoardApp; |