导入

pc4mobx/hrmSalary/apis/cumDeduct.js

@@ -47,4 +47,16 @@ export const importCumDeductParam = params => {
         }, 
         body: JSON.stringify(params)
     }).then(res => res.json())
+}
+
+// 数据采集-获取累计专项附加扣除-导入预览
+export const importCumDeductPreview = params => {
+    return fetch('/api/bs/hrmsalary/addUpDeduction/preview', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }

pc4mobx/hrmSalary/components/importModal/columns.js

@@ -0,0 +1,62 @@
+export const columns = [
+    {
+        title: "姓名",
+        dataIndex: 'username',
+        key: 'username',
+    },
+    {
+        title: "个税扣缴义务人",
+        dataIndex: 'taxAgentName',
+        key: 'taxAgentName',
+    },
+    {
+        title: "部门",
+        dataIndex: 'departmentName',
+        key: 'departmentName',
+    },
+    {
+        title: "手机号",
+        dataIndex: 'mobile',
+        key: 'mobile',
+    },
+    {
+        title: "工号",
+        dataIndex: 'jobNum',
+        key: 'jobNum',
+    },
+    {
+        title: "证件号码",
+        dataIndex: 'idNo',
+        key: 'idNo',
+    },
+    {
+        title: "入职日期",
+        dataIndex: 'hiredate',
+        key: 'hiredate',
+    },
+    {
+        title: "累计子女教育",
+        dataIndex: 'addUpChildEducation',
+        key: 'addUpChildEducation',
+    },
+    {
+        title: "累计继续教育",
+        dataIndex: 'addUpContinuingEducation',
+        key: 'addUpContinuingEducation',
+    },
+    {
+        title: "累计住房贷款利息",
+        dataIndex: 'addUpHousingLoanInterest',
+        key: 'addUpHousingLoanInterest',
+    },
+    {
+        title: "累计住房租金",
+        dataIndex: 'addUpHousingRent',
+        key: 'addUpHousingRent',
+    },
+    {
+        title: "累计赡养老人",
+        dataIndex: 'addUpSupportElderly',
+        key: 'addUpSupportElderly',
+    }
+]

pc4mobx/hrmSalary/components/importModal/index.js

@@ -2,11 +2,14 @@ import React from 'react';
 import { WeaSteps, WeaDatePicker, WeaInput, WeaSelect } from 'ecCom';
 import { Upload, Icon, Modal, Row, Col, Button } from "antd";
 import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
 
 import ModalStep1 from './modalStep1'
 import ModalStep2 from './modalStep2'
 import ModalStep3 from './modalStep3'
 
+import { columns } from './columns'
+
 const Dragger = Upload.Dragger;
 
 const Step = WeaSteps.Step;
@@ -30,15 +33,13 @@ export default class ImportModal extends React.Component {
     }
 
     nextStep() {
-        this.setState({
-            currentStep: this.state.currentStep + 1
-        })
+        const { cumDeductStore: { step, setStep }} = this.props;
+        setStep(step + 1)
     }
 
     preStep() {
-        this.setState({
-            currentStep: this.state.currentStep - 1
-        })
+        const { cumDeductStore: { step, setStep }} = this.props;
+        setStep(step - 1);
     }
 
     renderFormComponent() {
@@ -70,18 +71,33 @@ export default class ImportModal extends React.Component {
         )
     }
     handleStep1Next() {
-        const { cumDeductStore: { importFile }} = this.props;
+        const { cumDeductStore: { importFile, setStep }} = this.props;
         const { fileId, datetime, taxAgentId} = this.state;
+        setStep(1)
+    }
+
+    handlePreviewDate() {
+        const { cumDeductStore: { previewImport }} = this.props;
+        const { fileId, datetime, taxAgentId } = this.state;
+        previewImport({
+            imageId: fileId,
+            declareMonth: datetime,
+            taxAgentId: taxAgentId
+        })
+    }
+
+    hanleImportData() {
+        const { cumDeductStore: { importFile }} = this.props;
+        const { fileId, datetime, taxAgentId } = this.state;
         importFile({
             imageId: fileId,
             declareMonth: datetime,
             taxAgentId: taxAgentId
-        });
-        
+        })
     }
+
     render() {
-        const { currentStep } = this.state;
-        const { cumDeductStore: { step }} = this.props;
+        const { cumDeductStore: { step, slideDataSource, importResult, setSlideVisiable, setStep, setModalVisiable }} = this.props;
         return (
         <Modal title="数据导入" visible={this.props.visiable}
           onCancel={this.props.onCancel}
@@ -104,10 +120,17 @@ export default class ImportModal extends React.Component {
                     }}/>)
             }
             {
-                step == 1 && (<ModalStep2 onStep2Next={() => {this.nextStep()}} onStep2Pre={() => {this.preStep()}}/>)
+                step == 1 && (<ModalStep2
+                    onPreviewDate={() => this.handlePreviewDate()}
+                    dataSource={slideDataSource}
+                    columns={columns}
+                    onStep2Next={() => {this.nextStep()}} onStep2Pre={() => {this.preStep()}}/>)
             }
             {
-                step == 2 && (<ModalStep3 onFinish={() => {}}/>)
+                step == 2 && (<ModalStep3
+                    onImportData={() => this.hanleImportData()}
+                    importResult={toJS(importResult)}
+                    onFinish={() => {setModalVisiable(false); setStep(0)}}/>)
             }
             
         </Modal>

