发放工资单列表

2022-03-17 20:08:59 +08:00 · 2022-03-17 20:08:59 +08:00 · 619bbe96c1
parent 320e693605
commit 619bbe96c1
5 changed files with 235 additions and 17 deletions
--- 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} />
--- 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: "测试"
+    }
+];



--- 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>
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
+++ 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>
+        )
+    }
+}
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.less
+++ 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;
+        }
+    }
+}