339 lines
16 KiB
JavaScript
339 lines
16 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import {toJS} from "mobx"
|
||
import {WeaSearchGroup,WeaBrowser,WeaUpload,WeaLocaleProvider,WeaError} from "ecCom"
|
||
import { Button ,Row,Col,Spin} from 'antd';
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
||
@inject('prjImportStore')
|
||
@observer
|
||
class PrjImport extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state={
|
||
}
|
||
}
|
||
componentDidMount(){
|
||
const {prjImportStore } = this.props;
|
||
const {initDatas,} = prjImportStore;
|
||
initDatas({imptype:'prj',isdata:'1'});
|
||
}
|
||
|
||
getCircle() {
|
||
let style = {
|
||
width: 20,
|
||
height: 20,
|
||
backgroundColor: '#D8D8D8',
|
||
webkitBorderRadius: 10,
|
||
mozBorderRadius: 10,
|
||
msBorderRadius: 10,
|
||
oBorderRadius: 10,
|
||
borderRadius: 10,
|
||
textAlign: 'center',
|
||
}
|
||
return style;
|
||
}
|
||
|
||
getForm() {
|
||
const{ prjImportStore} = this.props;
|
||
const{isuse,mandstr,otherstr,prjmsg,imp_totalCount,imp_successCount} = prjImportStore;
|
||
let prjcode = "";
|
||
if(isuse==2){
|
||
prjcode = getLabel(17852,"项目编码");
|
||
}
|
||
const require = "<span>"+getLabel(18019,"必填")+": "+getLabel(195,"名称")+" "+getLabel(586,"项目类型")+" "+prjcode+" "+getLabel(144,"经理")+" "+getLabel(18628,"项目成员")+" "+mandstr+" </span>";
|
||
const other = "<span>"+getLabel(375,"其他")+": "+getLabel(15486,"序号")+" "+getLabel(432,"工作类型")+" "+getLabel(783,"相关客户")+" "+
|
||
getLabel(15263,"客户可见")+" "+getLabel(624,"成员可见")+" "+getLabel(636,"上级项目")+" "+getLabel(637,"评价书")+" "+getLabel(638,"确认书")+" "+getLabel(639,"建议书")+" "+otherstr+" </span>";
|
||
let condition =
|
||
[{
|
||
"title": getLabel(24893, "基础信息"),
|
||
"defaultshow": true,
|
||
"items": [{
|
||
"checkbox": false,
|
||
"colSpan": 2,
|
||
"conditionType": "BROWSER",
|
||
"detailtype": 1,
|
||
"domkey": ["prjtype"],
|
||
"fieldcol": 18,
|
||
"hasBorder": false,
|
||
"helpfulTipProps": {},
|
||
"isQuickSearch": false,
|
||
"label": getLabel(586,"项目类型"),
|
||
"labelcol": 5,
|
||
"length": 0,
|
||
"precision": 0,
|
||
"showOrder": 0,
|
||
"stringLength": 0,
|
||
"tipPosition": "bottom",
|
||
"viewAttr": 2,
|
||
"value":""
|
||
}, {
|
||
"checkbox": false,
|
||
"colSpan": 2,
|
||
"conditionType": "RESOURCEIMG",
|
||
"detailtype": 1,
|
||
"domkey": ["excelfile"],
|
||
"fieldcol": 18,
|
||
"hasBorder": false,
|
||
"helpfulTipProps": {},
|
||
"isQuickSearch": false,
|
||
"label": getLabel(16699, "Excel文件"),
|
||
"labelcol": 5,
|
||
"length": 0,
|
||
"precision": 0,
|
||
"showOrder": 0,
|
||
"stringLength": 0,
|
||
"tipPosition": "bottom",
|
||
"viewAttr": 2
|
||
}]
|
||
}, {
|
||
"title": getLabel(19010,"操作说明"),
|
||
"defaultshow": true,
|
||
"items": [{
|
||
"index": 1,
|
||
"value": getLabel(28447, "第一步，请先")
|
||
}, {
|
||
"index": 2,
|
||
"value": getLabel(32986,"第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉")
|
||
}, {
|
||
"index": 3,
|
||
"value": getLabel(32987,"第三步，选择填写好的Excel文档，点击提交按钮进行批量导入")
|
||
}, {
|
||
"index": 4,
|
||
"value": getLabel(32988,"第四步，如果以上步骤和Excel文档正确的话，数据会被正确的导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处")
|
||
}]
|
||
}, {
|
||
"title": getLabel(24962,"字段说明"),
|
||
"defaultshow": true,
|
||
"items": [{
|
||
"index": 1,
|
||
"value": getLabel(18617,"请按下列顺序排列需导入的EXCEL文档中各字段的顺序，其中红色的部分为必填字段，不能为空！")
|
||
}, {
|
||
"index": 2,
|
||
"value":require
|
||
}, {
|
||
"index": 3,
|
||
"value":other
|
||
}]
|
||
}, {
|
||
"title": getLabel(502196,"注意事项"),
|
||
"defaultshow": true,
|
||
"items": [{
|
||
"index": 1,
|
||
"value": getLabel(521941,"若要给已存在的项目导入子项目时，则需要在Excel模板中的上级项目字段输入已存在的项目，格式为：name_项目名称或者key_项目id")
|
||
}]
|
||
}]
|
||
let _arr = [];
|
||
|
||
condition.map((c, i) => {
|
||
let arr = [];
|
||
if (i == 0) { //基本信息
|
||
c.items.map((field, index) => {
|
||
arr.push({
|
||
com: (
|
||
<div>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9gvgcj@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@njxvor@${index}`} span={1} offset={4}>
|
||
<div style={{ marginTop: 15 }}>
|
||
<div style={this.getCircle()}><div style={{ paddingTop: 2 }}>{index + 1}</div></div>
|
||
</div>
|
||
</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dls3wy@${index}`} span={17}>
|
||
<div style={{ marginTop: 15 }}>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4dhi9n@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vrmca5@${index}`} span={field.labelcol}>{field.label}:</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lz6soa@${index}`} span={field.fieldcol}>
|
||
{this.getDom(field)}
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1,
|
||
})
|
||
})
|
||
//导入提示信息
|
||
arr.push({
|
||
com: (
|
||
<div>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@q7m2b0`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qa9yz0`} offset={4}>
|
||
<div style={{color:"red"}} >
|
||
<div className="card-call" dangerouslySetInnerHTML={{__html:prjmsg}}></div>
|
||
{ prjmsg!=""&&(parseInt(imp_totalCount)>0&&<span className="card-call" > {getLabel(128217,"总记录数")}{imp_totalCount}{getLabel(18256,"条")} ，{getLabel(128219,"成功导入")}{imp_successCount}{getLabel(18256,"条")}，{getLabel(25009,"失败")}{parseInt(imp_totalCount) - parseInt(imp_successCount)}{getLabel(18256,"条")}。 </span>) }
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1,
|
||
})
|
||
}
|
||
if (i == 1) { //导入说明
|
||
c.items.map((field, index) => {
|
||
arr.push({
|
||
com: (
|
||
<div>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0l4zwi@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rr7cvr@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
|
||
<div style={this.getCircle()}>
|
||
<div style={{ paddingTop: 2 }}>{index + 1}</div>
|
||
</div>
|
||
</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@76emty@${index}`} span={17} style={{ marginTop: 15 }}>
|
||
{this.getIllustration(field.value, field.link, index, field)}
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1
|
||
})
|
||
})
|
||
}
|
||
if (i == 2) { //字段说明
|
||
c.items.map((field, index) => {
|
||
arr.push({
|
||
com: (
|
||
<div>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@usfngx@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9yp78z@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
|
||
<div style={this.getCircle()}>
|
||
<div style={{ paddingTop: 2 }}>{index + 1}</div>
|
||
</div>
|
||
</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qouyby@${index}`} span={17} style={{ marginTop: 15 }}>
|
||
{this.getIllustration1(field.value, field.link, index, field)}
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1
|
||
})
|
||
})
|
||
}
|
||
if (i == 3) { //注意事项
|
||
c.items.map((field, index) => {
|
||
arr.push({
|
||
com: (
|
||
<div>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8mch6v@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vjk2sw@${index}`} span={1} offset={4} style={{ marginTop: 15 }}>
|
||
<div style={this.getCircle()}>
|
||
<div style={{ paddingTop: 2 }}>{index + 1}</div>
|
||
</div>
|
||
</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2ykdvp@${index}`} span={17} style={{ marginTop: 15 }}>
|
||
<p><div dangerouslySetInnerHTML={{ __html: field.value }} /></p>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1
|
||
})
|
||
})
|
||
}
|
||
_arr.push(<div><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ki7nqj@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
|
||
});
|
||
return _arr;
|
||
}
|
||
|
||
getDom(field) {
|
||
const { prjImportStore} = this.props;
|
||
const {filelist,replaceDatas} = prjImportStore;
|
||
let dom;
|
||
let domkey = field.domkey;
|
||
if (domkey&&domkey[0] == 'excelfile') {
|
||
dom = (<div>
|
||
<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@0x0xki`}
|
||
ref={ref => { prjImportStore.prjremind = ref } }
|
||
error={getLabel(126186,"未")+getLabel(82694,"选择Excel文件")}
|
||
tipPosition="bottom"
|
||
>
|
||
<div style={{ float: 'left', marginTop: -10 }}>
|
||
<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@touxwq`}
|
||
uploadUrl={`${window.ecologyContentPath || ''}/api/doc/upload/uploadFile`}
|
||
category='string'
|
||
limitType='xls'
|
||
maxFilesNumber={1}
|
||
datas={filelist}
|
||
onChange={(ids, list) => {
|
||
this.setFileId(ids, list)
|
||
}
|
||
} >
|
||
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2sormu`}>{getLabel(125333,"选择文件")}</Button>
|
||
</WeaUpload>
|
||
</div>
|
||
<div style={{ float: 'left', paddingLeft: 10 }}>
|
||
{filelist.length == 0 ? <p>{getLabel(384040,"未选择任何文件")}</p> : filelist.map(file => <p>{file.filename}</p>)}
|
||
</div>
|
||
</WeaError>
|
||
</div>)
|
||
} else {
|
||
dom = <div>
|
||
<span style={{display:"inline-block",float:"left",width:"35%",marginRight:10}}>
|
||
<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@acwx3u`} style={{display:"inline"}} replaceDatas={toJS(replaceDatas)} type={244} hasAdvanceSerach={true} title={getLabel(586,"项目类型")}
|
||
onChange={(ids, names, datas)=>{
|
||
prjImportStore.savePrjType(ids,datas,'prj');
|
||
}}/>
|
||
</span>
|
||
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nlsn35`} style={{display:"inline",marginBottom:"5px"}} type="primary" onClick={()=>this.regenTemplate()}>{getLabel(83555,"重生成模板")}</Button>
|
||
</div>
|
||
}
|
||
return dom;
|
||
}
|
||
|
||
getIllustration(val, url, index, link) {
|
||
const { prjImportStore} = this.props;
|
||
const {isrefresh,isuse } = prjImportStore;
|
||
let tempurl = "";
|
||
if(isuse == 0 || isuse == 1){
|
||
tempurl = (window.ecologyContentPath || '')+"/proj/imp/prjimp_xlsnew.xls?V="+isrefresh;
|
||
}else{
|
||
tempurl = (window.ecologyContentPath || '')+"/proj/imp/prjimp_xlsnew1.xls?V="+isrefresh;
|
||
}
|
||
let p;
|
||
if (index == 0) {
|
||
p = (<p>{val}：<a href={tempurl}>{getLabel(28446,"下载EXCEL文档模板")}</a></p>);
|
||
} else {
|
||
p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
|
||
}
|
||
return p;
|
||
}
|
||
getIllustration1(val, url, index, link) {
|
||
let p;
|
||
if (index == 0) {
|
||
p = (<p><div style={{fontWeight:700}} dangerouslySetInnerHTML={{ __html: val }} /></p>);
|
||
} else if(index==1){
|
||
p = (<p><div style={{color:"red"}} dangerouslySetInnerHTML={{ __html: val }} /></p>);
|
||
} else{
|
||
p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
|
||
}
|
||
return p;
|
||
}
|
||
|
||
render(){
|
||
const { prjImportStore } = this.props;
|
||
const { spinning } = prjImportStore;
|
||
return (
|
||
<div>
|
||
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@pik1x9`} spinning={spinning}>
|
||
{this.getForm()}
|
||
</Spin>
|
||
</div>
|
||
)
|
||
}
|
||
setFileId(ids, list) {
|
||
const {prjImportStore} = this.props;
|
||
prjImportStore.excelfile = ids;
|
||
prjImportStore.filelist = list;
|
||
}
|
||
|
||
regenTemplate=(key)=>{
|
||
const{ prjImportStore} = this.props;
|
||
prjImportStore.regenTemplate();
|
||
}
|
||
}
|
||
|
||
export default PrjImport; |