diff --git a/pc4mobx/hrmSalary/pages/payroll/columns.js b/pc4mobx/hrmSalary/pages/payroll/columns.js
index 74c361b1..b7fbb69a 100644
--- a/pc4mobx/hrmSalary/pages/payroll/columns.js
+++ b/pc4mobx/hrmSalary/pages/payroll/columns.js
@@ -107,6 +107,91 @@ export const payrollColumns = [
     }
 ]
 
+export const payrollGrantColumns = [
+    {
+        title: "姓名",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "个税扣缴义务人",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "部门",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "手机号",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "工号",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "发放状态",
+        dataIndex: "title",
+        key: "title"
+    }
+]
+
+export const payrollGrantDetailColumns = [
+    {
+        title: "姓名",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "个税扣缴义务人",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "人员类型",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "部门",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "手机号",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "工号",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "薪资项目1",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "薪资项目2",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "薪资项目3",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "薪资项目4",
+        dataIndex: "title",
+        key: "title"
+    },
+]
 
 export const dataSource = [
     {
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
index 3ecbb728..6c8e0064 100644
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
@@ -4,18 +4,38 @@ import { dataSource, payrollColumns } from '../columns';
 import { Menu, Button, Dropdown, Table } from 'antd'
 import CustomTab from '../../../components/customTab'
 import "./index.less"
+import PayrollGrantModal from './payrollGrantModal'
 
 export default class PayrollGrant extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            payrollGrantVisible: false,
+            payrollWithdrawVisible: false
+        }
+    }
     render() {
+
+        const handleMenuClick = (e) => {
+            switch(e.key) {
+                case "1":
+                    this.setState({payrollGrantVisible: true})
+                    break;
+                case "2":
+                    this.setState({payrollWithdrawVisible: true})
+                    break;
+            }
+        }
+
         const menu = (
-            <Menu>
-              <Menu.Item key="1" onClick={() => {}}>批量发放</Menu.Item>
+            <Menu onClick={handleMenuClick}>
+              <Menu.Item key="1">批量发放</Menu.Item>
               <Menu.Item key="2">批量撤回</Menu.Item>
               <Menu.Item key="3">全部导出</Menu.Item>
               <Menu.Item key="3">导出选中</Menu.Item>
               <Menu.Item key="3">自定义列</Menu.Item>
             </Menu>
-          );
+        );
         const renderRightOperation = () => {
             return (
                 <div style={{display: "inline-block"}}>
@@ -64,6 +84,18 @@ export default class PayrollGrant extends React.Component {
                 <div className="tableWrapper">
                     <Table dataSource={dataSource} columns={payrollColumns}/>
                 </div>
+                {
+                    this.state.payrollGrantVisible && <PayrollGrantModal 
+                    visible={this.state.payrollGrantVisible}
+                    onCancel={() => {this.setState({payrollGrantVisible: false})}}/>
+                }
+
+                {
+                    this.state.payrollWithdrawVisible && <PayrollWithDrawModal
+                    visible={this.state.payrollWithdrawVisible}
+                    onCancel={() => {this.setState({payrollWithdrawVisible: false})}}
+                    />
+                }
             </div>
         )
     }
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantDetail.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantDetail.js
new file mode 100644
index 00000000..abe3003f
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantDetail.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import { payrollGrantDetailColumns, dataSource} from '../columns'
+
+export default class PayrollGrantDeatail extends React.Component {
+
+    
+    render() {
+        const handleMenuClick = () => {
+
+        }
+        const menu = (
+            <Menu onClick={handleMenuClick}>
+              <Menu.Item key="1">导出选中</Menu.Item>
+            </Menu>
+        );
+        const renderRightOperation = () => {
+            return (
+                <div style={{display: "inline-block"}}>
+                    <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
+                    <WeaInputSearch />
+                </div>
+            )
+        }
+        return (
+            <div>
+                <CustomTab
+                    searchOperationItem={
+                        renderRightOperation()
+                    }
+                />
+                <div className="titleBar">
+                    <div className="titleBarLeft">
+                        <span>薪资所属月：2021-11</span>
+                        <WeaHelpfulTip
+                            style={{marginLeft: '10px', marginRight: "10px"}}
+                            width={200}
+                            title="薪资周期\n
+                            2021-11-01至2021-11-30\n
+                            税款所属期\n
+                            2021-12\n
+                            考勤取值周期\n
+                            2021-11-01至2021-11-30\n
+                            福利台账月份\n
+                            引用2021-11的福利台账数据"
+                            placement="topLeft"
+                        />
+                        <span>工资单模板：上海泛微工资单1</span>
+                    </div>
+
+                    <div className="titleBarRight">
+                        <span>已发放：111/<span style={{color: "red"}}>1111</span></span>
+                        <span style={{marginLeft: "10px"}}>未确认：111</span>
+                    </div>
+                </div>
+
+                <div>
+                    <Table dataSource={dataSource} columns={payrollGrantDetailColumns} />
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js
new file mode 100644
index 00000000..be7ee662
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
+import { payrollGrantColumns, dataSource } from "../columns"
+import { Menu, Button,Table, Modal, Dropdown } from "antd"
+
+export default class payrollGrantModal extends React.Component {
+    
+    render() {
+        const menu = (
+            <Menu>
+              <Menu.Item key="1">发放所选</Menu.Item>
+            </Menu>
+        );
+        return (
+            <Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
+                <div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
+                    <span style={{fontSize: "14px", color: '#666'}}>批量发放</span>
+                    <div style={{float: "right", marginRight: "40px"}}>
+                        <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>全部发放</Dropdown.Button>
+                        <WeaInputSearch />
+                    </div>
+                </div>
+                <div style={{height: "40px", lineHeight: "40px"}}>
+                    <div className="titleBarLeft">
+                        <span>薪资所属月：2021-11</span>
+                        <WeaHelpfulTip
+                            style={{marginLeft: '10px', marginRight: "10px"}}
+                            width={200}
+                            title="薪资周期\n
+                            2021-11-01至2021-11-30\n
+                            税款所属期\n
+                            2021-12\n
+                            考勤取值周期\n
+                            2021-11-01至2021-11-30\n
+                            福利台账月份\n
+                            引用2021-11的福利台账数据"
+                            placement="topLeft"
+                        />
+                        <span>工资单模板：上海泛微工资单1</span>
+                    </div>
+                </div>
+                <div style={{marginTop: "10px"}}>
+                    <Table dataSource={dataSource} columns={payrollGrantColumns}/>
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js
new file mode 100644
index 00000000..dc354d96
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
+import { payrollGrantColumns, dataSource } from "../columns"
+import { Menu, Button,Table, Modal, Dropdown } from "antd"
+
+export default class PayrollWithDrawModal extends React.Component {
+    
+    render() {
+        const menu = (
+            <Menu>
+              <Menu.Item key="1">撤回所选</Menu.Item>
+            </Menu>
+        );
+        return (
+            <Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
+                <div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
+                    <span style={{fontSize: "14px", color: '#666'}}>批量撤回</span>
+                    <div style={{float: "right", marginRight: "40px"}}>
+                        <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>全部撤回</Dropdown.Button>
+                        <WeaInputSearch />
+                    </div>
+                </div>
+                <div style={{height: "40px", lineHeight: "40px"}}>
+                    <div className="titleBarLeft">
+                        <span>薪资所属月：2021-11</span>
+                        <WeaHelpfulTip
+                            style={{marginLeft: '10px', marginRight: "10px"}}
+                            width={200}
+                            title="薪资周期\n
+                            2021-11-01至2021-11-30\n
+                            税款所属期\n
+                            2021-12\n
+                            考勤取值周期\n
+                            2021-11-01至2021-11-30\n
+                            福利台账月份\n
+                            引用2021-11的福利台账数据"
+                            placement="topLeft"
+                        />
+                        <span>工资单模板：上海泛微工资单1</span>
+                    </div>
+                </div>
+                <div style={{marginTop: "10px"}}>
+                    <Table dataSource={dataSource} columns={payrollGrantColumns}/>
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file