高版本表格组件修改
This commit is contained in:
parent
8fd6579dfd
commit
d6f7d3c19b
|
|
@ -178,7 +178,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableWrapper {
|
.tableWrapper {
|
||||||
margin-top: 10px;
|
padding: 10px;
|
||||||
|
height: calc(100vh - 121px);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,143 +2,97 @@ import React from "react";
|
||||||
import CustomTab from "../../components/customTab";
|
import CustomTab from "../../components/customTab";
|
||||||
import { Dropdown, Menu, message } from "antd";
|
import { Dropdown, Menu, message } from "antd";
|
||||||
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal } from "ecCom";
|
import { WeaHelpfulTip, WeaInputSearch, WeaSlideModal } from "ecCom";
|
||||||
import { placeOnFileColumns } from "./columns";
|
|
||||||
import SlideModalTitle from "../../components/slideModalTitle";
|
import SlideModalTitle from "../../components/slideModalTitle";
|
||||||
import FileMergeDetail from "./fileMergeDetail";
|
import FileMergeDetail from "./fileMergeDetail";
|
||||||
import { getQueryString } from "../../util/url";
|
import { getQueryString } from "../../util/url";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import CustomPaginationTable from "../../components/customPaginationTable";
|
import "./index.less";
|
||||||
import { renderLoading } from "../../util";
|
|
||||||
|
|
||||||
@inject("calculateStore")
|
@inject("calculateStore")
|
||||||
@observer
|
@observer
|
||||||
export default class PlaceOnFileDetail extends React.Component {
|
export default class PlaceOnFileDetail extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
placeOnFileColumns.map(item => {
|
|
||||||
if (item.dataIndex == "username") {
|
|
||||||
item.render = (text, record) => (
|
|
||||||
<a onClick={() => {
|
|
||||||
this.onDetail();
|
|
||||||
}}>{text}</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.state = {
|
this.state = {
|
||||||
slideVisiable: false,
|
slideVisiable: false,
|
||||||
selectedRowKeys: [],
|
selectedRowKeys: [],
|
||||||
searchValue: ""
|
searchValue: ""
|
||||||
};
|
};
|
||||||
this.id = "";
|
this.id = "";
|
||||||
this.length = 0;
|
|
||||||
this.pageInfo = {
|
|
||||||
current: 1,
|
|
||||||
pageSize: 10
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
let id = getQueryString("id");
|
this.id = getQueryString("id");
|
||||||
this.id = id;
|
const { calculateStore: { getSalarySobCycle } } = this.props;
|
||||||
const { calculateStore: { getSalarySobCycle, acctResultList } } = this.props;
|
getSalarySobCycle(this.id);
|
||||||
getSalarySobCycle(id);
|
|
||||||
acctResultList({ salaryAcctRecordId: id });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
window.addEventListener("message", this.handleClick, false);
|
||||||
|
}
|
||||||
|
|
||||||
// 获取列表的列
|
componentWillUnmount() {
|
||||||
getColumns() {
|
window.removeEventListener("message", this.handleClick, false);
|
||||||
const { calculateStore: { acctResultListTableStore, acctResultListColumns } } = this.props;
|
}
|
||||||
let columns = acctResultListColumns ? acctResultListColumns : [];
|
|
||||||
columns = columns.filter(item => item.hide == "FALSE").map(item => {
|
handleClick = ({ data }) => {
|
||||||
let result = { ...item };
|
const childFrameObj = document.getElementById("atdTable");
|
||||||
result.title = item.text;
|
const salaryAcctRecordId = getQueryString("id");
|
||||||
result.dataIndex = item.column;
|
const { type, data: { id, data: record } = {} } = data;
|
||||||
result.oldWidth = result.width;
|
if (type === "PR") {
|
||||||
result.width = null;
|
if (id === "BATCHDELETE") {
|
||||||
this.length = 0;
|
this.setState({ selectedRowKeys: record });
|
||||||
if (result.children) {
|
|
||||||
result.children.map(child => {
|
|
||||||
child.width = 150;
|
|
||||||
child.title = child.text;
|
|
||||||
child.dataIndex = child.column;
|
|
||||||
this.length++;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.length++;
|
|
||||||
result.width = 150;
|
|
||||||
}
|
}
|
||||||
return result;
|
} else {
|
||||||
});
|
const payload = {
|
||||||
columns.push({
|
type: "PR",
|
||||||
title: "操作",
|
listType: "",
|
||||||
key: "cz",
|
hasOperate: false,
|
||||||
render: (text, record) => {
|
url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
|
||||||
return <a onClick={() => {
|
queryParams: {
|
||||||
this.handleEdit(record);
|
salaryAcctRecordId,
|
||||||
}}>编辑</a>;
|
employeeName: this.state.searchValue
|
||||||
|
}
|
||||||
|
};
|
||||||
|
childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSearch = (employeeName) => {
|
||||||
|
const childFrameObj = document.getElementById("atdTable");
|
||||||
|
const salaryAcctRecordId = getQueryString("id");
|
||||||
|
const payload = {
|
||||||
|
type: "PR",
|
||||||
|
listType: "",
|
||||||
|
url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
|
||||||
|
queryParams: {
|
||||||
|
salaryAcctRecordId,
|
||||||
|
employeeName
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
return columns;
|
childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
|
||||||
}
|
};
|
||||||
|
|
||||||
onDetail() {
|
|
||||||
this.setState({ slideVisiable: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSearch(employeeName) {
|
|
||||||
const { calculateStore: { acctResultList } } = this.props;
|
|
||||||
acctResultList({ salaryAcctRecordId: this.id, employeeName, ...this.pageInfo, current: 1 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
handleDataPageChange(current) {
|
|
||||||
const { calculateStore: { acctResultList } } = this.props;
|
|
||||||
acctResultList({ salaryAcctRecordId: this.id, employeeName: this.state.searchValue, ...this.pageInfo, current });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleShowSizeChange(pageInfo) {
|
|
||||||
const { calculateStore: { acctResultList } } = this.props;
|
|
||||||
acctResultList({
|
|
||||||
salaryAcctRecordId: this.id,
|
|
||||||
employeeName: this.state.searchValue, ...this.pageInfo, ...pageInfo
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMenuClick() {
|
handleMenuClick() {
|
||||||
const { calculateStore: { exportAll } } = this.props;
|
const { calculateStore: { exportAll } } = this.props;
|
||||||
const { selectedRowKeys } = this.state;
|
const { selectedRowKeys } = this.state;
|
||||||
if (selectedRowKeys.length == 0) {
|
if (selectedRowKeys.length === 0) {
|
||||||
message.warning("未选择条目");
|
message.warning("未选择条目");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
exportAll(this.id, selectedRowKeys.join(","));
|
exportAll(this.id, selectedRowKeys.join(","));
|
||||||
}
|
}
|
||||||
|
|
||||||
handleExportAll() {
|
handleExportAll = () => {
|
||||||
const { calculateStore: { exportAll } } = this.props;
|
const { calculateStore: { exportAll } } = this.props;
|
||||||
exportAll(this.id);
|
exportAll(this.id);
|
||||||
}
|
|
||||||
|
|
||||||
onSelectChange = selectedRowKeys => {
|
|
||||||
this.setState({ selectedRowKeys });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const { calculateStore } = this.props;
|
const { calculateStore } = this.props;
|
||||||
const {
|
const { baseSalarySobCycle } = calculateStore;
|
||||||
baseSalarySobCycle,
|
const { slideVisiable } = this.state;
|
||||||
acctResultListDateSource,
|
|
||||||
acctResultListPageInfo
|
|
||||||
} = calculateStore;
|
|
||||||
const { selectedRowKeys, slideVisiable } = this.state;
|
|
||||||
|
|
||||||
const rowSelection = {
|
|
||||||
selectedRowKeys,
|
|
||||||
onChange: this.onSelectChange
|
|
||||||
};
|
|
||||||
|
|
||||||
const menu = (
|
const menu = (
|
||||||
<Menu onClick={(e) => this.handleMenuClick(e)}>
|
<Menu onClick={(e) => this.handleMenuClick(e)}>
|
||||||
|
|
@ -161,9 +115,6 @@ export default class PlaceOnFileDetail extends React.Component {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.getColumns().length === 1) { // 无权限处理
|
|
||||||
return renderLoading();
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="placeOnFileDetail">
|
<div className="placeOnFileDetail">
|
||||||
|
|
@ -188,42 +139,32 @@ export default class PlaceOnFileDetail extends React.Component {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="tableWrapper">
|
<div className="tableWrapper">
|
||||||
<CustomPaginationTable
|
<iframe
|
||||||
columns={this.getColumns()}
|
style={{ border: 0, width: "100%", height: "100%" }}
|
||||||
scroll={{ x: this.length * 150 }}
|
// src="http://localhost:7607/#/atdTable"
|
||||||
dataSource={acctResultListDateSource}
|
src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/atdTable"
|
||||||
rowSelection={rowSelection}
|
id="atdTable"
|
||||||
total={acctResultListPageInfo.total}
|
|
||||||
current={acctResultListPageInfo.pageNum}
|
|
||||||
pageSize={this.pageInfo.pageSize}
|
|
||||||
onPageChange={(value) => {
|
|
||||||
this.pageInfo.current = value;
|
|
||||||
this.handleDataPageChange(value);
|
|
||||||
}}
|
|
||||||
onShowSizeChange={(current, pageSize) => {
|
|
||||||
this.pageInfo = { current, pageSize };
|
|
||||||
this.handleShowSizeChange(this.pageInfo);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
slideVisiable && <WeaSlideModal visible={slideVisiable}
|
slideVisiable &&
|
||||||
top={0}
|
<WeaSlideModal
|
||||||
width={40}
|
visible={slideVisiable}
|
||||||
height={100}
|
top={0}
|
||||||
direction={"right"}
|
width={40}
|
||||||
measure={"%"}
|
height={100}
|
||||||
title={
|
direction={"right"}
|
||||||
<SlideModalTitle
|
measure={"%"}
|
||||||
subtitle={"合并计税详情"}
|
title={
|
||||||
editable={true}
|
<SlideModalTitle
|
||||||
/>
|
subtitle={"合并计税详情"}
|
||||||
}
|
editable={true}
|
||||||
content={(<FileMergeDetail/>)}
|
/>
|
||||||
onClose={() => this.setState({ slideVisiable: false })}
|
}
|
||||||
showMask={true}
|
content={(<FileMergeDetail/>)}
|
||||||
closeMaskOnClick={() => this.setState({ slideVisiable: false })}/>
|
onClose={() => this.setState({ slideVisiable: false })}
|
||||||
|
showMask={true}
|
||||||
|
closeMaskOnClick={() => this.setState({ slideVisiable: false })}/>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -266,7 +266,6 @@ export class calculateStore {
|
||||||
API.getSalarySobCycle({ salaryAcctRecordId: id }).then(res => {
|
API.getSalarySobCycle({ salaryAcctRecordId: id }).then(res => {
|
||||||
if (res.status) {
|
if (res.status) {
|
||||||
this.baseSalarySobCycle = res.data;
|
this.baseSalarySobCycle = res.data;
|
||||||
this.getColumnDesc({ salaryAcctRecordId: id });
|
|
||||||
} else {
|
} else {
|
||||||
message.error(res.errormsg || "获取失败");
|
message.error(res.errormsg || "获取失败");
|
||||||
}
|
}
|
||||||
|
|
@ -343,7 +342,6 @@ export class calculateStore {
|
||||||
this.acctResultListDateSource = list;
|
this.acctResultListDateSource = list;
|
||||||
this.acctResultListPageInfo = res.data.pageInfo;
|
this.acctResultListPageInfo = res.data.pageInfo;
|
||||||
this.acctResultListColumns = res.data.columns;
|
this.acctResultListColumns = res.data.columns;
|
||||||
this.getColumnDesc({ salaryAcctRecordId: params.salaryAcctRecordId });
|
|
||||||
resolve(res.data.columns);
|
resolve(res.data.columns);
|
||||||
} else {
|
} else {
|
||||||
message.error(res.errormsg || "");
|
message.error(res.errormsg || "");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue