526 lines
26 KiB
JavaScript
526 lines
26 KiB
JavaScript
import { toJS } from "mobx";
|
||
import * as React from 'react';
|
||
import { Input, Tooltip, message, Dropdown, Menu, Row, Col } from 'antd';
|
||
import { WeaInput, WeaBrowser, WeaDatePicker, WeaLocaleProvider, WeaError } from 'ecCom';
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
export default class KanbanGroup extends React.Component {
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
visible: false,
|
||
taskInfo: {
|
||
taskName: "",
|
||
hrmid: "",
|
||
startDate: this.getNowFormatDate(),
|
||
endDate: this.getNowFormatDate(),
|
||
hrmname: ""
|
||
},
|
||
userInfo: {
|
||
userid: "",
|
||
username: "",
|
||
usericons: ""
|
||
},
|
||
groupName: "",
|
||
baseGroupName:"",
|
||
editGroupNameVisible: false,
|
||
}
|
||
}
|
||
componentDidMount() {
|
||
if (this.head && this.body && this.footer) {
|
||
this.body.style.height = `${this.container.clientHeight - 20 - this.head.clientHeight - this.footer.clientHeight}px`
|
||
}
|
||
const { userInfo, title } = this.props;
|
||
this.setState({
|
||
taskInfo: {
|
||
taskName: "",
|
||
hrmid: userInfo.userid,
|
||
hrmname: userInfo.username,
|
||
startDate: this.getNowFormatDate(),
|
||
endDate: this.getNowFormatDate(),
|
||
},
|
||
userInfo: {
|
||
userid: userInfo.userid,
|
||
username: userInfo.username,
|
||
usericons: userInfo.usericons
|
||
},
|
||
groupName: title,
|
||
editGroupNameVisible: false,
|
||
});
|
||
|
||
}
|
||
|
||
componentWillMount() {
|
||
const { title } = this.props;
|
||
this.setState({
|
||
groupName: title,
|
||
baseGroupName : title,
|
||
editGroupNameVisible: false,
|
||
});
|
||
}
|
||
componentDidUpdate(prevProps, prevState) {
|
||
// if (this.head && this.body && this.footer) {
|
||
// debugger;
|
||
// this.body.style.height = `${this.container.clientHeight - 20 - this.head.clientHeight }px`
|
||
// }
|
||
}
|
||
componentWillUpdate(nextProps, nextState) {
|
||
|
||
}
|
||
componentWillReceiveProps(nextProps, nextState) {
|
||
|
||
if (this.props.groupid !== nextProps.groupid || this.props.userInfo !== nextProps.userInfo) {
|
||
const { userInfo, title } = nextProps;
|
||
this.setState({
|
||
taskInfo: {
|
||
taskName: "",
|
||
hrmid: userInfo.userid,
|
||
hrmname: userInfo.username,
|
||
startDate: this.getNowFormatDate(),
|
||
endDate: this.getNowFormatDate(),
|
||
},
|
||
userInfo: {
|
||
userid: userInfo.userid,
|
||
username: userInfo.username,
|
||
usericons: userInfo.usericons
|
||
},
|
||
groupName: title,
|
||
editGroupNameVisible: false,
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
checkGroupRepeat = (name, id) => {
|
||
let checked = true;
|
||
const stages = toJS(this.props.columns);
|
||
stages.map(item => {
|
||
if (item.id !== id && item.title == name) {
|
||
checked = false;
|
||
}
|
||
});
|
||
return checked;
|
||
}
|
||
|
||
editGropName = (visible) => {
|
||
if (!visible) {
|
||
if (!this.state.groupName) {
|
||
message.error("阶段名称必填！");
|
||
} else {
|
||
if(this.state.groupName !== this.state.baseGroupName){
|
||
const repeat = this.checkGroupRepeat(this.state.groupName, this.props.groupid);
|
||
if (repeat) {
|
||
this.props.saveGroupName(this.state.groupName, this.props.groupid);
|
||
this.setState({ editGroupNameVisible: visible });
|
||
} else {
|
||
message.error(getLabel('387703',"阶段名称重复！"));
|
||
}
|
||
}else{
|
||
this.setState({ editGroupNameVisible: visible });
|
||
}
|
||
}
|
||
} else {
|
||
this.setState({ editGroupNameVisible: visible });
|
||
}
|
||
|
||
}
|
||
render() {
|
||
const { title, extra, value, canEditBoard, canAddTask } = this.props;
|
||
let taskName = "";
|
||
const menu = (
|
||
<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@fct2wf`}>
|
||
<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@00fd8z`} key="0">
|
||
<span onClick={() => this.editGropName(true)}>{getLabel('387705', "修改阶段名称")}</span>
|
||
</Menu.Item>
|
||
<Menu.Divider ecId={`${this && this.props && this.props.ecId || ''}_MenuDivider@s8js2p`} />
|
||
<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@9ddzgn`} key="1">
|
||
<span onClick={() => this.props.delGrop(this.props.groupid)}>{getLabel('387706', "删除阶段")}</span>
|
||
</Menu.Item>
|
||
</Menu>
|
||
);
|
||
return (
|
||
<div data-value={value} className="kanban-group" ref={ref => this.container = ref} onClick={()=>{this.editGropName(false)}}>
|
||
<div ref={ref => this.head = ref} className="kanban-group-head" onMouseDown={this.handleHeadMouseDown}>
|
||
<div className="kanban-group-head-wrapper">
|
||
<div className="kanban-group-head-title" onClick={(e)=>{e.stopPropagation();this.editGropName(true)}}>
|
||
{!this.state.editGroupNameVisible && this.state.groupName}
|
||
{
|
||
this.state.editGroupNameVisible &&
|
||
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@t9x1dh`}
|
||
// helpfulTip="测试"
|
||
className="updateStageName"
|
||
autofocus="autofocus"
|
||
style={{ top: '6px' }}
|
||
value={this.state.groupName}
|
||
onChange={value => {
|
||
this.setState({ groupName: value })
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
<div className="kanban-group-head-extra" style={{ display: canEditBoard ? this.state.editGroupNameVisible ? "none" : "" : "none" }}>
|
||
<Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@azu1jz`} overlay={menu}>
|
||
<span className="icon-coms-List column-header-menu"></span>
|
||
</Dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div ref={ref => this.body = ref} className="kanban-group-body">
|
||
{React.Children.map(this.props.children, (child) => {
|
||
return React.cloneElement(child, { root: this.props.root, xScroller: this.props.scroller, yScroller: this.body });
|
||
})}
|
||
</div>
|
||
<div ref={ref => this.footer = ref} className="kanban-group-footer" >
|
||
<div style={{ display: canAddTask ? "" : "none",height: "100%" }} >
|
||
<div className="btnBottomNew" onClick={() => { this.showAddComs() }} >+{getLabel('84046', "新任务")}</div>
|
||
<div className="footer-card" style={{ display: !this.state.visible ? "none" : "" }}>
|
||
<div className="card-content">
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@26vqez`} style={{ lineHeight: "30px", padding: "6px 17px" }}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8q012z`} span={8}>
|
||
{getLabel('1352', "任务名称")}：
|
||
</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k215c4`} span={14}>
|
||
<div className={this.state.taskInfo.taskName ? "" : "required"} >
|
||
<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@4vd6an`} tipPosition='bottom'
|
||
ref='taskname'
|
||
error={getLabel('387696', "任务名称未填写！")}>
|
||
<Input ecId={`${this && this.props && this.props.ecId || ''}_Input@vk0k8g`}
|
||
// ref={"area_"+this.props.groupid}
|
||
ref={(input) => { this.textInput = input; }}
|
||
type="textarea"
|
||
// disabled={disabled}
|
||
autofocus="autofocus"
|
||
autosize={{ minRows: "1", maxRows: "1" }}
|
||
value={this.state.taskInfo.taskName}
|
||
id={"area_" + this.props.groupid}
|
||
onChange={(v) => this.setTaskValue("subject", v)}
|
||
// onBlur={()=>{ this.showAddComs() }}
|
||
placeholder={getLabel('1352', "任务名称")}
|
||
/>
|
||
</WeaError>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<div className="clearFix" />
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@iu08pe`} style={{ lineHeight: "30px", padding: "6px 17px", width:400 }}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cwpqjn`} span={8} style={{width:77.98}}>
|
||
{getLabel('2097', "负责人")}：
|
||
</Col>
|
||
<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@956ov5`} tipPosition='bottom'
|
||
ref='taskhrm'
|
||
error={getLabel('387699', "任务负责人未选择！")}
|
||
style={{width:"64%"}}
|
||
>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bu07ih`} span={14}>
|
||
<div className="kanban-group-manager managericons" >
|
||
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@r5r2c7`} placement="left" title={this.props.username}>
|
||
{/* <a href={'javaScript:openhrm(' + this.props.userid + ');'} onClick={e => window.pointerXY(e)} >
|
||
<img src={this.props.usericons} className="kanban-group-manager-img" />
|
||
</a> */}
|
||
<div className={this.state.taskInfo.hrmid ? "" : "required"} >
|
||
|
||
<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@he1goy`}
|
||
type={17}
|
||
// customized
|
||
key={this.state.taskInfo.hrmname}
|
||
replaceDatas={[{ id: this.state.taskInfo.hrmid, name: this.state.taskInfo.hrmname }]}
|
||
textDecoration={true}
|
||
isSingle={false}
|
||
onChange={(ids, names, datas) => this.setTaskValue("hrmid", { hrmid: ids, hrmname: names })}
|
||
>
|
||
{/* <Tooltip placement="bottom" title={this.state.taskInfo.hrmname == "" ? "请选择任务负责人" : this.state.taskInfo.hrmname}>
|
||
<img src={"/messager/images/icon_w_wev8.jpg"} className="kanban-group-manager-img" />
|
||
</Tooltip> */}
|
||
</WeaBrowser>
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
{/* <div style={{marginLeft:"50px"}}>{this.state.taskInfo.hrmname}</div> */}
|
||
</Col>
|
||
</WeaError>
|
||
</Row>
|
||
<div className="clearFix" />
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rfhdub`} style={{ lineHeight: "30px", padding: "6px 17px", width:400 }}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hz080a`} span={8} style={{width:77.98}}>
|
||
{getLabel('24979', "开始时间")}：
|
||
</Col>
|
||
<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@vr2xuh`} tipPosition='bottom'
|
||
ref='taskstart'
|
||
error={getLabel('387697', "任务开始时间未选择！")}
|
||
style={{width:"64%"}}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wrom2s`} span={14}>
|
||
<div className="content-landmark" >
|
||
{/* <WeaRangePicker
|
||
value={[this.state.taskInfo.startDate, this.state.taskInfo.endDate]}
|
||
onChange={v => this.setTaskValue("startendDate",v)}
|
||
/> */}
|
||
|
||
<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@mrvzs3`}
|
||
noInput
|
||
value={this.state.taskInfo.startDate}
|
||
onChange={v => this.setTaskValue("startDate", v)}
|
||
key={this.state.taskInfo.startDate}
|
||
/>
|
||
|
||
</div>
|
||
</Col>
|
||
</WeaError>
|
||
</Row>
|
||
<div className="clearFix" />
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vihujq`} style={{ lineHeight: "30px", padding: "6px 17px", width:400 }}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@92zokn`} span={8} style={{width:77.98}}>
|
||
{getLabel('743', "结束时间")}：
|
||
</Col>
|
||
<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@f229jb`} tipPosition='bottom'
|
||
ref='taskend'
|
||
error={getLabel('387698', "任务结束时间未选择！")}
|
||
style={{width:"64%"}}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f4s8vq`} span={14}>
|
||
<div className="content-landmark" >
|
||
{/* <WeaRangePicker
|
||
value={[this.state.taskInfo.startDate, this.state.taskInfo.endDate]}
|
||
onChange={v => this.setTaskValue("startendDate",v)}
|
||
/> */}
|
||
<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@imtuw0`}
|
||
noInput
|
||
value={this.state.taskInfo.endDate}
|
||
onChange={v => this.setTaskValue("endDate", v)}
|
||
key={this.state.taskInfo.endDate}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
</WeaError>
|
||
</Row>
|
||
</div>
|
||
<div className="btnBottomSubmit" onClick={() => { this.closeAddComs() }} >{getLabel('31129', "取消")}</div>
|
||
<div className="btnBottomSubmit" onClick={() => { this.showAddComs() }} >{getLabel('33703', "确认")}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
getNowFormatDate() {
|
||
var date = new Date();
|
||
var seperator1 = "-";
|
||
var year = date.getFullYear();
|
||
var month = date.getMonth() + 1;
|
||
var strDate = date.getDate();
|
||
if (month >= 1 && month <= 9) {
|
||
month = "0" + month;
|
||
}
|
||
if (strDate >= 0 && strDate <= 9) {
|
||
strDate = "0" + strDate;
|
||
}
|
||
var currentdate = year + seperator1 + month + seperator1 + strDate;
|
||
return currentdate;
|
||
}
|
||
|
||
closeAddComs = (bool) => {
|
||
const { userInfo } = this.props;
|
||
this.setState({
|
||
taskInfo: {
|
||
taskName: "",
|
||
hrmid: userInfo.userid,
|
||
hrmname: userInfo.username,
|
||
startDate: this.getNowFormatDate(),
|
||
endDate: this.getNowFormatDate(),
|
||
},
|
||
userInfo: {
|
||
userid: userInfo.userid,
|
||
username: userInfo.username,
|
||
usericons: userInfo.usericons
|
||
},
|
||
});
|
||
this.setState({ visible: !this.state.visible });
|
||
|
||
}
|
||
|
||
showAddComs = () => {
|
||
let checked = true;
|
||
const that = this;
|
||
if (this.state.visible) {
|
||
if (!this.state.taskInfo.taskName) {
|
||
this.refs.taskname.showError();
|
||
checked = false;
|
||
} else if (!this.state.taskInfo.hrmid) {
|
||
this.refs.taskhrm.showError();
|
||
checked = false;
|
||
} else if (!this.state.taskInfo.startDate) {
|
||
this.refs.taskstart.showError();
|
||
checked = false;
|
||
} else if (!this.state.taskInfo.endDate) {
|
||
this.refs.taskend.showError();
|
||
checked = false;
|
||
} else if (this.state.taskInfo.endDate < this.state.taskInfo.startDate) {
|
||
message.error(getLabel('387700', "任务结束时间必须大于任务开始时间！"));
|
||
checked = false;
|
||
}
|
||
if (checked) {
|
||
this.props.saveTask({
|
||
stageid: this.props.groupid,
|
||
subject: this.state.taskInfo.taskName,
|
||
begindate: this.state.taskInfo.startDate,
|
||
enddate: this.state.taskInfo.endDate,
|
||
hrmid: this.state.taskInfo.hrmid,
|
||
});
|
||
const { userid, username, usericons } = this.props;
|
||
this.setState({
|
||
taskInfo: {
|
||
taskName: "",
|
||
hrmid: userid,
|
||
startDate: "",
|
||
endDate: ""
|
||
},
|
||
userInfo: {
|
||
userid: userid,
|
||
username: username,
|
||
usericons: usericons
|
||
}
|
||
});
|
||
this.setState({ visible: !this.state.visible });
|
||
}
|
||
|
||
|
||
} else {
|
||
checked && this.setState({ visible: !this.state.visible });
|
||
// jQuery("#area_"+this.props.groupid).focus()
|
||
// this.refs.area+this.props.groupid.focus();
|
||
}
|
||
|
||
|
||
}
|
||
|
||
setTaskValue = (fieldname, v) => {
|
||
if (fieldname == "startDate") {
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
startDate: v,
|
||
},
|
||
});
|
||
} else if (fieldname == "endDate") {
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
endDate: v,
|
||
},
|
||
});
|
||
} else if (fieldname == "subject") {
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
taskName: jQuery("#area_" + this.props.groupid).val()
|
||
},
|
||
});
|
||
} else if (fieldname == "hrmid") {
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
hrmid: v.hrmid,
|
||
hrmname: v.hrmname,
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
setDate = (date) => {
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
startDate: date[0],
|
||
endDate: date[1]
|
||
},
|
||
});
|
||
}
|
||
setTaskName = () => {
|
||
let taskName = jQuery("#area_" + this.props.groupid).val();
|
||
this.setState({
|
||
taskInfo: {
|
||
...this.state.taskInfo,
|
||
taskName: taskName,
|
||
},
|
||
});
|
||
}
|
||
|
||
|
||
handleHeadMouseDown = (ev) => {
|
||
const { canEditBoard } = this.props;
|
||
this.offset = {
|
||
left: this.container.offsetLeft - jQuery(this.container).closest('.kanban-scroller')[0].scrollLeft,
|
||
top: this.container.offsetTop,
|
||
height: this.container.clientHeight,
|
||
width: this.container.clientWidth,
|
||
startX: ev.clientX,
|
||
startY: ev.clientY
|
||
};
|
||
this.startScrollX =jQuery(this.container).closest('.kanban-scroller')[0].scrollLeft;
|
||
canEditBoard && document.addEventListener('mousemove', this.handleMouseMove);
|
||
canEditBoard && document.addEventListener('mouseup', this.handleMouseUp);
|
||
}
|
||
handleMouseMove = (ev) => {
|
||
let diffX = ev.clientX - this.offset.startX;
|
||
const f = jQuery(this.container).closest('.kanban-scroller')[0].scrollWidth / jQuery(this.container).closest('.kanban-scroller')[0].clientWidth;
|
||
if (Math.abs(diffX) > 5) {
|
||
this.props.root.moving = true;
|
||
this.moving = true;
|
||
this.container.style.position = 'absolute';
|
||
this.container.style.width = this.offset.width + 'px';
|
||
this.container.style.height = this.offset.height + 'px';
|
||
this.container.style.left = (this.offset.left - 10 + diffX) + 'px';
|
||
this.container.style.top = (this.offset.top - 10) + 'px';
|
||
this.container.style.zIndex = 1000;
|
||
jQuery(this.container).addClass('moving');
|
||
this.props.root.showPlace(this.offset, this.container);
|
||
if (diffX < 0) {
|
||
jQuery(this.container).prevAll('.kanban-group').each((index, ele) => {
|
||
const offset = jQuery(ele).offset();
|
||
const width = jQuery(ele).width();
|
||
const height = jQuery(ele).height();
|
||
const offset1 = jQuery(this.container).offset();
|
||
const width1 = jQuery(this.container).width();
|
||
const middle = offset.left + width / 2 - offset1.left;
|
||
if (middle > 0 && (middle < width1 || index === 0)) {
|
||
this.props.root.showPlace({ width, height }, ele);
|
||
}
|
||
})
|
||
} else {
|
||
const nextAll = jQuery(this.container).nextAll('.kanban-group');
|
||
nextAll.each((index, ele) => {
|
||
const offset = jQuery(ele).offset();
|
||
const width = jQuery(ele).width();
|
||
const height = jQuery(ele).height();
|
||
const offset1 = jQuery(this.container).offset();
|
||
const width1 = jQuery(this.container).width();
|
||
const middle = offset1.left + width1 - offset.left - width / 2;
|
||
if (middle > 0 && (middle < width / 2 || index === nextAll.length - 1)) {
|
||
this.props.root.showPlace({ width, height }, ele, true);
|
||
}
|
||
})
|
||
}
|
||
jQuery(this.container).closest('.kanban-scroller')[[0]].scrollLeft = this.startScrollX + diffX * f;
|
||
}
|
||
}
|
||
handleMouseUp = () => {
|
||
document.removeEventListener('mousemove', this.handleMouseMove);
|
||
document.removeEventListener('mouseup', this.handleMouseUp);
|
||
if (this.moving) {
|
||
this.container.style.removeProperty('position');
|
||
this.container.style.removeProperty('width');
|
||
this.container.style.removeProperty('height');
|
||
this.container.style.removeProperty('left');
|
||
this.container.style.removeProperty('top');
|
||
this.container.style.removeProperty('z-index');
|
||
this.props.root.moving = false;
|
||
this.moving = false;
|
||
jQuery(this.container).removeClass('moving');
|
||
this.props.root.container.insertBefore(this.container, this.props.root.place);
|
||
this.props.root.hidePlace();
|
||
this.props.root.onChange();
|
||
}
|
||
}
|
||
|
||
}
|