薪资核算页面

pc4mobx/hrmSalary/pages/calculateDetail/columns.js

@@ -105,6 +105,90 @@ export const monthOnMonthColumns = [
 
 ]
 
+export const salaryDetailColumns = [
+    {
+        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'
+    },
+    {
+        title: "操作",
+        dataIndex: 'cz',
+        key: 'cz'
+    }
+]
+
+export const warningModalColumns = [
+    {
+        title: "异常所属规则名称",
+        dataIndex: 'title',
+        key: 'title'
+    },
+    
+    {
+        title: "异常人数",
+        dataIndex: 'title',
+        key: 'title'
+    },
+
+    
+    {
+        title: "校验规则",
+        dataIndex: 'title',
+        key: 'title'
+    },
+    
+    {
+        title: "操作",
+        dataIndex: 'cz',
+        key: 'cz'
+    }
+]
 
 export const dataSource = [];
 

pc4mobx/hrmSalary/pages/calculateDetail/index.js

@@ -2,6 +2,10 @@ import React from 'react';
 import UserSure from './userSure'
 import { inject, observer } from 'mobx-react';
 import CustomTab from '../../components/customTab'
+import SalaryDetail from './salaryDetail'
+import { Button, Menu, Dropdown } from 'antd'
+import { WeaInputSearch } from "ecCom"
+
 
 @inject('baseTableStore')
 @observer
@@ -14,6 +18,28 @@ export default class CalculateDetail extends React.Component {
     }
     render() {
         const { selectedKey } = this.state;
+
+        const menu = (
+            <Menu>
+              <Menu.Item key="1">导入</Menu.Item>
+              <Menu.Item key="2">线下对比</Menu.Item>
+              <Menu.Item key="3">导出全部</Menu.Item>
+            </Menu>
+          );
+
+        const renderRightOperation = () => {
+            if(selectedKey == "1") {
+                return (
+                    <div style={{display: "inline-block"}}>
+                        <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>核算</Button>
+                        <Button type="default" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>校验</Button>
+                        <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
+                        <WeaInputSearch />
+                    </div>
+                )
+            }
+          }
+
         const topTab =  [{
             title: "人员确认",
             viewcondition: "0"
@@ -27,14 +53,19 @@ export default class CalculateDetail extends React.Component {
             <div>
                 <CustomTab 
                     topTab={topTab}
-                    
+                    searchOperationItem={
+                        renderRightOperation()
+                    }
                     onChange={(v) => {
-                        
+                        this.setState({selectedKey: v})
                     }}
                 />
                 {
                     selectedKey == 0 && <UserSure />
                 }
+                {
+                    selectedKey == 1 && <SalaryDetail />
+                }
             </div>
         )
     }

pc4mobx/hrmSalary/pages/calculateDetail/index.less

@@ -35,7 +35,26 @@
                 }
             }
         }
-
     }
     
+}
+
+.salaryDetail {
+    padding: 10px 20px;
+    .salaryBarWrapper {
+        height: 47px;
+        line-height: 47px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-bottom: 1px solid #eee;
+        .warningspan {
+            float: right;
+            color: #2db7f5;
+            cursor: pointer;
+        }
+    }
+
+    .tableWrapper {
+        margin-top: 10px;
+    }
 }

pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { salaryDetailColumns, dataSource } from './columns'
+import { WeaHelpfulTip } from 'ecCom'
+import { Table } from 'antd'
+import WarningModal from './warningModal'
+import "./index.less"
+
+export default class SalaryDetail extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state ={
+            visible: false
+        }
+    }
+    render() {
+        return (
+            <div className="salaryDetail">
+                <div className="salaryBarWrapper">
+                    <span>薪资所属月：2021-12</span>
+                    <WeaHelpfulTip
+                        style={{marginLeft: "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 className="warningspan" onClick={() => {this.setState({visible: true})}}>校验异常：0</span>
+                </div>
+                <div className="tableWrapper">
+                    <Table dataSource={dataSource} columns={salaryDetailColumns} />
+                </div>
+                <WarningModal visible={this.state.visible} onCancel={() => {this.setState({visible: false})}}/>
+            </div>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/calculateDetail/warningModal.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Modal } from 'antd'
+import {  Button, Menu, Dropdown, Table } from "antd"
+import { warningModalColumns, dataSource } from './columns'
+
+
+export default class WarningModal extends React.Component {
+
+    
+
+    render() {
+        const menu = (
+            <Menu>
+              <Menu.Item key="1">导出所选</Menu.Item>
+            </Menu>
+        );
+        return (
+            <Modal width={800} footer={null} visible={this.props.visible} onCancel={() => {this.props.onCancel()}}>
+                <div style={{borderBottom: "1px solid #eee", height: "47px", lineHeight: "47px"}}>
+                    <span style={{fontSize: "14px", color: "#666"}}>验证结果</span>
+                    <div style={{display: "inline-block", float: "right", marginRight: "40px"}}>
+                        <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导出全部</Dropdown.Button>
+                        <Button type='default' style={{marginLeft: "10px"}}>忽略所有</Button>
+                    </div>
+                </div>
+                <div style={{minHeight: "400px", marginTop: "10px"}}>
+                    <Table dataSource={dataSource} columns={warningModalColumns} />
+                </div>
+            </Modal>
+        )
+    }
+}