288 lines
11 KiB
JavaScript
288 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 && <WeaTransfer
|
|
data={toJS(data)}
|
|
selectedKeys={toJS(selectedKeys)}
|
|
onChange={(keys, datas) => {
|
|
newImport.setSelectedKeys(keys);
|
|
newImport.setSelectData(datas);
|
|
}}
|
|
/>
|
|
}
|
|
{
|
|
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>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
|