高版本表格组件修改

This commit is contained in:
黎永顺 2023-01-16 11:39:49 +08:00
parent 8fd6579dfd
commit d6f7d3c19b
3 changed files with 76 additions and 135 deletions

View File

@ -178,7 +178,9 @@
} }
.tableWrapper { .tableWrapper {
margin-top: 10px; padding: 10px;
height: calc(100vh - 121px);
overflow: hidden;
} }
} }

View File

@ -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>
); );

View File

@ -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 || "");