From 619bbe96c199ad81cacad35e02b3e6c66aeef080 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Thu, 17 Mar 2022 20:08:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E6=94=BE=E5=B7=A5=E8=B5=84=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/index.js                    |  3 +
 pc4mobx/hrmSalary/pages/payroll/columns.js    | 93 +++++++++++++++++--
 pc4mobx/hrmSalary/pages/payroll/index.js      | 73 +++++++++++++--
 .../pages/payroll/payrollGrant/index.js       | 70 ++++++++++++++
 .../pages/payroll/payrollGrant/index.less     | 13 +++
 5 files changed, 235 insertions(+), 17 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
 create mode 100644 pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less

diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index c30c4f60..6d37cde4 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -14,6 +14,7 @@ import Attendance from './pages/dataAcquisition/attendance';
 import Ledger from './pages/ledger';
 import Calculate from './pages/calculate';
 import Payroll from './pages/payroll';
+import PayrollGrant from './pages/payroll/payrollGrant';
 import Declare from './pages/declare';
 import TaxRate from './pages/taxRate';
 import TaxAgent from './pages/taxAgent';
@@ -87,6 +88,8 @@ const Routes = (
     <Route key='compareDetail' path='compareDetail' component={CompareDetail} />    
     
     <Route key='payroll' path='payroll' component={Payroll} />
+    <Route key='payrollGrant' path='payrollGrant' component={PayrollGrant} />
+
     <Route key='declare' path='declare' component={Declare} />
     <Route key='taxRate' path='taxRate' component={TaxRate} />
     <Route key='taxAgent' path='taxAgent' component={TaxAgent} />
diff --git a/pc4mobx/hrmSalary/pages/payroll/columns.js b/pc4mobx/hrmSalary/pages/payroll/columns.js
index cb9722d4..74c361b1 100644
--- a/pc4mobx/hrmSalary/pages/payroll/columns.js
+++ b/pc4mobx/hrmSalary/pages/payroll/columns.js
@@ -1,43 +1,118 @@
 export const columns = [
     {
-        title: "姓名",
+        title: "薪资所属月",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "个税扣缴义务人",
+        title: "薪资账套",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "部门",
+        title: "工资单模板",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "手机号",
+        title: "已发放",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "员工状态",
+        title: "未确认",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "基本工资",
+        title: "最后发放时间",
         dataIndex: 'title',
         key: 'title',
     },
     {
         title: "操作",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'cz',
+        key: 'cz'
+    }
+]
+
+export const tempateColumns = [
+    {
+        title: "工资单模板名称",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "所属薪资账套",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "默认使用",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "备注",
+        dataIndex: "title",
+        key: "title"
+    },
+    {
+        title: "操作",
+        dataIndex: "cz",
+        key: "cz"
+    },
+]
+
+export const payrollColumns = [
+    {
+        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: "cz",
+        key: "cz"
     }
 ]
 
 
-export const dataSource = [];
+export const dataSource = [
+    {
+        title: "测试"
+    }
+];
 
 
 
diff --git a/pc4mobx/hrmSalary/pages/payroll/index.js b/pc4mobx/hrmSalary/pages/payroll/index.js
index 9f13e7d4..0d49e351 100644
--- a/pc4mobx/hrmSalary/pages/payroll/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/index.js
@@ -3,14 +3,15 @@ import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker } from 'antd';
+import moment from 'moment'
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable,WeaDatePicker, WeaHelpfulTip } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
 import ContentWrapper from '../../components/contentWrapper';
 
-import { columns, dataSource } from './columns';
+import { columns, dataSource, tempateColumns } from './columns';
 
 const { MonthPicker } = DatePicker;
 
