weaver_trunk_cli/pc4mobx/prj/components/common/relateExchange.js

212 lines
10 KiB
JavaScript

import {Button,Row,Col,Icon,message,Modal} from 'antd';
import {WeaNewScroll,WeaTextarea,WeaSearchGroup ,WeaRichText,WeaFormItem ,WeaBrowser,WeaUpload,WeaTab,WeaTools,WeaLocaleProvider} from 'ecCom';
import {inject, observer} from "mobx-react";
import {toJS} from 'mobx';
import ExchangeLogs from './exchangeLogs'
import {Condition} from '../list/listCondition';
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class RelateExchange extends React.Component {
constructor(props) {
super(props);
this.state ={
showGroup:false,
value:"",
"doc":"",
"task":"",
"crm":"",
"workflow":"",
"project":"",
file:"",
key:0
}
}
componentWillUnmount(){
this.setState({
showGroup:false,
value:"",
"doc":"",
"task":"",
"crm":"",
"workflow":"",
"project":"",
file:"",
key:0
})
}
render() {
const {contentStore} = this.props;
const {showSearchAd ,exchangeContent,exchangeform } = contentStore;
const formParams = exchangeform.getFormParams() || {};
const {showGroup,value,key} = this.state;
const formItemLayout = {
labelCol: { span:5 },
wrapperCol: { span: 14 },
};
return (
<div className="prj-exchange" style={{height:"100%"}}>
<div className="prj-exchange-header">
{/* <WeaTab
buttonsAd={this.getAdButtons()}
searchType={['base','advanced']}
searchsBaseValue={formParams.remark}
setShowSearchAd={bool=>{contentStore.setShowSearchAd(bool)}}
hideSearchAd={()=> contentStore.setShowSearchAd(false)}
searchsAd={
<div><Condition listStore={contentStore} form={exchangeform}></Condition></div>
}
showSearchAd={showSearchAd}
onSearch={v=>{contentStore.getRelateExchangeInfo()}}
onSearchChange={v=>{contentStore.setFormFields({remark:{value:v}})}}
/> */}
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@btxkn0`} className="prj-exchange-content" style={{margin:"5px 10px 0"}}>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gvxpiu`} className="prj-exchange-cell" span={24}>
<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@wcqte0`} fieldName="prjrelateExchange" value={value} minRows={4} maxRows={8} onChange={v=>{this.saveValue(v)}} />
</Col>
</Row>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dt2fza`} className="prj-exchange-title">
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@msjdts`} span="18" className="prj-exchange-title-left">
<div><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9mk469`} type="primary" onClick={this.handleSubmitExchange}>{getLabel(615,"提交")}</Button></div>
</Col>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3jnahn`} span="6" className="prj-exchange-title-right" >
<span style={{marginRight:"10px"}}>{getLabel(83273,"附加信息")}</span>
<i className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={()=>this.setState({showGroup:!showGroup})}/>
</Col>
</Row>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@g7737t`} className="prj-exchange-content" style={{display:showGroup ? "block":"none"} }>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yr92vb`} className="prj-exchange-cell prj-exchange-cell-fujian" span={24}>
{this.getFormItem()}
{ (exchangeContent.showacc || false) &&
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@w1nsv5`}
label={getLabel(22194,"相关附件")}
{ ...formItemLayout}>
<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@jx3aio`}
key={key}
uploadId="relatedfile"
uploadUrl={(window.ecologyContentPath || '')+"/api/proj/prjutil/fileUpload?accsec="+exchangeContent.accsec}
category={exchangeContent.accsec}
autoUpload={true}
showBatchLoad={false}
showClearAll={false}
multiSelection={true}
datas={[]}
maxUploadSize={exchangeContent.accsize}
onChange={this.fileUploadBack}
// onUploading={(state)=>{}}
/>
</WeaFormItem>
}
</Col>
</Row>
</div>
<div className="prj-exchange-logs">
<ExchangeLogs ecId={`${this && this.props && this.props.ecId || ''}_ExchangeLogs@9btpyu`} onChange={this.pageNoChange} totalSize={exchangeContent.totalSize} data={toJS(exchangeContent.datas) || []} />
</div>
</div>)
}
getFormItem(){
const {contentStore} = this.props;
const { exchangeContent } = contentStore;
const items =[
{label:getLabel(857,"相关文档"),title:getLabel(857,"文档"),type:37,key:"doc",show:exchangeContent.showdoc || false},
{label:getLabel(1044,"相关流程"),title:getLabel(18015,"流程"),type:152,key:"wf",show:exchangeContent.showwf || false},
{label:getLabel(783,"相关客户"),title:getLabel(136,"客户"),type:18,key:"crm",show:exchangeContent.showcrm || false},
{label:getLabel(782,"相关项目"),title:getLabel(101,"项目"),type:135,key:"prj",show:exchangeContent.showprj || false},
{label:getLabel(33414,"相关任务"),title:getLabel(1332,"任务"),type:'prjtsk',key:"task",show:exchangeContent.showtask || false},
];
const formItemLayout = {
labelCol: { span:5 },
wrapperCol: { span: 14 },
};
let group =[];
items.map((item,i)=>{
if(item.show){
group.push(
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tnjlxq@${i}`}
label={item.label}
{ ...formItemLayout}>
<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@h1zi4z@${i}`} key={this.state.key} type={item.type} title={item.title} hasAdvanceSerach={true} isSingle={false} onChange ={(ids, names, datas)=>this.docOnchange(item.key,ids, names, datas)} />
</WeaFormItem>
)
}else{
return;
}
})
return group;
}
docOnchange=(type,ids, names, datas)=>{
if(type =="doc"){
this.setState({doc:ids})
}else if(type == "wf"){
this.setState({workflow:ids})
}else if(type == "crm"){
this.setState({crm:ids})
}else if(type == "task"){
this.setState({task:ids})
}else if(type == "prj"){
this.setState({project:ids})
}
}
fileUploadBack=(arr)=>{
this.setState({file:arr})
}
saveValue=(v)=>{
this.setState({value:v})
}
handleSubmitExchange=()=>{
const { value,doc,task,crm,workflow, project, file,key} = this.state;
const {targetid,discusstype} = this.props.contentStore;
if(value){
let params = {
id:targetid,
discusstype:discusstype,
remark:value.replace(/(^\s*)|(\s*$)/g,"").replace(/\n/g,'<br>'),
relateddoc:doc,
relatedwf:workflow,
relatedcrm:crm,
relatedprj:project,
relatedtsk:task,
relatedacc:`${file}`,
}
WeaTools.callApi('/api/proj/prjutil/doDiscussOpt', 'POST', params).then(data=>{
typeof this.props.callBack == "function" && this.props.callBack();
this.setState({
value:"",
"doc":"",
"task":"",
"crm":"",
"workflow":"",
"project":"",
file:"",
key:key+1
})
});
}else{
Modal.info({
title: getLabel(15172,"系统提示"),
content: getLabel(83900,"请填写交流信息"),
});
}
}
getAdButtons = () => {
const {contentStore} = this.props;
const {setShowSearchAd,clearFormFields,getRelateExchangeInfo} = contentStore;
return [
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3loogm@search`} type="primary" onClick={()=>{getRelateExchangeInfo();setShowSearchAd(false);}}>{getLabel(197,"搜索")}</Button>),
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sk8us3@reset`} type="ghost" onClick={()=>{clearFormFields();}}>{getLabel(2022,"重置")}</Button>),
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6s49jh@cancel`} type="ghost" onClick={()=>{setShowSearchAd(false)}}>{getLabel(201,"取消")}</Button>)
];
}
pageNoChange=(index)=>{
const {contentStore} = this.props;
const {getRelateExchangeInfo} = contentStore;
getRelateExchangeInfo({pageIndex:index});
}
}