qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

个税申报白鸥

This commit is contained in:
MustangDeng 2022-03-18 10:38:43 +08:00
parent 9ea15a3218
commit 34b9dd6cda
6 changed files with 381 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pc4mobx/hrmSalary/index.js
View File

@ -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>

244
pc4mobx/hrmSalary/pages/declare/columns.js
View File

@ -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: "测试"
}
];

41
pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js Normal file
View File

@ -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>
)
}
}

46
pc4mobx/hrmSalary/pages/declare/generateModal.js Normal file
View File

@ -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>
)
}
}

48
pc4mobx/hrmSalary/pages/declare/index.js
View File

@ -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>
)
}

3
pc4mobx/hrmSalary/pages/declare/index.less Normal file
View File

@ -0,0 +1,3 @@
.generateDeclarationDetail {
padding: 20px;
}