新导入

This commit is contained in:
Chengliang 2022-07-25 17:53:00 +08:00
parent cb010edefa
commit d3ca08680f
8 changed files with 649 additions and 1 deletions

View File

@ -0,0 +1,6 @@
import { WeaTools } from 'ecCom'
//获取导入表单
export const getImportForm = (params) => {
return WeaTools.callApi(`/api/hrm/import/resource/getImportForm`, 'GET', params);
}

View File

@ -0,0 +1,141 @@
import React from 'react'
import {
toJS
} from 'mobx'
import {
inject,
observer,
} from 'mobx-react'
import {
WeaTop,
WeaAlertPage,
} from 'ecCom'
import {
Spin,
} from 'antd';
import {
i18n
} from '../../public/i18n';
import '../../style/import.css';
import {addContentPath} from '../../util/index.js';
import StepDialog from './stepDialog';
@inject("newImport")
@observer
export default class newImport extends React.Component {
constructor(props) {
super(props);
this.state = ({
title:'基础数据导入',
})
}
componentWillMount() {
}
componentDidMount() {
}
getImportCard = () => {
const {
newImport
} = this.props, {
isMouseOver,
curIndex,
cardConfig,
setMouseStatus,
} = newImport;
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>)
});
return arr;
}
getIcon = (icon) => {
return (<div className='hrm-card-icon'>
<i className={icon} />
</div>)
}
getTitle = (title) => {
return (<div className='hrm-card-title'>{title}</div>)
}
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>)
}
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>)
}
handleClick = (index) => {
const {
newImport
} = this.props, {
} = newImport;
switch (index) {
case 0:
newImport.importType = 'company';
break;
case 1:
newImport.importType = 'department';
break;
case 2:
newImport.importType = 'jobtitle';
break;
case 3:
newImport.importType = 'resource';
break;
}
newImport.buttonTitle = i18n.button.nextStep();
newImport.current = 0;
newImport.visible = true;
newImport.getImportField();
}
render() {
const {
newImport,
} = this.props,{
visible
} = newImport,{
title,
} = this.state;
return (
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@sp0zb8`}
title={title}
icon={<i className='icon-coms-hrm' />}
iconBgcolor='#217346'
loading={true}
showDropIcon={true}
>
<div className='hrm-import-wrap'>{this.getImportCard()}</div>
{visible && <StepDialog ecId={`${this && this.props && this.props.ecId || ''}_StepDialog@633i8k`}/>}
</WeaTop>
)
}
}

View File

@ -0,0 +1,231 @@
import {
WeaSearchGroup,
WeaTransfer,
WeaNewScroll,
WeaSelect,
WeaUpload
} from 'ecCom'
import {
Spin,
Button,
Pagination,
Steps,
Row,
Col,
} from 'antd'
import {
inject,
observer,
} from 'mobx-react'
import {
WeaSwitch,
WeaTableNew
} from 'comsMobx'
import {
i18n
} from '../../public/i18n';
import { addContentPath } from '../../util/index.js'
@inject("newImport")
@observer
export default class StepDialog extends React.Component {
constructor(props) {
super(props);
}
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}
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>{i18n.label.noFileSelected()}</p> : filelist.map(file => <p>{file.filename}</p>)}
</div>
</div>)
}
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 {
getTemplateUrl,
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;
}
render = () => {
const {
newImport
} = this.props, {
data, selectedKeys, current
} = newImport;
return (
<div>
{
current == 0 && <WeaTransfer
data={data}
selectedKeys={selectedKeys}
onChange={(keys, datas) => newImport.setSelectedKeys(keys)}
/>
}
{
current == 1 && <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2908z2`} ref="scrollBar">
{this.getForm()}
</WeaNewScroll>
}
{
current == 2 && <div>获取导入结果</div>
}
</div>
)
}
}

View File

@ -0,0 +1,96 @@
import {
WeaNewScroll,
WeaSearchGroup,
WeaMoreButton,
WeaDialog
} from 'ecCom'
import {
inject,
observer,
} from 'mobx-react'
import {
Spin,
Button,
Pagination,
Steps
} from 'antd'
import {
WeaSwitch,
WeaTableNew
} from 'comsMobx'
import {
i18n
} from '../../public/i18n';
const Step = Steps.Step;
import StepContent from './stepContent';
@inject("newImport")
@observer
export default class StepDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 800,
height: 600,
title: '数据导入',
}
}
next() {
const {newImport} = this.props;
let {current,steps} = newImport;
current = current + 1;
if (current === steps.length) {
current = 0;
newImport.init();
}
newImport.current = current;
current === 1 && newImport.getImportForm();
current === steps.length - 1 && newImport.getImportResult();
}
render() {
const {
newImport
} = this.props, {
current,
visible,
steps
} = newImport,{
width,
height,
title
} = this.state;
const buttons = [
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jd6baw`} type="primary" onClick={() => this.next()}>{current === steps.length - 1 ? '导入完成' : i18n.button.nextStep()}</Button>),
];
return (
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1txk5f`}
title={title}
icon="icon-coms-upload"
iconBgcolor="#217346"
visible={visible}
closable={true}
hasScroll={true}
onCancel={() => newImport.init()}
buttons={buttons}
style={{ width: width, height: height }}
>
<div style={{ marginTop: 24 }}>
<Steps current={current}>
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
</Steps>
</div>
<div style={{ padding: 24 }}>
<StepContent ecId={`${this && this.props && this.props.ecId || ''}_StepContent@633i8k`}/>
</div>
</WeaDialog>
)
}
}