@@ -21,8 +22,24 @@ export default class Payroll extends React.Component {
     super(props);
     this.state = {
       value: "",
+      selectedKey: "0",
+      startDate: moment(new Date()).format("YYYY-MM"),
+      endDate: moment(new Date()).format("YYYY-MM"),
       selectedKey: "0"
     }
+    columns.map(item => {
+      if(item.dataIndex == "cz") {
+        item.render = () => {
+          return (
+            <div>
+              <a onClick={() => {window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant")}}>工资单发放</a>
+              <a style={{marginLeft: "10px"}}>查看详情</a>
+              <a style={{marginLeft: "10px"}}>更新模板</a>
+            </div>
+          )
+        }
+      }
+    })
   }
   render() {
     const { baseTableStore } = this.props;
@@ -53,12 +70,36 @@ export default class Payroll extends React.Component {
       <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
     ];
 
-    const topTab = [
-      ];
+    const topTab =  [{
+      title: "工资单发放",
+      viewcondition: "0"
+    },
+    {
+        title: "工资单模板设置",
+        viewcondition: "1"
+    }];
 
-    const renderSearchOperationItem = () => {
-      return <div></div>
-     
+    const renderRightOperation = () => {
+      return <div style={{display: "inline-block"}}>
+        <WeaHelpfulTip
+          width={200}
+          title="提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板"
+          placement="topLeft"
+        />
+        <div style={{display: "inline-block", marginLeft: "10px"}}>
+          <WeaDatePicker
+              format="yyyy-MM"
+              value={this.state.startDate}
+              onChange={value => this.props.onStartDateChange(value)}
+          />
+          <span className="between"> 至 </span>
+          <WeaDatePicker
+              format="yyyy-MM"
+              value={this.state.endDate}
+              onChange={value => this.props.onEndDateChange(value)}
+          />
+        </div>
+      </div>
     }
 
     return (
@@ -75,7 +116,23 @@ export default class Payroll extends React.Component {
             dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
-            <WeaTable columns={columns} dataSource={dataSource}/>
+              <CustomTab 
+                topTab={topTab}
+                searchOperationItem={
+                  renderRightOperation()
+                }
+                onChange={(v) => {
+                  this.setState({selectedKey: v})
+                }}
+              />
+              {
+                this.state.selectedKey == 0 && <WeaTable columns={columns} dataSource={dataSource}/>
+              }
+
+              {
+                this.state.selectedKey == 1 && <WeaTable columns={tempateColumns} dataSource={dataSource}/>
+              }
+            
           </WeaTop>
         </WeaRightMenu>
       </div>
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
new file mode 100644
index 00000000..3ecbb728
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
@@ -0,0 +1,70 @@
+import React from 'react'
+import { WeaInputSearch, WeaHelpfulTip } from 'ecCom'
+import { dataSource, payrollColumns } from '../columns';
+import { Menu, Button, Dropdown, Table } from 'antd'
+import CustomTab from '../../../components/customTab'
+import "./index.less"
+
+export default class PayrollGrant extends React.Component {
+    render() {
+        const menu = (
+            <Menu>
+              <Menu.Item key="1" onClick={() => {}}>批量发放</Menu.Item>
+              <Menu.Item key="2">批量撤回</Menu.Item>
+              <Menu.Item key="3">全部导出</Menu.Item>
+              <Menu.Item key="3">导出选中</Menu.Item>
+              <Menu.Item key="3">自定义列</Menu.Item>
+            </Menu>
+          );
+        const renderRightOperation = () => {
+            return (
+                <div style={{display: "inline-block"}}>
+                    <Button type="primary" style={{marginRight: "10px"}}>全部发放</Button>
+                    <Button type="default" style={{marginRight: "10px"}}>全部撤回</Button>
+                    <Dropdown.Button style={{marginRight: "10px"}} overlay={menu}>更多</Dropdown.Button>
+                    <WeaInputSearch />
+                </div>
+            )
+        }
+        return (
+            <div className="payrollGrant">
+                <CustomTab
+                    searchOperationItem={
+                        renderRightOperation()
+                    }
+                    onChange={(v) => {
+                        this.setState({selectedKey: v})
+                    }}
+                />
+                <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 className="tableWrapper">
+                    <Table dataSource={dataSource} columns={payrollColumns}/>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less
new file mode 100644
index 00000000..fc750e58
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less
@@ -0,0 +1,13 @@
+.payrollGrant {
+    padding: 20px;
+    .titleBar {
+        height: 47px;
+        line-height: 47px;
+        .titleBarLeft {
+            float: left;
+        }
+        .titleBarRight {
+            float: right;
+        }
+    }
+}
\ No newline at end of file