257 lines
13 KiB
JavaScript
257 lines
13 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { WeaPopoverHrm } from 'ecCom';
|
||
|
|
import { Tooltip, Button, Icon } from 'antd';
|
||
|
|
import QueueAnim from 'rc-queue-anim';
|
||
|
|
import { WeaLocaleProvider } from 'ecCom';
|
||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
|
|
||
|
|
export default class Item extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleMouseDown = (ev) => {
|
||
|
|
const { canEditBoard } = this.props;
|
||
|
|
this.offset = {
|
||
|
|
left: this.container.offsetLeft,
|
||
|
|
top: this.container.offsetTop - jQuery(this.container).closest('.kanban-group-body')[0].scrollTop,
|
||
|
|
height: this.container.clientHeight,
|
||
|
|
width: this.container.clientWidth,
|
||
|
|
startX: ev.clientX,
|
||
|
|
startY: ev.clientY
|
||
|
|
};
|
||
|
|
this.startScrollX = jQuery(this.container).closest('.kanban-group-body')[0].scrollLeft;
|
||
|
|
this.startScrollY = {};
|
||
|
|
jQuery(this.container).closest('.kanban-container').find('kanban-group').each((index, ele) => {
|
||
|
|
const dataValue = jQuery(ele).attr('data-value');
|
||
|
|
this.startScrollY[dataValue] = jQuery(ele).find('.kanban-group-body').scrollTop();
|
||
|
|
});
|
||
|
|
canEditBoard && document.addEventListener('mousemove', this.handleMouseMove);
|
||
|
|
canEditBoard && document.addEventListener('mouseup', this.handleMouseUp);
|
||
|
|
}
|
||
|
|
handleMouseMove = (ev) => {
|
||
|
|
const diffX = ev.clientX - this.offset.startX;
|
||
|
|
const diffY = ev.clientY - this.offset.startY;
|
||
|
|
const fy = jQuery(this.container).closest('.kanban-group-body')[0].scrollHeight / jQuery(this.container).closest('.kanban-group-body')[0].clientHeight;
|
||
|
|
if (Math.abs(diffX) > 5 || Math.abs(diffY) > 5) {
|
||
|
|
this.moving = true;
|
||
|
|
this.props.root.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 + diffY) + 'px';
|
||
|
|
this.container.style.zIndex = 1000;
|
||
|
|
this.container.style.transform = "rotate(5deg)";
|
||
|
|
jQuery(this.container).addClass('moving');
|
||
|
|
this.props.root.showItemPlace(this.offset, this.container);
|
||
|
|
let isFound = false;
|
||
|
|
let currentGroup = null;
|
||
|
|
if (diffX < 0) {
|
||
|
|
const thisGroup = jQuery(this.container).closest('.kanban-group');
|
||
|
|
const prevAll = thisGroup.prevAll('.kanban-group');
|
||
|
|
prevAll.each((index, ele) => {
|
||
|
|
const offset = jQuery(ele).offset();
|
||
|
|
const width = jQuery(ele).width();
|
||
|
|
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)) {
|
||
|
|
isFound = true;
|
||
|
|
currentGroup = jQuery(ele);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
const nextAll = jQuery(this.container).closest('.kanban-group').nextAll('.kanban-group');
|
||
|
|
nextAll.each((index, ele) => {
|
||
|
|
const offset = jQuery(ele).offset();
|
||
|
|
const width = jQuery(ele).width();
|
||
|
|
const offset1 = jQuery(this.container).offset();
|
||
|
|
const width1 = jQuery(this.container).width();
|
||
|
|
const middle = offset1.left + width1/2 - offset.left - width/2;
|
||
|
|
if (middle > 0 && (middle < width / 2 || index === nextAll.length - 1)) {
|
||
|
|
isFound = true;
|
||
|
|
currentGroup = jQuery(ele);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (!isFound || !currentGroup) {
|
||
|
|
currentGroup = jQuery(this.container).closest('.kanban-group');
|
||
|
|
isFound = true;
|
||
|
|
}
|
||
|
|
if (isFound && currentGroup) {
|
||
|
|
const items = currentGroup.find('.kanban-item');
|
||
|
|
if (items.length === 0) {
|
||
|
|
//this.props.root.showItemPlace(this.offset, currentGroup);
|
||
|
|
currentGroup.find('.kanban-group-body').append(this.props.root.itemPlace);
|
||
|
|
}
|
||
|
|
items.each((i, item) => {
|
||
|
|
const itemOffset = jQuery(item).offset();
|
||
|
|
const itemHeight = jQuery(item).height();
|
||
|
|
const itemOffset1 = jQuery(this.container).offset();
|
||
|
|
const top = itemOffset.top - itemOffset1.top;
|
||
|
|
if (top > 0 && (top < itemHeight || i === 0)) {
|
||
|
|
this.props.root.showItemPlace(this.offset, item);
|
||
|
|
} else {
|
||
|
|
if (top < 0 && i < items.length) {
|
||
|
|
this.props.root.showItemPlace(this.offset, item, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const dataValue = currentGroup.attr('data-value');
|
||
|
|
currentGroup.find('.kanban-group-body')[0].scrollTop = (this.startScrollY[dataValue] || 0) + diffY * fy;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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.container.style.removeProperty("transform");
|
||
|
|
|
||
|
|
this.props.root.moving = false;
|
||
|
|
this.moving = false;
|
||
|
|
jQuery(this.container).removeClass('moving');
|
||
|
|
jQuery(this.props.root.itemPlace).before(this.container);
|
||
|
|
this.props.root.hidePlace();
|
||
|
|
this.props.root.onChange();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setLandMark = (id, value, e) => {
|
||
|
|
this.props.setLandMark(id, value);
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
onTaskClick = (value, e) => {
|
||
|
|
this.props.onTaskClick(value);
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { value, prefix, avatar, title, description, islandmark, action, finish, colors, managerid, managericon, managername, allnum, finishnum, status } = this.props;
|
||
|
|
return (
|
||
|
|
<div ref={ref => this.container = ref} key={value} className="kanban-item" data-value={value} onClick={(e) => this.onTaskClick(value, e)} onMouseDown={this.handleMouseDown}>
|
||
|
|
<div className="kanban-item-finish">
|
||
|
|
<div className="kanban-item-finish-status" style={{ backgroundColor: colors, height: finish + "%" }}>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="kanban-item-extra-wrapper">
|
||
|
|
|
||
|
|
<div className="kanban-item-main" style={{ width: `calc(100% )` }}>
|
||
|
|
<div className="kanban-item-main-meta">
|
||
|
|
<div style={{ display: avatar ? 'inline-block' : 'none' }} className="kanban-item-main-meta-avatar">
|
||
|
|
{avatar}
|
||
|
|
</div>
|
||
|
|
<div className="kanban-item-main-meta-content">
|
||
|
|
<div className="kanban-item-main-meta-title">
|
||
|
|
<div class="title-content" id={"titleContent"}>
|
||
|
|
<div style={{ color: "red", display: this.state.show ? "none" : "inline-block" }} > {prefix} </div>{!this.state.show && title}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
{
|
||
|
|
<div className="kanban-item-manager-list">
|
||
|
|
<QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@jj7mh4`} delay={10} className="queue-simple" type={["right", "right"]}>
|
||
|
|
{this.getManagers()}
|
||
|
|
</QueueAnim>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="kanban-item-main-meta-description">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div className="kanban-item-main-meta-description">
|
||
|
|
{description}
|
||
|
|
</div>
|
||
|
|
<div className="kanban-item-main-meta-description">
|
||
|
|
{allnum > 0 && getLabel('2098',"子任务")+" " + finishnum + "/" + allnum}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{action && action.length > 0 && <ul className="kanban-item-action">
|
||
|
|
{
|
||
|
|
action.map((ac, i) => (
|
||
|
|
<li>
|
||
|
|
{ac}
|
||
|
|
{i < action.length - 1 && <em className="kanban-item-action-split" />}
|
||
|
|
</li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/* {extra && <div className="kanban-item-extra">
|
||
|
|
{extra}
|
||
|
|
</div>} */}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@v57y3l`} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
getManagers = () => {
|
||
|
|
const { managerid, managername, managericon, islandmark, value, canAddTask, status } = this.props;
|
||
|
|
let managers = [];
|
||
|
|
if (managerid && managerid.length > 1) {
|
||
|
|
if (this.state.show) {
|
||
|
|
managers.push(
|
||
|
|
<div className="kanban-item-icon" key={"other"}>
|
||
|
|
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@l76xfn`} type="circle-o-right" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
managers.push(
|
||
|
|
<div className="kanban-item-icon" key={"other"}>
|
||
|
|
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@htucum`} type="circle-o-left" onClick={(e) => { this.setState({ show: !this.state.show }), e.stopPropagation(); }} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (canAddTask && status==0) {
|
||
|
|
managers.push(<div className="kanban-item-landmark" >
|
||
|
|
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1g44cl`} placement="bottom" title={islandmark == "1" ? getLabel('387701',"取消里程碑任务") : getLabel('387702',"设为里程碑任务")}>
|
||
|
|
<span className="icon-coms-Flag" style={{ color: islandmark == "1" ? "#2db7f5" : "" }} onClick={(e) => { this.setLandMark(value, islandmark == "1" ? "0" : "1", e); }} />
|
||
|
|
</Tooltip>
|
||
|
|
</div>)
|
||
|
|
}else{
|
||
|
|
managers.push(<div className="kanban-item-landmark" >
|
||
|
|
<span className="icon-coms-Flag" style={{ color: islandmark == "1" ? "#2db7f5" : "" }} />
|
||
|
|
</div>)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.state.show && managerid && managerid.length > 0 && managerid.map((m, i) => {
|
||
|
|
managers.push(<div className="kanban-item-manager" key={i}>
|
||
|
|
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@9q28mz@${i}`} placement="bottom" title={managername[i]}>
|
||
|
|
<a href={'javaScript:openhrm(' + m + ');'} onClick={e => window.pointerXY(e)} >
|
||
|
|
<img src={managericon[i]} className="kanban-item-manager-img" />
|
||
|
|
</a>
|
||
|
|
</Tooltip>
|
||
|
|
</div>)
|
||
|
|
})
|
||
|
|
!this.state.show && managerid && managerid.length > 0 &&
|
||
|
|
managers.push(<div className="kanban-item-manager" key={0}>
|
||
|
|
<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@17g0gh`} placement="bottom" title={managername[0]}>
|
||
|
|
<a href={'javaScript:openhrm(' + managerid[0] + ');'} onClick={e => window.pointerXY(e)} >
|
||
|
|
<img src={managericon[0]} className="kanban-item-manager-img" />
|
||
|
|
</a>
|
||
|
|
</Tooltip>
|
||
|
|
</div>)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return managers;
|
||
|
|
}
|
||
|
|
}
|