292 lines
11 KiB
JavaScript
292 lines
11 KiB
JavaScript
|
||
import {
|
||
WeaSearchGroup,
|
||
WeaTransfer,
|
||
WeaNewScroll,
|
||
WeaSelect,
|
||
WeaUpload,
|
||
WeaDialog,
|
||
WeaInput
|
||
} from 'ecCom'
|
||
import {
|
||
Spin,
|
||
Button,
|
||
Pagination,
|
||
Steps,
|
||
Row,
|
||
Col,
|
||
Progress,
|
||
Icon
|
||
} from 'antd'
|
||
import {
|
||
inject,
|
||
observer,
|
||
} from 'mobx-react'
|
||
import {
|
||
WeaSwitch,
|
||
WeaTableNew
|
||
} from 'comsMobx'
|
||
|
||
import {
|
||
i18n
|
||
} from '../../public/i18n';
|
||
import { addContentPath } from '../../util/index.js'
|
||
import { toJS } from 'mobx';
|
||
const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
|
||
@inject("newImport")
|
||
@observer
|
||
export default class StepDialog extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
data: [],
|
||
selectedKeys: []
|
||
}
|
||
}
|
||
|
||
|
||
getCircle() {
|
||
let style = {
|
||
width: 20,
|
||
height: 20,
|
||
backgroundColor: '#D8D8D8',
|
||
webkitBorderRadius: 10,
|
||
mozBorderRadius: 10,
|
||
msBorderRadius: 10,
|
||
oBorderRadius: 10,
|
||
borderRadius: 10,
|
||
//paddingLeft: 6,
|
||
textAlign: 'center',
|
||
}
|
||
return style;
|
||
}
|
||
|
||
getForm() {
|
||
const {
|
||
newImport
|
||
} = this.props;
|
||
const {
|
||
condition
|
||
} = newImport;
|
||
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@m9t2kn@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rc5who@${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@f1sc6s@${index}`} span={14}>
|
||
<div style={{ marginTop: 15 }}>
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5gsx6o@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qrdxst@${index}`} span={field.labelcol} style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} title={field.label}>{field.label}:</Col>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7jy5um@${index}`} span={field.fieldcol}>
|
||
{this.getDom(field)}
|
||
</Col>
|
||
</Row>
|
||
</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@hz50xl@${index}`}>
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fgfbrv@${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@5rom81@${index}`} span={17} style={{ marginTop: 15 }}>
|
||
{this.getIllustration(field.value, field.link, index, field)}
|
||
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
),
|
||
colSpan: 1
|
||
})
|
||
})
|
||
}
|
||
_arr.push(<div><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@bo47pp@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={arr} col={1} /></div>)
|
||
|
||
});
|
||
return _arr;
|
||
}
|
||
|
||
getDom(field) {
|
||
const {
|
||
newImport
|
||
} = this.props;
|
||
const {
|
||
filelist
|
||
} = newImport;
|
||
let dom;
|
||
let domkey = field.domkey;
|
||
if (domkey[0] == 'templet') {
|
||
dom = <a href={addContentPath(field.value)}>{i18n.label.importTemplate()}</a>;
|
||
} else if (domkey[0].indexOf('keyField') > -1) {
|
||
const vals = field.options.filter(v => v.selected == true);
|
||
let val = '';
|
||
vals.length > 0 && (val = vals[0].key);
|
||
dom = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yzc92h`}
|
||
style={{ width: 200 }}
|
||
options={field.options}
|
||
value={newImport.importParams[domkey[0]] || field.value || val}
|
||
onChange={(v) => { newImport.setParam(domkey[0], v) }}
|
||
/>
|
||
} else if (domkey[0] == 'importType') {
|
||
dom = <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@holhhb`}
|
||
style={{ width: 200 }}
|
||
options={field.options}
|
||
value={newImport.operateType}
|
||
onChange={(v) => { newImport.operateType = v }}
|
||
/>
|
||
} else if (domkey[0] == 'excelfile' || domkey[0] == 'importfile') {
|
||
dom = (<div>
|
||
<div style={{ float: 'left', marginTop: -10 }}>
|
||
<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@iu8n01`}
|
||
uploadUrl='/api/doc/upload/uploadFile'
|
||
category='string'
|
||
limitType='xls,xlsx'
|
||
maxFilesNumber={1}
|
||
viewAttr={3}
|
||
datas={filelist}
|
||
{...field.otherParams}
|
||
onChange={
|
||
(ids, list) => {
|
||
this.setFileId(ids, list)
|
||
}
|
||
} >
|
||
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@87232v`}>{i18n.button.selectFile()}</Button>
|
||
</WeaUpload>
|
||
</div>
|
||
<div style={{ float: 'left', paddingLeft: 10 }}>
|
||
{filelist.length == 0 ? <p style={{marginLeft:10}}>{i18n.label.noFileSelected()}</p> : filelist.map(file => <p>{file.filename}</p>)}
|
||
</div>
|
||
</div>)
|
||
}else {
|
||
dom = <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@rg6f3p`} hasBorder={true} viewAttr={1} value={field.value}/>
|
||
}
|
||
return dom;
|
||
}
|
||
|
||
setFileId(ids, list) {
|
||
const {
|
||
newImport
|
||
} = this.props;
|
||
newImport.excelfile = ids;
|
||
newImport.filelist = list;
|
||
}
|
||
|
||
getIllustration(val, url, index, link) {
|
||
const {
|
||
newImport
|
||
} = this.props;
|
||
const {
|
||
importParams
|
||
} = newImport;
|
||
let p;
|
||
if (index == 0) {
|
||
p = (<p>{i18n.label.downLoadTemplete()}: <a href={addContentPath(url)}>{i18n.label.importTemplate()}</a></p>);
|
||
} else {
|
||
p = (<p><div dangerouslySetInnerHTML={{ __html: val }} /></p>);
|
||
}
|
||
return p;
|
||
}
|
||
|
||
reRenderColumns(c) {
|
||
c.forEach(item => {
|
||
if (item.dataIndex == 'operatedetail') {
|
||
item.render = function (text, record) {
|
||
return <span style={{ color: '#FF0000' }}>{text}</span>
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
render = () => {
|
||
const {
|
||
newImport
|
||
} = this.props, {
|
||
data, selectedKeys, current, pvisable, percent, failnum, succnum, importResultTip, importResultStore, importStatus, loading, date
|
||
} = newImport;
|
||
|
||
|
||
|
||
return (
|
||
<div>
|
||
{
|
||
current == 0 &&
|
||
<div>
|
||
<p style={{"color":"red","fontSize":"15px"}}>注意:右侧列表默认加载的为必填字段！！！</p>
|
||
<WeaTransfer
|
||
data={toJS(data)}
|
||
selectedKeys={toJS(selectedKeys)}
|
||
onChange={(keys, datas) => {
|
||
newImport.setSelectedKeys(keys);
|
||
newImport.setSelectData(datas);
|
||
}}
|
||
/>
|
||
</div>
|
||
}
|
||
{
|
||
current == 1 && <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2908z2`} ref="scrollBar">
|
||
{this.getForm()}
|
||
</WeaNewScroll>
|
||
}
|
||
{
|
||
current == 2 && <div>
|
||
{
|
||
importStatus == 'over' && <div className="hrm-import-result-icon" style={{ paddingTop: failnum == 0 ? 100 : 15 }}>
|
||
<div style={{ width: 30, height: 30, borderRadius: 25, padding: 8, display: 'inline-block', backgroundColor: succnum > 0 ? '#54D3A2' : '#FF0000' }}>
|
||
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@2fblod`} type={succnum > 0 ? 'check' : 'cross'} style={{ color: '#fff' }} />
|
||
</div><span style={{ paddingLeft: 5 }}>{importResultTip}</span>
|
||
</div>
|
||
}
|
||
{
|
||
failnum > 0 &&
|
||
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h7l6fo`}
|
||
comsWeaTableStore={importResultStore}
|
||
bordered
|
||
needScroll={true}
|
||
scroll={{ y: 330 }}
|
||
getColumns={c => this.reRenderColumns(c)}
|
||
/>
|
||
}
|
||
<WeaDialog
|
||
title="导入进度"
|
||
onCancel={() => newImport.pvisable = false}
|
||
visible={pvisable}
|
||
style={{ width: 300, height: 50 }}
|
||
>
|
||
<div style={{ "padding": "15px" }}>
|
||
<Progress percent={percent} strokeWidth={7} />
|
||
</div>
|
||
</WeaDialog>
|
||
</div>
|
||
}
|
||
</div>
|
||
|
||
)
|
||
}
|
||
}
|
||
|
||
|