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;
|