salary-management-front/pc4mobx/hrmSalary/pages/declare/generateDeclarationDetail.js

75 lines
2.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react'
import CustomTab from '../../components/customTab'
import { Button, Table } from "antd"
import { WeaTable } from 'ecCom'
import { declarationColumns, dataSource} from './columns'
import "./index.less"
import { inject, observer } from 'mobx-react';
import { getQueryString } from '../../util/url'
@inject('declareStore')
@observer
export default class GenerateDeclarationDetail extends React.Component {
constructor(props) {
super(props)
this.id = getQueryString("id")
}
componentWillMount() {
const { declareStore: { getDetailList, getDeclareInfo }} = this.props;
getDetailList(this.id)
getDeclareInfo(this.id)
}
// 导出
handleExport() {
const { declareStore: {exportSalaryArchive}} = this.props;
exportSalaryArchive(this.id)
}
getColumns() {
const { declareStore: {datailColumns}} = this.props;
let columns = [...datailColumns]
return columns.map(item => {
item = {...item}
item.width = "150px"
return item;
})
}
render() {
const { declareStore: { detailDataSource, detailTableStore, declareInfo, datailColumns }} = this.props;
const renderRightOperation = () => {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" onClick={() => {this.handleExport()}}>导出</Button>
</div>
)
}
const renderLeftOperation = () => {
return (
<div style={{display: "inline-block", lineHeight: '47px'}}>
<span>薪资所属月{declareInfo.salaryMonth && declareInfo.salaryMonth.year} - {declareInfo.salaryMonth && declareInfo.salaryMonth.monthValue}</span>
<span style={{marginLeft: "10px"}}>个税扣缴义务人{declareInfo.taxAgentName}</span>
</div>
)
}
return (
<div className="generateDeclarationDetail">
<CustomTab
searchOperationItem={
renderRightOperation()
}
leftOperation={
renderLeftOperation()
}
/>
<div>
<WeaTable dataSource={detailDataSource} columns={this.getColumns()} scroll={{x: 2300}}/>
</div>
</div>
)
}
}