View File

@ -27,6 +27,7 @@ import Resource from "./components/resource/resource";
import ResourceExtend from "./components/resource/ResourceExtend";
import BasicInfoImport from "./components/import";
import HrmInfoExtend from "./components/resource/HrmInfoExtend";
import NewImport from "./components/newImport"
import stores from "./stores";
import "./style/index";
@ -87,7 +88,7 @@ const Routes = (
<Route key="resourceExtend" path="resourceExtend/:id" component={ResourceExtend} />
<Route key="hrmInfoExtend" path="hrmInfoExtend" component={HrmInfoExtend} />
<Route key="basicinfoimport" path="basicinfoimport" component={BasicInfoImport} />
<Route key="newImport" path="newImport" component={NewImport} />
</Route>
);

View File

@ -853,6 +853,7 @@ export const i18n = {
back: () => getLabel(1290, '返回'),
createType: () => getLabel(30131, '新建类型'),
editTypeInfo: () => getLabel(32732, '编辑类型'),
nextStep:() => getLabel(30131, '下一步'),
batchOpen: () => getLabel(534249, '批量解锁'),
collect: () => getLabel(28111, '收藏'),

View File

@ -22,6 +22,7 @@ import {DatasImportStore} from "./datasImport";
import {HrmImportResource} from "./importresource";
import {HrmImportCommon} from "./importCommon";
import {HrmBasicDataImport} from "./import";
import {newImportStore} from "./newImport";
module.exports = {
@ -49,4 +50,5 @@ module.exports = {
hrmImportResource:new HrmImportResource(),
hrmImportCommon:new HrmImportCommon(),
hrmBasicDataImport:new HrmBasicDataImport(),
newImport: new newImportStore()
};

View File

@ -0,0 +1,170 @@
import {
observable,
action
} from 'mobx';
import {
WeaForm
} from 'comsMobx';
import * as API from '../apis/newImport';
import * as Util from '../util/index';
import {
validate,
getFormParamValue
} from '../util'
import {
message,
Modal,
Button
} from 'antd';
import {
WeaTableNew
} from 'comsMobx'
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
import {
has
} from 'lodash';
const toJS = mobx.toJS;
const {
TableStore
} = WeaTableNew;
const confirm = Modal.confirm;
// import {
// i18n
// } from '../public/i18n';
export class newImportStore {
/********************* cardConfig *********************/
cardConfig = [
{
"subTitle": "分部设置",
"bgColor": "#92B75B",
"icon": "icon-coms-Department-number",
"title": "分部",
"linkName": "分部导入",
"url": "/spa/hrm/engine.html#/hrmengine/organization"
},
{
"subTitle": "部门设置",
"bgColor": "#92B75B",
"icon": "icon-coms-Department-number",
"title": "部门",
"linkName": "部门导入",
"url": "/spa/hrm/engine.html#/hrmengine/organization"
},
{
"subTitle": "岗位设置",
"bgColor": "#49B2FE",
"icon": "icon-coms-hrm",
"title": "岗位",
"linkName": "岗位体系导入",
"url": "/spa/hrm/engine.html#/hrmengine/post"
},
{
"subTitle": "组织维护",
"bgColor": "#51A39A",
"icon": "icon-coms-crm",
"title": "人员",
"linkName": "人员导入",
"url": "/spa/hrm/engine.html#/hrmengine/organization"
}
]
@observable isMouseOver = false;
@observable curIndex = '';
@observable visible = false;
@action setMouseStatus = (index, bool) => {
this.curIndex = index;
this.isMouseOver = bool;
}
/********************* stepDialog *********************/
steps = [
{ title: '设置导入字段'},
{ title: '获取导入模板' },
{ title: '导入结果' }
];
@observable importType = '';
@observable current = 0;
@observable buttonTitle = '';
/********************* stepContent *********************/
data = [
{ id: 1, name: '杨文元' },
{ id: 2, name: '李妍' },
{ id: 3, name: '刘长庚' },
{ id: 4, name: '孟玲' },
{ id: 5, name: '张建华' },
];
selectedKeys = [1, 2];
@observable condition = [];
@observable importParams = {}; //重复验证字段
@observable operateType = 'add'; //导入类型
@observable filelist = []; //文件信息
@observable excelfile = []; //文件id
@observable templetName = "导入模板";
getTemplateUrl
@action setParam = (k, v) => {
const p = toJS(this.importParams);
Object.assign(p, {
[k]: v
});
this.importParams = p;
}
@action("获取导入字段") getImportField() {
}
@action("获取导入表单") getImportForm() {
const params = {
importType: this.importType,
}
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) {
this.condition[0].items.map(item => {
if (item.conditionType === 'SELECT' && item.domkey[0] === 'importType') {
item.options.map(op => {
if (op.selected)
this.operateType = op.key;
})
}
item.domkey[0].indexOf('keyField') > -1 && this.setParam(item.domkey[0], item.value);
})
}
} else {
// message.warning(data.message);
}
}, error => {
message.warning(error.message);
})
}
@action("获取导入结果") getImportResult() {
}
setSelectedKeys(keys) {
this.selectedKeys = keys;
}
@action("初始化弹框内容") init() {
this.filelist = [];
this.excelfile = [];
this.visible = false;
}
}