列表接口对接

pc4mobx/hrmSalary/apis/payroll.js

@@ -2,7 +2,14 @@ import { WeaTools } from 'ecCom';
 
 //工资单-工资单发放列表
 export const getPayrollList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/send/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salaryBill/send/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //工资单-获取table提示信息
@@ -19,24 +26,51 @@ export const getPaySa = params => {
 
 //工资单-工资单发放
 export const grantPayroll = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/send/grant', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salaryBill/send/grant', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //工资单-工资单撤回
 export const withdrawPayroll = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/send/withdraw', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salaryBill/send/withdraw', {
-}
+        method: 'POST',
-
+        mode: 'cors',
-
+        headers: {
-//工资单-工资单发放详情列表的高级搜索
+            'Content-Type': 'application/json'
-export const getPayrollDetailList = params => {
+        }, 
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/send/detailList', 'POST', params);
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 
 //工资单-工资单发放详情列表
+export const getPayrollDetailList = params => {
+    return fetch('/api/bs/hrmsalary/salaryBill/send/detailList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+//工资单-工资单发放详情列表的高级搜索
 export const getPayrollDetailSa = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/send/getDetailSearchCondition', 'get', params);
+    return fetch('/api/bs/hrmsalary/salaryBill/send/getDetailSearchCondition', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //工资单-导出-工资单发放信息列表
@@ -146,3 +180,63 @@ export const deletePayroll = params => {
 export const getTenantName = params => {
     return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/getTenantName', 'get', params);
 }
+
+// 工资单发放-工资单发放信息列表
+export const getInfoList = params => {
+    return fetch('/api/bs/hrmsalary/salaryBill/send/infoList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+// 工资单发放-导出-工资单发放详情列表
+export const exportDetailList = params => {
+    fetch('/api/bs/hrmsalary/salaryBill/send/exportDetailList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(params)
+    }).then(res => res.blob().then(blob => {
+        var filename=`工资单发放详情列表.xlsx`
+        var a = document.createElement('a');
+        var url = window.URL.createObjectURL(blob); 
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }))
+}
+
+// 工资单发放-工资单批量发放信息列表
+export const batchSendInfoList = params => {
+    return fetch('/api/bs/hrmsalary/salaryBill/send/batchSendInfoList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+// 工资单发放-工资单批量撤回信息列表
+export const batchWithdrawInfoList = params => {
+    return fetch('/api/bs/hrmsalary/salaryBill/send/batchWithdrawInfoList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
+}
+
+
+
+

pc4mobx/hrmSalary/index.js

@@ -15,6 +15,7 @@ import Ledger from './pages/ledger';
 import Calculate from './pages/calculate';
 import Payroll from './pages/payroll';
 import PayrollGrant from './pages/payroll/payrollGrant';
+import PayrollDetail from './pages/payroll/payrollDetail'
 import Declare from './pages/declare';
 import TaxRate from './pages/taxRate';
 import TaxAgent from './pages/taxAgent';
@@ -24,6 +25,7 @@ import CompareDetail from './pages/calculateDetail/compareDetail'
 import GenerateDeclarationDetail from './pages/declare/generateDeclarationDetail'
 import BaseForm from './components';
 
+
 import stores from './stores';
 import './style/index';
 
@@ -90,7 +92,7 @@ const Routes = (
     
     <Route key='payroll' path='payroll' component={Payroll} />
     <Route key='payrollGrant' path='payrollGrant' component={PayrollGrant} />
-
+    <Route key="payrollDetail" path="payrollDetail" component={PayrollDetail} />
     <Route key='declare' path='declare' component={Declare} />
     <Route key='generateDeclarationDetail' path='generateDeclarationDetail' component={GenerateDeclarationDetail} />
     

pc4mobx/hrmSalary/pages/payroll/SalarySendList.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import { inject, observer } from 'mobx-react';
+import { Table, Menu, Dropdown } from 'antd'
+import { WeaTable } from 'ecCom'
+
+@inject('payrollStore')
+@observer
+export default class SalarySendList extends React.Component {
+
+    componentWillMount() {
+        const { payrollStore: {getPayrollList} } = this.props;
+        getPayrollList()
+    }
+
+
+    // 发放回调
+    handleGrant(record) {
+        window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=" + record.id)
+    }
+
+    // 查看详情
+    handleShowDetail(record) {
+        window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" + record.id)
+    }
+
+    // 更新模板
+    handleUpdateTemplate(record) {
+        window.open("")
+        
+    }
+
+
+    // 获取表头数据
+    getColumns() {
+        const {payrollStore : {salarySendTableStore}} = this.props;
+        const{ columns } = salarySendTableStore
+        if(!columns) {
+            return [];
+        }
+        
+        let result =  columns.filter(item => item.hide == "false")
+        return result
+            .concat([
+                {
+                    title: "操作",
+                    key: "operate",
+                    render: (text, record) => {
+                        return (
+                            <a onClick={() => {this.handleGrant(record)}}>发放</a>
+                        )
+                    }
+                },
+                {
+                    title : '',
+                    key: "moreOperate",
+                    dataIndex: "moreOperate",
+                    render: (text, record) => {
+                        return (
+                            <Dropdown overlay={<Menu>
+                                <Menu.Item>
+                                  <a onClick={() => {
+                                      this.handleShowDetail(record)
+                                  }}>查看详情</a>
+                                </Menu.Item>
+                                <Menu.Item>
+                                  <a onClick={() => {
+                                      this.handleUpdateTemplate(record)
+                                  }}>更新模板</a>
+                                </Menu.Item>
+                              </Menu>}>
+                                <i className="icon-coms-more"></i>
+                            </Dropdown>
+                            
+                        );
+                    }
+                }
+            ])
+    }
+
+    render() {
+        const { payrollStore } = this.props;
+        const { salarySendTableStore, salarySendDataSource } = payrollStore;
+        return (
+            <div>
+                <WeaTable columns={this.getColumns()} dataSource={salarySendDataSource}/>
+            </div>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/payroll/index.js

@@ -20,6 +20,7 @@ import SlideModalTitle from "../../components/slideModalTitle"
 import TemplateSettingList from './templateSettingList'
 import { notNull } from '../../util/validate';
 import CopyModal from './copyModal';
+import SalarySendList from './SalarySendList'
 
 const { MonthPicker } = DatePicker;
 
@@ -293,7 +294,10 @@ export default class Payroll extends React.Component {
                 }}
               />
               {
-                this.state.selectedKey == 0 && <WeaTable columns={columns} dataSource={dataSource}/>
+                this.state.selectedKey == 0 && 
+                <SalarySendList />
+                
+                // <WeaTable columns={columns} dataSource={dataSource}/>
               }
 
               {

pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js

@@ -0,0 +1,169 @@
+import React from 'react'
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTab, WeaTop } from 'ecCom'
+import { dataSource, payrollColumns } from '../columns';
+import { Menu, Button, Dropdown, Table } from 'antd'
+import CustomTab from '../../../components/customTab'
+import "./index.less"
+import { getQueryString } from '../../../util/url'
+import { renderNoright, getSearchs } from '../../../util';
+
+@inject('payrollStore')
+@observer
+export default class PayrollDetail extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentId: ""
+        }
+    }
+
+    componentWillMount() {
+        let id = getQueryString("id")
+        this.setState({currentId: id})
+        const { payrollStore: {getPayrollInfo, getPayrollDetailList, getPayrollDetailSa} } = this.props;
+        getPayrollInfo(id)
+        getPayrollDetailList({salarySendId: id})
+        getPayrollDetailSa()
+    }
+
+    // 撤回
+    handleWithdraw(record) {
+        const { payrollStore } = this.props;
+        const { withdrawPayroll, getInfoList } = payrollStore;
+        withdrawPayroll({
+            ids: [record.id],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    // 发送
+    handleGrant(record) {
+        const { payrollStore } = this.props;
+        const { grantPayroll, getInfoList } = payrollStore;
+        grantPayroll({
+            ids: [record.id],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    getColumns() {
+        const { payrollStore } = this.props;
+        const { salarySendDetailTableStore } = payrollStore
+        const { columns } = salarySendDetailTableStore;
+        if(!columns) {
+            return []
+        }
+        let result = columns.filter(item => item.hide == "false").map(item => {
+            item = {...item}
+            if(item.dataIndex == "operation") {
+                item.render = (text,record) => {
+                    if(text == 'ALREADYSEND') {
+                        return (
+                            <a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
+                        )
+                    } else {
+                        return (
+                            <a onClick={() => {this.handleGrant(record)}}>发送</a>
+                        )
+                    }
+                }
+            }
+            return item;
+        })
+        return result;
+    }
+
+    // 导出所选
+    handleExportSelected() {
+
+    }
+
+    // 导出全部
+    handleExportAll() {
+        const { payrollStore } = this.props;
+        const { exportDetailList } = payrollStore
+        exportDetailList({salarySendId: this.state.currentId})
+    }
+
+    getSearchsAdQuick() {
+        const handleMenuClick = (e) => {
+            switch(e.key) {
+                case "1":
+                    this.handleExportSelected()
+                    break;
+            }
+        }
+        const menu = (
+            <Menu onClick={handleMenuClick}>
+              <Menu.Item key="1">导出所选</Menu.Item>
+            </Menu>
+        );
+        return (
+            <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
+        )
+    }
+
+    render() {
+        const {payrollStore}  = this.props;
+        const { setDetailListShowSearchAd, detailListShowSearchAd, getPayrollDetailList, detailListCondition, detailListConditionForm, salarySendDetailBaseInfo, salarySendDetailTableStore, salarySendDetailDataSource } = payrollStore;
+        return (
+            <div className="payrollGrant">
+                <WeaTop
+                    title="工资单发放" // 文字
+                    icon={<i className='icon-coms-meeting' />} // 左侧图标
+                    iconBgcolor='#F14A2D' // 左侧图标背景色
+                    showDropIcon={true} // 是否显示下拉按钮
+                    buttons={[this.getSearchsAdQuick()]}
+                ></WeaTop>
+                <WeaTab
+                    searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
+                    showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
+                    setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
+                    searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
+                    // buttonsAd={adBtn} // 高级搜索内部按钮
+                    onSearch={getPayrollDetailList} // 点搜索按钮时的回调
+                    // searchsAdQuick={this.getSearchsAdQuick()}
+                    onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
+                    searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
+                />
+                <div className="titleBar">
+                    <div className="titleBarLeft">
+                        <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
+                        <WeaHelpfulTip
+                            style={{marginLeft: '10px', marginRight: "10px"}}
+                            width={200}
+                            title={`薪资周期\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
+                            税款所属期\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
+                            考勤取值周期\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
+                            福利台账月份\n
+                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
+                            placement="topLeft"
+                        />
+                        <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
+                    </div>
+
+                    <div className="titleBarRight">
+                        <span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
+                    </div>
+                </div>
+
+                <div className="tableWrapper">
+                    <WeaTable dataSource={salarySendDetailDataSource} columns={this.getColumns()}/>
+                </div>
+            </div>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less

@@ -0,0 +1,13 @@
+.payrollGrant {
+    padding: 20px;
+    .titleBar {
+        height: 47px;
+        line-height: 47px;
+        .titleBarLeft {
+            float: left;
+        }
+        .titleBarRight {
+            float: right;
+        }
+    }
+}

pc4mobx/hrmSalary/pages/payroll/payrollDetail/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>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js

@@ -1,22 +1,125 @@
 import React from 'react'
-import { WeaInputSearch, WeaHelpfulTip } from 'ecCom'
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+import { WeaInputSearch, WeaHelpfulTip, WeaTable, WeaTop, WeaTab } from 'ecCom'
 import { dataSource, payrollColumns } from '../columns';
 import { Menu, Button, Dropdown, Table } from 'antd'
 import CustomTab from '../../../components/customTab'
 import "./index.less"
 import PayrollGrantModal from './payrollGrantModal'
 import PayrollWithdrawModal from './payrollWithdrawModal'
+import { getQueryString } from '../../../util/url'
+import { renderNoright, getSearchs } from '../../../util';
 
+@inject('payrollStore')
+@observer
 export default class PayrollGrant extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             payrollGrantVisible: false,
-            payrollWithdrawVisible: false
+            payrollWithdrawVisible: false,
+            currentId: ""
         }
     }
-    render() {
 
+    componentWillMount() {
+        let id = getQueryString("id")
+        this.setState({currentId: id})
+        const { payrollStore: {getPayrollInfo, getInfoList, getPaySa} } = this.props;
+        getPayrollInfo(id)
+        getInfoList({
+            salarySendId:id
+        })
+        getPaySa()
+    }
+
+
+    // 撤回
+    handleWithdraw(record) {
+        const { payrollStore } = this.props;
+        const { withdrawPayroll, getInfoList } = payrollStore;
+        withdrawPayroll({
+            ids: [record.id],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    // 发送
+    handleGrant(record) {
+        const { payrollStore } = this.props;
+        const { grantPayroll, getInfoList } = payrollStore;
+        grantPayroll({
+            ids: [record.id],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    // 全部发送
+    handleGrantAll() {
+        const { payrollStore } = this.props;
+        const { grantPayroll, getInfoList } = payrollStore;
+        grantPayroll({
+            ids: [],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    // 全部撤回
+    handleWithdrawAll() {
+        const { payrollStore } = this.props;
+        const { withdrawPayroll, getInfoList } = payrollStore;
+        withdrawPayroll({
+            ids: [],
+            salarySendId: this.state.currentId
+        }).then(() => {
+            getInfoList({
+                salarySendId:this.state.currentId
+            })
+        })
+    }
+
+    getColumns() {
+        const { payrollStore } = this.props;
+        const { salaryGrantTableStore } = payrollStore
+        const { columns } = salaryGrantTableStore;
+        if(!columns) {
+            return []
+        }
+
+        let result = columns.filter(item => item.hide == "false").map(item => {
+            item = {...item}
+            if(item.dataIndex == "operation") {
+                item.render = (text,record) => {
+                    if(text == 'ALREADYSEND') {
+                        return (
+                            <a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
+                        )
+                    } else {
+                        return (
+                            <a onClick={() => {this.handleGrant(record)}}>发送</a>
+                        )
+                    }
+                }
+            }
+            return item;
+        })
+        return result;
+    }
+
+    getSearchsAdQuick() {
         const handleMenuClick = (e) => {
             switch(e.key) {
                 case "1":
@@ -37,62 +140,77 @@ export default class PayrollGrant extends React.Component {
               <Menu.Item key="3">自定义列</Menu.Item>
             </Menu>
         );
-        const renderRightOperation = () => {
+        return (
-            return (
+            <div style={{display: "inline-block"}}>
-                <div style={{display: "inline-block"}}>
+                <Button type="primary" style={{marginRight: "10px"}} onClick={() => {this.handleGrantAll()}}>全部发放</Button>
-                    <Button type="primary" style={{marginRight: "10px"}}>全部发放</Button>
+                <Button type="default" style={{marginRight: "10px"}} onClick={() => {this.handleWithdrawAll()}}>全部撤回</Button>
-                    <Button type="default" style={{marginRight: "10px"}}>全部撤回</Button>
+                <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
-                    <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
+            </div>
-                    <WeaInputSearch />
+        )
-                </div>
+    }
-            )
+
-        }
+    render() {
+        const {payrollStore}  = this.props;
+        const { salarySendDetailBaseInfo, salaryGrantDataSource, getInfoList, grantListShowSearchAd, grantListConditionForm, grantListCondition, setGrantListShowSearchAd } = payrollStore;
+        
         return (
             <div className="payrollGrant">
-                <CustomTab
+                <WeaTop
-                    searchOperationItem={
+                    title="工资单发放" // 文字
-                        renderRightOperation()
+                    icon={<i className='icon-coms-meeting' />} // 左侧图标
-                    }
+                    iconBgcolor='#F14A2D' // 左侧图标背景色
-                    onChange={(v) => {
+                    showDropIcon={true} // 是否显示下拉按钮
-                        this.setState({selectedKey: v})
+                    buttons={[this.getSearchsAdQuick()]}
-                    }}
+                ></WeaTop>
+
+                <WeaTab
+                    searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
+                    showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板
+                    setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控
+                    searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} // 高级搜索内部数据
+                    // buttonsAd={adBtn} // 高级搜索内部按钮
+                    onSearch={getInfoList} // 点搜索按钮时的回调
+                    // searchsAdQuick={this.getSearchsAdQuick()}
+                    onSearchChange={v => grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
+                    searchsBaseValue={grantListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
                 />
                 <div className="titleBar">
                     <div className="titleBarLeft">
-                        <span>薪资所属月：2021-11</span>
+                        <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
                         <WeaHelpfulTip
                             style={{marginLeft: '10px', marginRight: "10px"}}
                             width={200}
-                            title="薪资周期\n
+                            title={`薪资周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
                             税款所属期\n
-                            2021-12\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
                             考勤取值周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
                             福利台账月份\n
-                            引用2021-11的福利台账数据"
+                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
                             placement="topLeft"
                         />
-                        <span>工资单模板：上海泛微工资单1</span>
+                        <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
                     </div>
 
                     <div className="titleBarRight">
-                        <span>已发放：111/<span style={{color: "red"}}>1111</span></span>
+                        <span>已发放：{salarySendDetailBaseInfo.sendNum}/<span style={{color: "red"}}>{salarySendDetailBaseInfo.sendTotal}</span></span>
-                        <span style={{marginLeft: "10px"}}>未确认：111</span>
                     </div>
                 </div>
 
                 <div className="tableWrapper">
-                    <Table dataSource={dataSource} columns={payrollColumns}/>
+                    <WeaTable dataSource={salaryGrantDataSource} columns={this.getColumns()}/>
                 </div>
                 {
                     this.state.payrollGrantVisible && <PayrollGrantModal 
+                    sendId={this.state.currentId}
                     visible={this.state.payrollGrantVisible}
                     onCancel={() => {this.setState({payrollGrantVisible: false})}}/>
                 }
 
                 {
                     this.state.payrollWithdrawVisible && <PayrollWithdrawModal
+                    sendId={this.state.currentId}
                     visible={this.state.payrollWithdrawVisible}
                     onCancel={() => {this.setState({payrollWithdrawVisible: false})}}
                     />

pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollGrantModal.js

@@ -1,9 +1,71 @@
 import React from 'react'
-import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
+import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom"
 import { payrollGrantColumns, dataSource } from "../columns"
 import { Menu, Button,Table, Modal, Dropdown } from "antd"
+import { inject, observer } from 'mobx-react';
 
+@inject('payrollStore')
+@observer
 export default class payrollGrantModal extends React.Component {
+    // 撤回
+    handleWithdraw(record) {
+        const { payrollStore } = this.props;
+        const { withdrawPayroll, batchSendInfoList } = payrollStore;
+        withdrawPayroll({
+            ids: [record.id],
+            salarySendId: this.props.sendId
+        }).then(() => {
+            batchSendInfoList({salarySendId: this.props.sendId})
+        })
+    }
+
+    // 发送
+    handleGrant(record) {
+        const { payrollStore } = this.props;
+        const { grantPayroll, batchSendInfoList } = payrollStore;
+        grantPayroll({
+            ids: [record.id],
+            salarySendId: this.props.sendId
+        }).then(() => {
+            batchSendInfoList({salarySendId: this.props.sendId})
+        })
+    }
+
+    componentWillMount() {
+        const { payrollStore: { batchSendInfoList } } = this.props;
+        batchSendInfoList({salarySendId: this.props.sendId})
+    }
+
+    getColumns() {
+        const { payrollStore } = this.props;
+        const { canGrantColumns } = payrollStore
+        if(!canGrantColumns) {
+            return []
+        }
+        return canGrantColumns.map(item => {
+            let result = {}
+            result.title = item.text;
+            result.dataIndex = item.column;
+            result.key = item.column;
+            result.width = item.width;
+            if(result.key == "operation") {
+                result.render = (text,record) => {
+                    if(text == 'ALREADYSEND') {
+                        return (
+                            <a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
+                        )
+                    } else {
+                        return (
+                            <a onClick={() => {this.handleGrant(record)}}>发送</a>
+                        )
+                    }
+                }
+            } else {
+                result.dataIndex = item.column;
+            }
+            return result;
+        })
+    }
     
     render() {
         const menu = (
@@ -11,6 +73,10 @@ export default class payrollGrantModal extends React.Component {
               <Menu.Item key="1">发放所选</Menu.Item>
             </Menu>
         );
+
+        const {payrollStore}  = this.props;
+        const { salarySendDetailBaseInfo, canGrantDataSource } = payrollStore;
+        
         return (
             <Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
                 <div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
@@ -22,25 +88,25 @@ export default class payrollGrantModal extends React.Component {
                 </div>
                 <div style={{height: "40px", lineHeight: "40px"}}>
                     <div className="titleBarLeft">
-                        <span>薪资所属月：2021-11</span>
+                    <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
                         <WeaHelpfulTip
                             style={{marginLeft: '10px', marginRight: "10px"}}
                             width={200}
-                            title="薪资周期\n
+                            title={`薪资周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
                             税款所属期\n
-                            2021-12\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
                             考勤取值周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
                             福利台账月份\n
-                            引用2021-11的福利台账数据"
+                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
                             placement="topLeft"
                         />
-                        <span>工资单模板：上海泛微工资单1</span>
+                        <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
                     </div>
                 </div>
                 <div style={{marginTop: "10px"}}>
-                    <Table dataSource={dataSource} columns={payrollGrantColumns}/>
+                    <WeaTable dataSource={canGrantDataSource} columns={this.getColumns()}/>
                 </div>
             </Modal>
         )

pc4mobx/hrmSalary/pages/payroll/payrollGrant/payrollWithdrawModal.js

@@ -1,9 +1,73 @@
 import React from 'react'
-import { WeaInputSearch, WeaHelpfulTip } from "ecCom"
+import { WeaInputSearch, WeaHelpfulTip, WeaTable } from "ecCom"
 import { payrollGrantColumns, dataSource } from "../columns"
 import { Menu, Button,Table, Modal, Dropdown } from "antd"
+import { inject, observer } from 'mobx-react';
 
+
+@inject('payrollStore')
+@observer
 export default class PayrollWithdrawModal extends React.Component {
+    componentWillMount() {
+        const { payrollStore } = this.props
+        const { batchWithdrawInfoList } = payrollStore
+        batchWithdrawInfoList({salarySendId:this.props.sendId})
+    }
+
+    // 撤回
+    handleWithdraw(record) {
+        const { payrollStore } = this.props;
+        const { withdrawPayroll, batchWithdrawInfoList } = payrollStore;
+        withdrawPayroll({
+            ids: [record.id],
+            salarySendId: this.props.sendId
+        }).then(() => {
+            batchWithdrawInfoList({salarySendId:this.props.sendId})
+        })
+    }
+
+    // 发送
+    handleGrant(record) {
+        const { payrollStore } = this.props;
+        const { grantPayroll,batchWithdrawInfoList } = payrollStore;
+        grantPayroll({
+            ids: [record.id],
+            salarySendId: this.props.sendId
+        }).then(() => {
+            batchWithdrawInfoList({salarySendId:this.props.sendId})
+        })
+    }
+
+    getColumns() {
+        const { payrollStore } = this.props;
+        const { canWidthdrawColumns } = payrollStore
+        if(!canWidthdrawColumns) {
+            return []
+        }
+        return canWidthdrawColumns.map(item => {
+            let result = {}
+            result.title = item.text;
+            result.key = item.column;
+            result.dataIndex = item.column;
+            result.width = item.width;
+            if(result.key == "operation") {
+                result.render = (text,record) => {
+                    if(text == 'ALREADYSEND') {
+                        return (
+                            <a onClick={() => {this.handleWithdraw(record)}}>撤回</a>
+                        )
+                    } else {
+                        return (
+                            <a onClick={() => {this.handleGrant(record)}}>发送</a>
+                        )
+                    }
+                }
+            } else {
+                result.dataIndex = item.column;
+            }
+            return result;
+        })
+    }
 
     render() {
         const menu = (
@@ -11,6 +75,8 @@ export default class PayrollWithdrawModal extends React.Component {
               <Menu.Item key="1">撤回所选</Menu.Item>
             </Menu>
         );
+        const {payrollStore}  = this.props;
+        const { salarySendDetailBaseInfo, canWidthdrawColumns, canWithdrawDataSource } = payrollStore;
         return (
             <Modal width={800} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
                 <div style={{padding: "0px 10px", height: "47px", lineHeight: "47px"}}>
@@ -22,25 +88,25 @@ export default class PayrollWithdrawModal extends React.Component {
                 </div>
                 <div style={{height: "40px", lineHeight: "40px"}}>
                     <div className="titleBarLeft">
-                        <span>薪资所属月：2021-11</span>
+                    <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
                         <WeaHelpfulTip
                             style={{marginLeft: '10px', marginRight: "10px"}}
                             width={200}
-                            title="薪资周期\n
+                            title={`薪资周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
                             税款所属期\n
-                            2021-12\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
                             考勤取值周期\n
-                            2021-11-01至2021-11-30\n
+                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
                             福利台账月份\n
-                            引用2021-11的福利台账数据"
+                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
                             placement="topLeft"
                         />
-                        <span>工资单模板：上海泛微工资单1</span>
+                        <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
                     </div>
                 </div>
                 <div style={{marginTop: "10px"}}>
-                    <Table dataSource={dataSource} columns={payrollGrantColumns}/>
+                    <WeaTable dataSource={canWithdrawDataSource} columns={this.getColumns()}/>
                 </div>
             </Modal>
         )

pc4mobx/hrmSalary/stores/payroll.js

@@ -24,6 +24,37 @@ export class payrollStore {
   @observable salaryTemplateShowSet = {}  // 显示设置基础表单
   @observable salaryItemSet = [] // 显示设置薪资项
 
+
+  // **** 工资单页面 ****
+  @observable salarySendTableStore = new TableStore(); // 工资单列表
+  @observable salarySendDataSource = [];
+
+  // **** 工资单详情页 ****
+  @observable salarySendDetailBaseInfo = {}; // 工资单详情基础信息
+  @observable salarySendDetailDataSource = []; // 详情列表DataSource
+  @observable salarySendDetailTableStore = new TableStore(); // 详情列表store
+  @observable detailListConditionForm = new WeaForm(); // 详情页搜索条件
+  @observable detailListShowSearchAd = false; // 详情页是否展开搜索面板
+  @observable detailListCondition = []; // 详情页搜索条件
+
+  // **** 工资单发放页 ****
+  @observable salaryGrantDataSource = [];
+  @observable salaryGrantTableStore = new TableStore();
+  @observable grantListConditionForm = new WeaForm(); // 详情页搜索条件
+  @observable grantListShowSearchAd = false; // 详情页是否展开搜索面板
+  @observable grantListCondition = []; // 详情页搜索条件
+  @observable canGrantDataSource = []; // 可以发送的列表
+  @observable canGrantColumns = []; // 可以发送的列名 
+  @observable canWithdrawDataSource = []; // 可以撤回的列表
+  @observable canWidthdrawColumns = []; // 可以撤回的列表列名
+
+  @action
+  setGrantListShowSearchAd = (grantListShowSearchAd) => this.grantListShowSearchAd = grantListShowSearchAd
+
+  //  详情页是否展开搜索面板
+  @action
+  setDetailListShowSearchAd = (detailListShowSearchAd) => this.detailListShowSearchAd = detailListShowSearchAd
+
   // 基础信息表单数据
   @action
   setTemplateBaseData = (templateBaseData) => this.templateBaseData = templateBaseData
@@ -284,4 +315,148 @@ export class payrollStore {
     })
   }
 
+  // 工资单-工资单发放列表
+  @action
+  getPayrollList = (parmas = {salaryYearMonth: []}) => {
+    API.getPayrollList(parmas).then(res => {
+      if(res.status) {
+        this.salarySendDataSource = res.data.datas
+        this.salarySendTableStore.getDatas(res.data.dataKey.datas)
+      } else {
+        message.error(res.errormsg || "获取失败");
+      }
+    })
+  }
+ 
+  // 工资单发放-工资单发放基本信息
+  @action
+  getPayrollInfo = (id) => {
+    API.getPayrollInfo({id}).then(res => {
+      if(res.status) {
+        this.salarySendDetailBaseInfo = res.data
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+  // 工资单发放-工资单发放信息列表
+  @action
+  getInfoList = (params = {}) => {
+    API.getInfoList(params).then(res => {
+      if(res.status) {
+        this.salaryGrantTableStore.getDatas(res.data.dataKey.datas)
+        this.salaryGrantDataSource = res.data.datas
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+  // 工资单-工资单发放详情列表
+  @action
+  getPayrollDetailList = (params) => {
+    API.getPayrollDetailList(params).then(res => {
+      if(res.status) {
+        this.salarySendDetailTableStore.getDatas(res.data.dataKey.datas)
+        this.salarySendDetailDataSource = res.data.datas
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+
+  // 工资单详情页 - 获得高级搜索表单数据
+  @action
+  getPayrollDetailSa = (params = {}) => {
+    API.getPayrollDetailSa(params).then(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        this.detailListCondition = res.data.condition;
+        this.detailListConditionForm.initFormFields(res.data.condition); // 渲染高级搜索form表单
+      } else {
+        message.error(res.errormsg  || '接口调用失败！')
+      }
+    });
+  }
+
+  // 工资单发放-导出-工资单发放详情列表
+  @action
+  exportDetailList = (params = {}) => {
+    API.exportDetailList(params)
+  }
+
+  // 工资单-获取工资单发放高级搜索
+  @action
+  getPaySa = (params = {}) => {
+    API.getPaySa(params).then(res => {
+      if(res.status) {
+        this.grantListCondition = res.data.condition;
+        this.grantListConditionForm.initFormFields(res.data.condition); 
+      } else {
+        message.error(res.errormsg || "接口调用失败")
+      }
+    })
+  }
+
+  // 工资单发放-工资单批量发放信息列表
+  @action
+  batchSendInfoList = (params = {}) => {
+    API.batchSendInfoList(params).then(res => {
+      if(res.status) {
+        this.canGrantDataSource = res.data.datas;
+        this.canGrantColumns = res.data.columns;
+        // alert("this.canGrantColumns:" + JSON.stringify(this.canGrantColumns))
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  } 
+
+  // 工资单发放-工资单批量撤回信息列表
+  @action
+  batchWithdrawInfoList = (params = {}) => {
+    API.batchWithdrawInfoList(params).then(res => {
+      if(res.status) {
+        this.canWithdrawDataSource = res.data.datas
+        this.canWidthdrawColumns = res.data.columns
+      } else {
+        message.error(res.errormsg || "获取失败");
+      }
+    })
+  }
+
+  //工资单-工资单发放
+  @action
+  grantPayroll = (params = {}) => {
+    return new Promise((resolve, reject) => {
+      API.grantPayroll(params).then(res => {
+        if(res.status) {
+          message.success("发送失败");
+          resolve();
+        } else {
+          message.error(res.errormsg || "发送失败")
+          reject();
+        }
+      })
+    })
+  }
+
+  // 工资单-工资单撤回
+  @action
+  withdrawPayroll = (params = {}) => {
+    return new Promise((resolve, reject) => {
+      API.withdrawPayroll(params).then(res => {
+        if(res.status) {
+          message.success("撤回成功");
+          resolve()
+        } else {
+          message.error(res.errormsg || "撤回失败")
+          reject();
+        }
+      })
+    })
+  }
+
+
 }

pc4mobx/hrmSalary/util/url.js

@@ -0,0 +1,8 @@
+export const getQueryString = (name) => {
+    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+    let r = window.location.hash.split("?")[1].match(reg);
+    if (r != null) {
+        return decodeURIComponent(r[2]);
+    };
+    return null;
+ }