From 96b2181510bc599d514a93f02b07296d82c77db1 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Thu, 17 Mar 2022 18:40:47 +0800
Subject: [PATCH] slideSalaryItem

---
 pc4mobx/hrmSalary/pages/salaryFile/columns.js | 58 ++++++++++++++++
 pc4mobx/hrmSalary/pages/salaryFile/index.js   | 66 +++++++++++++++++--
 pc4mobx/hrmSalary/pages/salaryFile/index.less | 12 ++++
 .../pages/salaryFile/slideSalaryItem.js       | 20 ++++++
 4 files changed, 152 insertions(+), 4 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/salaryFile/slideSalaryItem.js

diff --git a/pc4mobx/hrmSalary/pages/salaryFile/columns.js b/pc4mobx/hrmSalary/pages/salaryFile/columns.js
index 9ffc948c..f6d7d186 100644
--- a/pc4mobx/hrmSalary/pages/salaryFile/columns.js
+++ b/pc4mobx/hrmSalary/pages/salaryFile/columns.js
@@ -54,6 +54,64 @@ export const changeSalaryModalColumns = [
     }
 ]
 
+export const slideSalaryItemColumns = [
+    {
+        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: "调整原因",
+        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 dataSource = [
     {
diff --git a/pc4mobx/hrmSalary/pages/salaryFile/index.js b/pc4mobx/hrmSalary/pages/salaryFile/index.js
index 4057d694..9ea57a31 100644
--- a/pc4mobx/hrmSalary/pages/salaryFile/index.js
+++ b/pc4mobx/hrmSalary/pages/salaryFile/index.js
@@ -4,7 +4,7 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker, Dropdown, Menu } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaSlideModal } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
@@ -14,6 +14,9 @@ import { columns, dataSource } from './columns';
 
 import ChangeSalaryModal from "./changeSalaryModal"
 import EditAgentModal from './editAgentModal';
+import SlideModalTitle from '../../components/slideModalTitle'
+import SlideSalaryItem from './slideSalaryItem'
+
 
 const { MonthPicker } = DatePicker;
 
@@ -26,13 +29,15 @@ export default class SalaryFile extends React.Component {
       value: "",
       selectedKey: "0",
       changeSalaryVisible: false,
-      editAgentVisible: false
+      editAgentVisible: false,
+      selectedTab: 0,
+      editSlideVisible: false
     }
   }
   render() {
     const { baseTableStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
-
+    const { selectedTab } = this.state;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -111,12 +116,31 @@ export default class SalaryFile extends React.Component {
             <div style={{display: "inline-block"}}>
                 <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导入</Dropdown.Button>
                 <Dropdown.Button style={{marginRight: "10px"}} overlay={menu2}>导出</Dropdown.Button>
-                <Button type="default" style={{marginRight: "10px"}}>调薪记录</Button>
+                <Button type="default" style={{marginRight: "10px"}} onClick={() => {this.setState({editSlideVisible: true})}}>调薪记录</Button>
                 <WeaInputSearch />
             </div>
         )
     }
 
+    const handleSlideMoreMenuClick = () => {
+
+    }
+
+    const slideMoreMenu = (
+      <Menu onClick={handleSlideMoreMenuClick}>
+        <Menu.Item key="1">导出全部</Menu.Item>
+      </Menu>
+    );
+    
+    const renderCustomOperate = () => {
+      return (
+        <div style={{display: "inline-block"}}>
+          <Dropdown.Button type="primary" overlay={slideMoreMenu}>导出</Dropdown.Button>
+          <Button type="default">自定义列</Button>
+        </div>
+      )
+    }
+
     return (
       <div className="mySalaryBenefitsWrapper">
         <WeaRightMenu
@@ -153,6 +177,40 @@ export default class SalaryFile extends React.Component {
             onCancel={() => {this.setState({editAgentVisible: false})}}
           />
         }
+
+        {
+            this.state.editSlideVisible && 
+            <WeaSlideModal visible={this.state.editSlideVisible}
+              top={0}
+              width={40}
+              height={100}
+              direction={'right'}
+              measure={'%'}
+              title={
+                <SlideModalTitle 
+                  subtitle={"操作记录"}
+                  tabs={[{title: '薪资项目', key: 0}, {title: "个税扣缴义务人", key: 1}]}
+                  editable={true}
+                  selectedTab={selectedTab}
+                  customOperate={() => {renderCustomOperate()}}
+                  subItemChange={
+                    (item) => {this.setState({selectedTab: item.key})}
+                  }
+                />
+              }
+              content={<div>
+                {
+                  selectedTab == 0 && <SlideSalaryItem />
+                }
+                {
+                  selectedTab == 1 && <div></div>
+                }
+              </div>}
+              onClose={() => this.setState({editSlideVisible: false})}
+              showMask={true}
+              closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
+   
+        }
         
       </div>
     )
diff --git a/pc4mobx/hrmSalary/pages/salaryFile/index.less b/pc4mobx/hrmSalary/pages/salaryFile/index.less
index 7e71ca75..ec546c41 100644
--- a/pc4mobx/hrmSalary/pages/salaryFile/index.less
+++ b/pc4mobx/hrmSalary/pages/salaryFile/index.less
@@ -17,4 +17,16 @@
             margin-top: 10px;
         }
     }
+}
+
+.slideSalaryItem {
+    padding: 10px 20px;
+    .searchBar {
+        height: 40px;
+        line-height: 40px;
+        text-align: right;
+    }
+    .tableWrapper {
+        margin-top: 10px;
+    }
 }
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/salaryFile/slideSalaryItem.js b/pc4mobx/hrmSalary/pages/salaryFile/slideSalaryItem.js
new file mode 100644
index 00000000..64351fe4
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/salaryFile/slideSalaryItem.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { dataSource, slideSalaryItemColumns } from "./columns"
+import { WeaInputSearch } from 'ecCom'
+import { Table } from 'antd'
+import "./index.less"
+
+export default class SlideSalaryItem extends React.Component {
+    render() {
+        return (
+            <div className="slideSalaryItem">
+                <div className="searchBar">
+                    <WeaInputSearch className="inputSearch"/>
+                </div>
+                <div className="tableWrapper">
+                    <Table dataSource={dataSource} columns={slideSalaryItemColumns}/>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file