fix

pc4mobx/organization/apis/newImport.js

@@ -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);
+}
+

pc4mobx/organization/components/newImport/index.js

@@ -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)}>
+            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}}>
+                <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.getLinkName(c.linkName, index) : this.getIcon(c.icon)}
-                                    { curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle,c.url) : this.getTitle(c.title)}
+                    {curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle, c.url) : this.getTitle(c.title)}
-                            </div>
+                </div>
-                     </div>)
+            </div>)
         });
         return arr;
     }
 
     getIcon = (icon) => {
         return (<div className='hrm-card-icon'>
-                    <i className={icon} />
+            <i className={icon} />
-                </div>)
+        </div>)
     }
 
     getTitle = (title) => {
@@ -76,33 +77,33 @@ export default class newImport extends React.Component {
     }
 
     getLinkName = (linkName, index) => {
-        return (<div style={{width:'100%',height:95}}>
+        return (<div style={{ width: '100%', height: 95 }}>
-                     <div style={{textAlign:'center',paddingTop:45}}>
+            <div style={{ textAlign: 'center', paddingTop: 45 }}>
-                         <a onClick={()=>this.handleClick(index)} style={{color:'#fff',textDecoration: 'underline',fontSize:15}}>{linkName}</a>
+                <a onClick={() => this.handleClick(index)} style={{ color: '#fff', textDecoration: 'underline', fontSize: 15 }}>{linkName}</a>
-                     </div>
+            </div>
-                </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>
         )
     }

pc4mobx/organization/components/newImport/stepContent.js

@@ -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}
+                        data={toJS(data)}
-                        selectedKeys={selectedKeys}
+                        selectedKeys={toJS(selectedKeys)}
-                        onChange={(keys, datas) => newImport.setSelectedKeys(keys)}
+                        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>
+
         )
     }
 }

pc4mobx/organization/components/newImport/stepDialog.js

@@ -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() {

pc4mobx/organization/stores/newImport.js

@@ -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 {
+import {
-//   i18n
+  i18n
-// } from '../public/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 = [
+  @observable data = [];
-    { id: 1, name: '杨文元' },
+  @observable selectedKeys = [];
-    { id: 2, name: '李妍' },
+  selectData = [];
-    { 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 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 => {
+    API.getImportForm(params).then(res => {
-      if (data.status == '1') {
+      if (res.code == 200) {
-        this.condition = data.condition;
+        this.condition = res.data.condition;
-        if (data.condition != null && Array.isArray(data.condition) && data.condition.length > 0) {
+        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 = '';
   }