调薪对话框

pc4mobx/hrmSalary/pages/calculateDetail/index.js

@@ -45,7 +45,7 @@ export default class CalculateDetail extends React.Component {
                     </div>
                 )
             }
-          }
+        }
 
         const topTab =  [{
             title: "人员确认",

pc4mobx/hrmSalary/pages/salaryFile/changeSalaryModal.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Row, Col, Table, Modal, Icon } from 'antd'
+import { WeaInput, WeaSelect } from "ecCom"
+import { changeSalaryModalColumns, dataSource } from './columns'
+import "./index.less"
+ 
+export default class ChangeSalaryModal extends React.Component {
+    render() {
+        return (
+            <Modal title="调薪" width={800} visible={this.props.visible} onClose={() => {this.props.onCancel()}}>
+                <div className="changeSalaryModal">
+                    <Row className="itemWrapper">
+                        <Col span={6}>
+                            生效日期
+                        </Col>
+                        <Col span={18}>
+                            <WeaInput style={{width: "200px"}}/>
+                        </Col>
+                    </Row>
+                    <Row className="itemWrapper">
+                        <Col span={6}>
+                            调整原因
+                        </Col>
+                        <Col span={18}>
+                            <WeaSelect style={{width: "200px"}} />
+                        </Col>
+                    </Row>
+                    <Row className="itemWrapper">
+                        <Col span={6}>
+                            说明
+                        </Col>
+                        <Col span={18}>
+                            <WeaInput style={{width: "200px"}}/>
+                        </Col>
+                    </Row>
+                </div>
+
+                <div className="contentWrapper">
+                    <div className="contentTitleWrapper" style={{height: "40px",lineHeight: "40px"}}>
+                        <span className="contentTitle" style={{fontSize: "14px", color: "#666"}}>调薪明细</span>
+                        <div className="rightIconWrapper" style={{display: "inline-block", float: "right"}}>
+                            <Icon type="minus-square" style={{color: "#2db7f5", cursor: "pointer", marginRight: "15px"}}/>
+                            <Icon type="plus-square" style={{color: "#2db7f5", cursor: "pointer"}}/>
+                        </div>
+                    </div>
+
+                    <div className="tableWrapper">
+                        <Table dataSource={dataSource} columns={changeSalaryModalColumns}/>
+                    </div>
+                </div>
+                
+            </Modal>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/salaryFile/columns.js

@@ -31,13 +31,35 @@ export const columns = [
     },
     {
         title: "操作",
+        dataIndex: 'cz',
+        key: 'cz',
+    }
+]
+
+export const changeSalaryModalColumns = [
+    {
+        title: '薪资项目',
         dataIndex: 'title',
-        key: 'title',
+        key: 'title'
+    },
+    {
+        title: '调整前',
+        dataIndex: 'title',
+        key: 'title'
+    },
+    {
+        title: '调整后',
+        dataIndex: 'title',
+        key: 'title'
     }
 ]
 
 
-export const dataSource = [];
+export const dataSource = [
+    {
+        title: "测试"
+    }
+];
 
 
 

pc4mobx/hrmSalary/pages/salaryFile/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 
-import { Button, Table, DatePicker } from 'antd';
+import { Button, Table, DatePicker, Dropdown, Menu } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
@@ -12,6 +12,8 @@ import ContentWrapper from '../../components/contentWrapper';
 
 import { columns, dataSource } from './columns';
 
+import ChangeSalaryModal from "./changeSalaryModal"
+
 const { MonthPicker } = DatePicker;
 
 @inject('baseTableStore')
@@ -21,7 +23,8 @@ export default class SalaryFile extends React.Component {
     super(props);
     this.state = {
       value: "",
-      selectedKey: "0"
+      selectedKey: "0",
+      changeSalaryVisible: false
     }
   }
   render() {
@@ -61,6 +64,44 @@ export default class SalaryFile extends React.Component {
      
     }
 
+    const handleMenuClick = (e) => {
+      if(e.key == "1") {
+        this.setState({
+          changeSalaryVisible: true
+        })
+      }
+    }
+
+    const handleMenuClick2 = () => {
+
+    }
+
+    const menu = (
+      <Menu onClick={handleMenuClick}>
+        <Menu.Item key="1">调薪</Menu.Item>
+        <Menu.Item key="2">调整个税扣缴义务人</Menu.Item>
+        <Menu.Item key="3">档案初始化</Menu.Item>
+      </Menu>
+    );
+
+
+    const menu2 = (
+      <Menu onClick={handleMenuClick2}>
+        <Menu.Item key="1">导出全部</Menu.Item>
+      </Menu>
+    );
+
+    const renderRightOperation = () => {
+        return (
+            <div style={{display: "inline-block"}}>
+                <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"}}>调薪记录</Button>
+                <WeaInputSearch />
+            </div>
+        )
+    }
+
     return (
       <div className="mySalaryBenefitsWrapper">
         <WeaRightMenu
@@ -75,9 +116,22 @@ export default class SalaryFile extends React.Component {
             dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
+            <CustomTab 
+                  searchOperationItem={
+                      renderRightOperation()
+                  }
+              />
             <WeaTable columns={columns} dataSource={dataSource}/>
           </WeaTop>
         </WeaRightMenu>
+        
+        {
+          this.state.changeSalaryVisible && <ChangeSalaryModal 
+          visible={this.state.changeSalaryVisible}
+          onCancel={() => {this.setState({changeSalaryVisible: false})}}
+        />
+        }
+        
       </div>
     )
   }

pc4mobx/hrmSalary/pages/salaryFile/index.less

@@ -0,0 +1,20 @@
+.changeSalaryModal {
+    padding: 10px 20px;
+    .itemWrapper {
+        line-height: 47px;
+    }
+    .contentWrapper {
+        margin-top: 10px;
+        .contentTitleWrapper {
+            height: 40px;
+            line-height: 40px;
+            .rightIconWrapper {
+                display: inline-block;
+                float: right;
+            }
+        }
+        .tableWrapper {
+            margin-top: 10px;
+        }
+    }
+}