From 621d58a6d6315f72872cf7175d725c24feaff709 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Thu, 17 Mar 2022 15:02:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BD=92=E6=A1=A3=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/calculateDetail/columns.js          |  39 ++++++-
 .../pages/calculateDetail/compareDetail.js    |  12 ++
 .../pages/calculateDetail/fileMergeDetail.js  | 105 ++++++++++++++++++
 .../pages/calculateDetail/index.less          |  41 +++++++
 .../calculateDetail/placeOnFileDetail.js      |  50 ++++++++-
 5 files changed, 240 insertions(+), 7 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/calculateDetail/compareDetail.js
 create mode 100644 pc4mobx/hrmSalary/pages/calculateDetail/fileMergeDetail.js

diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/columns.js b/pc4mobx/hrmSalary/pages/calculateDetail/columns.js
index 658c41ac..e2f045c0 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/columns.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/columns.js
@@ -193,8 +193,8 @@ export const warningModalColumns = [
 export const placeOnFileColumns = [
     {
         title: "姓名",
-        dataIndex: 'title',
-        key: 'title'
+        dataIndex: 'username',
+        key: 'username'
     },
     {
         title: "个税扣缴义务人",
@@ -243,8 +243,41 @@ export const placeOnFileColumns = [
     }
 ]
 
+export const mergeDetailColumns = [
+    {
+        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 = [
-    {title: "测试"}
+    {
+        title: "测试",
+        username: "测试"
+    }   
 ];
 
 
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/compareDetail.js b/pc4mobx/hrmSalary/pages/calculateDetail/compareDetail.js
new file mode 100644
index 00000000..c561254c
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/compareDetail.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+
+export default class CompareDetail extends React.Component {
+    render() {
+        return (
+            <div>
+                
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/fileMergeDetail.js b/pc4mobx/hrmSalary/pages/calculateDetail/fileMergeDetail.js
new file mode 100644
index 00000000..2f50e9cc
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/fileMergeDetail.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import { mergeDetailColumns, dataSource} from './columns'
+import { Row, Col, Table } from 'antd'
+import { WeaHelpfulTip } from "ecCom"
+
+export default class FileMergeDetail extends React.Component {
+    render() {
+        return (
+            <div className="fileMergeDetail">
+                <div className="detialItemWrapper">
+                    <div className="titleWrapper">
+                        <span className="itemTitle">基本信息</span>
+                        <div className="rightItemWrapper">
+                            <span>薪资所属月：2021-11</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"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="itemContent">
+                        <Row classsName="itemRow">
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>姓名</Col>
+                                    <Col span={12}>张三</Col>
+                                </Row> 
+                            </Col>
+                            
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>部门</Col>
+                                    <Col span={12}>研发</Col>
+                                </Row> 
+                            </Col>
+
+                            
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>岗位</Col>
+                                    <Col span={12}>开发</Col>
+                                </Row> 
+                            </Col>
+                        </Row>
+                        
+                        <Row className="itemRow">
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>入职日期</Col>
+                                    <Col span={12}>2020-10-20</Col>
+                                </Row> 
+                            </Col>
+                            
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>手机号</Col>
+                                    <Col span={12}>18888888888</Col>
+                                </Row> 
+                            </Col>
+
+                            
+                            <Col span={8}>
+                                <Row>
+                                    <Col span={12}>个税扣缴义务人</Col>
+                                    <Col span={12}>义务人一</Col>
+                                </Row> 
+                            </Col>
+                        </Row>
+                    </div>
+                </div>
+                <div className="detialItemWrapper">
+                    <div className="titleWrapper">
+                        <span className="itemTitle">合并计税详情</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"
+                        />
+                    </div>
+                    <div className="tableWrapper">
+                        <Table dataSource={dataSource} columns={mergeDetailColumns}/>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/index.less b/pc4mobx/hrmSalary/pages/calculateDetail/index.less
index d82cb571..a5522fc5 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/index.less
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/index.less
@@ -76,4 +76,45 @@
     .itemRow {
         line-height: 40px;
     }
+}
+
+.placeOnFileDetail {
+    padding: 20px;
+    .tabWrapper {
+        height: 47px;
+        line-height: 47px;
+    }
+    .tableWrapper {
+        margin-top: 10px;
+    }
+}
+
+.fileMergeDetail {
+    padding: 20px;
+    .detialItemWrapper {
+        .titleWrapper {
+            height: 47px;
+            line-height: 47px;
+            .itemTitle {
+                font-size: 14px;
+            }
+        }
+        .rightItemWrapper {
+            display: inline-block;
+            float: right;
+        }
+    }
+
+    .itemContent {
+        margin-top: 10px;
+        .itemRow {
+            line-height: 40px;
+        }
+    }
+
+    .tableWrapper {
+        margin-top: 10px;
+    }
+    
+
 }
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/calculateDetail/placeOnFileDetail.js b/pc4mobx/hrmSalary/pages/calculateDetail/placeOnFileDetail.js
index da5b3e46..78bf6ece 100644
--- a/pc4mobx/hrmSalary/pages/calculateDetail/placeOnFileDetail.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/placeOnFileDetail.js
@@ -1,11 +1,32 @@
 import React from 'react'
 import CustomTab from '../../components/customTab'
 import { Dropdown, Menu, Button, Table } from 'antd'
-import { WeaHelpfulTip, WeaInputSearch } from 'ecCom'
+import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal } from 'ecCom'
 
 import { placeOnFileColumns, dataSource } from './columns'
+import SlideModalTitle from "../../components/slideModalTitle"
+import FileMergeDetail from './fileMergeDetail'
 
 export default class PlaceOnFileDetail extends React.Component {
+    constructor(props)  {
+        super(props);
+        placeOnFileColumns.map(item => {
+            if(item.dataIndex == "username") {
+                item.render = (text, record) => (
+                    <a onClick={() => {this.onDetail()}}>{text}</a>
+                )
+            }
+        })
+        this.state = {
+            slideVisiable: false,
+        }
+        
+    }
+
+    onDetail() {
+        this.setState({slideVisiable: true})
+    }
+
     render() {
         const menu = (
             <Menu>
@@ -22,16 +43,18 @@ export default class PlaceOnFileDetail extends React.Component {
                 </div>
             )
         }
+
+        const { slideVisiable } = this.state
         
         return (
             
-            <div>
+            <div className="placeOnFileDetail">
                 <CustomTab 
                     searchOperationItem={
                         renderRightOperation()
                     }
                 />
-                <div>
+                <div className="tabWrapper">
                     <span>薪资所属月：2021-11</span>
                     <WeaHelpfulTip
                         style={{marginLeft: "10px"}}
@@ -47,9 +70,28 @@ export default class PlaceOnFileDetail extends React.Component {
                         placement="topLeft"
                     />
                 </div>
-                <div>
+                <div className="tableWrapper">
                     <Table columns={placeOnFileColumns} dataSource={dataSource} />
                 </div>
+
+                {
+                    slideVisiable && <WeaSlideModal visible={slideVisiable}
+                    top={0}
+                    width={40}
+                    height={100}
+                    direction={'right'}
+                    measure={'%'}
+                    title={
+                        <SlideModalTitle 
+                        subtitle={"合并计税详情"}
+                        editable={true}
+                        />
+                    }
+                    content={(<FileMergeDetail />)}
+                    onClose={() => this.setState({slideVisiable: false})}
+                    showMask={true}
+                    closeMaskOnClick={() => this.setState({slideVisiable: false})} />
+                }
             </div>
         )
     }