From 4ec71f11cea79f13f9e57c50474325b600f26842 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Wed, 30 Mar 2022 20:04:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=96=AA=E8=B5=84=E8=B4=A6=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/apis/ledger.js              |  82 ++++++-
 .../hrmSalary/pages/ledger/calcRulesForm.js   |  88 ++++++-
 pc4mobx/hrmSalary/pages/ledger/columns.js     |  11 +-
 pc4mobx/hrmSalary/pages/ledger/index.js       | 123 +++++++---
 .../hrmSalary/pages/ledger/salaryItemForm.js  |   9 +-
 .../hrmSalary/pages/ledger/slideBaseForm.js   |  39 +--
 .../pages/ledger/step3/UserInfoSelect.js      |  17 +-
 .../pages/ledger/step4/RuleEditModal.js       | 137 +++++++++++
 .../pages/ledger/step5/ValidRuleEditModal.js  |  64 +++++
 .../hrmSalary/pages/ledger/validRulesForm.js  | 103 +++++++-
 pc4mobx/hrmSalary/stores/ledger.js            | 224 +++++++++++++++++-
 pc4mobx/hrmSalary/util/request.js             |  13 +
 12 files changed, 808 insertions(+), 102 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js
 create mode 100644 pc4mobx/hrmSalary/pages/ledger/step5/ValidRuleEditModal.js

diff --git a/pc4mobx/hrmSalary/apis/ledger.js b/pc4mobx/hrmSalary/apis/ledger.js
index bb27784b..59e62d18 100644
--- a/pc4mobx/hrmSalary/apis/ledger.js
+++ b/pc4mobx/hrmSalary/apis/ledger.js
@@ -1,15 +1,9 @@
 import { WeaTools } from 'ecCom';
+import {postFetch} from '../util/request'
 
 //薪资帐套列表
 export const getLedgerList = params => {
-    return fetch('/api/bs/hrmsalary/salarysob/list', {
-        method: 'POST',
-        mode: 'cors',
-        headers: {
-            'Content-Type': 'application/json'
-        }, 
-        body: JSON.stringify(params)
-    }).then(res => res.json())
+    return postFetch("/api/bs/hrmsalary/salarysob/list", params)
 }
 
 //启用/禁用薪资帐套
@@ -51,7 +45,14 @@ export const deleteLedger = params => {
 
 //薪资帐套基本信息表单
 export const getLedgerBasicForm = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salarysob/basic/getForm', 'get', params);
+    return fetch('/api/bs/hrmsalary/salarysob/basic/getForm', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //保存薪资帐套基本信息
@@ -143,7 +144,14 @@ export const getLedgerItemForm = params => {
 
 //薪资帐套校验规则列表
 export const getLedgerRuleList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salarysob/checkrule/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salarysob/checkrule/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //薪资帐套校验规则表单
@@ -153,7 +161,14 @@ export const getLedgerRuleForm = params => {
 
 //保存薪资帐套校验规则
 export const saveLedgerRule = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salarysob/checkrule/save', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salarysob/checkrule/save', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //编辑薪资帐套校验规则公式
@@ -163,7 +178,14 @@ export const updateLedgerRuleFormula = params => {
 
 //删除薪资帐套校验规则
 export const deleteLedgerRule = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salarysob/checkrule/delete', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salarysob/checkrule/delete', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 // 薪资项目可选列表 
@@ -182,3 +204,39 @@ export const listSalaryItem = params => {
 export const empFieldList = () => {
     return WeaTools.callApi('/api/bs/hrmsalary/salarysob/empField/list', 'GET', {});
 }
+
+// 调薪计薪规则可选的薪资项目列表
+export const listSalarySobItem = (params) => {
+    return fetch('/api/bs/hrmsalary/salarysob/adjustmentrule/listSalarySobItem', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+// 调薪计薪规则保存
+export const saveAdjustmentRule = (params) => {
+    return fetch('/api/bs/hrmsalary/salarysob/adjustmentrule/save', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+// 调薪计薪规则列表
+export const listAdjustmentRule = params => {
+    return fetch('/api/bs/hrmsalary/salarysob/adjustmentrule/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
diff --git a/pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js b/pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js
index 936b994e..29b34b27 100644
--- a/pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js
+++ b/pc4mobx/hrmSalary/pages/ledger/calcRulesForm.js
@@ -1,19 +1,99 @@
 import React from 'react'
 import { Table, Icon } from 'antd'
-import { slideStep4Columns, dataSource} from './columns'
+import { slideStep4Columns} from './columns'
 import "./index.less"
+import RuleEditModal from './step4/RuleEditModal'
+import { inject, observer } from 'mobx-react';
 
+@inject('ledgerStore')
+@observer
 export default class CalRulesForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            modalVisible: false,
+            slideStep4Columns: slideStep4Columns.map(item => {
+                item = {...item}
+                if(item.key == "cz") {
+                    item.render = (text, record) => {
+                        return (
+                            <a onClick={() => {this.handleDeleteItem(record)}}>删除</a>
+                        )
+                    }
+                }
+                return item
+            })
+        }
+    }
+
+    componentWillMount() {
+        const { ledgerStore: { listAdjustmentRule }} = this.props;
+        listAdjustmentRule()
+    }
+
+    handleSave(params) {
+        const { ledgerStore: {sobItemRuleDataSource, setSobItemRuleDataSource}} = this.props;
+        let dataSource = [...sobItemRuleDataSource]
+        dataSource.push(params)
+        setSobItemRuleDataSource(dataSource)
+    }
+    
+    handleDeleteItem(record) {
+        const { ledgerStore: {sobItemRuleDataSource, setSobItemRuleDataSource}} = this.props;
+        let dataSource = [...sobItemRuleDataSource]
+        setSobItemRuleDataSource(dataSource.filter(item => item.salaryItemId != record.key))
+    }
+
+    convertAdjustmentType(index) {
+        let nameList = ['取调整后薪资', '分段计薪', '取平均']
+        return nameList[index]
+    }
+
+    getSalaryItemName(salaryItemId) {
+        const { ledgerStore: {ruleOptionList}} = this.props;
+        let result = ""
+        ruleOptionList.map(item => {
+            if(item.key == salaryItemId) {
+                result = item.showname
+            }
+        })
+        return result;
+    }
+
+    convertDataSource(dataSoruce) {
+        let result = [...dataSoruce];
+        return result.map(item => {
+            let resultStr = "";
+            resultStr += `${item.dayOfMonth}号（含）之前调薪，${this.convertAdjustmentType(item.beforeAdjustmentType)}；${item.dayOfMonth}之后调薪，${this.convertAdjustmentType(item.afterAdjustmentType)}`
+            return {
+                key: item.salaryItemId,
+                salaryItemId: item.salaryItemId,
+                salaryItemName: item.salaryItemName ? item.salaryItemName : this.getSalaryItemName(item.salaryItemId),
+                rule: resultStr
+            }
+        })
+        
+    }
+    
     render() {
+        const { ledgerStore: {sobItemRuleDataSource}} = this.props;
+        let datas = this.convertDataSource(sobItemRuleDataSource)
         return (
             <div className="calRulesForm">
                 <div className="headerIcon">
-                        <Icon className="iconItem" type="minus-square"/>
-                        <Icon className="iconItem" type="plus-square" />
+                        <Icon className="iconItem" type="plus-square" onClick={() => {this.setState({modalVisible: true})}}/>
                     </div>
                 <div className="tableWrapper">
-                    <Table dataSource={dataSource} columns={slideStep4Columns}/>
+                    <Table dataSource={datas} columns={this.state.slideStep4Columns}/>
                 </div>
+
+                {
+                    this.state.modalVisible && <RuleEditModal 
+                    visible={this.state.modalVisible}
+                    onCancel={() => this.setState({modalVisible: false})}
+                    onSave={(params) => {this.handleSave(params)}}
+                    /> 
+                }
             </div>
         )
     }
diff --git a/pc4mobx/hrmSalary/pages/ledger/columns.js b/pc4mobx/hrmSalary/pages/ledger/columns.js
index 621c2460..75856e85 100644
--- a/pc4mobx/hrmSalary/pages/ledger/columns.js
+++ b/pc4mobx/hrmSalary/pages/ledger/columns.js
@@ -77,18 +77,17 @@ export const slideStep3Columns = [
 export const slideStep4Columns = [
     {
         title: "薪资项目",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'salaryItemName',
+        key: 'salaryItemName',
     },
     {
         title: "计薪规则",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'rule',
+        key: 'rule',
     },
     {
         title: "操作",
-        dataIndex: 'cz',
-        key: 'cz',
+        key: 'cz'
     },
 ]
 
diff --git a/pc4mobx/hrmSalary/pages/ledger/index.js b/pc4mobx/hrmSalary/pages/ledger/index.js
index d40ff84f..738d0979 100644
--- a/pc4mobx/hrmSalary/pages/ledger/index.js
+++ b/pc4mobx/hrmSalary/pages/ledger/index.js
@@ -38,20 +38,16 @@ export default class Ledger extends React.Component {
       currentStep: 0,
       selectedTab: 0,
       currentReocrd: {},
-      step1Request: {
-        name: "",
-        taxableItems: "1",
-        salaryCycleType: "1",
-        salaryCycleFromDay: "1",
-        taxCycleType: "1",
-        attendCycleType: "1",
-        attendCycleFromDay: "1",
-        socialSecurityCycleType: "1",
-        description: ""
-      }
+      searchValue: "",
+      step1Request: {}
     }
   }
 
+  handleSearch(value) {
+    const{ ledgerStore: {getTableDatas}} = this.props;
+    getTableDatas({name: value})
+  }
+
   refereUser() {
     this.setState({
       editSlideVisible: true,
@@ -77,24 +73,27 @@ export default class Ledger extends React.Component {
   }
 
 
-  handleItemClick(record) {
+  handleItemClick(record, selectedTab = 0) {
+    const { ledgerStore:  {setSalarySobId} } = this.props;
+    setSalarySobId(record.id)
     this.setState({
+      selectedTab,
       editSlideVisible: true,
       request: record
     })
-
-    const { ledgerStore:  {setSalarySobId} } = this.props;
-    setSalarySobId(record.id)
-
   }
 
   // 编辑Slide保存按钮
   handleEditSlideSave() {
-    const { selectedTab } = this.state;
-    const { ledgerStore: {saveLedgerItem}} = this.props;
-    if(selectedTab == 2) {
+    const { selectedTab, step1Request } = this.state;
+    const { ledgerStore: {saveLedgerItem, saveAdjustmentRule, saveLedgerBasic, baseInfoRequest}} = this.props;
+    if(selectedTab == 0) {
+      saveLedgerBasic(baseInfoRequest)
+    } else if(selectedTab == 2) {
       saveLedgerItem()
-    }
+    } else if(selectedTab == 3) {
+      saveAdjustmentRule()
+    } 
   }
 
   // 增加编辑功能，重写columns绑定事件
@@ -122,14 +121,29 @@ export default class Ledger extends React.Component {
   onOperatesClick = (record, index, operate, flag) => {
     const { ledgerStore: { deleteLedger }} = this.props;
     switch(operate.index.toString()){
+      case "0": // 编辑
+        this.handleItemClick(record)
+        break;
       case '1': // 复制
         this.setState({
           copyFormVisible: true,
           currentReocrd: record
         })
         break;
+      case "3": // 关联人员
+        this.handleItemClick(record, 1)
       case "4": // 删除
-        deleteLedger([record.id])
+        Modal.confirm({
+          title: '信息确认',
+          content: '确认删除',
+          onOk:() => {
+            deleteLedger([record.id])
+          },
+          onCancel: () => {
+
+          },
+        });
+        
         break;
     }
   };
@@ -139,6 +153,12 @@ export default class Ledger extends React.Component {
     doCopy(this.state.currentReocrd.id, value)
   }
 
+  handleNew = () => {
+    const { ledgerStore: { initSlideData }} = this.props;
+    initSlideData();
+    this.setState({stepSlideVisible: true, currentStep: 0})
+  }
+
   render() {
     const { ledgerStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = ledgerStore;
@@ -174,8 +194,8 @@ export default class Ledger extends React.Component {
     const renderRightOperation = () => {
       return (
         <div style={{display: "inline-block"}}>
-          <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>新建</Button>
-          <WeaInputSearch />
+          <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.handleNew()}>新建</Button>
+          <WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} onSearch={(value) => {this.handleSearch(value)}}/>
         </div>
       )
     }
@@ -198,12 +218,42 @@ export default class Ledger extends React.Component {
     ]
 
     const handleStep1Save = () => {
-      const { ledgerStore: {saveLedgerBasic} } = this.props;
-      saveLedgerBasic(this.state.step1Request)
-      nextStep()
+      const { step1Request } = this.state;
+      const { ledgerStore: {saveLedgerBasic, baseInfoRequest} } = this.props;
+      saveLedgerBasic(baseInfoRequest).then(() => {
+        nextStep();
+      })
     }
 
-    
+
+    const handleStep3Save = () => {
+      const { ledgerStore: {saveAdjustmentRule} } = this.props;
+      saveAdjustmentRule().then(() => {
+        nextStep()
+      })
+    }
+
+    const handleStepSave = () => {
+      const { currentStep } = this.state;
+      const { ledgerStore: { saveLedgerBasic, saveLedgerItem, saveAdjustmentRule, baseInfoRequest }} = this.props;
+      if(currentStep == 0) {
+        saveLedgerBasic(baseInfoRequest).then(() => {
+          nextStep();
+        })
+      } else if(currentStep == 1) {
+        nextStep()
+      }else if(currentStep == 2) {
+        saveLedgerItem().then(() => {
+          nextStep()
+        })
+      } else if(currentStep == 3) {
+        saveAdjustmentRule().then(() => {
+          nextStep()
+        })
+      } else if(currentStep == 4) {
+        this.setState({stepSlideVisible: false})
+      }
+    }
 
     return (
       <div className="mySalaryBenefitsWrapper">
@@ -249,21 +299,21 @@ export default class Ledger extends React.Component {
                     {
                         currentStep == 1 && <div style={{display: "inline-block"}}>
                             <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
-                            <Button type="primary" style={{marginLeft: "10px"}} onClick={() => {nextStep()}}>下一步</Button>
+                            <Button type="primary" style={{marginLeft: "10px"}} onClick={() => {handleStepSave()}}>下一步</Button>
                         </div>
                     }
                     {
                       (currentStep == 2 || currentStep == 3) && <div>
                         <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
                         <Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
-                        <Button type="primary" onClick={() => {nextStep()}}>保存并进入下一步</Button>
+                        <Button type="primary" style={{marginLeft: '10px'}} onClick={() => {handleStepSave()}}>保存并进入下一步</Button>
                       </div>
                     }
                     {
                       currentStep == 4 &&
                       <div>
                         <Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
-                        <Button type="primary" onClick={() => {this.setState({stepSlideVisible: false})}}>完成</Button>
+                        <Button type="primary" onClick={() => {handleStepSave()}}>完成</Button>
                       </div>
                       
                     }
@@ -273,7 +323,7 @@ export default class Ledger extends React.Component {
               content={
                 <div>
                   {
-                    currentStep == 0 && <SlideBaseForm request={this.state.step1Request} onChange={(value) => {this.setState({step1Request: value})}}/>
+                    currentStep == 0 && <SlideBaseForm />
                   }
                   {
                     currentStep == 1 && <SlideRefereUser />
@@ -315,25 +365,24 @@ export default class Ledger extends React.Component {
                 }
                 content={<div>
                   {
-                    selectedTab == 0 && <SlideBaseForm request={this.state.step1Request} onChange={(value) => {this.setState({step1Request: value})}}/>
+                    selectedTab == 0 && <SlideBaseForm edit={true} />
                   }
                   {
-                    selectedTab == 1 && <SlideRefereUser />
+                    selectedTab == 1 && <SlideRefereUser edit={true} />
                   }
                   {
-                    selectedTab == 2 && <SalaryItemForm />
+                    selectedTab == 2 && <SalaryItemForm edit={true}/>
                   }
                   {
-                    selectedTab == 3 && <CalRulesForm />
+                    selectedTab == 3 && <CalRulesForm edit={true}/>
                   }
                   {
-                    selectedTab == 4 && <ValidRulesForm />
+                    selectedTab == 4 && <ValidRulesForm edit={true}/>
                   }
                 </div>}
                 onClose={() => this.setState({editSlideVisible: false})}
                 showMask={true}
                 closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
-   
             }
           </WeaTop>
         </WeaRightMenu>
diff --git a/pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js b/pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js
index d3d8be94..2ebf1b22 100644
--- a/pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js
+++ b/pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js
@@ -18,11 +18,15 @@ export default class SalaryItemForm extends React.Component {
         this.state = {
             addCategoryVisible: false
         }
-
         const { ledgerStore: { empFieldList }} = this.props;
         empFieldList();
     }
 
+    componentWillMount() {
+        const {ledgerStore: {getLedgerItemForm}} = this.props;
+        getLedgerItemForm();
+    }
+
     handleAddCategorySave(name) {
         const {ledgerStore: {addItemGroup}} = this.props;
         addItemGroup(name);
@@ -70,8 +74,6 @@ export default class SalaryItemForm extends React.Component {
                     </div>
 
                     <UserInfoSelected />
-
-                    
                 </div>
                 {
                     itemGroups && itemGroups.map(item => {
@@ -83,7 +85,6 @@ export default class SalaryItemForm extends React.Component {
                     )
                 }
                 {
-
                     addCategoryVisible && 
                     <AddCategoryModal onSave={(value) => {this.handleAddCategorySave(value)}} visible={addCategoryVisible} onCancel={() => {
                         setAddCategoryVisible(false)
diff --git a/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js b/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
index 43f915f1..318c78c6 100644
--- a/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
+++ b/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
@@ -4,40 +4,41 @@ import { WeaSelect, WeaTextarea, WeaInput, WeaCheckbox } from "ecCom"
 import "./index.less"
 import TipLabel from '../../components/TipLabel'
 import { daysOptions, cycleTypeOption } from './options'
+import { inject, observer } from 'mobx-react';
 
+@inject('ledgerStore')
+@observer
 export default class SlideBaseForm extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
             name: "",
-            taxableItems: 1,
-            request: {
-                name: "",
-                taxableItems: "1",
-                salaryCycleType: "1",
-                salaryCycleFromDay: "1",
-                taxCycleType: "1",
-                attendCycleType: "1",
-                attendCycleFromDay: "1",
-                socialSecurityCycleType: "1",
-                description: ""
-            }
-
+            taxableItems: 1
+        }
+    }
+    componentWillMount() {
+        const { edit } = this.props;
+        if(edit) {
+            const { ledgerStore: { getLedgerBasicForm }} = this.props;
+            getLedgerBasicForm()
         }
     }
 
     handleChange(params) {
-        let request = {...this.props.request, ...params}
-        this.setState({request})
-        this.props.onChange(request)
+        const { ledgerStore: {baseInfoRequest, setBaseInfoRequest}} = this.props;
+        let request= {...baseInfoRequest}
+        Object.keys(params).map(key => {
+            request[key] = params[key]
+        })
+        setBaseInfoRequest(request)
     }
 
-
     render() {
-        const { request } = this.props;
+        const { request, ledgerStore } = this.props;
+        const { baseInfoRequest } = ledgerStore;
         const { name, taxableItems, salaryCycleType, salaryCycleFromDay,
         taxCycleType, attendCycleType, attendCycleFromDay, socialSecurityCycleType,
-        description} = request
+        description} = baseInfoRequest
         return (
             <div className="slideBaseForm">
                 <Row>
diff --git a/pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js b/pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js
index cce381e9..4c0f8615 100644
--- a/pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js
+++ b/pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js
@@ -16,8 +16,8 @@ export default class UserInfoSelected extends React.Component {
     }
 
     handleSelectChange(value) {
-        let list = [...this.state.list]
-        const { ledgerStore: {empBrowserList}} = this.props;
+        const { ledgerStore: {empBrowserList, userSelectedList}} = this.props;
+        let list = [...userSelectedList]
         let selectedItem = {}
         empBrowserList.map(item => {
             if(item.key == value) {
@@ -37,22 +37,25 @@ export default class UserInfoSelected extends React.Component {
             message.warning("该信息已存在")
         }
 
-        const { ledgerStore: {empFields, addEmpFields}} = this.props;
+        const { ledgerStore: {empFields, addEmpFields, setUserSelectedList}} = this.props;
         addEmpFields(value)
-        this.setState({list, showSelect: false})
+        this.setState({showSelect: false})
+        setUserSelectedList(list)
+
     }
 
     handleItemDelete(item) {
-        let list = [...this.state.list]
+        const { ledgerStore: {userSelectedList}} = this.props;
+        let list = [...userSelectedList]
         this.setState({list: list.filter(i => item.key != i.key)})
     }
 
     render() {
-        const { ledgerStore: {empBrowserList} } = this.props;
+        const { ledgerStore: {empBrowserList, userSelectedList} } = this.props;
         return (
             <div className="userInfoSelected">
                 {
-                    this.state.list.map(item => (
+                    userSelectedList.map(item => (
                         <CanDeleteItem title={item.showname} item={item} onDelete={(item) => {
                             this.handleItemDelete(item)
                         }}/>
diff --git a/pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js b/pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js
new file mode 100644
index 00000000..6d54fc9a
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js
@@ -0,0 +1,137 @@
+import React from 'react'
+import { Row, Col, Radio, Button, Modal } from 'antd'
+import { WeaSelect, WeaHelpfulTip} from 'ecCom'
+import { inject, observer } from 'mobx-react';
+import {daysOptions} from "../options"
+
+
+@inject('ledgerStore')
+@observer
+export default class RuleEditModal extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            itemValue: "",
+            effectiveDate: "",
+            beforeAdjustmentType: 1,
+            afterAdjustmentType: 1
+        }
+    }
+
+    componentWillMount() {
+        const { ledgerStore: {listSalarySobItem}} = this.props;
+        listSalarySobItem();
+    }
+
+    beforeAdjustmentTypeChange(e) {
+        this.setState({beforeAdjustmentType: e.target.value})
+    }
+
+    afterAdjustmentTypeChange(e) { 
+        this.setState({afterAdjustmentType: e.target.value})
+    }
+    
+    handleSave() {
+
+        const { ledgerStore } = this.props;
+        const { ruleOptionList } = ledgerStore;
+        let salaryItemName = ""
+        ruleOptionList.map(item => {
+            if(item.key == this.state.itemValue) {
+                salaryItemName = item.showname
+            }
+        })
+        this.props.onSave({
+            salaryItemId:this.state.itemValue,
+            dayOfMonth:this.state.effectiveDate,
+            beforeAdjustmentType:this.state.beforeAdjustmentType,
+            afterAdjustmentType: this.state.afterAdjustmentType,
+            salaryItemName
+        })
+
+        this.props.onCancel()
+    }
+    render() {
+        const { ledgerStore } = this.props;
+        const { ruleOptionList } = ledgerStore;
+        const { beforeAdjustmentType, afterAdjustmentType } = this.state
+        return (
+            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}} width={800} 
+                footer={<Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>}
+                title="调薪计薪规则项"
+            >
+                <div style={{padding: '20px'}}>
+                    <Row style={{lineHeight: '40px'}}>
+                        <Col span={8}>薪资项目</Col>
+                        <Col span={16}>
+                            {
+                                ruleOptionList.length > 0 && 
+                                <WeaSelect style={{width: "200px"}} options={ruleOptionList} value={this.state.itemValue} onChange={(value) => {this.setState({itemValue: value})} } />
+                            }
+                        </Col>
+                    </Row>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8}>计薪规则</Col>
+                        <Col span={16}>
+                            <div>
+                            <WeaHelpfulTip
+                                style={{marginLeft: '10px'}}
+                                width={200}
+                                title="该规则适用于一个薪资核算周期内只调整一次薪资或个税扣缴义务人的情况，其他情况默认按照分段计薪规则核算"
+                                placement="topLeft"
+                            />
+                            如果：调薪生效日期在
+                            <WeaSelect style={{width: '100px'}} options={daysOptions} value={this.state.effectiveDate} onChange={(value) => {this.setState({effectiveDate: value})}}/>
+
+                            （含）之前
+                            
+                            </div>
+
+                            <div>
+                            计薪规则为：
+                            <Radio.Group onChange={(value) => {this.beforeAdjustmentTypeChange(value)}} value={beforeAdjustmentType}>
+                                <Radio value={1}>取调整后薪资</Radio>
+                                <Radio value={2}>分段计薪<WeaHelpfulTip
+                                    style={{marginLeft: "10px"}}
+                                    width={200}
+                                    title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
+                                    placement="topLeft"
+                                /></Radio>
+                                <Radio value={3}>取平均<WeaHelpfulTip
+                                    style={{marginLeft:"10px"}}
+                                    width={200}
+                                    title="=（调整前薪资+调整后薪资）/2"
+                                    placement="topLeft"
+                                />
+                                </Radio>
+                            </Radio.Group>
+                            </div>
+                            <div>
+                                否则：调薪生效日期在 {this.state.effectiveDate} 号之后
+                            </div>
+                            <div>
+                                计薪规则为：
+                                <Radio.Group onChange={(value) => {this.afterAdjustmentTypeChange(value)}} value={afterAdjustmentType}>
+                                    <Radio value={1}>取调整前薪资</Radio>
+                                    <Radio value={2}>分段计薪<WeaHelpfulTip
+                                        style={{marginLeft: "10px"}}
+                                        width={200}
+                                        title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
+                                        placement="topLeft"
+                                    /></Radio>
+                                    <Radio value={3}>取平均<WeaHelpfulTip
+                                        style={{marginLeft: "10px"}}
+                                        width={200}
+                                        title="=（调整前薪资+调整后薪资）/2"
+                                        placement="topLeft"
+                                    />
+                                    </Radio>
+                                </Radio.Group>
+                            </div>
+                        </Col>
+                    </Row>
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/ledger/step5/ValidRuleEditModal.js b/pc4mobx/hrmSalary/pages/ledger/step5/ValidRuleEditModal.js
new file mode 100644
index 00000000..18023039
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/ledger/step5/ValidRuleEditModal.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import { Modal, Row, Col, Button } from 'antd'
+import { WeaInput } from 'ecCom'
+import { inject, observer } from 'mobx-react';
+
+@inject('ledgerStore')
+@observer
+export default class ValidRuleEditModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: "",
+            formulaId: "",
+            description: ""
+        }
+    }
+
+    handleSave() {
+        const { ledgerStore: {saveLedgerRule}} = this.props;
+        saveLedgerRule({
+            name: this.state.name,
+            formulaId: this.state.formulaId,
+            description: this.state.description
+        })
+        this.props.onCancel();
+    }
+
+    render() {
+        return (
+            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}}
+                width={800} title="添加校验规则"
+                footer={
+                    <div style={{width: "100%", overflow: "hidden"}}>
+                        <span style={{float: "left"}}>
+                            薪资核算时，不符合校验规则将反馈为异常
+                        </span>
+                        <Button type="primary" style={{float: "right"}} onClick={() => {this.handleSave()}}>保存</Button>
+                    </div>
+                }
+            >
+                <div style={{padding: "20px"}}>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8}>规则名称</Col>
+                        <Col span={16}>
+                            <WeaInput  value={this.state.name}  onChange={(value) => {this.setState({name: value})}}/>
+                        </Col>
+                    </Row>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8}>校验规则</Col>
+                        <Col span={16}>
+                            <WeaInput  value={this.state.formulaId} onChange={(value)=> {this.setState({formulaId: value})}}/>
+                        </Col>
+                    </Row>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8}>备注</Col>
+                        <Col span={16}>
+                            <WeaInput value={this.state.description} onChange={(value) => {this.setState({description: value})}}/>
+                        </Col>
+                    </Row>
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/ledger/validRulesForm.js b/pc4mobx/hrmSalary/pages/ledger/validRulesForm.js
index 034a1a57..aec1f23a 100644
--- a/pc4mobx/hrmSalary/pages/ledger/validRulesForm.js
+++ b/pc4mobx/hrmSalary/pages/ledger/validRulesForm.js
@@ -1,22 +1,115 @@
 import React from 'react'
 import { WeaInputSearch } from 'ecCom'
-import { Table, Icon } from 'antd'
+import { Table, Icon, message, Modal } from 'antd'
 import { dataSource, slideStep5Columns} from './columns'
+import ValidRuleEditModal from './step5/ValidRuleEditModal'
+import { inject, observer } from 'mobx-react';
 
+@inject('ledgerStore')
+@observer
 export default class ValidRulesForm extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            modalVisible: false,
+            selectedRowKeys: [],
+            searchValue: ""
+        }
+    }
+
+    componentWillMount() {
+        const { ledgerStore: {getLedgerRuleList} } = this.props; 
+        getLedgerRuleList()
+    }
+
+    handleItemDelete(record) {
+        const { ledgerStore: {deleteLedgerRule}} = this.props;
+        deleteLedgerRule([record.id])
+    }
+
+    onSelectChange(selectedRowKeys) {
+        this.setState({ selectedRowKeys });
+    };
+
+    handleBatchDelete() {
+        const { ledgerStore: { deleteLedgerRule } } = this.props;
+        const { selectedRowKeys } = this.state;
+        if(selectedRowKeys.length == 0) {
+            message.warning("未选择条目")
+            return
+        }
+        Modal.confirm({
+            title: '信息确认',
+            content: '确认删除',
+            onOk:() => {
+                deleteLedgerRule(selectedRowKeys)
+            },
+            onCancel: () => {
+
+            },
+        });
+    }
+
+    handeSearch() {
+        const { ledgerStore: { getLedgerRuleList } } = this.props;
+        const { searchValue } = this.state;
+        getLedgerRuleList(searchValue)
+    }
+
     render() {
+        const { ledgerStore } = this.props;
+        const { ledgerRuleList } = ledgerStore
+        const { selectedRowKeys } = this.state; 
+        let columns = ledgerRuleList.columns ? ledgerRuleList.columns.filter(item => item.dataIndex != "id") : []
+
+        if(columns.length > 0) {
+            columns.push({
+                title: "操作",
+                key: 'cz',
+                render: (text, record) => (
+                    <a onClick={() => {this.handleItemDelete(record)}}>删除</a>
+                )
+            })
+        }
+
+
+        let dataSource = ledgerRuleList.list ? ledgerRuleList.list : []
+        dataSource.map(item => item.key = item.id)
+         
+        const rowSelection = {
+            selectedRowKeys,
+            onChange: this.onSelectChange.bind(this),
+        };
         return (
             <div className="validRulesForm">
                 <div className="headerBar">
-                    <WeaInputSearch className="inputSearch"/>
+                    <WeaInputSearch className="inputSearch" value={this.state.searchValue} onChange={(value) => {this.setState({searchValue: value})}} 
+                    onSearch={(value) => {this.handeSearch(value)}}/>
                     <span className="btnsWrapper">
-                        <Icon className="iconItem" type="minus-square"/>
-                        <Icon className="iconItem" type="plus-square" />
+                        {
+                            dataSource.length > 0 && <Icon className="iconItem" type="minus-square" onClick={() => {this.handleBatchDelete()}}/>
+                        }
+                        <Icon className="iconItem" type="plus-square" onClick={() => {this.setState({
+                            modalVisible: true
+                        })}}/>
                     </span>
                 </div>
                 <div className="tableWrapper">
-                    <Table dataSource={dataSource} columns={slideStep5Columns} />
+                {
+                    ledgerRuleList.list && <Table rowSelection={rowSelection} dataSource={ledgerRuleList.list} columns={columns}  pagination={{
+                        total: ledgerRuleList.total,
+                        current: ledgerRuleList.pageNum
+                    }}/>
+                }
+                
                 </div>
+                {
+                    this.state.modalVisible && 
+                    <ValidRuleEditModal 
+                        visible={this.state.modalVisible}
+                        onCancel={() => {this.setState({modalVisible: false})}}
+                    />
+                }
             </div>
         )
 
diff --git a/pc4mobx/hrmSalary/stores/ledger.js b/pc4mobx/hrmSalary/stores/ledger.js
index dd52f595..366d550f 100644
--- a/pc4mobx/hrmSalary/stores/ledger.js
+++ b/pc4mobx/hrmSalary/stores/ledger.js
@@ -3,6 +3,7 @@ import { message } from 'antd';
 import { WeaForm, WeaTableNew } from 'comsMobx';
 
 import * as API from '../apis/ledger'; // 引入API接口文件
+import { tempateColumns } from '../pages/payroll/columns';
 
 const { TableStore } = WeaTableNew;
 
@@ -30,6 +31,43 @@ export class LedgerStore {
   @observable excludeIds = []
 
   @observable addCategoryVisible = false; // 薪资项目-添加分类Modal
+  @observable ruleOptionList = []; // 第四步规则可选项目列表
+  @observable sobItemRuleDataSource = []; // 第四步规则列表
+  @observable ledgerRuleList = [];
+  @observable baseInfoRequest = {};
+  @observable userSelectedList = [];
+
+  @action
+  initSlideData = () => {
+    this.salarySobId = "";
+    this.includeType = 1
+    this.userTableStore = {}
+    this.addUserModalVisible = false
+    this.itemGroups = [
+      {
+        id:"default",
+        name: "未分类",
+        items: []
+      }
+    ];
+    this.empBrowserList = []
+    this.empFields = []
+    this.excludeIds = []
+    this.ruleOptionList = []
+    this.sobItemRuleDataSource = []; // 第四步规则列表
+    this.ledgerRuleList = [];
+    this.baseInfoRequest = {};
+    this.userSelectedList = [];
+  }
+
+  @action
+  setUserSelectedList = userSelectedList => this.userSelectedList = userSelectedList
+
+  @action
+  setBaseInfoRequest = baseInfoRequest => this.baseInfoRequest = baseInfoRequest
+
+  @action
+  setSobItemRuleDataSource = sobItemRuleDataSource => this.sobItemRuleDataSource = sobItemRuleDataSource
 
   @action
   setAddCategoryVisible = addCategoryVisible => this.addCategoryVisible = addCategoryVisible
@@ -124,6 +162,18 @@ export class LedgerStore {
   doInit = () => {
     // this.getCondition();
     this.getTableDatas({});
+
+    this.setBaseInfoRequest({
+      name: "",
+      taxableItems: "1",
+      salaryCycleType: "1",
+      salaryCycleFromDay: "1",
+      taxCycleType: "1",
+      attendCycleType: "1",
+      attendCycleFromDay: "1",
+      socialSecurityCycleType: "1",
+      description: ""
+    })
   }
 
   // 获得高级搜索表单数据
@@ -191,13 +241,20 @@ export class LedgerStore {
   //保存薪资帐套基本信息
   @action
   saveLedgerBasic = (params) => {
-    API.saveLedgerBasic(params).then(res => {
-      if(res.status) {
-        message.success("保存成功")
-      } else {
-        message.error(res.errormsg || "保存失败")
-      }
+    return new Promise((resolve, reject) => {
+      API.saveLedgerBasic(params).then(res => {
+        if(res.status) {
+          this.salarySobId = res.data;
+          resolve()
+          this.getTableDatas({})
+          message.success("保存成功")
+        } else {
+          reject(res.errormsg || "保存失败")
+          message.error(res.errormsg || "保存失败")
+        }
+      })
     })
+    
   }
 
   //删除薪资帐套
@@ -318,15 +375,166 @@ export class LedgerStore {
       itemGroups: itemGroups.filter(item => item.id != "default"),
       items: itemGroups.filter(item => item.id == 'default')[0].items
     }
-    API.saveLedgerItem(params).then(res => {
+    return new Promise((resolve, reject) => {
+      API.saveLedgerItem(params).then(res => {
+        if(res.status) {
+          resolve()
+          message.success("保存成功");
+        } else {
+          reject()
+          message.error(res.errormsg || "保存失败")
+        }
+      })
+    })
+    
+  }
+  
+  // 调薪计薪规则可选的薪资项目列表
+  @action
+  listSalarySobItem = () => {
+    let params = {
+      salarySobId: this.salarySobId,
+      excludeSalaryItemIds: this.sobItemRuleDataSource.map(item => item.salaryItemId)
+    }
+    API.listSalarySobItem(params).then(res => {
       if(res.status) {
-        message.success("保存成功");
+        this.ruleOptionList = res.data.map(item => {
+          return {
+            key: item.salaryItemId.toString(),
+            showname: item.salaryItemName,
+            selected: false
+          }
+        })
+      }
+    })
+
+  }
+
+  // 调薪计薪规则保存
+  @action
+  saveAdjustmentRule = () => {
+    let params = {
+      salarySobId:this.salarySobId,
+      ruleParams:this.sobItemRuleDataSource
+    }
+    return new Promise((resolve, reject) => {
+      API.saveAdjustmentRule(params).then(res => {
+        if(res.status) {
+          resolve()
+          message.success("保存成功")
+        } else {
+          reject()
+          message.error(res.errormsg || "获取失败")
+        }
+      })
+    })
+  }
+
+  @action
+  listAdjustmentRule = () => {
+    let params = {
+      salarySobId: this.salarySobId
+    }
+    API.listAdjustmentRule(params).then(res => {
+      if(res.status) {
+        this.sobItemRuleDataSource = res.data
+      }
+    })
+  }
+
+  // 保存薪资帐套校验规则
+  @action
+  saveLedgerRule = (params) => {
+    params.salarySobId = this.salarySobId;
+    API.saveLedgerRule(params).then(res => {
+      if(res.status) {
+        this.getLedgerRuleList()
+        message.success("保存成功")
       } else {
         message.error(res.errormsg || "保存失败")
       }
     })
   }
 
+  //薪资帐套校验规则列表
+  @action
+  getLedgerRuleList = (name = "") => {
+    let params = {
+      salarySobId: this.salarySobId,
+      name
+    }
+    API.getLedgerRuleList(params).then(res => {
+      if(res.status) {
+        this.ledgerRuleList = res.data
+      } else {
+        message.error(res.errormsg || "获取数据失败")
+      }
+    })
+  }
 
+  //删除薪资帐套校验规则
+  @action
+  deleteLedgerRule = (ids) => {
+    API.deleteLedgerRule(ids).then(res => {
+      if(res.status) {
+        message.success("删除成功")
+        this.getLedgerRuleList();
+      } else {
+        message.error(res.errormsg || "删除失败")
+      }
+    })
+  }
+
+  // 获取基本信息
+  @action
+  getLedgerBasicForm = () => {
+    API.getLedgerBasicForm(this.salarySobId).then(res => {
+      if(res.status) {
+        let basicForm = res.data.basicForm
+        Object.keys(basicForm).map(key => {
+          basicForm[key] = basicForm[key].toString();
+        })
+        this.baseInfoRequest = basicForm
+      } else {
+        messsage.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+  //薪资帐套薪资项目详情
+  @action
+  getLedgerItemForm = () => {
+    API.getLedgerItemForm({salarySobId: this.salarySobId}).then(res => {
+      if(res.status) {
+        this.empFields = res.data.empFields
+        this.itemGroups = res.data.itemGroups
+        let defaultItems = {
+          id:"default",
+          name: "未分类",
+          items:res.data.items
+        }
+        this.itemGroups.unshift(defaultItems)
+        API.empFieldList().then(ires => {
+          if(res.status) {
+            this.empBrowserList = ires.data.map(item => {return {showname: item.name, key: item.id, selected: false}})
+            this.userSelectedList = this.empFields.map(item => {
+                item = {...item}
+                item.key = item.fieldId
+                this.empBrowserList.map(bitem => {
+                    if(bitem.key == item.fieldId) {
+                        item.showname = bitem.showname
+                    }
+                })
+                return item;
+            })
+          } else {
+            message.error(res.errormsg || "获取失败")
+          }
+        })
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
 
 }
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/util/request.js b/pc4mobx/hrmSalary/util/request.js
index 2c6d6d3c..a1140138 100644
--- a/pc4mobx/hrmSalary/util/request.js
+++ b/pc4mobx/hrmSalary/util/request.js
@@ -1,4 +1,5 @@
 export const formPost = (url, params) => {
+    url = url + "?__random__=" + (new Date()).valueOf();
     let formdata = new URLSearchParams();
     Object.keys(params).map(key => {
         formdata.append(key, params[key])
@@ -10,4 +11,16 @@ export const formPost = (url, params) => {
         },
         body:formdata
     }).then(res => res.json())
+}
+
+export const postFetch = (url, params) => {
+    url = url + "?__random__=" + (new Date()).valueOf();
+    return fetch(url, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
\ No newline at end of file