350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
import React from 'react';
|
||
import { inject, observer } from 'mobx-react';
|
||
import { toJS } from 'mobx';
|
||
|
||
import { Button, Table, DatePicker, Dropdown, Menu, Modal, message, Row, Col } from 'antd';
|
||
|
||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaDatePicker, WeaSelect, WeaHelpfulTip, WeaSlideModal } from 'ecCom';
|
||
import { WeaTableNew } from "comsMobx"
|
||
import moment from 'moment';
|
||
|
||
const WeaTable = WeaTableNew.WeaTable;
|
||
|
||
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from '../../../components/customTab';
|
||
import ContentWrapper from '../../../components/contentWrapper';
|
||
import ImportModal from '../../../components/importModal'
|
||
import { columns, dataSource, modalColumns } from './columns';
|
||
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
import "./index.less"
|
||
|
||
import SlideModalTitle from '../../../components/slideModalTitle';
|
||
import EditSlideContent from './editSlideContent';
|
||
|
||
|
||
@inject('otherDeductStore', "taxAgentStore")
|
||
@observer
|
||
export default class OtherDeduct extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: "0",
|
||
visiable: false,
|
||
monthValue: moment(new Date()).format("YYYY-MM"),
|
||
taxAgentId: "",
|
||
inited: false,
|
||
modalParam: {
|
||
declareMonth: "",
|
||
}
|
||
}
|
||
}
|
||
|
||
componentWillMount() { // 初始化渲染页面
|
||
const { otherDeductStore: { doInit }, taxAgentStore: { fetchTaxAgentOption } } = this.props;
|
||
doInit();
|
||
fetchTaxAgentOption().then(() => {
|
||
this.setState({
|
||
inited: true
|
||
})
|
||
})
|
||
}
|
||
|
||
getSearchsAdQuick() {
|
||
const { monthValue, taxAgentId } = this.state;
|
||
const { taxAgentStore: { taxAgentOption }, otherDeductStore: {form, getTableDatas} } = this.props;
|
||
return (
|
||
<div className="searchConditionWrapper">
|
||
<div className="searchConditionItem">
|
||
<span className="conditionFormLabel">申报月份:</span>
|
||
<WeaDatePicker
|
||
value={monthValue}
|
||
format="YYYY-MM"
|
||
width={200}
|
||
onChange={v => {
|
||
this.setState({monthValue: v})
|
||
getTableDatas({ declareMonth: [v], taxAgentId })
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="helperWrapper">
|
||
<WeaHelpfulTip
|
||
title="<div>提示：默认显示本年截至当前月所有员工申报的累计专项附加及其他扣除额</div>"
|
||
placement="bottom"
|
||
width={200}
|
||
/>
|
||
</div>
|
||
|
||
<div className="searchConditionItem">
|
||
<span className="conditionFormLabel">个税扣缴义务人:</span>
|
||
{
|
||
this.state.inited && <WeaSelect
|
||
showSearch // 设置select可搜索
|
||
style={{ width: 200 }}
|
||
options={taxAgentOption}
|
||
value={taxAgentId}
|
||
onChange={v => {
|
||
this.setState({taxAgentId: v})
|
||
getTableDatas({ taxAgentId: v, declareMonth: [monthValue]})
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
onEdit = (record) => {
|
||
const { otherDeductStore: { slideVisiable, setSlideVisiable, getOtherDeductDetailList, setCurrentRecord } } = this.props;
|
||
setSlideVisiable(true)
|
||
setCurrentRecord(record)
|
||
getOtherDeductDetailList(record.id);
|
||
}
|
||
|
||
// 增加编辑功能，重写columns绑定事件
|
||
getColumns = (columns) => {
|
||
let newColumns = '';
|
||
newColumns = columns.map(column => {
|
||
let newColumn = column;
|
||
newColumn.render = (text, record, index) => { //前端元素转义
|
||
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
|
||
switch(newColumn.dataIndex) {
|
||
case "username":
|
||
return <a onClick={() => {this.onEdit(record)}}
|
||
dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||
case "operate":
|
||
return <a onClick={() => {this.onEdit(record)}}>查看明细</a>
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
|
||
}
|
||
}
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
}
|
||
|
||
handleCancel() {
|
||
const { otherDeductStore } = this.props;
|
||
const { modalVisiable, setModalVisiable, setStep } = otherDeductStore
|
||
setModalVisiable(false);
|
||
setStep(0);
|
||
}
|
||
|
||
|
||
onOperatesClick = (record, index, operate, flag) => {
|
||
switch(operate.index.toString()){
|
||
case '0': // 查看明细
|
||
this.onEdit(record);
|
||
break;
|
||
}
|
||
};
|
||
|
||
renderFormComponent() {
|
||
const { modalParam } = this.state
|
||
const { taxAgentStore: {taxAgentOption} } = this.props;
|
||
return (
|
||
<Row>
|
||
<Col span={12}>
|
||
<span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>税款所属期</span>
|
||
<WeaDatePicker
|
||
format="yyyy-MM"
|
||
value={modalParam.declareMonth}
|
||
onChange={value => this.setState({ modalParam: {declareMonth: value} })}
|
||
/>
|
||
</Col>
|
||
|
||
</Row>
|
||
)
|
||
}
|
||
|
||
showColumn = () => {
|
||
const { otherDeductStore: { tableStore } } = this.props;
|
||
tableStore.setColSetVisible(true);
|
||
tableStore.tableColSet(true);
|
||
}
|
||
|
||
render() {
|
||
const { otherDeductStore, taxAgentStore } = this.props;
|
||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd, previewImport, importFile } = otherDeductStore;
|
||
const { taxAgentOption } = taxAgentStore
|
||
const { slideVisiable, setSlideVisiable, modalVisiable, setModalVisiable, slideTableStore, step, setStep, slideDataSource, importResult } = otherDeductStore
|
||
const selectedRowKeys = toJS(tableStore.selectedRowKeys) || [];
|
||
const { modalParam } = this.state;
|
||
|
||
const detailSelectedRowKeys = toJS(slideTableStore.selectedRowKeys) || [];
|
||
if (!hasRight && !loading) { // 无权限处理
|
||
return renderNoright();
|
||
}
|
||
|
||
const rightMenu = [// 右键菜单
|
||
{
|
||
key: 'BTN_COLUMN',
|
||
icon: <i className='icon-coms-Custom' />,
|
||
content: '显示列定制',
|
||
onClick: this.showColumn
|
||
},
|
||
];
|
||
const collectParams = { // 收藏功能配置
|
||
favname: '其他免税扣除',
|
||
favouritetype: 1,
|
||
objid: 0,
|
||
link: 'wui/index.html#/ns_demo03/index',
|
||
importantlevel: 1,
|
||
};
|
||
const adBtn = [ // 高级搜索内部按钮
|
||
<Button type="primary" onClick={doSearch}>搜索</Button>,
|
||
<Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
|
||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
|
||
];
|
||
|
||
const topTab = [
|
||
];
|
||
|
||
const renderSearchOperationItem = () => {
|
||
return <div></div>
|
||
}
|
||
|
||
const handleButtonClick = () => {
|
||
const { otherDeductStore: {exportOtherDeductList}} = this.props;
|
||
exportOtherDeductList();
|
||
}
|
||
|
||
const handleMenuClick = () => {
|
||
if(selectedRowKeys.length == 0) {
|
||
message.warning("未选择条目")
|
||
return
|
||
}
|
||
const { otherDeductStore: { exportOtherDeductList } } = this.props;
|
||
exportOtherDeductList(selectedRowKeys.join(","))
|
||
}
|
||
|
||
const handleBtnImport = () => {
|
||
const { otherDeductStore: { setModalVisiable, setStep } } = this.props;
|
||
setStep(0);
|
||
setModalVisiable(true)
|
||
}
|
||
|
||
|
||
|
||
const btns = [
|
||
<Button type="primary" onClick={() => { handleBtnImport() }}>导入</Button>,
|
||
<Dropdown.Button onClick={handleButtonClick} overlay={
|
||
<Menu onClick={handleMenuClick}>
|
||
<Menu.Item key="1">导出选中</Menu.Item>
|
||
</Menu>
|
||
} type="ghost">
|
||
导出全部
|
||
</Dropdown.Button>
|
||
]
|
||
|
||
const handleExportAllDetailClick = () => {
|
||
const {otherDeductStore: {exportOtherDeductDetailList, currentRecord} } =this.props;
|
||
exportOtherDeductDetailList(currentRecord.id);
|
||
}
|
||
|
||
const handleExportSelectedDetailClick = () => {
|
||
if(detailSelectedRowKeys.length == 0) {
|
||
message.warning("未选择条目")
|
||
return
|
||
}
|
||
const { otherDeductStore: { exportOtherDeductDetailList, currentRecord } } = this.props;
|
||
exportOtherDeductDetailList(currentRecord.id, detailSelectedRowKeys.join(","))
|
||
}
|
||
|
||
const renderBtns = () => {
|
||
return (
|
||
<Dropdown.Button onClick={handleExportAllDetailClick} overlay={
|
||
<Menu onClick={handleExportSelectedDetailClick}>
|
||
<Menu.Item key="1">导出选中</Menu.Item>
|
||
</Menu>
|
||
} type="ghost">
|
||
导出全部
|
||
</Dropdown.Button>
|
||
)
|
||
}
|
||
|
||
|
||
return (
|
||
<div className="cumDeductWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
>
|
||
<WeaTop
|
||
title="其他免税扣除" // 文字
|
||
icon={<i className='icon-coms-meeting' />} // 左侧图标
|
||
iconBgcolor='#F14A2D' // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||
buttons={btns}
|
||
>
|
||
|
||
<div className="weaTabWrapper">
|
||
<WeaTab
|
||
searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
|
||
showSearchAd={showSearchAd} // 是否展开高级搜索面板
|
||
setShowSearchAd={bool => setShowSearchAd(bool)} //高级搜索面板受控
|
||
searchsAd={getSearchs(form, toJS(condition), 2)} // 高级搜索内部数据
|
||
buttonsAd={adBtn} // 高级搜索内部按钮
|
||
onSearch={getTableDatas} // 点搜索按钮时的回调
|
||
searchsAdQuick={this.getSearchsAdQuick()}
|
||
onSearchChange={v => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
|
||
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
|
||
/>
|
||
</div>
|
||
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
|
||
comsWeaTableStore={tableStore} // table store
|
||
hasOrder={true} // 是否启用排序
|
||
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
|
||
getColumns={this.getColumns}
|
||
onOperatesClick={this.onOperatesClick.bind(this)}
|
||
/>
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
<ImportModal
|
||
templateLink={"/api/bs/hrmsalary/otherDeduction/downloadTemplate"}
|
||
params={modalParam}
|
||
columns={modalColumns}
|
||
step={step}
|
||
setStep={setStep}
|
||
onFinish={() => {setModalVisiable(false); setStep(0); doSearch();}}
|
||
importResult={importResult}
|
||
slideDataSource={slideDataSource}
|
||
previewImport={(params) => {previewImport(params)}}
|
||
importFile={(params) => {importFile(params)}}
|
||
renderFormComponent={() => this.renderFormComponent()}
|
||
visiable={modalVisiable}
|
||
onCancel={() => { this.handleCancel() }}
|
||
/>
|
||
{
|
||
slideVisiable && <WeaSlideModal visible={slideVisiable}
|
||
top={0}
|
||
width={40}
|
||
height={100}
|
||
direction={'right'}
|
||
measure={'%'}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"其他免税扣除记录"}
|
||
subTabs={[{title: "基础设置"}]}
|
||
onSave={() => {this.state.currentOperate == "add" ? doSave() : doUpdate()}}
|
||
editable={false}
|
||
btns={
|
||
renderBtns()
|
||
}
|
||
/>
|
||
}
|
||
content={(<EditSlideContent />)}
|
||
onClose={() => setSlideVisiable(false)}
|
||
showMask={true}
|
||
closeMaskOnClick={() => setSlideVisiable(false)} />
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
}
|