This commit is contained in:
Chengliang 2022-07-27 14:54:59 +08:00
parent 5977ad0d08
commit 9263c27fd3
5 changed files with 273 additions and 61 deletions

View File

@ -1,6 +1,22 @@
import { WeaTools } from 'ecCom'
//选择导入字段
export const getImportFields = (params) => {
return WeaTools.callApi(`/api/bs/hrmorganization/commonimport/getImportFields`, 'GET', params);
}
//导入文件提交
export const saveImport = (params) => {
return WeaTools.callApi(`/api/bs/hrmorganization/commonimport/saveImport`, 'POST', params);
}
//获取导入表单
export const getImportForm = (params) => {
return WeaTools.callApi(`/api/hrm/import/resource/getImportForm`, 'GET', params);
}
return WeaTools.callApi(`/api/bs/hrmorganization/commonimport/getImportForm`, 'GET', params);
}
//获取导入结果
export const getImportResult = (params) => {
return WeaTools.callApi(`/api/bs/hrmorganization/commonimport/getImportResult`, 'GET', params);
}

View File

@ -9,6 +9,7 @@ import {
import {
WeaTop,
WeaAlertPage,
WeaBrowser
} from 'ecCom'
import {
Spin,
@ -18,7 +19,7 @@ import {
} from '../../public/i18n';
import '../../style/import.css';
import {addContentPath} from '../../util/index.js';
import { addContentPath } from '../../util/index.js';
import StepDialog from './stepDialog';
@ -28,8 +29,8 @@ export default class newImport extends React.Component {
constructor(props) {
super(props);
this.state = ({
title:'基础数据导入',
title: '基础数据导入',
})
}
@ -41,7 +42,7 @@ export default class newImport extends React.Component {
}
getImportCard = () => {
const {
newImport
@ -55,20 +56,20 @@ export default class newImport extends React.Component {
let arr = [];
cardConfig.map((c, index) => {
arr.push(<div className='hrm-card-out' style={(index == 0 || index == 4) ? {marginLeft:0} : {}} onMouseEnter={() => setMouseStatus(index, true)} onMouseLeave={() => setMouseStatus(index, false)}>
<div className='hrm-card-inwrap' style={curIndex==index&&isMouseOver?{backgroundColor:'#858585'}:{backgroundColor:c.bgColor}}>
{ curIndex == index && isMouseOver ? this.getLinkName(c.linkName,index) : this.getIcon(c.icon)}
{ curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle,c.url) : this.getTitle(c.title)}
</div>
</div>)
arr.push(<div className='hrm-card-out' style={(index == 0 || index == 4) ? { marginLeft: 0 } : {}} onMouseEnter={() => setMouseStatus(index, true)} onMouseLeave={() => setMouseStatus(index, false)}>
<div className='hrm-card-inwrap' style={curIndex == index && isMouseOver ? { backgroundColor: '#858585' } : { backgroundColor: c.bgColor }}>
{curIndex == index && isMouseOver ? this.getLinkName(c.linkName, index) : this.getIcon(c.icon)}
{curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle, c.url) : this.getTitle(c.title)}
</div>
</div>)
});
return arr;
}
getIcon = (icon) => {
return (<div className='hrm-card-icon'>
<i className={icon} />
</div>)
<i className={icon} />
</div>)
}
getTitle = (title) => {
@ -76,33 +77,33 @@ export default class newImport extends React.Component {
}
getLinkName = (linkName, index) => {
return (<div style={{width:'100%',height:95}}>
<div style={{textAlign:'center',paddingTop:45}}>
<a onClick={()=>this.handleClick(index)} style={{color:'#fff',textDecoration: 'underline',fontSize:15}}>{linkName}</a>
</div>
</div>)
return (<div style={{ width: '100%', height: 95 }}>
<div style={{ textAlign: 'center', paddingTop: 45 }}>
<a onClick={() => this.handleClick(index)} style={{ color: '#fff', textDecoration: 'underline', fontSize: 15 }}>{linkName}</a>
</div>
</div>)
}
getSubTitle = (subTitle, url) => {
return (<div style={{height:35,textAlign:'right',paddingRight:10,backgroundColor:'#6A6A6A',color: '#fff',paddingTop:5}}><a href={addContentPath(url)} target='_blank' className='hrm-import-link'>{subTitle}</a></div>)
return (<div style={{ height: 35, textAlign: 'right', paddingRight: 10, backgroundColor: '#6A6A6A', color: '#fff', paddingTop: 5 }}><a href={addContentPath(url)} target='_blank' className='hrm-import-link'>{subTitle}</a></div>)
}
handleClick = (index) => {
const {
newImport
newImport
} = this.props, {
} = newImport;
switch (index) {
case 0:
case 0:
newImport.importType = 'company';
break;
case 1:
newImport.importType = 'department';
break;
case 2:
case 2:
newImport.importType = 'jobtitle';
break;
case 3:
case 3:
newImport.importType = 'resource';
break;
}
@ -118,9 +119,9 @@ export default class newImport extends React.Component {
render() {
const {
newImport,
} = this.props,{
} = this.props, {
visible
} = newImport,{
} = newImport, {
title,
} = this.state;
@ -133,7 +134,7 @@ export default class newImport extends React.Component {
showDropIcon={true}
>
<div className='hrm-import-wrap'>{this.getImportCard()}</div>
{visible && <StepDialog ecId={`${this && this.props && this.props.ecId || ''}_StepDialog@633i8k`}/>}
{visible && <StepDialog ecId={`${this && this.props && this.props.ecId || ''}_StepDialog@633i8k`} />}
</WeaTop>
)
}

View File

@ -4,7 +4,9 @@ import {
WeaTransfer,
WeaNewScroll,
WeaSelect,
WeaUpload
WeaUpload,
WeaDialog,
WeaInput
} from 'ecCom'
import {
Spin,
@ -13,6 +15,8 @@ import {
Steps,
Row,
Col,
Progress,
Icon
} from 'antd'
import {
inject,
@ -27,6 +31,8 @@ import {
i18n
} from '../../public/i18n';
import { addContentPath } from '../../util/index.js'
import { toJS } from 'mobx';
const WeaTable = WeaTableNew.WeaTable;
@inject("newImport")
@ -34,8 +40,13 @@ import { addContentPath } from '../../util/index.js'
export default class StepDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
selectedKeys: []
}
}
getCircle() {
let style = {
width: 20,
@ -155,6 +166,7 @@ export default class StepDialog extends React.Component {
category='string'
limitType='xls,xlsx'
maxFilesNumber={1}
viewAttr={3}
datas={filelist}
{...field.otherParams}
onChange={
@ -166,9 +178,11 @@ export default class StepDialog extends React.Component {
</WeaUpload>
</div>
<div style={{ float: 'left', paddingLeft: 10 }}>
{filelist.length == 0 ? <p>{i18n.label.noFileSelected()}</p> : filelist.map(file => <p>{file.filename}</p>)}
{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;
}
@ -186,7 +200,6 @@ export default class StepDialog extends React.Component {
newImport
} = this.props;
const {
getTemplateUrl,
importParams
} = newImport;
let p;
@ -198,20 +211,35 @@ export default class StepDialog extends React.Component {
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
data, selectedKeys, current, pvisable, percent, failnum, succnum, importResultTip, importResultStore, importStatus, loading, date
} = newImport;
return (
<div>
{
current == 0 && <WeaTransfer
data={data}
selectedKeys={selectedKeys}
onChange={(keys, datas) => newImport.setSelectedKeys(keys)}
data={toJS(data)}
selectedKeys={toJS(selectedKeys)}
onChange={(keys, datas) => {
newImport.setSelectedKeys(keys);
newImport.setSelectData(datas);
}}
/>
}
{
@ -220,10 +248,38 @@ export default class StepDialog extends React.Component {
</WeaNewScroll>
}
{
current == 2 && <div>获取导入结果</div>
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>
)
}
}

View File

@ -49,7 +49,7 @@ export default class StepDialog extends React.Component {
}
newImport.current = current;
current === 1 && newImport.getImportForm();
current === steps.length - 1 && newImport.getImportResult();
current === steps.length - 1 && newImport.startImport();
}
render() {

View File

@ -1,6 +1,7 @@
import {
observable,
action
action,
computed
} from 'mobx';
import {
WeaForm
@ -30,9 +31,12 @@ const {
TableStore
} = WeaTableNew;
const confirm = Modal.confirm;
// import {
// i18n
// } from '../public/i18n';
import {
i18n
} from '../public/i18n';
import {
findIndex
} from 'lodash';
export class newImportStore {
@ -93,26 +97,33 @@ export class newImportStore {
@observable importType = '';
@observable current = 0;
@observable buttonTitle = '';
@observable pvisable = false;
/********************* stepContent *********************/
data = [
{ id: 1, name: '杨文元' },
{ id: 2, name: '李妍' },
{ id: 3, name: '刘长庚' },
{ id: 4, name: '孟玲' },
{ id: 5, name: '张建华' },
];
selectedKeys = [1, 2];
@observable data = [];
@observable selectedKeys = [];
selectData = [];
@observable condition = [];
@observable importParams = {}; //重复验证字段
@observable operateType = 'add'; //导入类型
@observable filelist = []; //文件信息
@observable excelfile = []; //文件id
@observable excelfile = ''; //文件id
@observable templetName = "导入模板";
getTemplateUrl
@observable percent = 0;
@observable failnum = 0; //失败数量
@observable succnum = 0; //成功数量
@observable importResultTip = ''; //导入结果提示
@observable importResultStore = new TableStore();
@observable importStatus = 'importing'; //导入状态
@observable loading = true;
@observable date = '';
@observable keyField = 'workcode';
@observable otherParams; //表单其它参数
@observable pId = '';//导入记录
interval
@action setParam = (k, v) => {
const p = toJS(this.importParams);
@ -123,17 +134,43 @@ export class newImportStore {
}
@action("获取导入字段") getImportField() {
this.loading = true;
const params = {
importType:this.importType
}
API.getImportFields(params).then(res => {
if(res.code == 200) {
this.data = res.data.data;
this.selectedKeys = res.data.selectedKeys;
res.data.data && this.selectedKeys.forEach(id => {
const index = findIndex(res.data.data, { id });
this.selectData.push(res.data.data[index])
})
this.loading = false;
}else {
message.warning(res.msg);
}
},error => {
message.warning(error.msg);
})
}
@action("获取导入表单") getImportForm() {
let columns = [];
this.selectData.forEach(item => {
columns.push(item.name)
})
const params = {
importType: this.importType,
columns:columns
}
API.getImportForm(params).then(data => {
if (data.status == '1') {
this.condition = data.condition;
if (data.condition != null && Array.isArray(data.condition) && data.condition.length > 0) {
API.getImportForm(params).then(res => {
if (res.code == 200) {
this.condition = res.data.condition;
if (res.data.condition != null && Array.isArray(res.data.condition) && res.data.condition.length > 0) {
this.condition[0].items.map(item => {
if (item.conditionType === 'SELECT' && item.domkey[0] === 'importType') {
item.options.map(op => {
@ -142,28 +179,130 @@ export class newImportStore {
})
}
item.domkey[0].indexOf('keyField') > -1 && this.setParam(item.domkey[0], item.value);
})
}
} else {
// message.warning(data.message);
message.warning(res.msg);
}
}, error => {
message.warning(error.message);
message.warning(error.msg);
})
}
@action("开始导入") startImport() {
if(this.filelist.length == 0) {
message.error("请上传需要导入的文件!")
this.current = this.current - 1;
return;
}
this.pvisable = true;
//导入文件提交
let params = {
...this.importParams,
keyField:this.keyField,
importType:this.importType,
operateType:this.operateType,
excelfile:this.excelfile
}
if (this.otherParams != null) {
Object.assign(params, {
otherParams: JSON.stringify(this.otherParams)
})
}
this.doImport(params)
this.interval = setInterval(() => this.getImportProcess(), 200);
}
@action("文件提交") doImport(params) {
API.saveImport(params).then(res => {
if(res.code == 200) {
this.pId = res.data.pId;
}else {
clearInterval(this.interval);
this.pvisable = false;
message.error("文件导入失败")
}
})
}
// @computed get pId() {
// return this.percent = 100;
// }
@action("获取导入进度") getImportProcess() {
if(this.pId != '') {
clearInterval(this.interval);
this.percent = 100;
const _this = this;
setTimeout(function(){
_this.pvisable = false;
_this.getImportResult();
},1000)
}else {
//调用导入进度api
let max = 95;
let min = this.percent;
if(this.percent < max) {
this.percent = Math.floor(Math.random() * (max - min)) + min;
}
}
}
@action("获取导入结果") getImportResult() {
let params = {
pId:this.pId
}
API.getImportResult(params).then((res) => {
if (res.code == 200) {
this.failnum = res.data.failnum;
this.succnum = res.data.succnum;
this.importStatus = res.data.importStatus;
if (this.failnum > 0) {
let info = i18n.label.importResourceResultInfo();
info = info.replace('{rownum}', this.succnum + this.failnum).replace('{succnum}', this.succnum);
this.importResultTip = info;
this.importResultStore.getDatas(res.data.datas, 1);
} else {
let info = i18n.label.importResourceResultInfo1();
info = info.replace('{rownum}', this.succnum);
this.importResultTip = info;
}
} else {
message.warning(res.msg);
}
}, error => {
message.warning(error.msg);
})
}
setSelectedKeys(keys) {
this.selectedKeys = keys;
this.date = new Date();
}
setSelectData(value){
this.selectData = value;
}
@action("初始化弹框内容") init() {
this.filelist = [];
this.excelfile = [];
this.excelfile = '';
this.visible = false;
this.percent = 0;
this.failnum = 0;
this.succnum = 0;
this.importResultTip = '';
this.importResultStore = new TableStore();
this.importStatus = 'importing';
this.data = [];
this.selectData = [];
this.selectedKeys = [];
this.condition = [];
this.keyField = 'workcode';
this.pId = '';
}