pc4mobx/hrmSalary/components/importModal/modalStep2.js

@@ -1,13 +1,17 @@
 import React from 'react'
 import { Table, Button } from 'antd'
-import {testColumns, dataSource} from '../../common/columns'
 
 export default class ModalStep2 extends React.Component {
+
+    componentWillMount() {
+        this.props.onPreviewDate();
+    }
     render() {
+        const {dataSource, columns} = this.props;
         return (
             <div style={{height: "550px", display: "flex", flexFlow: "column"}}>
                 <div style={{flex: "1"}}>
-                    <Table dataSource={dataSource} columns={testColumns}/>
+                    <Table dataSource={dataSource} columns={columns}/>
                 </div>
                 <div className="footerBtnWrapper" style={{marginTop: "10px", overflow: "hidden", height: "30px"}}>
                     <Button type="primary" style={{float: "right", marginLeft: "10px"}} onClick={this.props.onStep2Next}>下一步</Button>

pc4mobx/hrmSalary/components/importModal/modalStep3.js

@@ -1,16 +1,34 @@
 import React from "react"
 import successImg from "./success.svg"
-import { Button } from "antd"
+import { Button, Table } from "antd"
 
 export default class ModalStep3 extends React.Component {
+
+    componentWillMount() {
+        this.props.onImportData();
+        this.columns = [
+            {
+                title: "错误信息",
+                dataIndex: 'message',
+                key: 'message',
+            }
+        ]
+    }
+
     render() {
+        const { importResult } = this.props;
         return (
             <div style={{textAlign: "center", marginTop: "10px", overflow: "hidden", height: "550px", display:"flex", flexFlow: "column" }}>
-                <div style={{flex: "1",display: "flex", justifyContent: "center", alignItems: "center"}}>
-                    <div>
+                <div style={{flex: "1",display: "flex", flexFlow: "column"}}>
+                    <div style={{marginTop: "20px"}}>
                         <img src={successImg} style={{marginBottom: "10px"}} />
                         <div style={{fontSize: "20px", marginBottom: "10px"}}>数据导入完成</div>
-                        <div>已导入 <span style={{color: ""}}>158</span> 条数据，失败<span style={{color: ""}}> 2 </span>条数据，下载失败数据</div>
+                        <div>已导入 <span style={{color: "red"}}> {importResult.successCount} </span> 条数据，失败<span style={{color: "green"}}> {importResult.errorCount} </span>条数据</div>
+                    </div>
+                    <div style={{marginTop: "20px"}} >
+                    {
+                        <Table columns={this.columns} dataSource={importResult.errorData} pagination={null}/>
+                    }
                     </div>
                 </div>
                 <div className="footerBtnWrapper" style={{height: "30px"}}>

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js

@@ -112,11 +112,19 @@ export default class CumDeduct extends React.Component {
     return newColumns;
   }
 
+  handleCancel() {
+    const { cumDeductStore } = this.props;
+    const { modalVisiable, setModalVisiable, setStep } = cumDeductStore
+    setModalVisiable(false);
+    setStep(0);
+    
+  }
+
   render() {
     const { cumDeductStore, taxAgentStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = cumDeductStore;
     const { taxAgentOption, step } = taxAgentStore
-    const { slideVisiable,  setSlideVisiable } = cumDeductStore
+    const { slideVisiable,  setSlideVisiable, modalVisiable, setModalVisiable } = cumDeductStore
 
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
@@ -158,9 +166,9 @@ export default class CumDeduct extends React.Component {
     }
 
     const handleBtnImport = () => {
-      this.setState({
-        visiable: true
-      })
+      const { cumDeductStore: { setModalVisiable, setStep } } = this.props;
+      setStep(0);
+      setModalVisiable(true)
     }
 
 
@@ -222,7 +230,7 @@ export default class CumDeduct extends React.Component {
             />
           </WeaTop>
         </WeaRightMenu>
-        <ImportModal visiable={this.state.visiable} onCancel={() => { this.setState({ visiable: false }) }} />
+        <ImportModal visiable={modalVisiable} onCancel={() => { this.handleCancel() }} />
         {
           slideVisiable && <WeaSlideModal visible={slideVisiable}
           top={0}

pc4mobx/hrmSalary/stores/cumDeduct.js

@@ -17,6 +17,14 @@ export class CumDeductStore {
   @observable step = 0; //  当前所在第几步
   @observable slideVisiable = false; // slide 是否隐藏
 
+  @observable slideDataSource = [];
+
+  @observable importResult = {}
+  @observable modalVisiable = false; // 模态框显示
+
+  @action
+  setModalVisiable = visiable => this.modalVisiable = visiable
+
   @action
   setStep = step => this.step = step;
 
@@ -73,7 +81,16 @@ export class CumDeductStore {
   @action importFile = (params) => {
     API.importCumDeductParam(params).then(action(res => {
       if(res.status) {
-        alert(JSON.stringify(res.data))
+        this.importResult = res.data
+      }
+    }))
+  }
+
+  // 导入预览
+  @action previewImport = (params) => {
+    API.importCumDeductPreview(params).then(action(res => {
+      if(res.status) {
+        this.slideDataSource = res.data.preview
       }
     }))
   }