数据采集页面重构
This commit is contained in:
parent
87024ceda9
commit
ccb9297e6c
|
|
@ -5,7 +5,7 @@ import "./index.less";
|
|||
class Index extends Component {
|
||||
|
||||
render() {
|
||||
const { columns } = this.props;
|
||||
const { columns, xWidth = 1440 } = this.props;
|
||||
const unifiedColumns = _.map(columns, (item, index) => {
|
||||
if (index === 0 || index === 2) {
|
||||
return { ...item, fixed: "left", width: 150 };
|
||||
|
|
@ -18,7 +18,7 @@ class Index extends Component {
|
|||
return { ...item, width: "33%" };
|
||||
});
|
||||
return (
|
||||
<WeaTable className="unifiedTable" {...this.props} columns={unifiedColumns} scroll={{ x: 1440 }}/>
|
||||
<WeaTable className="unifiedTable" {...this.props} columns={unifiedColumns} scroll={{ x: xWidth }}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,855 +0,0 @@
|
|||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Button, Col, Dropdown, Menu, message, Modal, Popover, Row } from "antd";
|
||||
import { WeaDatePicker, WeaHelpfulTip, WeaSelect, WeaSlideModal, WeaTab, WeaTable, WeaTop, WeaNewScroll } from "ecCom";
|
||||
import moment from "moment";
|
||||
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import ImportModal from "../../../components/importModal";
|
||||
import { dataCollectCondition, modalColumns } from "./columns";
|
||||
import { optionAddAll } from "../../../util/options";
|
||||
import SlideModalTitle from "../../../components/slideModalTitle";
|
||||
import EditSlideContent from "./components/editSlideContent";
|
||||
import AddItems from "../addItems";
|
||||
import * as API from "../../../apis/cumDeduct";
|
||||
import "./index.less";
|
||||
|
||||
@inject("cumDeductStore", "taxAgentStore")
|
||||
@observer
|
||||
export default class CumDeduct extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
addVisible: false,
|
||||
editId: {},
|
||||
saveLoading: false,
|
||||
addAllLoading: false,
|
||||
value: "",
|
||||
selectedKey: [],
|
||||
slideSelectedKey: [], //详情表格的选中项
|
||||
visiable: false,
|
||||
monthValue: moment(new Date()).format("YYYY-MM"),
|
||||
taxAgentId: "All",
|
||||
datetime: "",
|
||||
inited: false,
|
||||
modalParam: {
|
||||
declareMonth: "",
|
||||
taxAgentId: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
// 初始化渲染页面
|
||||
const {
|
||||
cumDeductStore: { doInit, addForm },
|
||||
taxAgentStore: { fetchTaxAgentOption, getTaxAgentSelectListAsAdmin }
|
||||
} = this.props;
|
||||
addForm.initFormFields(dataCollectCondition);
|
||||
doInit({ declareMonth: [this.state.monthValue], taxAgentId: "" });
|
||||
getTaxAgentSelectListAsAdmin();
|
||||
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: { taxAgentAdminOption }
|
||||
} = 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={taxAgentAdminOption}
|
||||
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, { taxAgentId: record.taxAgentId });
|
||||
};
|
||||
|
||||
// 增加编辑功能，重写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, current: 1 });
|
||||
};
|
||||
|
||||
//新功能
|
||||
handleSaveDeduction = (payload) => {
|
||||
const { editId } = this.state;
|
||||
this.setState({ saveLoading: true });
|
||||
if (!_.isEmpty(editId)) {
|
||||
API.editAddUpDeduction({ ...payload, id: editId.id }).then(({ status, errormsg }) => {
|
||||
this.setState({ saveLoading: false });
|
||||
if (status) {
|
||||
message.success("编辑成功");
|
||||
this.setState({
|
||||
addVisible: false,
|
||||
editId: {}
|
||||
}, () => {
|
||||
const { cumDeductStore: { doSearch, addForm } } = this.props;
|
||||
const { monthValue, taxAgentId } = this.state;
|
||||
doSearch({
|
||||
declareMonth: [monthValue],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
addForm.resetForm();
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "编辑失败");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
API.createAddUpDeduction(payload).then(({ status, errormsg }) => {
|
||||
this.setState({ saveLoading: false });
|
||||
if (status) {
|
||||
message.success("新增成功");
|
||||
this.setState({
|
||||
addVisible: false,
|
||||
editId: {}
|
||||
}, () => {
|
||||
const { cumDeductStore: { doSearch, addForm } } = this.props;
|
||||
const { monthValue, taxAgentId } = this.state;
|
||||
doSearch({
|
||||
declareMonth: [monthValue],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
addForm.resetForm();
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "新增失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
deleteSelectAddUpDeduction = () => {
|
||||
const { monthValue: declareMonth, taxAgentId, selectedKey } = this.state;
|
||||
const { cumDeductStore: { doSearch } } = this.props;
|
||||
if (selectedKey.length === 0) {
|
||||
message.warning("未选择条目");
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
declareMonth,
|
||||
ids: selectedKey
|
||||
};
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: "确定删除所选数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。",
|
||||
onOk: () => {
|
||||
API.deleteSelectAddUpDeduction(payload).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success("删除成功");
|
||||
doSearch({
|
||||
declareMonth: [declareMonth],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "删除失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
deleteAllAddUpDeduction = () => {
|
||||
const { monthValue: declareMonth, taxAgentId } = this.state;
|
||||
const { cumDeductStore: { doSearch } } = this.props;
|
||||
const payload = {
|
||||
declareMonth,
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
};
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: `确定清空税款所属期为${declareMonth}的所有累计专项附加扣除数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。`,
|
||||
onOk: () => {
|
||||
API.deleteAllAddUpDeduction(payload).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success("删除成功");
|
||||
doSearch({
|
||||
declareMonth: [declareMonth],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "删除失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
handleOperate = ({ key }, row) => {
|
||||
const { monthValue: declareMonth, taxAgentId } = this.state;
|
||||
const { cumDeductStore: { doSearch } } = this.props;
|
||||
if (key === "edit") {
|
||||
this.setState({
|
||||
addVisible: true
|
||||
}, () => {
|
||||
API.getAddUpDeduction({ id: row.id }).then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({ editId: data });
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (key === "delete") {
|
||||
const payload = {
|
||||
declareMonth,
|
||||
ids: [row.id]
|
||||
};
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
content: `确定删除${row.departmentName}${row.username}（税款所属期:${declareMonth}）的累计专项附加扣除数据吗?若数据已参与核算，已参与核算的数据不会受影响，点击核算将会按当前列表最新数据重新核算。`,
|
||||
onOk: () => {
|
||||
API.deleteSelectAddUpDeduction(payload).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success("删除成功");
|
||||
doSearch({
|
||||
declareMonth: [declareMonth],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "删除失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
autoAddAll = () => {
|
||||
const { monthValue: declareMonth, taxAgentId } = this.state;
|
||||
const { cumDeductStore: { doSearch } } = this.props;
|
||||
this.setState({ addAllLoading: true });
|
||||
API.autoAddAll({ yearMonth: declareMonth }).then(({ status, data, errormsg }) => {
|
||||
this.setState({ addAllLoading: false });
|
||||
if (status) {
|
||||
message.success(data || "操作成功");
|
||||
doSearch({
|
||||
declareMonth: [declareMonth],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
} else {
|
||||
message.error(errormsg || "操作失败");
|
||||
}
|
||||
}).catch(() => this.setState({ addAllLoading: false }));
|
||||
};
|
||||
handleButtonClick = () => {
|
||||
if (!this.handleChangeDebounce) {
|
||||
this.handleChangeDebounce = _.debounce(this.handleChange, 500);
|
||||
}
|
||||
this.handleChangeDebounce();
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
const url = `${window.location
|
||||
.origin}/api/bs/hrmsalary/addUpDeduction/export?ids=&declareMonth=${this.state.monthValue}&taxAgentId=${this.state.taxAgentId == "All"
|
||||
? ""
|
||||
: this.state.taxAgentId}`;
|
||||
window.open(url, "_self");
|
||||
};
|
||||
handleExportAllDetailClick = () => {
|
||||
if (!this.handleChangeDebounce) {
|
||||
const {
|
||||
cumDeductStore: { currentRecord }
|
||||
} = this.props;
|
||||
const url = `${window.location
|
||||
.origin}/api/bs/hrmsalary/addUpDeduction/exportDetail?accumulatedSpecialAdditionalDeductionId=${currentRecord.id}&ids=&taxAgentId=${currentRecord.taxAgentId}`;
|
||||
window.open(url, "_self");
|
||||
}
|
||||
this.handleChangeDebounce();
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
modalParam,
|
||||
slideSelectedKey,
|
||||
monthValue,
|
||||
taxAgentId,
|
||||
addVisible,
|
||||
editId,
|
||||
saveLoading,
|
||||
addAllLoading
|
||||
} = this.state;
|
||||
const { cumDeductStore, taxAgentStore } = this.props;
|
||||
const {
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pageObj,
|
||||
addForm,
|
||||
form,
|
||||
condition,
|
||||
tableStore,
|
||||
showSearchAd,
|
||||
getTableDatas,
|
||||
doSearch,
|
||||
setShowSearchAd,
|
||||
previewImport,
|
||||
importFile
|
||||
} = cumDeductStore;
|
||||
const { taxAgentOption, showOperateBtn } = taxAgentStore;
|
||||
const {
|
||||
slideVisiable,
|
||||
setSlideVisiable,
|
||||
modalVisiable,
|
||||
setModalVisiable,
|
||||
slideTableStore,
|
||||
step,
|
||||
setStep,
|
||||
slideDataSource,
|
||||
importResult,
|
||||
setPageObj
|
||||
} = cumDeductStore;
|
||||
const selectedRowKeys = toJS(tableStore.selectedRowKeys) || [];
|
||||
|
||||
const detailSelectedRowKeys = toJS(slideTableStore.selectedRowKeys) || [];
|
||||
|
||||
const rightMenu = [
|
||||
// 右键菜单
|
||||
// {
|
||||
// key: "BTN_COLUMN",
|
||||
// icon: <i className="icon-coms-Custom" />,
|
||||
// content: "显示列定制",
|
||||
// onClick: this.showColumn,
|
||||
// },
|
||||
];
|
||||
const adBtn = [
|
||||
// 高级搜索内部按钮
|
||||
<Button type="primary" onClick={() => doSearch({
|
||||
declareMonth: [this.state.monthValue],
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
})}>
|
||||
搜索
|
||||
</Button>,
|
||||
<Button type="ghost" onClick={() => form.resetForm()}>
|
||||
重置
|
||||
</Button>,
|
||||
<Button type="ghost" onClick={() => setShowSearchAd(false)}>
|
||||
取消
|
||||
</Button>
|
||||
];
|
||||
|
||||
const topTab = [];
|
||||
|
||||
const renderSearchOperationItem = () => {
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
const handleMenuClick = () => {
|
||||
if (this.state.selectedKey.length == 0) {
|
||||
message.warning("未选择条目");
|
||||
return;
|
||||
}
|
||||
const url = `${window.location
|
||||
.origin}/api/bs/hrmsalary/addUpDeduction/export?ids=${this.state.selectedKey.join(
|
||||
","
|
||||
)}&declareMonth=${this.state.monthValue}&taxAgentId=${this.state.taxAgentId == "All"
|
||||
? ""
|
||||
: this.state.taxAgentId}`;
|
||||
window.open(url, "_self");
|
||||
};
|
||||
|
||||
const handleBtnImport = () => {
|
||||
const {
|
||||
cumDeductStore: { setModalVisiable, setStep }
|
||||
} = this.props;
|
||||
setStep(0);
|
||||
setModalVisiable(true);
|
||||
};
|
||||
|
||||
const btns = [
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
handleBtnImport();
|
||||
}}>
|
||||
导入
|
||||
</Button>,
|
||||
<Dropdown.Button
|
||||
onClick={this.handleButtonClick}
|
||||
overlay={
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
type="ghost">
|
||||
导出全部
|
||||
</Dropdown.Button>,
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
addVisible: true,
|
||||
editId: {}
|
||||
}, () => addForm.resetForm());
|
||||
}}>
|
||||
新建
|
||||
</Button>,
|
||||
<Dropdown.Button
|
||||
onClick={this.deleteAllAddUpDeduction}
|
||||
overlay={
|
||||
<Menu onClick={this.deleteSelectAddUpDeduction}>
|
||||
<Menu.Item key="1">删除所选</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
type="ghost">
|
||||
一键清空
|
||||
</Dropdown.Button>,
|
||||
<Button
|
||||
type="primary"
|
||||
loading={addAllLoading}
|
||||
onClick={this.autoAddAll}>
|
||||
一键累计
|
||||
</Button>
|
||||
];
|
||||
|
||||
const handleExportSelectedDetailClick = () => {
|
||||
if (this.state.slideSelectedKey.length === 0) {
|
||||
message.warning("未选择条目");
|
||||
return;
|
||||
}
|
||||
const {
|
||||
cumDeductStore: { currentRecord }
|
||||
} = this.props;
|
||||
const url = `${window.location
|
||||
.origin}/api/bs/hrmsalary/addUpDeduction/exportDetail?accumulatedSpecialAdditionalDeductionId=${currentRecord.id}&ids=${this.state.slideSelectedKey.join(",")}&taxAgentId=${currentRecord.taxAgentId}`;
|
||||
window.open(url, "_self");
|
||||
};
|
||||
|
||||
const renderBtns = () => {
|
||||
return [
|
||||
<Dropdown.Button
|
||||
onClick={this.handleExportAllDetailClick}
|
||||
overlay={
|
||||
<Menu onClick={handleExportSelectedDetailClick}>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
type="primary">
|
||||
导出全部
|
||||
</Dropdown.Button>
|
||||
];
|
||||
};
|
||||
|
||||
const pagination = {
|
||||
total: pageObj.total,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
showSizeChanger: true,
|
||||
onShowSizeChange(current, pageSize) {
|
||||
setPageObj({ ...pageObj, current, pageSize });
|
||||
getTableDatas({
|
||||
current,
|
||||
pageSize,
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId,
|
||||
declareMonth: monthValue && [monthValue]
|
||||
});
|
||||
},
|
||||
onChange(current) {
|
||||
setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
|
||||
getTableDatas({
|
||||
current,
|
||||
pageSize: pageObj.pageSize,
|
||||
taxAgentId: taxAgentId === "All" ? "" : 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: 120,
|
||||
fixed: "right",
|
||||
render: (text, record) => (
|
||||
<div className="linkWapper">
|
||||
<a href="javaScript:void(0);" onClick={() => this.onEdit(record)}>
|
||||
查看明细
|
||||
</a>
|
||||
{
|
||||
showOperateBtn &&
|
||||
<Popover
|
||||
overlayClassName="moreIconWrapper"
|
||||
placement="bottomRight"
|
||||
content={<Menu onClick={(e) => this.handleOperate(e, record)}>
|
||||
<Menu.Item key="edit">编辑</Menu.Item>
|
||||
<Menu.Item key="delete">删除</Menu.Item>
|
||||
</Menu>} title="">
|
||||
<i className="icon-coms-more"/>
|
||||
</Popover>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
} else {
|
||||
return { ...item, width: 150 };
|
||||
}
|
||||
});
|
||||
if (_.isEmpty(newColumns)) {
|
||||
return renderLoading();
|
||||
}
|
||||
return (
|
||||
<div className="cumDeductWrapper">
|
||||
<WeaTop
|
||||
title="累计专项附加扣除" // 文字
|
||||
icon={<i className="icon-coms-fa"/>} // 左侧图标
|
||||
iconBgcolor="#F14A2D" // 左侧图标背景色
|
||||
showDropIcon={false} // 是否显示下拉按钮
|
||||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||||
buttons={showOperateBtn ? btns : []}
|
||||
>
|
||||
<div className="weaTabWrapper">
|
||||
<WeaTab
|
||||
searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
|
||||
searchsBasePlaceHolder="请输入姓名"
|
||||
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>
|
||||
<div className="tableWrapper">
|
||||
<WeaNewScroll height="100%">
|
||||
<WeaTable
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
columns={newColumns}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
scroll={{ x: 1300 }}
|
||||
/>
|
||||
</WeaNewScroll>
|
||||
</div>
|
||||
</WeaTop>
|
||||
{modalVisiable && (
|
||||
<ImportModal
|
||||
needimportSelected //下载模板需要带上导入所选项
|
||||
init={() => {
|
||||
this.handleInitModal();
|
||||
}}
|
||||
onValidate={() => {
|
||||
this.handleValidate();
|
||||
}}
|
||||
params={modalParam}
|
||||
columns={modalColumns}
|
||||
step={step}
|
||||
setStep={setStep}
|
||||
slideDataSource={slideDataSource}
|
||||
importResult={importResult}
|
||||
onFinish={() => {
|
||||
setModalVisiable(false);
|
||||
setStep(0);
|
||||
doSearch({
|
||||
declareMonth: this.state.monthValue ? [this.state.monthValue] : "",
|
||||
taxAgentId: taxAgentId === "All" ? "" : taxAgentId
|
||||
});
|
||||
}}
|
||||
previewImport={(params) => {
|
||||
previewImport(params);
|
||||
}}
|
||||
importFile={(params) => {
|
||||
importFile(params);
|
||||
}}
|
||||
templateLink={"/api/bs/hrmsalary/addUpDeduction/downloadTemplate"}
|
||||
renderFormComponent={() => this.renderFormComponent()}
|
||||
visiable={modalVisiable}
|
||||
onCancel={() => {
|
||||
this.handleCancel();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(slideVisiable || addVisible) && (
|
||||
<WeaSlideModal
|
||||
className="slideOuterWrapper"
|
||||
visible={slideVisiable || addVisible}
|
||||
top={0}
|
||||
width={60}
|
||||
height={100}
|
||||
direction="right"
|
||||
measure="%"
|
||||
title={
|
||||
<SlideModalTitle
|
||||
subtitle={addVisible ? (!_.isEmpty(editId) ? "编辑" : "新建") : "累计专项附加扣除记录"}
|
||||
loading={saveLoading}
|
||||
onSave={() => {
|
||||
const { baseInfo } = this.addItemRef.state;
|
||||
const bool = _.every(_.pick(baseInfo, ["declareMonth", "taxAgentId", "employeeId"]), v => !_.isEmpty(v));
|
||||
if (!bool && _.isEmpty(editId)) {
|
||||
Modal.warning({
|
||||
title: "信息确认",
|
||||
content: "必要信息不完整，红色*为必填项！"
|
||||
});
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
..._.pick(baseInfo, ["declareMonth", "taxAgentId", "employeeId", "taxAgentName"]),
|
||||
...addForm.getFormParams()
|
||||
};
|
||||
this.handleSaveDeduction(payload);
|
||||
}}
|
||||
editable={!!addVisible}
|
||||
showOperateBtn={showOperateBtn}
|
||||
customOperate={(showOperateBtn && !addVisible) ? renderBtns() : []}
|
||||
/>
|
||||
}
|
||||
content={
|
||||
addVisible ?
|
||||
<AddItems
|
||||
ref={(dom) => this.addItemRef = dom}
|
||||
taxAgentOption={taxAgentOption}
|
||||
form={addForm}
|
||||
editId={editId}
|
||||
condition={dataCollectCondition}
|
||||
/> :
|
||||
<EditSlideContent
|
||||
slideSelectedKey={slideSelectedKey}
|
||||
onChangeSlideSelectKey={(val) =>
|
||||
this.setState({ slideSelectedKey: val })
|
||||
}
|
||||
/>
|
||||
}
|
||||
onClose={() => {
|
||||
setSlideVisiable(false);
|
||||
this.setState({
|
||||
addVisible: false,
|
||||
editId: {}
|
||||
});
|
||||
}}
|
||||
showMask={true}
|
||||
closeMaskOnClick={() => {
|
||||
setSlideVisiable(false);
|
||||
this.setState({
|
||||
addVisible: false,
|
||||
editId: {}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@ class Layout extends Component {
|
|||
const { visible, title: subtitle, children: slideChildren } = slidePayload;
|
||||
const {
|
||||
visible: importVisiable, step, importFormComponent, importOpts,
|
||||
importResult, slideDataSource
|
||||
importResult, slideDataSource, templateLink
|
||||
} = importPayload;
|
||||
return (
|
||||
<div className="layoutWrapper">
|
||||
|
|
@ -96,7 +96,7 @@ class Layout extends Component {
|
|||
slideDataSource={slideDataSource}
|
||||
previewImport={onPreviewImport}
|
||||
importFile={onImportFile}
|
||||
templateLink={"/api/bs/hrmsalary/addUpDeduction/downloadTemplate"}
|
||||
templateLink={templateLink}
|
||||
renderFormComponent={() => importFormComponent}
|
||||
visiable={importVisiable}
|
||||
onCancel={onCancel}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import {
|
|||
WeaSelect,
|
||||
WeaSlideModal,
|
||||
WeaTab,
|
||||
WeaTable,
|
||||
WeaTop
|
||||
} from "ecCom";
|
||||
import { WeaTableNew } from "comsMobx";
|
||||
|
|
@ -33,6 +32,7 @@ import SlideModalTitle from "../../components/slideModalTitle";
|
|||
import SalaryFileViewSlide from "../salaryFile/saralyFileViewSlide";
|
||||
import ChangeSalaryModal from "../salaryFile/changeSalaryModal";
|
||||
import "./index.less";
|
||||
import UnifiedTable from "../../components/UnifiedTable";
|
||||
|
||||
const WeaTableComx = WeaTableNew.WeaTable;
|
||||
|
||||
|
|
@ -445,29 +445,19 @@ class Index extends Component {
|
|||
return [];
|
||||
};
|
||||
getColumns = () => {
|
||||
const { pageInfo, selectedKey } = this.state;
|
||||
const { selectedKey } = this.state;
|
||||
const { payrollFilesStore: { tableStore }, taxAgentStore: { showOperateBtn } } = this.props;
|
||||
let columns = _.filter(toJS(tableStore.columns), (item) => item.display === "true");
|
||||
return _.map([
|
||||
// {
|
||||
// title: "序号",
|
||||
// dataIndex: "index",
|
||||
// align: "left",
|
||||
// oldWidth: 60,
|
||||
// render: (text, record, index) => {
|
||||
// const { current, pageSize } = pageInfo;
|
||||
// return (current - 1) * pageSize + index + 1;
|
||||
// }
|
||||
// },
|
||||
...columns], (item, index) => {
|
||||
...columns], item => {
|
||||
if (item.dataIndex === "username") {
|
||||
return {
|
||||
...item,
|
||||
width: item.oldWidth,
|
||||
render: (text, record) => {
|
||||
return <a
|
||||
href={`javaScript:openhrm(${record.employeeId});`}
|
||||
onClick={e => window.pointerXY(e)}
|
||||
className="ellipsis"
|
||||
title={text}
|
||||
>
|
||||
{text}
|
||||
|
|
@ -477,8 +467,6 @@ class Index extends Component {
|
|||
} else if (item.dataIndex === "operate") {
|
||||
return {
|
||||
...item,
|
||||
fixed: "right",
|
||||
width: 150,
|
||||
render: (text, record) => {
|
||||
if (!showOperateBtn) {
|
||||
return <div className="optWrapper">
|
||||
|
|
@ -532,9 +520,8 @@ class Index extends Component {
|
|||
}
|
||||
return {
|
||||
...item,
|
||||
width: item.oldWidth,
|
||||
render: (text) => {
|
||||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||||
return <span className="ellipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -793,14 +780,25 @@ class Index extends Component {
|
|||
/>
|
||||
<div className="tableWrapper">
|
||||
<WeaNewScroll height="100%">
|
||||
<WeaTable
|
||||
loading={loading.query}
|
||||
<UnifiedTable
|
||||
rowKey="id"
|
||||
columns={this.getColumns()} dataSource={dataSource} pagination={pagination}
|
||||
// rowClassName={(record) => record.archiveStatus === "ARCHIVE" ? "archiveRow" : ""}
|
||||
loading={loading.query}
|
||||
columns={this.getColumns()}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
rowSelection={rowSelection}
|
||||
scroll={{ x: 1200 }}
|
||||
xWidth={this.getColumns().length * 120}
|
||||
/>
|
||||
{/*<WeaTable*/}
|
||||
{/* // loading={loading.query}*/}
|
||||
{/* // rowKey="id"*/}
|
||||
{/* // columns={this.getColumns()}*/}
|
||||
{/* // dataSource={dataSource}*/}
|
||||
{/* // pagination={pagination}*/}
|
||||
{/* // rowClassName={(record) => record.archiveStatus === "ARCHIVE" ? "archiveRow" : ""}*/}
|
||||
{/* // rowSelection={rowSelection}*/}
|
||||
{/* // scroll={{ x: 1200 }}*/}
|
||||
{/*/>*/}
|
||||
{/*人员卡片*/}
|
||||
<WeaPopoverHrm/>
|
||||
<WeaTableComx
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React from "react";
|
|||
import { inject, observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { Button, Dropdown, Menu, message, Modal, Popover } from "antd";
|
||||
import { WeaHelpfulTip, WeaSlideModal, WeaTab, WeaTable, WeaTop, WeaNewScroll } from "ecCom";
|
||||
import { getSearchs, renderLoading } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import { WeaHelpfulTip, WeaNewScroll, WeaSlideModal, WeaTab, WeaTop } from "ecCom";
|
||||
import { getSearchs, renderLoading } from "../../../util";
|
||||
import BaseForm from "./baseForm";
|
||||
import SlideModalTitle from "../../../components/slideModalTitle";
|
||||
import SocialSecurityForm from "./socialSecurityForm";
|
||||
|
|
@ -13,6 +13,7 @@ import { tabCondition } from "./config";
|
|||
import * as API from "../../../apis/welfareArchive";
|
||||
import ImportModal from "../../../components/importModal";
|
||||
import TipLabel from "../../../components/TipLabel";
|
||||
import UnifiedTable from "../../../components/UnifiedTable";
|
||||
import "./index.less";
|
||||
|
||||
@inject("archivesStore", "taxAgentStore")
|
||||
|
|
@ -104,42 +105,22 @@ export default class Archives extends React.Component {
|
|||
}
|
||||
|
||||
getColumns() {
|
||||
const { columns, pageInfo, selectedKey } = this.state;
|
||||
const { columns, selectedKey } = this.state;
|
||||
const { taxAgentStore: { showOperateBtn } } = this.props;
|
||||
let tmpV = _.map(columns.filter(item => item.display === "TRUE"), (item, index) => {
|
||||
if (index === 0) {
|
||||
return {
|
||||
...item, dataIndex: item.column,
|
||||
fixed: "left",
|
||||
title: item.text
|
||||
};
|
||||
}
|
||||
let tmpV = _.map(columns.filter(item => item.display === "TRUE"), item => {
|
||||
return {
|
||||
...item,
|
||||
dataIndex:
|
||||
item.column,
|
||||
dataIndex: item.column,
|
||||
title: item.text,
|
||||
render: (text) => {
|
||||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||||
return <span className="ellipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
});
|
||||
return tmpV.length > 0 ? [
|
||||
// {
|
||||
// title: "序号",
|
||||
// dataIndex: "index",
|
||||
// width: 60,
|
||||
// fixed: "left",
|
||||
// render: (text, record, index) => {
|
||||
// const { current, pageSize } = pageInfo;
|
||||
// return (current - 1) * pageSize + index + 1;
|
||||
// }
|
||||
// },
|
||||
...tmpV, {
|
||||
title: "操作",
|
||||
dataIndex: "operate",
|
||||
fixed: "right",
|
||||
width: "120px",
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<div className="optWrapper">
|
||||
|
|
@ -762,12 +743,14 @@ export default class Archives extends React.Component {
|
|||
/>
|
||||
<div className="tableWrapper">
|
||||
<WeaNewScroll height="100%">
|
||||
<WeaTable
|
||||
<UnifiedTable
|
||||
loading={loading.query}
|
||||
rowKey="baseInfo"
|
||||
columns={this.getColumns()} dataSource={dataSourceActive} pagination={pagination}
|
||||
columns={this.getColumns()}
|
||||
dataSource={dataSourceActive}
|
||||
pagination={pagination}
|
||||
rowSelection={rowSelection}
|
||||
scroll={{ x: 1200 }}
|
||||
xWidth={this.getColumns().length * 120}
|
||||
/>
|
||||
{
|
||||
!_.isEmpty(this.getColumns()) &&
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ import React from "react";
|
|||
import { inject, observer } from "mobx-react";
|
||||
import { Button, DatePicker, Dropdown, Menu, message, Modal } from "antd";
|
||||
import { WeaNewScroll, WeaTop } from "ecCom";
|
||||
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import { renderNoright } from "../../../util";
|
||||
import Accountdialog from "./components/accountDialog";
|
||||
import AbnormalDrawer from "./components/abnormalDrawer";
|
||||
import CustomPaginationTable from "../../../components/customPaginationTable";
|
||||
import moment from "moment";
|
||||
import _ from "lodash";
|
||||
import ProgressModal from "../../../components/progressModal";
|
||||
import { getCalculateProgress } from "../../../apis/calculate";
|
||||
import "./index.less";
|
||||
import UnifiedTable from "../../../components/UnifiedTable";
|
||||
|
||||
const MonthPicker = DatePicker.MonthPicker;
|
||||
|
||||
|
|
@ -138,9 +138,8 @@ export default class StandingBook extends React.Component {
|
|||
...columns,
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
dataIndex: "operate",
|
||||
key: "operate",
|
||||
render: (text, r) => {
|
||||
const { billStatus, billMonth, creator } = r;
|
||||
return (
|
||||
|
|
@ -441,6 +440,22 @@ export default class StandingBook extends React.Component {
|
|||
核算
|
||||
</Button>
|
||||
];
|
||||
const pagination = {
|
||||
...this.pageInfo,
|
||||
total: total,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ["10", "20", "50", "100"],
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
this.pageInfo = { ...this.pageInfo, current, pageSize };
|
||||
this.handleShowSizeChange(this.pageInfo);
|
||||
},
|
||||
onChange: (current) => {
|
||||
this.pageInfo = { ...this.pageInfo, current };
|
||||
this.handleShowSizeChange(this.pageInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="standingbookWrapper">
|
||||
|
|
@ -472,31 +487,22 @@ export default class StandingBook extends React.Component {
|
|||
</div>
|
||||
<div className="tableWrapper">
|
||||
<WeaNewScroll height="100%">
|
||||
<CustomPaginationTable
|
||||
<UnifiedTable
|
||||
loading={loading}
|
||||
columns={_.filter(columns, (it) => it.dataIndex !== "id").map(item => {
|
||||
item.width = "150px";
|
||||
if (item.dataIndex === "billMonth") item.fixed = "left";
|
||||
if (item.dataIndex === "action") return { ...item };
|
||||
return {
|
||||
...item,
|
||||
render: (text) => {
|
||||
return <span className="tdEllipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
if (item.dataIndex !== "operate") {
|
||||
return {
|
||||
...item,
|
||||
render: (text) => {
|
||||
return <span className="ellipsis" title={text}>{text}</span>;
|
||||
}
|
||||
};
|
||||
}
|
||||
return { ...item };
|
||||
})}
|
||||
dataSource={list}
|
||||
total={total}
|
||||
current={this.state.current}
|
||||
pageSize={this.pageInfo.pageSize}
|
||||
onPageChange={(current) => {
|
||||
this.handleShowSizeChange({ ...this.pageInfo, current });
|
||||
}}
|
||||
onShowSizeChange={(current, pageSize) => {
|
||||
this.pageInfo = { current, pageSize };
|
||||
this.handleShowSizeChange(this.pageInfo);
|
||||
}}
|
||||
scroll={{ x: 2300 }}
|
||||
pagination={pagination}
|
||||
xWidth={columns.length * 120}
|
||||
/>
|
||||
</WeaNewScroll>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue