From 34b9dd6cda75fb24b258338610b9dd86eac6436a Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Fri, 18 Mar 2022 10:38:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E7=A8=8E=E7=94=B3=E6=8A=A5=E7=99=BD?=
 =?UTF-8?q?=E9=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/index.js                    |   5 +-
 pc4mobx/hrmSalary/pages/declare/columns.js    | 244 +++++++++++++++++-
 .../declare/generateDeclarationDetail.js      |  41 +++
 .../hrmSalary/pages/declare/generateModal.js  |  46 ++++
 pc4mobx/hrmSalary/pages/declare/index.js      |  48 +++-
 pc4mobx/hrmSalary/pages/declare/index.less    |   3 +
 6 files changed, 381 insertions(+), 6 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js
 create mode 100644 pc4mobx/hrmSalary/pages/declare/generateModal.js
 create mode 100644 pc4mobx/hrmSalary/pages/declare/index.less

diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index 6d37cde4..a3e6b54d 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -21,7 +21,7 @@ import TaxAgent from './pages/taxAgent';
 import CalculateDetail from './pages/calculateDetail'
 import PlaceOnFileDetail from './pages/calculateDetail/placeOnFileDetail';
 import CompareDetail from './pages/calculateDetail/compareDetail'
-
+import GenerateDeclarationDetail from './pages/declare/generateDeclarationDetail'
 import BaseForm from './components';
 
 import stores from './stores';
@@ -60,6 +60,7 @@ const DataAcquisition = props => props.children;
   // compareDetail 线下线上对比
 // payroll 	工资单发放
 // declare 	个税申请表
+// generateDeclarationDetail 个税单详情
 // taxRate		个税税率表
 // taxAgent	个税扣缴义务人
 
@@ -91,6 +92,8 @@ const Routes = (
     <Route key='payrollGrant' path='payrollGrant' component={PayrollGrant} />
 
     <Route key='declare' path='declare' component={Declare} />
+    <Route key='generateDeclarationDetail' path='generateDeclarationDetail' component={GenerateDeclarationDetail} />
+    
     <Route key='taxRate' path='taxRate' component={TaxRate} />
     <Route key='taxAgent' path='taxAgent' component={TaxAgent} />
   </Route>
diff --git a/pc4mobx/hrmSalary/pages/declare/columns.js b/pc4mobx/hrmSalary/pages/declare/columns.js
index cb9722d4..2c21cb16 100644
--- a/pc4mobx/hrmSalary/pages/declare/columns.js
+++ b/pc4mobx/hrmSalary/pages/declare/columns.js
@@ -31,13 +31,255 @@ export const columns = [
     },
     {
         title: "操作",
+        dataIndex: 'cz',
+        key: 'cz',
+    }
+]
+
+export const declarationColumns = [
+    {
+        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: "本月（次）情况",
+        children: [
+            {
+                title: "收入额计算",
+                children: [
+                    {
+                        title: "收入",
+                        dataIndex: 'title',
+                        key: 'title',
+                    },
+                    {
+                        title: "费用",
+                        dataIndex: 'title',
+                        key: 'title',
+                    },
+                    {
+                        title: "免税收入",
+                        dataIndex: 'title',
+                        key: 'title',
+                    },
+                ]
+            },
+            {
+                title: '减除费用',
+                dataIndex: 'title',
+                key: 'title'
+            },
+            {
+                title: "专项扣除",
+                children: [
+                    {
+                        title: "基本养老保险费",
+                        dataIndex: 'title',
+                        key: 'title'
+                    },
+                    {
+                        title: "基本医疗保险费",
+                        dataIndex: 'title',
+                        key: 'title'
+                    },
+                    {
+                        title: "失业保险费",
+                        dataIndex: 'title',
+                        key: 'title'
+                    },
+                    {
+                        title: "住房公积金",
+                        dataIndex: 'title',
+                        key: 'title'
+                    }
+                ]
+            },
+            {
+                title: "其他扣除",
+                children: [
+                    {
+                        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: "累计情况（工资、薪金）",
+                children: [
+                    {
+                        title: "累计收入额",
+                        dataIndex: "title",
+                        key: "title"
+                    },
+                    {
+                        title: "累计减除费用",
+                        dataIndex: "title",
+                        key: "title"
+                    },
+                    {
+                        title: "累计专项扣除",
+                        dataIndex: "title",
+                        key: "title"
+                    },
+                    {
+                        title: "累计专项附加扣除",
+                        children: [
+                            {
+                                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: '税款计算',
+        children: [
+            {
+                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 = [];
+export const dataSource = [
+    {
+        title: "测试"
+    }
+];
 
 
 
diff --git a/pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js b/pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js
new file mode 100644
index 00000000..be95aa98
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import CustomTab from '../../components/customTab'
+import { Button, Table } from "antd"
+import { declarationColumns, dataSource} from './columns'
+import "./index.less"
+
+export default class GenerateDeclarationDetail extends React.Component {
+    render() {
+        const renderRightOperation = () => {
+            return (
+                <div style={{display: "inline-block"}}>
+                    <Button type="primary">导出</Button>
+                </div>
+            )
+        }
+
+        const renderLeftOperation = () => {
+            return (
+                <div style={{display: "inline-block", lineHeight: '47px'}}>
+                    <span>薪资所属月：2021-11</span>
+                    <span style={{marginLeft: "10px"}}>个税扣缴义务人：上海泛微</span>
+                </div>
+            )
+        }
+        return (
+            <div className="generateDeclarationDetail">
+                <CustomTab
+                    searchOperationItem={
+                        renderRightOperation()
+                    }
+                    leftOperation={
+                        renderLeftOperation()
+                    }
+                />
+                <div>
+                    <Table dataSource={dataSource} columns={declarationColumns}/>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/declare/generateModal.js b/pc4mobx/hrmSalary/pages/declare/generateModal.js
new file mode 100644
index 00000000..9cd94b3c
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/declare/generateModal.js
@@ -0,0 +1,46 @@
+import React from 'react'
+import { WeaHelpfulTip, WeaDatePicker, WeaInput } from 'ecCom';
+import { Modal, Row, Col } from 'antd'
+
+
+export default class GenerateModal extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            date: ""
+        }
+    }
+    render() {
+        return (
+            <Modal visible={this.props.visible} onCancel={() => this.props.onCancel()} width={800}>
+                <div style={{height: "47px", lineHeight: "47px", borderBottom: "1px solid #eee"}}>
+                    <span style={{fontSize: "14px", marginLeft: "20px"}}>申报</span>
+                    <WeaHelpfulTip
+                        style={{float: "right", marginRight: "40px"}}   
+                        width={200}
+                        title="提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报"
+                        placement="topLeft"
+                    />
+                </div>
+                <div style={{marginTop: '10px'}}>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8} >薪资所属月</Col>
+                        <Col span={16}>
+                            <WeaDatePicker
+                                format="yyyy-MM"
+                                value={this.state.date}
+                                onChange={value => this.setState({date: value})}
+                            />
+                            </Col>
+                    </Row>
+                    <Row style={{lineHeight: "40px"}}>
+                        <Col span={8} >备注</Col>
+                        <Col span={16}>
+                            <WeaInput style={{width: "200px"}} />
+                        </Col>
+                    </Row>
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/declare/index.js b/pc4mobx/hrmSalary/pages/declare/index.js
index e853e91a..40b4293b 100644
--- a/pc4mobx/hrmSalary/pages/declare/index.js
+++ b/pc4mobx/hrmSalary/pages/declare/index.js
@@ -4,13 +4,14 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker } 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 GenerateModal from './generateModal'
 
 const { MonthPicker } = DatePicker;
 
@@ -21,8 +22,18 @@ export default class Declare extends React.Component {
     super(props);
     this.state = {
       value: "",
-      selectedKey: "0"
+      selectedKey: "0",
+      declarationModalVisible: false
     }
+    columns.map(item => {
+      if(item.dataIndex == "cz") {
+        item.render =() => {
+          return (
+            <a onClick={() => {window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail")}}>查看</a>
+          )
+        }
+      }
+    })
   }
   render() {
     const { baseTableStore } = this.props;
@@ -56,11 +67,29 @@ export default class Declare extends React.Component {
     const topTab = [
       ];
 
-    const renderSearchOperationItem = () => {
-      return <div></div>
+    const renderRightOperation = () => {
+      return <div style={{display: "inline-block"}}>
+        <WeaDatePicker
+            format="yyyy-MM"
+            value={this.state.startDate}
+            onChange={value => this.setState({startDate: value})}
+        />
+        <span className="between"> 至 </span>
+        <WeaDatePicker
+            format="yyyy-MM"
+            value={this.state.endDate}
+            onChange={value => this.setState({endDate: value})}
+        />
+
+        <Button type="primary" style={{marginLeft: "10px"}} onClick={() => {
+          this.setState({declarationModalVisible: true})
+        }}>生成申报单</Button>
+      </div>
      
     }
 
+
+
     return (
       <div className="mySalaryBenefitsWrapper">
         <WeaRightMenu
@@ -75,9 +104,20 @@ export default class Declare extends React.Component {
             dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
+          <CustomTab
+                searchOperationItem={
+                    renderRightOperation()
+                }
+            />
             <WeaTable columns={columns} dataSource={dataSource}/>
           </WeaTop>
         </WeaRightMenu>
+        {
+          this.state.declarationModalVisible && <GenerateModal 
+          visible={this.state.declarationModalVisible}
+          onCancel={() => {this.setState({declarationModalVisible: false})}}
+          />
+        }
       </div>
     )
   }
diff --git a/pc4mobx/hrmSalary/pages/declare/index.less b/pc4mobx/hrmSalary/pages/declare/index.less
new file mode 100644
index 00000000..cc1c9e01
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/declare/index.less
@@ -0,0 +1,3 @@
+.generateDeclarationDetail {
+    padding: 20px;
+}
\ No newline at end of file