salaryFile

pc4mobx/hrmSalary/apis/archive.js

@@ -118,3 +118,20 @@ export const downloadSalaryArchiveTemplateurl = `/api/bs/hrmsalary/salaryArchive
 export const downloadsalaryArchiveDetail = params => {
     return WeaTools.callApi('/api/bs/hrmsalary/salaryArchive/exportList', 'POST', params);
 }
+
+// 获取导入类型
+export const getImportTypes = () => {
+    return WeaTools.callApi('/api/bs/hrmsalary/salaryArchive/getImportTypes', 'GET', {});
+}
+
+// 导入预览
+export const importPreview = (params) => {
+    return fetch('/api/bs/hrmsalary/salaryArchive/preview', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}

pc4mobx/hrmSalary/components/importModal/modalStep1.js

@@ -45,14 +45,16 @@ export default class ModalStep1 extends React.Component {
         return (
             <div style={{ height: "550px", display: "flex", flexFlow: "column"}}>
                 <div style={{ flex: "1", overflow: "scroll" }}>
-                    <div className="stepInformItem">
+                    {
-                        <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
+                        this.props.formComponent && <div className="stepInformItem">
-                            导入选项
+                            <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>
+                                导入选项
+                            </div>
+                            <div className="formWrapper" style={{ border: "1px solid #eee", borderRadiu: "5px", padding: "10px" }}>
+                                {this.props.formComponent}
+                            </div>
                         </div>
-                        <div className="formWrapper" style={{ border: "1px solid #eee", borderRadiu: "5px", padding: "10px" }}>
+                    }
-                            {this.props.formComponent}
-                        </div>
-                    </div>
 
                     <div className="stepInformItem">
                         <div className="stepInformTitle" style={{ margin: "10px 0 10px 0" }}>

pc4mobx/hrmSalary/pages/salaryFile/index.js

@@ -4,7 +4,8 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker, Dropdown, Menu } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaSlideModal } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, 
+  WeaInputSearch, WeaSlideModal, WeaCheckbox, WeaHelpfulTip } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
@@ -17,11 +18,12 @@ import EditAgentModal from './editAgentModal';
 import SlideModalTitle from '../../components/slideModalTitle'
 import SlideSalaryItem from './slideSalaryItem'
 import SlideAgent from './slideAgent'
+import ImportModal from '../../components/importModal'
 
 
 const { MonthPicker } = DatePicker;
 
-@inject('baseTableStore')
+@inject('salaryFileStore')
 @observer
 export default class SalaryFile extends React.Component {
   constructor(props) {
@@ -32,13 +34,51 @@ export default class SalaryFile extends React.Component {
       changeSalaryVisible: false,
       editAgentVisible: false,
       selectedTab: 0,
-      editSlideVisible: false
+      editSlideVisible: false,
+      importType: "",
+      modalVisiable: false,
+      step: 0
     }
   }
+
+  componentWillMount() {
+    const { salaryFileStore: {getImportTypes} } = this.props;
+    getImportTypes();
+  }
+
+  // 设置导入步数
+  setStep(step) {
+    this.setState({step})
+  }
+
+  // 渲染导入模板附加元素
+  renderFormComponent() {
+    return (
+      <div style={{display: "inline-block"}}>
+        <WeaCheckbox id="importData" content="导出现有数据" />
+        <WeaHelpfulTip
+            width={200}
+            title="提示：建议先导出现有最新数据，修改后再导入"
+            placement="topLeft"
+          />
+      </div>
+    )
+  }
+
+
+  // 导入预览
+  handlePreviewImport(params) {
+    const { salaryFileStore: {importPreview}} = this.props;
+    params.importType = this.state.importType;
+    importPreview(params)
+  }
+
+
   render() {
-    const { baseTableStore } = this.props;
+    const { salaryFileStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryFileStore;
-    const { selectedTab } = this.state;
+    const { importType } = salaryFileStore;
+    const { selectedTab, step } = this.state;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -73,24 +113,7 @@ export default class SalaryFile extends React.Component {
     }
 
     const handleMenuClick = (e) => {
-      if(e.key == "1") {
+      this.setState({importType: e.key, modalVisiable: true})
-        this.setState({
-          changeSalaryVisible: true
-        })
-      }
-
-      switch(e.key) {
-        case "1":
-          this.setState({
-            changeSalaryVisible: true
-          })
-          break;
-        case "2": 
-          this.setState({
-            editAgentVisible: true
-          })
-          break;
-      }
     }
 
     const handleMenuClick2 = () => {
@@ -99,9 +122,11 @@ export default class SalaryFile extends React.Component {
 
     const menu = (
       <Menu onClick={handleMenuClick}>
-        <Menu.Item key="1">调薪</Menu.Item>
+        {
-        <Menu.Item key="2">调整个税扣缴义务人</Menu.Item>
+          importType.map(item => (
-        <Menu.Item key="3">档案初始化</Menu.Item>
+            <Menu.Item key={item.id}>{item.content}</Menu.Item>
+          ))
+        }
       </Menu>
     );
 
@@ -115,6 +140,18 @@ export default class SalaryFile extends React.Component {
     const renderRightOperation = () => {
         return (
             <div style={{display: "inline-block"}}>
+                <WeaHelpfulTip
+                  style={{marginRight: '10px'}}
+                  width={200}
+                  title="导入按钮使用场景说明：\n
+                  1.档案初始化：\n
+                  a.初次使用薪酬模块，全量导入员工的薪资档案数据；\n
+                  b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；\n
+                  c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；\n
+                  2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；\n
+                  3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；\n"
+                  placement="topLeft"
+                />
                 <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导入</Dropdown.Button>
                 <Dropdown.Button style={{marginRight: "10px"}} overlay={menu2}>导出</Dropdown.Button>
                 <Button type="default" style={{marginRight: "10px"}} onClick={() => {this.setState({editSlideVisible: true})}}>调薪记录</Button>
@@ -164,6 +201,29 @@ export default class SalaryFile extends React.Component {
             <WeaTable columns={columns} dataSource={dataSource}/>
           </WeaTop>
         </WeaRightMenu>
+
+
+        {
+          this.state.modalVisiable && 
+          <ImportModal 
+            params={{}}
+            columns={columns}
+            step={step}
+            setStep={this.setStep.bind(this)}
+            slideDataSource={dataSource}
+            importResult={{}}
+            onFinish={() => {}}
+            previewImport={(params) => {
+              this.handlePreviewImport(params)
+            }}
+            importFile={(params) => {}}
+            templateLink={"/api/bs/hrmsalary/salaryArchive/downloadTemplate?importType=" + this.state.importType}
+            renderFormComponent={() => {this.renderFormComponent()}} 
+            visiable={this.state.modalVisiable} 
+            onCancel={() => { this.setState({modalVisiable: false})}} 
+          />
+        }
+        
         
         {
           this.state.changeSalaryVisible && <ChangeSalaryModal 

pc4mobx/hrmSalary/stores/index.js

@@ -12,6 +12,7 @@ import { AttendanceStore } from './attendanceStore';
 import { SalaryItemStore } from './salaryItem'
 import { LedgerStore } from './ledger'
 import { ArchivesStore } from './archives'
+import { salaryFileStore } from './salaryFile';
 
 module.exports = {
   baseFormStore: new BaseFormStore(),
@@ -26,6 +27,7 @@ module.exports = {
   attendanceStore: new AttendanceStore(),
   salaryItemStore: new SalaryItemStore(),
   ledgerStore: new LedgerStore(),
-  archivesStore: new ArchivesStore()
+  archivesStore: new ArchivesStore(),
+  salaryFileStore: new salaryFileStore()
 };
 

pc4mobx/hrmSalary/stores/salaryFile.js

@@ -0,0 +1,91 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaTableNew } from 'comsMobx';
+
+import * as API from '../apis/archive'; // 引入API接口文件
+
+const { TableStore } = WeaTableNew;
+
+export class salaryFileStore {
+  @observable tableStore = new TableStore(); // new table
+  @observable form = new WeaForm(); // nrew 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable showSearchAd = false; // 高级搜索面板显示
+  @observable loading = true; // 数据加载状态
+
+  @observable importType = [];
+
+
+  // 初始化操作
+  @action
+  doInit = () => {
+    // this.getCondition();
+    // this.getTableDatas();
+    this.getImportTypes();
+  }
+
+  // 获取导入类型
+  @action
+  getImportTypes = () => {
+    API.getImportTypes().then(res => {
+      if(res.status) {
+        this.importType = res.data
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+  // 获得高级搜索表单数据
+  @action
+  getCondition = () => {
+    API.getCondition().then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.condition = res.condition;
+        this.form.initFormFields(res.condition); // 渲染高级搜索form表单
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+    }));
+  }
+
+  // 渲染table数据
+  @action
+  getTableDatas = (params) => {
+    this.loading = true;
+    const formParams = this.form.getFormParams() || {};
+    params = params || formParams;
+    API.getTableDatas(params).then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.tableStore.getDatas(res.datas); // table 请求数据
+        this.hasRight = res.hasRight;
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    }));
+  }
+
+  @action
+  setShowSearchAd = bool => this.showSearchAd = bool;
+
+  // 高级搜索 - 搜索
+  @action doSearch = () => {
+    this.getTableDatas();
+    this.showSearchAd = false;
+  }
+
+  // 导入预览
+  @action
+  importPreview = (params) => {
+    API.importPreview(params).then(res => {
+      if(res.state) {
+
+      } else {
+        message.error(res.errormsg || "获取数据失败")
+      }
+    })
+  }
+
+}