From aaa02b443716675ed5cbd5bbaa1790dfdf0967fb Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Thu, 17 Mar 2022 10:54:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=96=AA=E8=B5=84=E6=A0=B8=E7=AE=97=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/calculateDetail/columns.js          | 84 +++++++++++++++++++
 .../hrmSalary/pages/calculateDetail/index.js  | 35 +++++++-
 .../pages/calculateDetail/index.less          | 21 ++++-
 .../pages/calculateDetail/salaryDetail.js     | 42 ++++++++++
 .../pages/calculateDetail/warningModal.js     | 32 +++++++
 5 files changed, 211 insertions(+), 3 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js
 create mode 100644 pc4mobx/hrmSalary/pages/calculateDetail/warningModal.js

diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/columns.js b/pc4mobx/hrmSalary/pages/calculateDetail/columns.js
index 1e83fcae..9b1b66fe 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/columns.js
+++ b/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 = [];
 
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/index.js b/pc4mobx/hrmSalary/pages/calculateDetail/index.js
index d890a9ad..02a60fa4 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/index.js
+++ b/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>
         )
     }
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/index.less b/pc4mobx/hrmSalary/pages/calculateDetail/index.less
index 37bff41f..1ab3ebf9 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/index.less
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js b/pc4mobx/hrmSalary/pages/calculateDetail/salaryDetail.js
new file mode 100644
index 00000000..99ff9b1e
--- /dev/null
+++ b/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>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/warningModal.js b/pc4mobx/hrmSalary/pages/calculateDetail/warningModal.js
new file mode 100644
index 00000000..abf84d83
--- /dev/null
+++ b/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>
+        )
+    }
+}
\ No newline at end of file