598 lines
17 KiB
JavaScript
598 lines
17 KiB
JavaScript
import React from "react";
|
||
import { inject, observer } from "mobx-react";
|
||
import { toJS } from "mobx";
|
||
import { Button, DatePicker, Dropdown, Menu, message, Row, Col } from "antd";
|
||
import {
|
||
WeaTop,
|
||
WeaTab,
|
||
WeaRightMenu,
|
||
WeaDatePicker,
|
||
WeaSelect,
|
||
WeaHelpfulTip,
|
||
WeaSlideModal,
|
||
WeaTable,
|
||
} from "ecCom";
|
||
import moment from "moment";
|
||
import { renderNoright, getSearchs } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||
import CustomTab from "../../../components/customTab";
|
||
import ContentWrapper from "../../../components/contentWrapper";
|
||
import ImportModal from "../../../components/importModal";
|
||
import { modalColumns } from "./columns";
|
||
import { optionAddAll } from "../../../util/options";
|
||
|
||
const { MonthPicker } = DatePicker;
|
||
|
||
import "./index.less";
|
||
|
||
import SlideModalTitle from "../../../components/slideModalTitle";
|
||
import EditSlideContent from "./editSlideContent";
|
||
|
||
@inject("cumDeductStore", "taxAgentStore")
|
||
@observer
|
||
export default class CumDeduct extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
value: "",
|
||
selectedKey: [],
|
||
slideSelectedKey: [], //详情表格的选中项
|
||
visiable: false,
|
||
monthValue: "",
|
||
taxAgentId: "",
|
||
datetime: "",
|
||
inited: false,
|
||
modalParam: {
|
||
declareMonth: "",
|
||
taxAgentId: "",
|
||
},
|
||
};
|
||
}
|
||
|
||
componentWillMount() {
|
||
// 初始化渲染页面
|
||
const {
|
||
cumDeductStore: { doInit },
|
||
taxAgentStore: { fetchTaxAgentOption },
|
||
} = this.props;
|
||
doInit();
|
||
fetchTaxAgentOption().then((res) => {
|
||
this.setState({
|
||
inited: true,
|
||
});
|
||
});
|
||
}
|
||
|
||
getSearchsAdQuick() {
|
||
const { monthValue, taxAgentId } = this.state;
|
||
const {
|
||
taxAgentStore: { taxAgentOption },
|
||
cumDeductStore: { 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})
|
||
let params = {}
|
||
if(taxAgentId == "All") {
|
||
params.taxAgentId = ""
|
||
} else {
|
||
params.taxAgentId = taxAgentId
|
||
}
|
||
if(v != null && v != "") {
|
||
params.declareMonth = [v]
|
||
}
|
||
getTableDatas(params)
|
||
}}
|
||
/>
|
||
</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={optionAddAll(taxAgentOption)}
|
||
value={taxAgentId}
|
||
onChange={v => {
|
||
let params = {}
|
||
if(v == "All") {
|
||
params.taxAgentId = ""
|
||
} else {
|
||
params.taxAgentId = v
|
||
}
|
||
if(monthValue != null && monthValue != "") {
|
||
params.declareMonth = [monthValue]
|
||
}
|
||
getTableDatas(params)
|
||
this.setState({taxAgentId: v})
|
||
}}
|
||
/>
|
||
}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
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: { ...modalParam, declareMonth: value },
|
||
})
|
||
}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<span
|
||
className="formLabel"
|
||
style={{ lineHeight: "30px", marginRight: "10px" }}>
|
||
个税扣缴义务人
|
||
</span>
|
||
<WeaSelect
|
||
showSearch // 设置select可搜索
|
||
style={{ width: 200, display: "inline-block" }}
|
||
options={taxAgentOption}
|
||
value={modalParam.taxAgentId}
|
||
onChange={(v) => {
|
||
this.setState({ modalParam: { ...modalParam, taxAgentId: v } });
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
);
|
||
}
|
||
|
||
onEdit = (record) => {
|
||
const {
|
||
cumDeductStore: {
|
||
slideVisiable,
|
||
setSlideVisiable,
|
||
getCumDeductDetailList,
|
||
setCurrentRecord,
|
||
},
|
||
} = this.props;
|
||
setSlideVisiable(true);
|
||
setCurrentRecord(record);
|
||
getCumDeductDetailList(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);
|
||
}}>
|
||
{text}
|
||
</a>
|
||
);
|
||
case "operate":
|
||
return (
|
||
<a
|
||
onClick={() => {
|
||
this.onEdit(record);
|
||
}}>
|
||
查看明细
|
||
</a>
|
||
);
|
||
default:
|
||
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
|
||
}
|
||
};
|
||
return newColumn;
|
||
});
|
||
return newColumns;
|
||
};
|
||
|
||
handleCancel() {
|
||
const { cumDeductStore } = this.props;
|
||
const { modalVisiable, setModalVisiable, setStep } = cumDeductStore;
|
||
setModalVisiable(false);
|
||
setStep(0);
|
||
}
|
||
|
||
onOperatesClick = (record, index, operate, flag) => {
|
||
switch (operate.index.toString()) {
|
||
case "0": // 查看明细
|
||
this.onEdit(record);
|
||
break;
|
||
}
|
||
};
|
||
|
||
showColumn = () => {
|
||
const {
|
||
cumDeductStore: { tableStore },
|
||
} = this.props;
|
||
tableStore.setColSetVisible(true);
|
||
tableStore.tableColSet(true);
|
||
};
|
||
|
||
// 初始化导入参数
|
||
handleInitModal() {
|
||
const {
|
||
cumDeductStore: { setSlideDataSource, setImportResult },
|
||
} = this.props;
|
||
setSlideDataSource([]);
|
||
setImportResult({});
|
||
}
|
||
|
||
onSelectChange = (val) => {
|
||
this.setState({
|
||
selectedKey: val,
|
||
});
|
||
};
|
||
|
||
handleSearch() {
|
||
const { cumDeductStore:{getTableDatas} } = this.props;
|
||
const { monthValue, taxAgentId } = this.state;
|
||
let params = {}
|
||
if(monthValue != null && monthValue !== "") {
|
||
params.declareMonth = [monthValue]
|
||
}
|
||
if(taxAgentId != null && taxAgentId !== "" && taxAgentId !== "All") {
|
||
params.taxAgentId = taxAgentId
|
||
}
|
||
getTableDatas(params)
|
||
}
|
||
|
||
render() {
|
||
const { modalParam, slideSelectedKey, monthValue, taxAgentId } = this.state;
|
||
const { cumDeductStore, taxAgentStore } = this.props;
|
||
const {
|
||
loading,
|
||
dataSource,
|
||
columns,
|
||
pageObj,
|
||
hasRight,
|
||
form,
|
||
condition,
|
||
tableStore,
|
||
showSearchAd,
|
||
getTableDatas,
|
||
doSearch,
|
||
setShowSearchAd,
|
||
previewImport,
|
||
importFile,
|
||
} = cumDeductStore;
|
||
const { taxAgentOption } = taxAgentStore;
|
||
const {
|
||
slideVisiable,
|
||
setSlideVisiable,
|
||
modalVisiable,
|
||
setModalVisiable,
|
||
slideTableStore,
|
||
step,
|
||
setStep,
|
||
slideDataSource,
|
||
importResult,
|
||
setPageObj,
|
||
} = cumDeductStore;
|
||
const selectedRowKeys = toJS(tableStore.selectedRowKeys) || [];
|
||
|
||
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 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 {
|
||
cumDeductStore: { exportCumDeductList },
|
||
} = this.props;
|
||
exportCumDeductList();
|
||
};
|
||
|
||
const handleMenuClick = () => {
|
||
if (this.state.selectedKey.length == 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
const {
|
||
cumDeductStore: { exportCumDeductList },
|
||
} = this.props;
|
||
exportCumDeductList(this.state.selectedKey.join(","));
|
||
};
|
||
|
||
const handleBtnImport = () => {
|
||
const {
|
||
cumDeductStore: { 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 {
|
||
cumDeductStore: { exportCumDeductDetailList, currentRecord },
|
||
} = this.props;
|
||
exportCumDeductDetailList(currentRecord.id);
|
||
};
|
||
|
||
const handleExportSelectedDetailClick = () => {
|
||
if (this.state.slideSelectedKey.length == 0) {
|
||
message.warning("未选择条目");
|
||
return;
|
||
}
|
||
const {
|
||
cumDeductStore: { exportCumDeductDetailList, currentRecord },
|
||
} = this.props;
|
||
exportCumDeductDetailList(
|
||
currentRecord.id,
|
||
this.state.slideSelectedKey.join(",")
|
||
);
|
||
};
|
||
|
||
const renderBtns = () => {
|
||
return (
|
||
<Dropdown.Button
|
||
onClick={handleExportAllDetailClick}
|
||
overlay={
|
||
<Menu onClick={handleExportSelectedDetailClick}>
|
||
<Menu.Item key="1">导出选中</Menu.Item>
|
||
</Menu>
|
||
}
|
||
type="ghost">
|
||
导出全部
|
||
</Dropdown.Button>
|
||
);
|
||
};
|
||
|
||
const pagination = {
|
||
total: pageObj.total,
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
showSizeChanger: true,
|
||
onShowSizeChange(current, pageSize) {
|
||
setPageObj({ ...pageObj, current, pageSize });
|
||
getTableDatas({
|
||
current,
|
||
pageSize,
|
||
taxAgentId,
|
||
declareMonth: monthValue && [monthValue],
|
||
});
|
||
},
|
||
onChange(current) {
|
||
setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
|
||
getTableDatas({
|
||
current,
|
||
pageSize: pageObj.pageSize,
|
||
taxAgentId,
|
||
declareMonth: monthValue && [monthValue],
|
||
});
|
||
},
|
||
};
|
||
const rowSelection = {
|
||
selectedRowKeys: this.state.selectedKey,
|
||
onChange: this.onSelectChange,
|
||
};
|
||
const newColumns = _.map([...columns], (item) => {
|
||
if (item.dataIndex === "username") {
|
||
return {
|
||
...item,
|
||
width: 100,
|
||
fixed: "left",
|
||
render: (text, record) => (
|
||
<div className="linkWapper">
|
||
<a href="javaScript:void(0);" onClick={() => this.onEdit(record)}>
|
||
{text}
|
||
</a>
|
||
</div>
|
||
),
|
||
};
|
||
} else if (item.dataIndex === "taxAgentName") {
|
||
return {
|
||
...item,
|
||
width: 180,
|
||
fixed: "left",
|
||
};
|
||
} else if (item.dataIndex === "operate") {
|
||
return {
|
||
...item,
|
||
width: 100,
|
||
fixed: "right",
|
||
render: (text, record) => (
|
||
<div className="linkWapper">
|
||
<a href="javaScript:void(0);" onClick={() => this.onEdit(record)}>
|
||
查看明细
|
||
</a>
|
||
</div>
|
||
),
|
||
};
|
||
} else {
|
||
return { ...item };
|
||
}
|
||
});
|
||
|
||
return (
|
||
<div className="cumDeductWrapper">
|
||
<WeaRightMenu
|
||
datas={rightMenu} // 右键菜单
|
||
>
|
||
<WeaTop
|
||
title="累计专项附加扣除" // 文字
|
||
icon={<i className="icon-coms-meeting" />} // 左侧图标
|
||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||
showDropIcon={true} // 是否显示下拉按钮
|
||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||
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={() => this.handleSearch()} // 点搜索按钮时的回调
|
||
searchsAdQuick={this.getSearchsAdQuick()}
|
||
onSearchChange={(v) => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
|
||
searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
|
||
/>
|
||
</div>
|
||
<WeaTable
|
||
rowKey="id"
|
||
rowSelection={rowSelection}
|
||
columns={newColumns}
|
||
dataSource={dataSource}
|
||
pagination={pagination}
|
||
loading={loading}
|
||
scroll={{ x: 1300 }}
|
||
/>
|
||
</WeaTop>
|
||
</WeaRightMenu>
|
||
{modalVisiable && (
|
||
<ImportModal
|
||
init={() => {
|
||
this.handleInitModal();
|
||
}}
|
||
onValidate={() => {this.handleValidate()}}
|
||
params={modalParam}
|
||
columns={modalColumns}
|
||
step={step}
|
||
setStep={setStep}
|
||
slideDataSource={slideDataSource}
|
||
importResult={importResult}
|
||
onFinish={() => {
|
||
setModalVisiable(false);
|
||
setStep(0);
|
||
doSearch();
|
||
}}
|
||
previewImport={(params) => {
|
||
previewImport(params);
|
||
}}
|
||
importFile={(params) => {
|
||
importFile(params);
|
||
}}
|
||
templateLink={"/api/bs/hrmsalary/addUpDeduction/downloadTemplate"}
|
||
renderFormComponent={() => this.renderFormComponent()}
|
||
visiable={modalVisiable}
|
||
onCancel={() => {
|
||
this.handleCancel();
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{slideVisiable && (
|
||
<WeaSlideModal
|
||
visible={slideVisiable}
|
||
top={0}
|
||
width={60}
|
||
height={100}
|
||
direction={"right"}
|
||
measure={"%"}
|
||
title={
|
||
<SlideModalTitle
|
||
subtitle={"累计专项附加扣除记录"}
|
||
subTabs={[{ title: "基础设置" }]}
|
||
onSave={() => {
|
||
this.state.currentOperate == "add" ? doSave() : doUpdate();
|
||
}}
|
||
editable={false}
|
||
btns={renderBtns()}
|
||
/>
|
||
}
|
||
content={
|
||
<EditSlideContent
|
||
slideSelectedKey={slideSelectedKey}
|
||
onChangeSlideSelectKey={(val) =>
|
||
this.setState({ slideSelectedKey: val })
|
||
}
|
||
/>
|
||
}
|
||
onClose={() => setSlideVisiable(false)}
|
||
showMask={true}
|
||
closeMaskOnClick={() => setSlideVisiable(false)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
}
|