weaver_trunk_cli/pc4mobx/prj/components/projectBoard/TaskForm.js

660 lines
31 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { observer } from "mobx-react";
import "./style/slide.less"
import { WeaRangePicker, WeaHelpfulTip, WeaNewScroll, WeaInput, WeaUpload, WeaProgress, WeaBrowser, WeaReqTop } from 'ecCom';
import { Row, Col, Tooltip, Menu, InputNumber, Modal, Tabs, message } from 'antd';
import { WeaSwitch } from 'comsMobx'
import PrjDateTime from '../comp/prj-data-time'
import { datediff } from '../../util/index'
const basicToolBar = {
uploadUrl: (window.ecologyContentPath || '')+"/api/blog/fileupload/uploadimage",
startupFocus: false,
toolbar: [
{ name: 'markdown', items: ['Markdown'] },
{ name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
{ name: 'insert', items: ['Image', 'Table', 'Smiley'] }
],
};
import RelareExchange from '../common/relateExchange'
import RelateWorkFlow from '../common/relateWorkFlow'
import RelateDocument from "../common/relateDocument"
@observer
export default class TaskForm extends React.Component {
constructor(props) {
super(props);
this.state = {
contentHight: 650,
taskInfo: {
subject: "",
hrmid: "",
hrmname: "",
begindate: "",
enddate: ""
},
seletedKey : "0"
}
}
componentDidMount() {
this.setState({
contentHight: window.innerHeight - 220
});
}
getSearchs() {
const conditioninfo = this.props.contentStore.datas;
const { cardform, setTaskCardFields, taskInfo } = this.props.contentStore;
const { isFormInit } = cardform;
let group = [];
const formParams = cardform.getFormParams();
isFormInit && conditioninfo.map(c => {
let items = [];
let index = 1;
c.items.map(field => {
let col = 4;
//if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
let hasIcons = typeof (field.icons) !== "undefined";
if (hasIcons) {
col = 2;
}
let dom;
// if (field.viewAttr == "1" || (field.conditionType == "BROWSER" && field.browserConditionParam.viewAttr == "1")) { field.hasBorder = true } //只读样式控制
if (field.domkey[0] == "begindate") {
dom =
<PrjDateTime
{...field}
endValue={formParams.enddate ? new Date(formParams.enddate) : null}
value={[formParams.begindate, formParams.begintime]}
onChange={(v) => { setTaskCardFields({ begindate__begintime: { value: v } }); this.workdayComputed(v, "begin") }} />
} else if (field.domkey[0] == "enddate") {
dom =
<PrjDateTime
{...field}
value={[formParams.enddate, formParams.endtime]}
startValue={formParams.begindate ? new Date(formParams.begindate) : null}
onChange={(v) => {
if (taskInfo.maxSubTaskEndDate == "" || typeof (taskInfo.maxSubTaskEndDate) == "undefined") {
setTaskCardFields({ enddate__endtime: { value: v } });
this.workdayComputed(v, "end")
} else {
if (new Date(v[0]) < new Date(taskInfo.maxSubTaskEndDate)) {
// Modal.warning({
// title: getLabel(83887, "任务完成的最后时间小于其子任务完成的最后时间!"),
// content: ""
// });
message.error(getLabel(83887, "任务完成的最后时间小于其子任务完成的最后时间!"));
setTaskCardFields({ enddate__endtime: { value: [taskInfo.maxSubTaskEndDate, formParams.endtime] } });
this.workdayComputed([taskInfo.maxSubTaskEndDate, formParams.endtime], "end")
} else {
setTaskCardFields({ enddate__endtime: { value: v } });
this.workdayComputed(v, "end")
}
}
}} />
} else if (field.domkey[0] == "actualbegindate") {
dom =
<PrjDateTime
endValue={formParams.actualenddate ? new Date(formParams.actualenddate) : null}
{...field}
value={[formParams.actualbegindate, formParams.actualbegintime]}
onChange={(v) => { setTaskCardFields({ actualbegindate__actualbegintime: { value: v } }); this.onActualComputed(v, "begin") }} />
} else if (field.domkey[0] == "actualenddate") {
dom =
<PrjDateTime startValue={formParams.actualbegindate ? new Date(formParams.actualbegindate) : null} {...field}
value={[formParams.actualenddate, formParams.actualendtime]}
onChange={(v) => { setTaskCardFields({ actualenddate__actualendtime: { value: v } }); this.onActualComputed(v, "end") }} />
} else if (field.domkey[0] == "finish") {
if (field.viewAttr == "1") {
dom =
<WeaProgress percent={field.value || 0} strokeColor={field.strokeColor} status="active" />
} else {
dom =
<span><InputNumber min={0} value={formParams.finish}
onChange={(v) => { this.checkProgress(v); }} />
<span style={{ marginLeft: 5 }}>%</span></span>
}
} else if (field.conditionType == "RICHTEXT") { //多行文本
let domkey = field.domkey[0];
if (field.viewAttr == "1") {
dom =
<div dangerouslySetInnerHTML={{ __html: field.value }}></div>
} else {
// dom = <Row>
// <Col span={24} style={{'margin-right':'5px'}}>
// <WeaRichText
// value = {formParams[domkey]}
// ckConfig={basicToolBar}
// onChange={v => {setTaskCardFields({[domkey]:{value:v}})}}
// bottomBarConfig={[]}
// />
// </Col>
// </Row>
dom = <WeaSwitch fieldConfig={{ ...field, ckConfig: basicToolBar }} form={cardform} />
}
} else if (field.domkey[0] == "accessory") {
let domkey = field.domkey[0];
dom =
<WeaUpload
uploadId={[domkey]}
uploadUrl={(window.ecologyContentPath || '')+"/api/proj/prjutil/fileUpload?accsec=" + field.accsec}
category={field.accsec}
autoUpload={true}
showBatchLoad={false}
showClearAll={false}
multiSelection={true}
datas={field.datas}
maxUploadSize={field.accsize}
onChange={v => { setTaskCardFields({ [domkey]: { value: v } }) }}
viewAttr={field.viewAttr}
// onUploading={(state)=>{}}
/>
} else {
dom = <WeaSwitch fieldConfig={field} form={cardform} onChange={this.onChangeDatas.bind(this)} onBlur={this.onBlurDatas.bind(this)} />;
}
items.push({
com: (<div class={index > 1 ? "taskContentLine taskContentBoxLine" : "taskContentLine"}>
<Row>
<Col span={col}>
{
hasIcons &&
<Tooltip placement="bottom" title={`${field.label}`}>
<i className={"taskContentBoxIcon " + field.icons}></i>
</Tooltip>
}
{
!hasIcons &&
<span class="fieldName" title={field.label}>{field.label}</span>
}
</Col>
<Col span={24 - col}>
{dom}
</Col>
</Row>
</div>),
hide: cardform.isHide(field, (keys, allParams) => {
return false;
})
})
index++;
});
group.push(
<div className="taskContentBox">
<div className="taskContentBoxBlock mTop10 pTop15">
{items && items.map((obj) => {
if (obj) {
return (
obj.com
)
}
})
}
</div>
</div>)
});
return group;
}
reloadTask = (id) => {
this.props.contentStore.loadTaskInfo({ prjid: this.props.prjid, taskid: id });
}
getChildList() {
const { taskInfo } = this.props.contentStore;
let list = [];
let dom;
if (taskInfo.childList) {
taskInfo.childList.map(item => {
dom =
<li >
<div class="subTasksStatusWidth">
<Tooltip placement="bottom" title={"点击查看任务信息"}>
<span className="icon-coms-category" onClick={(e) => { this.reloadTask(item.id) }} />
</Tooltip>
</div>
<div class="subTasksNameMain" >
{item.subject}
</div>
<div class="subTasksOperator">
<Tooltip placement="bottom" title={item.hrmname}>
<a href={'javaScript:openhrm(' + item.hrmid + ');'} onClick={e => window.pointerXY(e)} >
<img src={item.hrmicon} className="sub-task-manager-img" />
</a>
</Tooltip>
</div>
</li>
list.push(dom);
})
}
return list;
}
onChangeDatas(data) {
const { cardform } = this.props.contentStore;
cardform.validateForm().then(f => {
if (f.isValid) {
// 验证通过, balabala业务代码
} else {
f.showErrors();
this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
}
});
}
onBlurDatas(data) {
}
render() {
const { taskObj, taskLoading, datas, taskInfo, selectTabKey, changeTab } = this.props.contentStore;
const {hasRight } = this.props.contentStore;
let enddate = new Date(Date.parse(taskObj.enddate.replace(/-/g, "/")));
let actualEndDate = new Date(Date.parse(taskObj.actualEndDate.replace(/-/g, "/")));
let today = new Date();
let notend = taskObj.finish < 100;//未完成
let isException = enddate < today || actualEndDate > enddate;//是否超期
if (notend && isException) {
progressText = "超期";
progressStatus = "exception";
} else if (notend) {
progressText = "计划";
progressStatus = "active";
} else {
progressText = "完成";
progressStatus = "success";
}
const menu = (
<Menu>
<Menu.Item key="0">
<a href="#" >删除任务</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
{/* <Menu.Divider /> */}
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>
);
let topTab = [
{
color: '#000000',
groupid: 'baseInfo',
showcount: false,
title: '基本信息',
viewcondition: 0,
key : 0
},
{
color: '#ff3232',
groupid: 'exchange',
showcount: true,
title: '相关交流',
viewcondition: 1,
key : 1
}
];
return (
//
<div className="wea-prj-slide">
{/* <div className="wea-prj-slide-top">
<Row>
<Col span={4}>
<div className="wea-new-top-title" style={{ paddingTop: "8px" }}>
<div className="icon-circle-base" style={{ background: '#5d635f' }}>
<i className="icon-coms-project"></i>
</div>
<span className="wea-new-top-title-breadcrumb" title="项目" style={{ verticalAlign: "middle" }}>
任务
</span>
</div>
</Col>
<Col span={20}>
<div className="wea-prj-slide-top-operation">
{hasRight && <Row>
<Col span={15}>
</Col>
<Col span={4}>
<span>
<i className={"taskContentBoxIcon icon-coms-Update-synchronization"}></i>
&nbsp;刷新
</span>
</Col>
{/* <Col span={4}>
<Tooltip placement="bottom" title={"点击新建子任务"}>
<span>
<i className={"taskContentBoxIcon icon-coms-currency-Task"}></i>
&nbsp;子任务
</span>
</Tooltip>
</Col>
<Col span={4}>
<Tooltip placement="bottom" title={"点击保存任务信息"}>
<span onClick={(e) => { this.saveTask(e) }}>
<i className={"taskContentBoxIcon icon-coms-Save-as"}></i>
&nbsp;保存
</span>
</Tooltip>
</Col>
<Col span={1}>
<span>
<Dropdown overlay={menu} trigger={['click']}>
<Tooltip placement="bottomRight" title={"更多操作"}>
<i className={"taskContentBoxIcon icon-coms-more"}></i>
</Tooltip>
</Dropdown>
</span>
</Col>
</Row>}
</div>
</Col>
</Row>
</div> */}
<WeaReqTop
title={'任务'}
icon={<i className='icon-coms-project' />}
iconBgcolor={'#5d635f'}
// loading={loading}
// buttons={btns}
buttonSpace={10}
showDropIcon={true}
// dropMenuDatas={dropMenuDatas}
// onDropMenuClick={this.onDropMenuClick}
tabDatas={topTab}
selectedKey={selectTabKey}
onChange={(key)=>{
changeTab(key)
}}
>
<div className="wea-prj-slide-content" >
{ <WeaNewScroll height={"100%"} onScroll={(e) => { }} style={{backgroundColor:"white"}} >
{/* <Spin spinning={taskLoading} style={{ height: "100%" }}> */}
<div height={"100%"} style={{display: selectTabKey == "0" ? "":"none"}} >
{this.getSearchs()}
{!taskLoading && <div className="taskContentBox">
<div className="taskContentBoxBlock mTop10 pTop15">
<div class="taskContentLine">
<Row>
<Col span={2}>
<i className={"taskContentBoxIcon icon-coms-task-list"}></i>
</Col>
<Col span={22}>
<span className={"taskContentBoxTopTitle"}>子任务 {taskInfo.finishnum}/{taskInfo.allnum}</span>
<WeaHelpfulTip style={{ marginLeft: '10px' }} width={196} className={"taskContentBoxIcon"} title="在这里写入相应的提示信息在这里写入相应的提示信息在这里写入相应的提示信息" />
</Col>
</Row>
<Row>
<Col span={2}>
</Col>
<Col span={22}>
<ul className={"slideSubTask"}>
{
this.getChildList()
}
<li style={{ display: "none" }} id="addTaskLine">
<div class="subTasksStatusWidth" style={{marginTop:"12px"}}>
<Tooltip placement="bottom" title={"点击保存子任务"}>
<span className="icon-coms-Save-as" onClick={(e) => { this.saveSubTask() }} />
</Tooltip>
</div>
<div class="subTasksNameMain">
<WeaInput
placeholder={"任务名称"}
onChange={(v)=>{ this.setNewTaskValue("subject",v) }}
/>
{/* <Input placeholder={"任务名称"} onChange={(v)=>{ this.setNewTaskValue("subject",v) }} id="addSubTaskInput" /> */}
</div>
<div class="subTasksOperator">
<WeaBrowser
type={1}
customized
textDecoration={true}
inputStyle={{ width: 200 }}
onChange={(ids, names, datas) => this.setNewTaskValue("hrmid", { hrmid: ids, hrmname: names })}
>
<Tooltip placement="bottom" title={this.state.taskInfo.hrmname == "" ? "请选择任务负责人" : this.state.taskInfo.hrmname}>
{/* <a href={'javaScript:openhrm(' + item.hrmid + ');'} onClick={e => window.pointerXY(e)} > */}
<img src={"/messager/images/icon_w_wev8.jpg"} className="sub-task-manager-img" style={{ marginTop: "5px" }} />
{/* </a> */}
</Tooltip>
</WeaBrowser>
<Tooltip placement="bottom" trigger={['hover']} title={this.state.taskInfo.begindate == "" ? "请选择任务开始结束时间" : (this.state.taskInfo.begindate + " : " + this.state.taskInfo.enddate)}>
<WeaRangePicker
value={[this.state.taskInfo.begindate, this.state.taskInfo.enddate]}
onChange={v => this.setNewTaskValue("startenddate", v)}
/>
</Tooltip>
</div>
</li>
</ul>
{hasRight && <span className={"addTaskSubBtn pointer ThemeColor3"} id="addTaskBtn" onClick={(e) => { this.onTaskAdd(e) }}>
<i className={"icon-coms-Add-to"}></i>
</span>}
</Col>
</Row>
</div>
</div>
</div>}
<div style={{paddingTop:"20px"}}>
</div>
</div>
<div height={"100%"} style={{display: selectTabKey == "1" ? "":"none"}}>
<RelareExchange contentStore={this.props.boardStore.prjTaskStore} callBack={()=>{this.reloadExchanges()}} key={new Date().getTime()} />
</div>
<div height={"100%"} style={{display: selectTabKey == "2" ? "":"none",backgroundColor:"white"}}>
</div>
</WeaNewScroll>}
</div>
</WeaReqTop>
</div>
)
}
commitDiscuss = () =>{
const discuss = jQuery("#discussArea").val();
if(discuss!=""){
this.props.saveDiscuss({
discuss : discuss,
taskid : this.props.contentStore.taskid
});
jQuery("#discussArea").val("");
}
}
reloadExchanges=()=>{
const {prjTaskStore} = this.props.boardStore;
prjTaskStore.getRelateExchangeInfo();
}
getDiscuss = () => {
const { taskInfo } = this.props.contentStore;
let list = [];
let dom;
if (taskInfo.discuss) {
taskInfo.discuss.map(item => {
dom =
<div class="taskContentLine taskContentBoxLine">
<Row>
<Col span={2} style={{ marginTop: "5px" }}>
<Tooltip placement="bottom" title={item.hrmname}>
<a href={'javaScript:openhrm(' + item.hrmid + ');'} onClick={e => window.pointerXY(e)} >
<img src={item.hrmicons} className="discuss-manager-img" />
</a>
</Tooltip>
</Col>
<Col span={1}>
</Col>
<Col span={16}>
{item.discuss}
</Col>
<Col span={1}>
</Col>
<Col span={4}>
{item.discussDate}
</Col>
</Row>
</div>
list.push(dom);
})
}
return list;
}
workdayComputed = (arg, type) => {
const { setTaskCardFields, taskInfo: { passnoworktime, userid } } = this.props.contentStore;
const { cardform } = this.props.contentStore;
const formParams = cardform.getFormParams() || {};
let res = "";
if (type == "begin") {
if (arg[0] && formParams.enddate) {
res = datediff(arg[0], formParams.enddate, arg[1] || "00:00", formParams.endtime || "23:59", userid, passnoworktime);
}
} else {
if (arg[0] && formParams.begindate) {
res = datediff(formParams.begindate, arg[0], formParams.begintime || "00:00", arg[1] || "23:59", userid, passnoworktime);
}
}
setTaskCardFields({ workday: { value: res } });
}
onActualComputed = (arg, type) => { //maxSubTaskEndDate
const { setTaskCardFields, taskInfo: { passnoworktime, userid } } = this.props.contentStore;
const { cardform } = this.props.contentStore;
const formParams = cardform.getFormParams() || {};
let res = "0";
if (type == "begin") {
if (arg[0] && formParams.actualenddate) {
res = datediff(arg[0], formParams.actualenddate, arg[1] || "00:00", formParams.actualendtime || "23:59", userid, passnoworktime);
}
} else {
if (arg[0] && formParams.actualbegindate) {
res = datediff(formParams.actualbegindate, arg[0], formParams.actualbegintime || "00:00", arg[1] || "23:59", userid, passnoworktime);
}
}
setTaskCardFields({ realmandays: { value: res } })
}
onTaskAdd = (e) => {
$("#addTaskLine").css("display", "");
$("#addTaskBtn").css("display", "none");
$("#addTaskInput").focus();
}
checkProgress = (value) => { //进度编辑校验
const { taskInfo, setTaskCardFields } = this.props.contentStore;
if (Number(taskInfo.finishmax) == 99) {
if (value > 99) {
// Modal.warning({
// title: getLabel(383829, "该任务所必须的相关文档或者相关流程不存在任务不能完成100%。"),
// content: '',
// });
message.error(getLabel(383829, "该任务所必须的相关文档或者相关流程不存在任务不能完成100%。"));
setTaskCardFields({ finish: { value: 99 } });
} else {
setTaskCardFields({ finish: { value: value } });
}
} else {
if (value > 100) {
setTaskCardFields({ finish: { value: 100 } });
} else {
setTaskCardFields({ finish: { value: value } });
}
}
}
setNewTaskValue = (fieldname, v) => {
if (fieldname == "startenddate") {
this.setState({
taskInfo: {
...this.state.taskInfo,
begindate: v[0],
enddate: v[1]
},
});
} else if (fieldname == "subject") {
this.setState({
taskInfo: {
...this.state.taskInfo,
subject: v
},
});
} else if (fieldname == "hrmid") {
this.setState({
taskInfo: {
...this.state.taskInfo,
hrmid: v.hrmid,
hrmname: v.hrmname,
},
});
}
}
saveTask = (e) => {
e.stopPropagation();
const { boardStore } = this.props;
boardStore.saveTaskInfo();
}
saveSubTask = () => {
const { hrmid, begindate, enddate, subject } = this.state.taskInfo;
if (hrmid == "") {
Modal.warning({
title: "系统提示",
content: "请选择任务负责人!"
});
} else if (begindate == "") {
Modal.warning({
title: "系统提示",
content: "请选择任务开始结束时间!"
});
} else if (subject == "") {
Modal.warning({
title: "系统提示",
content: "请填写任务名称!"
});
} else {
this.props.contentStore.saveSubTaskInfo({
subject: subject,
hrmid: hrmid,
begindate: begindate,
enddate: enddate,
parentid : this.props.contentStore.taskid,
prjid : this.props.prjid
});
$("#addTaskLine").css("display", "none");
$("#addTaskBtn").css("display", "");
jQuery("#addSubTaskInput").val("");
this.setState({
taskInfo:{
subject: "",
hrmid: "",
hrmname: "",
begindate: "",
enddate: ""
}
});
}
}
}